这是我参与「第四届青训营 」笔记创作活动的的第1天，今天我们介绍的是HTML的语义化标签和使用方法
一、HTML简介
HTML为超文本语言，它是万维网描述网页内容与外观的标准，它由一系列标签组成，标签中包含有属性和值。标签描述了每个网页上的组件，例如文本段落，表格，图像等等。
二、HTML标签
2.1 < html > < head > < body >标签
（1）html标签： 用于界定一个完整的HTML文档
<html>
//包含<head>,<body>,<frameset>等标签
</html>
（2）head标签：
用于加载一些重要的内容，如一些插件，组件，框架等内容的云端地址以及网站的标题，==内容不会被页面显示==， 只有<body>的内容才会被显示到界面上。
① title标签：
用于说明页面用途，在HTML文档中，标题信息设置在页面的头部，即<head>与</head>之间。
<html>
<head>
<title>title标签</title>
</head>
<body>
</body>
</html>
② meta元信息标签：
==<meta>标签提供的信息是用户不可见的==，一般用来定义页面信息的名称、关键字、作者等等，< meta >标签的属性有：name和http-equiv两种，name属性主要用于描述网页，供搜索引擎使用。
（3）body标签：用于界定文档主体。 < body >标签的常见属性如下：
| 属性 | 说明 |
|---|---|
| text | 设置页面文字颜色属性 |
| bgcolor | 设置页面背景颜色属性 |
| link | 设置页面默认超链接颜色属性 |
| alink | 设置鼠标单击时超链接颜色 |
| vlink | 设置访问过的超链接颜色 |
| background | 设置页面背景图片 |
| bgproperties | 设置背景图片固定 |
| topmargin | 设置页面上边距 |
| leftmargin | 设置页面左边距 |
| bottommargin | 设置页面下边距 |
| rightmargin | 设置页面右边距 |
2.2 文字与段落
（1）hn标签：<hn>为标题标签，n为标题的等级，HTML共提供6个等级的标题，字体大小依次减小。
<h1>第一级标题</h1>
<h2>第二级标题</h2>
<h3>第三级标题</h3>
<h4>第四级标题</h4>
<h5>第五级标题</h5>
<h6>第六级标题</h6>
（2）br标签：
<br>为换行标签
（3）font标签：
<font>为字体标签，用face属性来实现对字体的定义；
设置face属性的方法如<font face="宋体" size="5" color="#FF0000">
常见的< font >相关标签如下：
| 属性 | 说明 |
|---|---|
| < b >...< /b > | 粗体 |
| < i >...< /i > | 斜体 |
| < u >...< /u > | 加下划线 |
| < em >..< /em > | 强调，斜体 |
| < strong >...< /strong > | 强调，粗体 |
| < sup >..< /sup > | 上标 |
| < sub >...< /sub > | 下标 |
| < strike >...< /strike > | 删除线 |
（4）p标签：
<p>标签为段落标签，用于使排列整齐，清晰，明了。
常见的< p >相关标签属性及说明如下：
| 属性 | 说明 |
|---|---|
| align | 段落对齐方式 |
| class | 样式调用 |
| style | 行内样式信息 |
| id | 文档的识别标识 |
| title | 标题 |
| dir | 文字方向 |
（5）hr标签：
<hr>标签为水平线标签，只能单独使用
常见的< hr >相关标签属性及说明如下：
| 属性 | 说明 |
|---|---|
| size | 设置粗细 |
| width | 设置宽度 |
| align | 设置对齐方式 |
| color | 设置颜色 |
| noshade | 设置3D阴影 |
2.3 < img >标签
<img>标签为单标签，用于描述图片
常见的< img >相关标签属性及说明如下：
| 属性 | 说明 |
|---|---|
| src | 图像的URL路径 |
| alt | 提示文字 |
| align | 对齐方式 |
| width | 设置宽度 |
| height | 设置高度 |
| border | 边框 |
| vspace | 垂直间距，定义图像顶端和底部的空白 |
| hspace | 水平间距，定义图像左侧和右侧的空白 |
2.4 页面布局
（1）列表
① ul 无序列表标签：
无序列表是指没有进行编号的列表，每一个列表项前使用<li>标签。
<li>标签的属性type如下
| 属性 | 说明 |
|---|---|
| type="disc" | 实心圆 |
| type="circle" | 空心圆 |
| type="square" | 小方块 |
| 基本语法： |
<ul>
<li type="circle">第一项</li>
<li type="square">第二项<li>
</ul>
② ol 有序列表标签：
有序列表是有进行编号的列表，每一个列表项前使用<li>标签。
有序列表type的属性如下
| 属性 | 说明 |
|---|---|
| type=1 | 列表项（1 2 3..） |
| type=A | 列表项（A B C...） |
| type=a | 列表项（a b c...） |
| 基本语法： |
<ol type=编号类型 start=value>
<li>第一项</li>
<li>第二项</li>
（2）定义列表标签< dl > < dt > < dd > "定义列表标签"用于对术语的定义，定义列表由< dl >开始，术语由< dt >开始，术语的解释说明由< dd >开始。 基本语法：
<dl>
<dt>第一项</dt><dd>注释1</dd>
<dt>第二项</dt><dd>注释2</dd>
</dl>
2.5 表格
(1) 定义表格的基本语法： 一般通过三个标签来构建表格， 分别是行标签< tr >,表格标签< table >和单元格标签< td >
| 属性 | 说明 |
|---|---|
| < tr >...< /tr > | 定义行，一个tr标签里面可以包含多个td标签 |
| < td>...< /td > | 定义单元格，td标签必须放在tr标签内 |
| < table >...< /table > | 用于定义一个表格的开始和约束 |
(2) < table >标签的常用属性：
| 属性 | 说明 |
|---|---|
| align | 表格在页面中的水平对齐方式 |
| width | 设置表格宽度 |
| height | 设置表格高度 |
| background | 设置表格背景 |
| bgcolor | 设置表格背景颜色 |
| border | 设置表格边框的宽度 |
| bordercolor | 设置表格边框颜色 |
| cellspacing | 设置单元格间距 |
| cellspadding | 设置单元格内容与单元格边界之间的距离 |
(3) ：表格标题标签< caption > 表格标题标签< caption >用于设置表格的标题，属性及位置，
(4) ：表格表头标签< th > 表格表头标签< th >用于设置表格的第一行，与< td >不同之处是标签中的内容居中加粗显示。
(5) ：表格边框显示状态 表格边框（上下左右）显示状况用frame属性的值定义
| frame的值 | 说明 |
|---|---|
| box | 显示整个表格边框 |
| void | 不显示表格边框 |
| hsides | 只显示表格上下边框 |
| vsides | 只显示表格左右边框 |
| alove | 只显示表格上边框 |
| below | 只显示表格下边框 |
| lhs | 只显示表格左边框 |
| rhs | 只显示表格右边框 |
(6) ：表格分割线显示状态 表格内的分割线显示状况用rules属性的值定义
| rules的值 | 说明 |
|---|---|
| all | 显示全部分割线 |
| groups | 显示组与组的分割线 |
| rows | 显示行与行的分割线 |
| cols | 显示列与列的分割线 |
| none | 不显示所有分割线 |
(7) ：表格行的设置 < tr >标签的属性如下
| tr标签属性 | 说明 |
|---|---|
| align | 行内容的对齐方式 |
| valign | 行内容的垂直对齐方式 |
| bgcolor | 行的背景颜色 |
| bordercolor | 行的边框颜色 |
(8) ：单元格的设置
使用< th > < td >标签可以完成单元格的插入，==这两个标签必须嵌套在< tr >标签内==，< th > < td >标签的常见属性不过多解释，下面介绍两个不常用的单元格设置方法，
具体使用方法如：<th colspan=2>,表示这一格跨越两个行的高度。
| < th >< td >标签属性 | 说明 |
|---|---|
| colspan | 单元格向右横跨的列数 |
| rowspan | 单元格向下横跨的行数 |
2.6 超链接的使用
(1) 概念： 超链接就是从一个网页跳转到另外一个网站的途径。
(2) 基本语法
<a href="链接地址" target="窗口名称" title="链接提示文字">超链接名称</a>
target属性值如下
| target值 | 说明 |
|---|---|
| _parent | 在当前框架的父层打开链接 |
| _blank | 使用一个全新的空白窗口打开链接 |
| _self | 默认方式，在当前窗口打开链接 |
| _top | 在顶层框架中打开链接 |
三、区块
| 标签 | 描述 |
|---|---|
| < div > | 定义了文档的区域，块级元素 |
| < span > | 用来组合文档中的行内元素，内联元素 |
四、表单
表单系列标签:
① form标签：
< form action=" " method=" " name=" ">< /from >
form标签对表示一个表单的开始和结束，属性说明：
action属性：表示接受本表单数据的资源名称
method属性：表示提交数据的方式，可取“post”或“get”，默认值是“get”，取“get”方式时，提交的数据将附在网址地址（即URL）后提交给接受页面。
name属性：表示该表单的名称，可省略
②input标签： 格式：
< input type=" " id=" " name=" " value=" ">
input标签是最常用的输入标签，属性说明：
name属性：表示该输入元素的名字
id属性：表示该元素在页面中唯一标识名，CSS可以通过ID来查找页面上的某个元素。
value属性：表示该输入元素的初始值，默认值为空字符串
表单是一个包含表单元素的区域。input标签的type属性可取不同的值，在页面上表现为不同的形态，如下表
| type属性的取值 | 描述 |
|---|---|
| text | 单行文本框 |
| password | 密码输入框 |
| radio | 单选按钮 |
| checkBox | 复选框 |
| file | 文件选择框 |
| hidden | 隐藏域 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 普通按钮 |
| image | 图片按钮 |
总结
总的来说，HTML语义化简单来说就是用正确的标签来做正确的事。只有HTML标签的正确使用，才能让代码编写更加规范，浏览器渲染更高效。最后，让我们一起持续学习，共同进步吧~
