一、元素
1、元素基础
元素Element=开始标签（属性Attribute：属性名="属性值"）+内容+结束标签
标签内不区分大小写
空元素：无内容的元素，如img元素
2、块级元素和内联元素
- 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
- 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素或者强调元素和 。
3、属性
布尔属性可以没有值，比如<input disabled>
4、特殊字符
在HTML中，字符 <, >,",’ 和 & 是特殊字符，如须表示，需要用特殊的等价字符替换
5、注释
<!-- 需要被注释的内容 -->
6、<head>中属性
1）CSS文件
该元素经常位于文档的头部（猜测是的意思？）。stylesheet表这是文档的样式表，href包含了文件路径
<link rel="stylesheet" href="my-css-file.css">
当也可以放在<head>标签下的<style>标签里，格式与放在.css里一模一样
样式style也可作为标签属性：<h1 style="color:blue; text-align:center">
2）JavaScript文件
没必要放在文档头部，放在文档尾部（之前）更好。将脚本放在
3）<title>
描述html网页属性
3）元数据<meta>
元数据：描述数据的数据
字符编码 / 作者 / 网页描述
4）页面图标<link>
7、无特殊语义的标签
1）<span>和<div>
可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。区别是，span是行内元素，div是块元素
8、文本标签
1）超链接<a>
属性：
- href：可放绝对URL和相对URL，相对URL跟相对路径的使用其实是一样的
- mailto:…@…com：发送邮件
- title：超链接悬停时的提示语
2）上标<sup>下标<sub>
3）页眉<header>
是<body>子元素的话就是页眉,如果它是<article>或<section>的子元素，那么它是这些部分特有的页眉
4）导航栏<nav>
5）主内容<main>
举例中包括<article>和<aside>
<main>存放每个页面独有的内容。每个页面上只能用一次<main>，且直接位于 中。
6）侧边栏<aside>
7）页脚<foooter>
8）换行<br>
空元素，不需要闭合标签，放在一行的最末尾
8）水平分割线<hr>
空元素
9）表格
所有内容用<table>标签包围
<caption>：放在table标签下，是对表格的描述。可以没有
<td>：table data描述一个cell的数据
<tr>：table row包含一行的所有数据
<th>：table header标题，可以替代<td>使用
用于样式的标签：
colgroup：包含col标签
<col>：在每个标签内定义每列的样式 属性：span=“3”：为3列添加同样的样式
<table>
<colgroup>
<col>
<col style="background-color: yellow">
</colgroup>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>
</table>
<thead>：代替<tr>表示标题行，放在头部，如果有就放在之下
<tfoot>：代替<tr>表示页脚行，可放在表格底部也可放在元素之下
<tbody>：代替<tr>表示内容行，可放在 的下面或者是 的下面
属性：
- colspan=“2”：占多列
- rowspan=“2”：占多行
表格嵌套：直接将完整的<table>放置在应该在的位置即可
10）表单
还包括<input>,<select>等的使用
<!-- form 表单主体 | method 表单的 HTTP 请求方法 GET/POST | action 接收请求路径 -->
<form method="post" action="index.php" >
<!-- 表单控件 -->
<input type="text" /> <!-- 文本框 -->
<input type="password" /> <!-- 密码框 -->
<input type="hidden" /> <!-- 隐藏框 -->
<input type="number" /> <!-- 数字框 -->
<input type="date" /> <!-- 日期控件 -->
<!-- 多选框 | 相同 name 为一组 -->
牛奶 <input type="checkbox" name="food" /> 面包<input type="checkbox" name="food" />
<!-- 单选框 | 相同 name 为一组 -->
男 <input type="radio" name="sex" /> 女 <input type="radio" name="sex" />
<!-- 多行文本框 | cols 宽 rows 高 -->
<textarea rows="2" cols="20"></textarea>
<!-- 选择框 -->
<select name="num">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<!-- 上传文件 | accept 文件类型限制 -->
<input type="file" accept="image/gif, image/jpeg, image/png" >
<!-- 范围控件 | min max 范围值 -->
<input type="range" min="1" max="100" />
<!-- 颜色控件 -->
<input type="color" />
<!-- 表单提交 -->
<input type="submit" value="提交" />
<!-- 表单重置 -->
<input type="reset" value="重置" />
<!-- 普通按钮 -->
<button type="button">按钮</button>
</form>
11）进度条
<progress>：<progress value="30" max="100"></progress>
<meter>：比progress定制性更强。根据 min low high max 4个刻度等级衡量 value 的值，optimum 用于标示每个等级相对应的显示颜色。<meter value="100" min="0" low="100" high="200" max="300" optimum="200"></meter>
9、多媒体标签
1）图片<img>
空元素，
属性：
- src
- alt：在图片不能被显示时，显示对图片的文字描述
- titile：悬停提示
- width
- height