【重构前端常识体系之HTML】带你重忆HTML那些记忆含糊的标签
引言
上节，说了HTML是标记语言，那么最重要的就是标记，也就是标签。
那标签那么多？要在这里全副写进去？
当然否。这里会解说罕用的标签。（罕用达到70%）
心愿在各种前端框架频出的年代，HTML仍然牢记于心。
回顾
在刚开始介绍的时候，讲了一个简略的demo，这里贴出来。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我是一个题目</title></head><body> <h1>我是一个页面内容的题目</h1> <div>我是一个美男子，你信吗？</div></body></html>HTML元素
什么是HTML元素？
HTML 元素指的是从开始标签（start tag）到完结标签（end tag）的所有代码。
具体什么意思呢
<div>我是一个美男子，你信吗？</div>像上述代码就是一个div元素，它蕴含了div开始标签，div元素内容，div完结标签，它们一起组合成为了一个div元素。
<body> <h1>我是一个页面内容的题目</h1> <div>我是一个美男子，你信吗？</div></body>同样的以上的代码形容了一个body元素。
空HTML元素
在之后的标签学习中，有那么一个标签<br>， 这个标签定义换行。像这种HTML 元素被称为空元素，它是在开始标签中敞开的。
但！为了当前版本迭代和布局，在 XHTML、XML 以及将来版本的 HTML 中，所有元素都必须被敞开。
将来的 HTML 版本不容许省略完结标签！
HTML标签
这里依照性能分类解说
根底标签
列表
1、<!DOCTYPE>
定义文档类型。
2、<html>
定义 HTML 文档。
3、<head>
定义对于文档的信息。
4、<title>
定义文档的题目。
5、<body>
定义文档的主体。
6、<br>
定义换行。
7、<h1> - <h6>
定义 HTML 题目。
8、<p>
定义段落。
9、<!-- -->
定义正文。
示例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我是一个题目</title></head><body> <h1>我是一个页面内容的题目h1</h1> <p>我是一个一个段落<br>我是一个一个段落<br>我是一个一个段落<br>我是一个一个段落<br>我是一个一个段落</p> <!-- <p>我是一段暗藏的段落</p> --></body></html>成果
看起来，学会了这些根底标签，就能够在网上发一篇小作文啦。实现文字自在？
独自的文本未免太过于枯燥，来点润饰
润饰文本（格式化）
列表
1、<abbr>
定义文档类型。最后是在 HTML 4.0 中引入的，示意它所蕴含的文本是一个更长的单词或短语的缩写模式。
<abbr title="ni shi zui hao de">nszhd</abbr>2、<i>
显示斜体文本成果。
3、<b>
出现粗体文本成果。
4、<em>
定义强调文本。
5、<strong>
把文本定义为语气更强的强调的内容
6、<u>
定义下划线文本。
示例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我是一个题目</title></head><body> <p><i>我是一个i段落</i></p> <p><u>我是一个u段落</u></p> <p><em>我是一个em段落</em></p> <p><strong>我是一个strong段落</strong></p> <p><b>我是一个b段落</b></p></body></html>成果
表单
列表
1、<form>
定义供用户输出的 HTML 表单。
2、<input>
定义输出控件。
3、<textarea>
定义多行的文本输出控件。
4、<button>
定义按钮。
5、<select>
定义抉择列表（下拉列表）。
6、<option>
定义抉择列表中的选项。
示例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我是一个题目</title></head><body> <form action="form_action.asp" method="get"> <p>name: <input type="text" name="name" /></p> <p>password: <input type="password" name="password" /></p> <p><textarea>请填写简介</textarea></p> <p>select： <select> <option value="wo">我</option> <option value="zui">最</option> <option value="shuai">帅</option> </select> </p> <input type="submit" value="Submit" /> </form></body></html>成果
图像、音频与视频
列表
1、<img>
定义图像。
2、<canvas>
定义图形。
3、<svg>
定义 SVG 图形的容器。
4、<audio>
定义声音内容。
5、<video>
定义视频。
6、<source>
定义媒介源。
示例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我是一个题目</title></head><body> <p> img: <img src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/baidu.9627e61f.png" /> </p> <p> canvas: <canvas id="myCanvas"></canvas> </p> <p> svg: <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </p> <p>audio: <audio src="http://96.ierge.cn/15/235/471737.mp3" controls="controls"></audio> </p> <p> video: <video src="https://vd3.bdstatic.com/mda-kiq250jsxvmh23gu/hd/cae_h264_nowatermark/mda-kiq250jsxvmh23gu.mp4"></video> </p></body><script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = '#FF0000'; ctx.fillRect(0, 0, 80, 100);</script></html>成果
链接
列表
1、<a>
定义锚。
<a href="https://www.baidu.com">我是百度</a>2、<link>
定义文档与内部资源的关系。
<link rel="stylesheet" type="text/css" href="demo.css" />列表类型
列表
1、<ul>
定义无序列表。
2、<ol>
定义有序列表。
3、<li>
定义列表的我的项目。
4、<dl>
定义定义列表。
5、<dd>
定义定义列表中我的项目的形容。
6、<dl>
定义定义列表中的我的项目。
示例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我是一个题目</title></head><body> <ul> <li>我是第一</li> <li>我是第二</li> <li>我是第三</li> </ul> <ol> <li>我是第一</li> <li>我是第二</li> <li>我是第三</li> </ol> <dl> <dt>我</dt> <dd>很帅</dd> <dt>你</dt> <dd>帅吗</dd> </dl></body></html>成果
表格
列表
1、<table>
定义表格
2、<caption>
定义表格题目。
3、<th>
定义表格中的表头单元格。
4、<tr>
定义表格中的行。
5、<td>
定义表格中的单元。
6、<thead>
定义表格中的表头内容。
7、<tbody>
定义表格中的主体内容。
8、<tfoot>
定义表格中的表注内容（脚注）。
示例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我是一个题目</title></head><body> <table border="1"> <thead> <tr> <th>姓名</th> </th> <th>分数</th> </tr> </thead> <tfoot> <tr> <td>小明</td> <td>100</td> </tr> </tfoot> <tbody> <tr> <td>小红</td> <td>70</td> </tr> <tr> <td>小东</td> <td>80</td> </tr> </tbody> </table></body></html>成果
其余
列表
1、<script>
定义客户端脚本。
<script type="text/javascript">document.write("Hello World!")</script>2、<object>
定义嵌入的对象。
3、<embed>
为内部应用程序（非 HTML）定义容器。
<embed src="test.png" />4、<head>
定义对于文档的信息。
5、<meta>
定义对于 HTML 文档的元信息。
6、<base>
定义页面中所有链接的默认地址或默认指标。
总结
HTML的标签很多，置信大多数的xdm都理解。但并非都能记得。
通知你们一件事，我在做HTML的面试题集，准确率居然只有60%多。这也是我写本篇文章的目标。查漏补缺。
重构前端常识体系，你要一起吗？
博客阐明与致谢
文章所波及的局部材料来自互联网整顿，其中蕴含本人集体的总结和认识，分享的目标在于共建社区和坚固本人。
援用的材料如有侵权，请分割自己删除！
感激万能的网络，W3C，菜鸟教程等！
感激勤奋的本人，集体博客，GitHub学习，GitHub
公众号【归子莫】，小程序【子莫说】
如果你感觉对你有帮忙的话，无妨给我点赞激励一下，好文记得珍藏哟！关注我一起成长！
所属专栏：重构前端常识体系（HTML）
幸好我在，感激你来！