文章目录
1. script标签
作用
<script> 标签用于在 HTML 文档中加入脚本（例如 JavaScript）。
ps:(从广义的角度来看，HTML5 是由 HTML、CSS 和 JavaScript 三贱客组成的;HTML 构成了网页的框架、骨骼，CSS 相当于给网页做美颜，而 JavaScript 让网页不再只是一个花瓶，它提供了与用户交互的一系列操作。)
- script 元素既可以直接定义内嵌脚本语句，也可以通过 src 属性引用外部脚本文件。
- script 元素可以出现在 HTML 文档中的各个部分，一个文档可以包含多个 script 元素。
注意
- 每定义或导入一段脚本，都需要使用一个 script 元素。
- 不能用同一个 script 元素既定义内嵌脚本，又引用外部脚本。
属性
实例
- 定义文档内嵌代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>略略略</title>
<script>
document.write("啦啦啦");
</script>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
- 载入外部代码库
script 元素既可以直接定义内嵌代码语句，也可以通过 src 属性引用来自外部代码文件。
这部分写的很随意，到时候学javascript的时候自然就明了了~~~
延迟执行代码
我们简单地看一下浏览器的加载过程：
正常情况下，HTML 文档的解析工作是单线操作的，当其遇到 JavaScript 代码时，HTML 的解析就会暂停，转而跑去获取代码，并执行代码，完了才回来继续解析 HTML。
只要在 script 中指定 defer 属性，那么相当于告诉浏览器要延迟执行代码，这样浏览器就会先暂时忽略这个代码，等到 HTML 全部解析完成再执行。
不过需要注意的一点是：defer 属性只能用于外部代码文件，它对文档内嵌代码根本不起作用。
异步执行脚
加载外部代码会浪费一些时间，有时候这些外部代码的加载时间根本不可控，比如存放在第三方服务器的数据跟踪代码或广告投放代码，如果 HTML 的解析为了等待代码的加载而暂停了下来，这样用户体验就不是很好了。
async 属性用于告诉 HTML 解析器在遇到浏览器该代码可以被异步执行该
对于不依赖于其他文件或本身没有任何依赖关系的代码文件，async 属性将会非常有用，因为我们并不在意它什么时候被执行。
同样的，async 属性只能用于外部代码文件，它对文档内嵌代码根本不起作用。
最后，使用 async 属性会导致多个代码的执行次序不可控（反正谁先加载完成，谁就先被执行），因此如果代码中使用了其他代码定义的函数或值，async 属性就不适用了。
2. 块级元素 & 内联元素HTML 块元素
块级元素
在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>,<p>,<ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>
HTML <div> 元素
HTML<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span>元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>略略略</title>
<style>
span {
font-weight:bold;
color:green;
}
</style>
</head>
<body>
<p><span>你好啊</span>我亲爱的朋友</p>
</body>
</html>
<br>
用来换行，不是成对的标签
3. 所见即所得
pre 元素
pre 元素用于定义预格式化的文本。
pre 元素会保留空格和换行符，而文本自身也会呈现为等宽字体。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>略略略</title>
<style>
span {
font-weight:bold;
color:green;
}
</style>
</head>
<body>
<pre>
啦啦
嘿嘿
略略略
啊啊啊啊阿
</pre>
</body>
</html>
字符实体
在 HTML 文档中，某些字符是预留的，具有特殊含义，比如我们在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误将它们作为标签来对待。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体。
不能使用包含这些字符的文本，因为浏览器可能会误以为是 HTML 标签。
HTML 和 XHTML 中央处理器必须识别以下表格所列举的五种特殊字符：
| 字符 | 实体编号 | 实体名称 | 描述 |
|---|---|---|---|
| " | " | " | quotation |
| ’ | ' | &apos | apostrophe |
| & | & | & | ampersand |
| < | < | < | less-than |
| > | > | > | greater-than |
实体名称对大小写敏感！！用的时候后面要带分号！！！！
其他
code 元素:用于定义计算机代码片段的
var 用于定义程序的变量
kbd 用于定义用户的键盘输入
samp 用于定义程序的输出
总之就是最后用这些标签后，输出的字体有着特定的格式。
4. 有关引用的元素
偷懒~~
大致看一下就行了其实，反正也记不住~
5. 有关格式的元素
strong 元素和 b 元素
顾名思义，当你想强调某些文本内容的重要性时，使用 strong 元素是最恰当不过的。
strong 元素通常是以粗体的形式呈现，在 HTML 中，b 元素也可以表示粗体，但它并没有任何表示重要的语义。
em 元素和 i 元素
em 元素表示强调的语义，通常是以斜体的形式呈现；i 元素也可以让内容倾斜，只不过它没有附带任何表示强调的语义。
del 元素和 ins 元素
del 元素和 ins 元素搭配，用来描述文档中的更新和修正。
s 元素
del 元素呈现的样式是删除线，默认同样的样式有 s 元素。
不过两者不能混用，因为 s 元素与 del 元素的语义是不同的，s 元素用于定义那些表示不再正确的内容。
u 元素
如果你想要画一条下划线，可以使用 u 元素来实现。
mark 元素
HTML 中有一个 mark 元素，它也是起到一个标记文本的作用。
sup 元素和 sub 元素
有时候我们可能需要在网页上使用上标文本和下标文本，最典型的就是定义数学公式和化学方程式，这个可以使用 sup 元素和 sub 元素来实现。
small 元素
small 元素的作用是使得指定的文本变小。
6. 列表
- 无序列表ul：
<ul>
<li></li>
<li></li>
</ul>
- 有序列表ol：
<ol>
<li></li>
<li></li>
</ol>
- 有序列表属性：
| 属性 | 值 | 描述 |
|---|---|---|
| reversed | reversed | 规定列表顺序为降序。(9, 8, 7, …) |
| start | number | 规定有序列表的起始值。 |
| type | 1、A、a、I、i | 规定在列表中使用的标记类型。 |
- 常用css属性：
list-style-type属性设置或检索对象的列表项所使用的预设标记。
list-style-image来设置列表标志。
7. 区域标签div
<div id="container" align="center">
<!--id是这个区域的名字，align是区域属性，div最大的用处是结合css样式进行布局-->
<p></p>
<p></p>
<p></p>
<hr />
</div>
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的诗词</title>
</head>
<body>
<div id="container" align="center">
<!--id是这个区域的名字，align是区域属性，div最大的用处是结合css样式进行布局-->
<h5>将进酒|送友人|静夜思</h5>
<hr/>
<img src="images/李白.png">
<h1>将进酒</h1>
<h3>李白</h3>
<p>君不见，黄河之水天上来，奔流到海不复回。</p>
<p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
<p>人生得意须尽欢，莫使金樽空对月。</p>
<p>天生我材必有用，千金散尽还复来。</p>
<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
<p>与君歌一曲，请君为我倾耳听。</p>
<p>钟鼓馔玉不足贵，但愿长醉不复醒。</p>
<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
<p>主人何为言少钱，径须沽取对君酌。</p>
<p>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
<hr />
<h6>made by one of three_tigers</h6>
</div>
</body>
</html>
8. 表格
table定义一个表格tr（table row）定义表格行th表头单元格td数据单元格caption添加标题 caption 元素需要紧挨着 table 元素的开始标签- 原来的表格是有很多属性的，但是呢，到了 HTML5，连表格最基本的边框都要使用 CSS 来实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的诗词</title>
<style>
table {
border: 2px solid black;
border-collapse: collapse; <!--边框合并-->
}
th {
border: 2px solid black;
}
td {
border: 2px solid black;
}
</style>
</head>
<body>
<table>
<caption>信息表</caption>
<tr>
<th>姓名</th>
<th>小明</th>
<th>小红</th>
</tr>
<tr>
<th>年龄</th>
<td>18</td>
<td>88</td>
</tr>
<tr>
<th>性别</th>
<td>男</td>
<td>女</td>
</tr>
<tr>
<th>照片</th>
<td><img alt="图片" src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1255677004,3755508600&fm=26&gp=0.jpg" width="256" heght="256"></td>
<td><img alt="图片" src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1308616764,2361711697&fm=26&gp=0.jpg" width="256" heght="256"></td>
</tr>
</table>
</body>
</html>
还有很多结合css画的更漂亮的功能：
- 单元格背景色的 CSS 属性是
background
……
/* 将 th 元素的背景色设置为 grey */
th {
background: grey;
color: white;
}
……
thead、tbody、tfoot元素用于将表格大致划分为表头、主体和表尾三个部分。
-th和td元素内部有一个colspan和rowspan属性，用于设置该单元格横跨的列数和纵跨的行数。
学css的时候这些功能都会提到的~~~~