1 编译器
编译器选择Hbuilder X。和教程使用的编辑器选择一致，软件自带多种主题和快捷键方式（快捷键包含IDEA的方案）。
去Hbuilder X官网，下载。
HBuilderX-高效极客技巧 (dcloud.io)
https://www.dcloud.io/hbuilderx.html
?
?
点击页面中间的DOWNLOAD后，选择相应系统的标准版即可，软件为免安装版，只需解压到相应目录，打开文件夹中的应用程序即可使用。
2 什么是HTML
HTML 指的是超文本标记语言 (Hyper?Text?Markup?Language)。是制作超级文本文档的简单标记语言，可以从一个平台移植到另一个平台，通常用于制作网页。为什么称之为超文本，因为和普通的txt文件不同，html文件中可包含链接、图片等特殊的元素。HTML中的一些标签代码规则可以将内容在浏览器中呈现出所需的风格。
HTML可以使用记事本创建，并以.html或.htm为扩展名保存。推荐使用IDE进行编程，像Hbuilder X、WebStorm这种集成好的软件使用更加方便，加大编程效率。也可使用像VS Code这种插件丰富的编辑器，只不过需要手动配置。
3 HTML的基本框架
3.1 标签
标签是HTML的最基本组成，各个标签的嵌套构成了一个完整的HTML文档。
标签分为单标签和双标签，单标签只需要一对尖括号括住的指令标记，比如br和hr；双标签需要两对，比如title、body。
标签中可以加入各种属性，可以用来设置宽度、高度、颜色诸如此类的性质。
3.2 组成部分
一个HTML网页文件分为三个部分：
- 网页区：写在html标签之中，<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
- 标记头区：写在head标签之中，构成HTML文档的开头部分，之间通常使用title（title为head标签中唯一要求包含的标签）、script、meta、link等标签，用于完成基本的设置。
- 内容区：写在body标签之中，一般大部分在浏览器上显示的内容都放在内容区中，内容区是HTML文档的主体部分。
3.3 DOCTYPE?
一般在HTML的文档开头都有<!DOCTYPE>声明，要注意，<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
4 HTML的一些常用标签?
4.1?<h1> 到 <h6> 标题标签
<h1> - <h6> 标签可定义标题。此标签为块级元素，会自动换行。<h1> 定义最大的标题。<h6> 定义最小的标题。如下图。
一般不要大量使用h1级的标题，否则会被搜索引擎屏蔽掉网页，原因可能是搜索引擎为了避免搜索到无用的但是恶意更改内容优先权重的网页。
类似于<h999>这样的标签不会报错，但不具有标题效果。
4.2 段落标签
<p> 标签可以定义段落。此标签为块级元素，会自动换行。
使用此标签，可以自定义分割文本内容为各个段落。可以配合标题标签使用。
<h1>标题1</h1>
<p>第1段</p>
<h2>标题2</h2>
<p>第2段</p>
<h3>标题3</h3>
<p>第3段</p>
<h4>标题4</h4>
<p>第4段</p>
<h5>标题5</h5>
<p>第5段</p>
<h6>标题6</h6>
<p>第6段</p>实现效果如下图。
4.3 换行标签
<br>或者<br/>可以为文本进行换行，为单标签，功能类似于回车，在HTML文档中之间用回车对文本进行换行是不能实现的，要使用换行标签进行实现。
4.4 水平线标签
<hr>标签可以为网页添加一个水平线，在视觉上分隔网页。
常用属性为：
- color：设置颜色
- width：设置长度
- size：设置线条粗细
这些属性有默认值，可以不设置。?
效果如下图。
4.5 列表标签
HTML的列表分为有序和无序的，可以通过属性type调整列表样式。
4.5.1?有序列表
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。有序列表是一列项目的列表，列表项目使用数字进行标记，默认为阿拉伯数字。
4.5.2 无序列表
无序列表始于 <ul> 标签。每个列表项始于 <li>标签。无序列表也是一个项目的列表，列表项目使用各个图案进行标记，默认为一个实心圆。
实现效果如下。
4.6 div和span
4.6.1 <div>标签
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。它是一个块级元素，通常和css配合使用，用于布局。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
常用属性为align，值为left、center、right等，用于设置对应块的对齐方式。
默认占全部宽度，有多少内容，高度占多少，可以设置宽和高。
4.6.2 <span>标签
它是一个行类元素，不能自动换行，不能设置宽高。?它用来组合文档中的行内元素。span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
4.7 格式化标签
这类标签常用于对文本属性的设置。
4.7.1 <font>标签
规定文本的字体、字体尺寸、字体颜色。
例：
<font color="blue" size="6" face="楷体">hello,world!<hr>你好，世界！</font>效果如下。
?
4.7.2 <pre>标签
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
要注意，此标签中的内容会将代码的缩进作为空格字符一并显示。
例：
<font color="blue" size="6" face="楷体">
<pre>
这是文本跟随代码缩进后的效果
这是文本没有跟随代码缩进后的效果：
</pre>
</font>效果如下。
?
ps.在HTML中对于没有对标签包含的文本，可以使用 进行空格操作。
4.7.3 文本标签
- b：粗文本
- i：斜体文本
- u：下划线文本
- del：中划线文本
- sub：下标文本
- sup：上标文本
例：
<p><b>相信</b><i>明天</i><u>会更好！</u><del>今天是</del><sup>2022-2-3</sup></p>?实现效果：
4.8 a标签?（超链接）
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。当a标签不定义此属性，则标签内的内容不具备超链接的性质，只是普通文本。
此标签还有一个常用属性target，用于规定在何处打开链接文档。其常用值如下。
- _self：在当前窗口
- _blank：在新的标签页
- _parent：在父级窗口
作为锚点的使用：
当使href="#"时，可以跳转回页面顶部。
可以对HTML文档中的中的标题标签设置id属性，之后使用a标签可以跳转到对于标题。比如设定id为"123",则在下面的a标签中，使href="#123"即可。
或者对一些文本外面加上标签a，设置name属性，之后同样可以使用a标签跳转到对应文本。原理同上。
4.9 图片标签?
img 元素向网页中嵌入一幅图像。此标签为单标签。
从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性：
| alt | 规定图像的替代文本，用于图像加载失败后的显示。 |
| src | 规定显示图像的 URL。 |
常用属性：
| align | 规定如何根据周围的文本来排列图像。 |
| border | 规定图像周围的边框。 |
| height | 规定图像的高度。 |
| width | 规定图像的宽度。 |
| title | 当鼠标在图片上时显示的文字。 |
4.10 表格标签
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
table相当于一个表的外框，tr为行、td为各个单元格、th为有标题作用的单元格，th中的内容同时有加粗的效果。
<table>常用属性：
| align | 表格的对齐方式 |
| border | 规定表格边框的宽度 |
| width | 规定表格的宽度 |
注意：在table中设置边框宽度时，表格总体和单元格都会出现边框，会导致边框有两个，如下图。?
?设置style属性为"border-collapse: collapse;"，使边框合并即可解决。如下图。
?<tr>同样可以设置属性，比如使用align设置行的内容的对齐方式，bgcolor设置行的背景颜色。
例：
<table width="400px" align="center" border="1" style="border-collapse: collapse;">
<tr align="center" bgcolor="burlywood">
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr align="center" bgcolor="cornsilk">
<td>01</td>
<td>HJY</td>
<td>19</td>
</tr>
<tr align="center" bgcolor="cornsilk">
<td>02</td>
<td>小王</td>
<td>19</td>
</tr>
<tr align="center" bgcolor="cornsilk">
<td>03</td>
<td>小李</td>
<td>20</td>
</tr>
</table>实现效果如下：
