HTML常用标签及举例使用
创建HTML文件包含的内容
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
</body>
</html><!DOCTYPE html>： 文档声明，声明为html文件，在文档第一行<html lang="en">：html根标签，en表示使用英文编写<head>：页面头标签，主要用于显示浏览器页面的头部信息<meta charset="UTF-8">：设置页面信息--编码集<title>：页面标题<body>：用来放浏览器页面内的内容
<body>中常见的标签
<p>： 段落标签，自动设置行间距<span>：对某些文本内容进行指定设置<h1>：标题标签，编号取值范围1,6，数字越小，字体越大；会自动换行、自动字体加粗
自动设置行间距<div>：区域块，可以添加css样式设置宽和高等等style="width:xxpx;height:xxpx;"<pre>：文本域，会按照书写格式显示内容<br>：换行标签<i>：斜体<b>：字体加粗<sub>：下角标<sup>：上角标
列表标签
有序列表
html
<!-- ul：无序列表标签 -->
<ul>
<li>列表中的内容1</li>
.......
<li>列表中的内容n</li>
</ul>无序列表
html
<!-- ol：有序列表标签 -->
<ol type="设置有序列表序号类型，默认是阿拉伯数字，支持英文大小写、罗马数字大小写、阿拉伯数字" start="设置有序列表序号开始的位置，默认从 1 开始，使用阿拉伯数字设置即可">
<li>列表中的内容1</li>
.......
<li>列表中的内容n</li>
</ol>自定义列表
html
<!-- dl：HTML通用自定义列表标签 -->
<dl>
<dt>列表名称</dt>
<dd>列表项1</dd>
........
<dd>列表项n</dd>
</dl>H5新特性：dialog
html
<!--
dialog：H5新特性自定义列表标签
open属性：设置自定义列表是否显示，写表示显示，默认不显示
open、required、checked、selected、readonly -- 结果值一定是布尔型
-->
<dialog open>
<dt>列表名称</dt>
<dd>列表项1</dd>
........
<dd>列表项n</dd>
</dialog>图片标签
html
<!-- img图片标签 -->
<img src="设置图片的路径" alt="设置当且仅当图片加载失败时显示的内容" title="设置鼠标悬停图片上显示的内容" width/height="xxpx设置图片的宽或高，实际开发中只需要设置一个，另一个会等比例缩放">超链接标签
html
<!-- a超链接标签：跳转到当前页指定位置 -->
<a href="跳转的路径（如果是外部资源，一定编写http/https协议）" target="跳转的方式（_self，当前页面跳转，默认方式，省略不写；_blank，在新的页面打开跳转）">
连接名
</a>表单标签
html
<!-- form表单标签 -->
<form action="设置数据提交的路径" method="设置数据提交方式：get（默认，可省略不写）、post（常用）">
<!--
文本框标签
type属性支持的数据类型
text -- 字符类型
password -- 加密显示
radio -- 单选框
checkbox -- 复选框
submit -- 提交按钮
reset -- 重置按钮
-->
<input type="设置文本框类型" name="设置文本框接收的变量名" value="存储文本框接收数据的值" pattern="使用正则表达式设置文本框存储值的格式" placeholder="在文本框中显示不可操作的提示词" required（设置当前文本框中不允许出现null值） checked（设置单选框或复选框默认被选中）>
<!-- select下拉列表 -->
<select>
<option value="选项的值" selected（设置当前选中默认被选中）>下拉列表选项1</option>
.......
<option value=''>下拉列表选项n</option>
</select>
</form>表格标签
html
<!-- table表格标签 -->
<table border="设置表格边框粗细" width="设置表格整体宽度" height="设置表格整体高度" align="设置表格整体水平对齐方式：left（左对齐，默认，可以省略不写）、居中对齐（center）、右对齐（right）">
<caption>表格名称</caption>
<!-- thead标签：设置表格头 -->
<thead>
<!-- tr标签：设置表行 -->
<tr>
<th>列名：自动加粗，单元格内居中对齐</th>
.....
<th>列名n</th>
</tr>
</thead>
<!-- tbody标签：设置表格体 -->
<tbody>
<tr>
<td valign="设置单元格内文本内容的垂直对齐方式：top（顶对齐）、middle（居中对齐，支持center，默认方式，可以省略不写）、bottom（底对齐）" align="设置表格整体水平对齐方式：left（左对齐，默认，可以省略不写）、居中对齐（center）、 右对齐（right）">
单元格
</td>
</tr>
......
<tr>
<td></td>
</tr>
</tbody>
<!-- tfoot标签：设置表格足 -->
<tfoot>
<tr>
<td rowspan="合并行数" colspan="合并列数（常用）">
单元格
</td>
</tr>
......
</tfoot>
</table>