1.1 第一个HTML程序
第一步：创建一个文本文档，命名为xxx.html，名称任意，但是后缀名必须是HTML
第二步：使用工具打开这个文档，在里面编写如下代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个HTML页面</title> </head> <body> hello HTML,I am shuaigeliu </body> </html>
运行代码（使用浏览器打开页面），结果如下图
#一定要保存后再运行才能看到结果 保存的快捷键ctrl+s
在上面的例子中用到了 基本的5个标签，除了doctype HTML头信息、meta、title标签外，其余的三个标签构成了 HTML文档的结构，HTML 文档结构包括三个部分，如图
HTML标签
html标签表示网页文件的开始,应该把它放在文档的最外层（doctype不算），其他所有的标签都应该放在<html>和</html>结束标签之间。
HEAD 标签
head表示头部标签，head>标签中通常放title标签、meta标签、style标签等。所以head标签主要用来放一下用来定义页面属性的标签。
BODY标签
body表示主体标签，网页上所有要显示的内容都放在这个标签内。
代码演示：HTML文档结构
<!DOCTYPE html> <html> ① <head> ② <title>HTML 的标签</title> ③ </head> ④ <body> ⑤ <!—在这里写注释--> ⑥ 我的第一个网页 </body> ⑦ </html> ⑧
META标签
网页的<head>标签中除了包含title标签外还包括了meta标签，meta 标签提供了关于网页的信息，包括作者、关键字、网页编码、自动刷新等。
<!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8"/> ① <title>HTML 简介</title> </head> <body> 使用 meta 标签确定编码格式。 </body> </html>
代码解析：
① 这是<meta>标签，标签中的 charset 表示当前网页的编码格式，值 GB2312 表示简体中文编码，也就是说网页中的文字显示为简体中文，这时就要求操作系统中安装 GB2312 字符集，否则就会显示乱码，不过中文操作系统中已经安装了。如果在英文操作系统中浏览了 GB2312 编码的网页就会出现乱码，因为英文操作系统中没有GB2312 字符集。我们在浏览网页时偶尔会遇到网页显示乱码，多数是因为 META标签中的编码设置不正确。现在一般建议都设置为UTF-8这种Unicode编码。常见的编码见下表
| 网页的常用编码有 GB2312、UTF-8、BIG5、GBK： |
|---|
| 1． GB2312 是简体中文字符集，主要用于中国大陆和新加坡。 |
| 2. UTF -8 可以理解为通用字符集。 |
| 3． BIG5 是繁体中文字符集，主要在台湾和香港地区使用。 |
| 4． GBK 是 GB2312 的后续标准，添加了更多的汉字和特殊符号。 |
doctype：网页文档声明，用来声明HTML遵循的标准，建议都遵循HTML5这个标准。
网页注释：HTML的标签使用 <!-- 这个里面的就是注释 -->。
1.2常用标签
HTML 中有很多的标签，包括文本标签，段落标签等，下面我们介绍一些常用标签。见下表
| 标签 | 说明 |
|---|---|
| b/strong | 字体变粗体 |
| i/em | 文字变斜体 |
| u | 文字加下划线 |
| del | 删除线 |
| br | 换行 |
| p | 段落 |
| pre | 预格式化段落 |
| span | 标准行内标签，一般用来修饰文本 |
| div | 标准块标签，一般用来布局页面 |
| sub | 下标 |
| sup | 上标 |
| hr | 水平分割线 |
| hn | 标题标签（共有6级，h1、h2... h6） |
1.2.1 strong、b等标签
strong和b标签都是用来加错字体标签，这两个标签显示效果一样，但是其实质使用场景不同的。b标签就是加粗文本，而strong有强调内容的意思，但是一般我们不用关心这个问题，对于我们开发者而言，效果一致，所以一般都是使用b标签。
em、i标签都是加斜文本的标签，现在我们一般使用i标签加斜问题，em标签有存在强调的意思，现在随着css3的使用，而慢慢的用来标注css的字体图标。
del标签用来加删除线，u标签用来加下划线。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>粗体 | 斜体 | 下划线</title> </head> <body> <b>粗体</b> <strong>也是粗体</strong> <i>斜体</i> <em>也是斜体</em> <u>下划线</u> <del>删除线</del> ① </body> </html>
代码解析：
① b粗体的开始，</b>粗体的结束。
`i` 斜体的开始，`</i>`斜体的结束。复制
u下划线的开始，</u>下划线的结束。
所示的效果如下图复制
1.2.2 br、hr 标签
br标签用来换行，hr标签用来做水平分割线
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>换行 | 分割线</title> </head> <body> <!-- HTML中内容不会自动换行的，需要使用br标签完成 --> 第一行<br> ① 第二行 <hr width="800" size="1" noshade > ② 这个是一个分割线 </body> </html>
代码解析：
① br标签表示换行，当浏览器遇到 br 标签时就另起一行来显示 br 后面的文字。
② 水平线标签，可以设置长度和宽度，默认长度100%
运行结果如图
注意：网页源代码中的回车在浏览器中并不表示换行。
1.2.3 p标签
p标签表示段落。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>段落</title> </head> <body> <p align="center"> ① <font color="#FF0000">第一个段落</font> ② </p> <p align="left">第二个段落</p> </body> </html>
代码解析：
① p标签表示段落，两个相邻的p标签之间会空一行。如图 3-5 所示的效果align是段落的对齐属性，有三个值“left”，“center”，“right”,分别表示居左对齐，居中对齐，居右对齐。p与br有些相似，都表现出了换行，br换行时行与行之间不空行。
② font标签用来修饰字体，color 属性表示字体的颜色，"#FF0000"是颜色值。
注意：网页中的颜色用 # 开头，连接 6 位十六进制数表示，如 #336699
1.2.4 sub、sup、pre、span标签
SUB是下标标签， SUP是上标标签，它们属于文本标签。pre用来原样输出内容。span标签是一个标准行内标签，一般用来装饰包裹的文本内容，常见于装饰文本。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>常见标签</title> </head> <body> <p> 二的三次方：2<sup>3</sup> <br> 数组a下标为2：a[<sub>2</sub>] <br> <hr> <span style="color: purple;font-size: 20px">这个是一个标准的行内标签</span> <br> <pre> 静夜思 -- 李白 床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。 </pre> </p> </body> </html>
代码运行结果如下图
行内标签：指的是如a、span这些标签，这种标签的特点是标签只占据内容部分，不会占据其他部分，这样的话，标签的内容如果可以在一行中展示，则不会换行，只到沾满一行后换行输出
1.2.5 HN、div标签
hn标签指的是h1、 h2、 h3、 h4、 h5、 h6这六个标题标签。主要用来装饰标题
数字越大标题越小
div标签是一个标准的块标签，主要用来布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>常见标签</title>
</head>
<body>
<h1>1 号标题</h1>
<h2>2 号标题</h2>
<h3>3 号标题</h3>
<h4>4 号标题</h4>
<h5>5 号标题</h5>
<h6>6 号标题</h6>
<hr>
<div>这个是一个div</div>
<div>这个是第二个div标签</div>
</body>
</html>
运行结果如图
复制
块标签：指的是div、p、hr、hn这些标签，这种标签和行内标签不同，即便是内容不够一行，也会沾满一行，这样就其他必须换行输出。
1.2.6 HTML5 提供的新标签
HTML5是HTML从传统的web端开始兼容移动互联网的重要标志，h5为HTML提供了大量好用的标签，如布局使用的三个标签header、section、footer标签；用来播放视频和音频的多媒体标签video、audio标签等，参考表
| 标签名称 | 作用 |
|---|---|
| header | 定义页面的顶部（页眉）内容 |
| article | 主要是用来表示文章内容的 |
| section | 于对网站或者应用程序页面上的内容进行分块 |
| nav | 用作页面导航的链接组 |
| aside | 当前页面或文章的附属信息部分 |
| footer | 上层父级内容区块或是一个根区块的脚注 |
| hgroup | hgroup元素是将标题及其子标题进行分组的元素。hgroup 元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组 |
| address | address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮件、真实地址、电话号码等 |
| figure | 网页上的一块独立元，素在一个figure元素中只能放置一个figcaption元素，表示该figure元素的标题 |
| figcaption | figure元素块中的标题 |
| details | details元素主要用来列表一些关键的的元素，在它中，我们使用summary元素作为details元素的标题，如果我们在details元素中不使用summary元素，则默认出现“显示详细信息”。 |
| summary | 作为details元素的标题 |
| mark | 标注或者高亮一些我们需要的关键字词 |
| progress | 表示当前的完成进度情况 |
| meter | meter元素有六个属性，value表示值，min表示最小值，max表示最大值，low表示下限，high表示上限，optimum表示最佳值 |
| cite | 表示作品或文章中的标题 |
| small | HTML5中，small元素被重新定义了，small通常标签与正文无关的文字，内嵌在页面上，如标注版权信息，网站备案等 |
| canvas | 画布标签，用来在页面上画图案 |
1.2.7 特殊字符
除了标签外，HTML 中的特殊字符也有重要的作用。例如，要求在浏览器中显示br标签,如果将br标签直接写在源代码中，浏览器会将解释成换行，而不会显示。特殊字符以 & 开始，以 ; 结束。
常用的特殊字符见图
