[华为云WEB前端全栈成长计划]二、初识HTML
上一章是对互联网,WWW,网站的认识,这一张我们就正式学习HTML。
在正式学习HTML之前,我们先来认识认识Web开发。
可以简单的理解为我们要修建一个餐厅,前端就是餐厅的外观,餐厅的布局,以及配置餐厅的服务员和与厨师、老板沟通的交互方式等,需要由前端来做,也就是页面的展示,页面和用户的交互,页面的效果,
后端就是处理方式,当用户点菜,做菜等流程就要进行相应的工作,类似于点击登录按钮,然后后端就要处理登录的逻辑,完成一系列的操作,
一般前端开发的基础为HTML,CSS,JavaScript,然后有JQuery,让JavaScript变得简单,后续还会有Node.js、Vue.js、AngularJS框架。
后端语言比较多,一般常见的有Java,Python,PHP等语言,这些语言用来进行后端开发,同时不同语言也产生了不同的框架,比如Java的Spring家族,Python的Django等框架,
通俗的语言来讲,HTML就相当于我们自己餐厅的布局,CSS就相当于定义了餐厅中桌子凳子的大小模样,这么定义完,网页还是不够灵气,因此使用JavaScript让整个餐厅更生动,让大门旋转,让里面的灯光进行律动。
我们要进行HTML语言的学习,编写,必不可少的就是选择开发工具,目前大多数都在使用VScode,我们这里不多讲。
HTML之所以全部大写是因为它是Hyper Text Markup Language超文本标记语言的缩写,是一种标记语言
标记语言,也称置标语言,是一种将文本(Text)以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息(包括例如文本的结构和表示信息等)与原来的文本结合在一起,但是使用标记(markup)进行标识。[来自360百科]
我们先认为他就是用一个东西标记我们真正要用的数据,比如x=未知数,我们看见x就知道它代表未知数,当然标记的语法不是这种形式在HTML中,在HTML发展的过程中又出现了XHTML,它和HTML的区别如图:
这里我们说一下,我们可能会看到HTML和HTML5,HTML5是HTML的新版本,它对HTML进行了改进和优化,同时增加了一些新标签。具体如图:
下面我结合一个简单的例子说明HTML。
首先进行声明,一个HTML文件大部分都是.html为文件后缀名的文件。它有一些固定的格式:比如如下的代码,其中我们可以明显的看出来<html></html>就是标记,其中title标签中的title是自己键入的,当我们将文件保存为.html文件时,然后打开时(使用浏览器,也是默认的方式),然后title标签内的文字就会出现在浏览器标签页标题上。<body>标签内的元素都会显示在标签页。
以此图为例,百度一下,你就知道,就是被title标签标记的,而我们看到搜索框,之类的东西就是用body标签内的东西,这里我们觉得美观就是因为里面还有css,JavaScript等的修饰以及图片的作用结果。我们在chrome浏览器中按F12。Elements内就是页面的源代码,进行验证。
因为以下这些代码基本都是固定的,所以在使用编辑器的时候,我们新建html文件,他会帮我们自动生成,但是需要注意不同的编辑器生成的初始代码也不同,但是不影响我们写html。<!DOCTYPE html>标识这是一个html5语言的html文件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML</title> </head> <body> <p>html内容</p> </body> </html>
下面的这个例子比较详细:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>从零学习前端</title> </head> <body> <div style="width: 500px; height: 50px;border: solid red;">可以设置宽和高,独占一行</div> <div> 独占一行</div> <div> 独占一行</div> <p>段落1</p> <p>段落1</p> <p>段落1</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <span style="width: 400px;height: 50px;border: solid red;">不能独占一行</span> <span>不能独占一行</span> <span>不能独占一行</span> <span>水的化学元素符号为H<sub>2</sub>O</span> <span>古文常用的注释例如:青莲剑歌<sup>①</sup>李白</span> </body> </html>
我们发现除了和第一个例子出现的<p>标签外还出现了新的标签<div>、<span>、<h1>、<sub>、<sup>标签
其中分别意义为块,行,标题,下标,上标。p标签表示一个段落。
本章到此为止,下一章介绍常用的标签。
- 点赞
- 收藏
- 关注作者
评论(0)