1. <!DOCTYPE html> 声明
<!DOCTYPE html> HTML5 的一种声明方式
document.compact：兼容声明模式,其中存在两种模式
模式：
-
CSS1Compact--- W3C标准模式 所以需要声明<!DOCTYPE html> -
BackCompact--- 怪异模式 -- 才用浏览器的兼容模式
2. html 内的lang属性
<html lang="en"></html>
lang -- 语言 en:英文 zh-CH：简体中文 zh-Han: 繁体中文
3. head标签
head标签跟基本浏览器转达基本信息和配置
head内存在三大声明：
- title 标题 般要求30到40个字 可以少，不要多
- 主页：网站名称 + 主要的关键字/关键字的描述
- 详情页：详情名称 + 网站名称 + 简介
- 列表页：分类名称 + 关键字 + 网站名称
- 文章页: 标题 + 分类 + 网站名称
- meta
- keyWords 100个字符 -- 网站名称 / 分类信息 （越靠前比重越、高）
- description 80-120个汉字 描述信息 综合title + keyWords的简单描述
- charset 文字设置 通常设置UTF-8
- 编码字符集（meta内charset常用的几个编码字符集）
- GB2312 -- 中国信息处理国家标准码 => 简体中文编码
- GBK -- 汉字扩展规范 扩大汉字收录 增加繁体、增加藏、蒙等少数民族的文字
- UTF-8 -- unicode 万国码
特意补充：搜索引擎认知的优先级：
title > description > keyWords
4. 基础标签的总结
网页设计中存在两种标签：物理性标签 语义化标签
语义化标签：一个单词的缩写或者全称
元素
内联元素 行内元素 行间元素 (不独占一行，无法定义宽高) inline element
span strong label a sub sup em del insert
块级元素 (独占一行，可以定义宽高) block element
p div h标签 address tabel(td tr th) ul ol form fieldset legend
内联块级元素 inline-block element 不独占一行 可以定义宽高
img input select textarea iframe
各类基础标签：
h标签
标题标签 head h1 h2 h3 h4 h5 h6 块级标签 粗体
<h1></h1> font-size: 2em em 浏览器默认 16px
p标签
Paragraph 段落标签 块级标签 默认1em
<p></p> text-indent: 2em 缩进两个汉字
strong和b标签
<strong></strong> 加粗 语义化标签 能告诉搜索引擎这个是语义加强的(通常使用这个标签)
<b></b> 加粗 物理性标签
em和i标签
<em></em> emphasize 斜体 语义化标签
<i></i> 斜体 物理性标签 通常用于标签
del 标签
<del></del> delete 删除标签 语义化标签 用于文字划线的
insert 标签
<insert></insert> 下划线 语义化标签 用于下划线的
address 标签
<address></address> 地址 语义化标签 表示地址
div 标签
<div><div> division 块级标签 容器 结构标签
在编辑器内 文本的空格或者是换行 ==> 都是文字分隔符
常用的html内的实体字符 <(less then ==> 小于号<)、>(great then ==> 大于号 >)、 (空格)
img 标签
<img src="" /> 图片标签 src属性(source)
网络路径：网络资源路径
相对路径：相对文件夹的路径（根据..之类的去查找）
绝对路径：可以简单说是完整的资源路径
alt：资源加载失败后的展示
address 标签
<a></a> anchor 锚点
作用：
1.超链接(https:***) -- 通过href来定义
2.打电话(tel:***) -- 通过href来定义
3.发邮件(mailto:***) -- 通过href来定义
4.锚点定位(id:***) -- 通过href来定义
5.协议限定符
href 超文本引用(hypeText reference)
target 目标 新开标签(_blank)
sub / sup 标签
sub subscripted 下标签 内联元素
sup superscripted 上标签 内联元素
ol 标签
ol order list -- 有序列表 序列列表 块级元素
type: 1 用数字排序
a/A 用英文字母排序（超出26 用aa ab ac等）
i/I 用罗马数字表示
start: 只有type为数字时才能设置成功
reversed: reversed 倒序排序 只有type为数字时才能设置成功
ul 标签
ul unorder list -- 无序列表 序列列表 块级元素
type: disc 默认实心圆
square 正方形
circle 空心圆
iframe 内联框架 内联块级元素 inline-block element
iframe的属性
name： iframe的名称
frameborder：边框
scrolling: 滚动条 yes | no | auto
table 表格标签
// caption 标题标签
// tr table row 表格的一行 表格行标签
// th table header cell 表头单元格
// td table data 表格数据单元格
// cellpadding 单元格内边距
// cellspacing 单元格间距
// align 单元内对其方式 left right center
// thead 表格页眉标签 table head
// tfoot 表格页尾标签 table foot
// tbody 表格主题标签 table body
// 这三个必须要同时出现，不然就会导致数据全部加载完成后才会渲染表格
<tabel>
<caption>表格的标题</caption>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<th>
<td>数据1</td>
<td>数据2</td>
</th>
</tbody>
<tfoot>
</tfoot>
</table>
行合并 colspan: 2 --> 合并两格
列合并 rowspan: 2 --> 合并两列
例子：
<tabel border="1">
<caption>表格的标题</caption>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody>
<th>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<th>数据4</th>
</th>
<th>
<td>数据1</td>
<th>数据2</th>
<td colspan="2">数据3</td>
<!-- 少一行 -->
</th>
<th>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td rowspan="2">数据4</td>
</th>
<th>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<!-- 少一列 -->
</th>
</tbody>
<tfoot>
</tfoot>
</table>
5. 表单
表单：用户用于提交数据的 （数据名称 + 数据的值）
form 标签 块级元素 block element
属性：
- method --- 方法 get | post
- action --- 提交数据的地址
6. label 标签
内联元素 inline element
属性：
- for 于某个input的id挂钩
<form>
<label for="userName">用户名</label>
<input type="text" id="userName" />用户名
</form>
// 这个label就会和这个input挂钩（for的属性和id值相同时），点击label，input也会自动聚焦
扩展：md5 ---> 信息摘要的算法（第五个版本）---> 不可逆加密算法 ---> 不需要额外密钥的加密方式
input 内的 readOnly 和 disabled 的局别：
- readOnly 只读， 但是提交表单的时候，是可以获取数据，并且提交数据
- disabled 不可编辑，提交表单的时候，不可以获取数据，并且无该数据
6. 单选问题
<input type="radio" id="male" name="sex" checked value="female">
<label for="male">男士</label>
<input type="radio" id="female" name="sex" value="female">
<label for="female">女士</label>
如果是单选问题则需要注意
- input 的name属性必须是一个值
- checked属性可以设置默认选择一个
- value 可以根据value属性绑定值
7. 复选框问题
跟单选框设置差不多
<input type="checkbox" id="html" name="lang" value="html">
<label for="html">html</label>
<input type="checkbox" id="css" name="lang" value="css">
<label for="css">css</label>
<input type="checkbox" id="js" name="lang" value="js">
<label for="js">js</label>
