鲁达 一、html概述
1、html标签是用来给文本添加语义的，而不是用来修饰文本的；
2、<meta charset="GBK">指定字符集（GB2312、UTF-8），html保存和指定字符一样，才不会乱码；
3、<!DOCTYPE html> Dtd文档申明告诉浏览器我用的什么协议来写的，不是html标签；
4、webstorm快捷键大全：
二、基础标签
1、h、p 和 hr 标签
- 三个标签都是占一行
2、注释：<!-- -->
3、图片：<img src=" ">
- 不会独占一行；
- 保证不变形，指定宽或者高即可；
- title 和 alt 属性；
- src 可以是相对路径（../ 上一级）和绝对路径，路径中尽量不含中文，相对路径不可跨盘符，路径分隔统一写 / ，绝对路径的可移植性不好；
4、换行：<br> 用于内容未完的换行
5、跳转：<a href=" "></a>
- 支持文字和图片的跳转；
- 地址必须加 http 或者 https；
- href 可以指定本地的地址；
- target（_self 和 _blank） 属性控制跳转是否打开新的选项卡；
- title 提示作用；
6、base 标签：<base target="_self ">
- 统一指定 a 标签怎么打开，写在 head 中
7、假链接：点击不会跳转
- a 标签的 href 属性值为 # 或者 javascript
- # 会跳转到页面的顶部，而 js 不会
8、锚点：<a href="#id值"><\a>
- 可以跳转到页面的指定位置
- 可以跳转到其他页面的指定位置，只需在 # 前面加上页面的路径即可
- 跳转无过度动画
三、列表标签
1、无序列表（!）
- <ul><li><\li><\ul>；
- 整体不可分割；
- ul 除了 li 不建议再加其他的标签，li 标签中可以放其他标签来丰富内容；
- li 中还可嵌套列表；
- ws快捷生成 ul>li*3>h2+p；
2、有序列表（*）
- <ol><li><\li><\ol>；
3、定义列表
- dt 是标题，dd 是具体的描述；
- 推荐一个 dt 一个 dd ，也可以一个 dt 对多个 dd 或者没有 dd；
- dl 中不建议加其他标签，二 dt 和 dd 可以加；
- 应用：网站尾部，图文混排（仿京东做个网站的尾部）；
四、表格标签
1、格式
- 表格的边框默认不显示（border）
2、属性
（1）宽高
- table 和 td 可用；
- 默认高宽根据内容调整；
- td 设置高宽只会改变当前单元格的状态，而不会改变 table 的高宽；
（2）水平和垂直对齐（align 和 valign）
- 水平对齐三个都可以用，而垂直对齐针对 tr 和 td；
- table 设置 align 控制表格在水平方向的对齐，给 tr 和 td 设置都是控制单元格里的内容的对齐方式，不过 tr 影响一行，td 影响一个，tr 和 td 都设置 td 会覆盖 tr 的效果；
- tr 和 td 设置 valign 都是控制单元格内容的垂直方向的对齐，不过 tr 影响一行，td 影响一个，tr 和 td 都设置 td 会覆盖 tr 的效果；
（3）内边距和外边距（cellpadding 和 cellspacing）
- 两个属性都是 table 的；
- 外边距是指格子与格子之间的空隙，而内边距是指格子与文字之间的间隙；
（4）细线表格
- 先给 table 设置 bgcolor；
- 再给 tr 设置 bgcolor；
- 最后 table 设置 cellspacing；
3、表格的其他标签
（1）caption：表格的标题标签，必须写在 table 内而且需紧跟 table
（2）th：th 和 td 同级，th 有加粗的效果
4、表格的结构
（1）组成：caption 标题、thead 表头、tbody 主体、tfoot 尾部
（2）说明：
- 浏览器自动添加 tbody；
- table 设置高度后，tfoot 和 thead 的高度是不会变化的；
5、单元格的合并
（1）水平方向：td 属性 colspan = "2"；
（2）垂直方向：td 属性 rowspan = "2"；
五、表单标签
1、格式
2、input 标签
（1）type = text：
（2）password：
（3）radio：互斥要设置 name 相同；默认选中 checked
（4）checkbox：选中 checked
（5）button：
（6）image：
（7）reset：value 修改标题
（8）submit：
- form 的 action 确定提交的地址
- 提交数据加 name 属性
（9）hidden：
-----------------------------------------------------------------------------------------------------------------------
*相关标签：
- label 标签：让文字与 input 标签绑定；两种绑定的方式：
- datalist 标签：给输入框绑定输入的提示：<datalist><option>haha</option></datalist>
- h5 中新增的 input 标签：email 、url 、number 、color、date（浏览器的支持不好）
3、非 input 标签
（1）select
（2）textarea
- cols 和 rows 指定输入的行列，但是还是可以无限输入
- 默认可拉伸，也可通过 css 固定大小
4、练习
（1）表单标签除了 button 外都可以用 value 来指定提交的值
（2）表单添加边框可以在 form 中添加 fieldset 来实现
六、多媒体标签
1、video 标签
（1）格式：<video src=" " autoplay="autoplay"></video>；
（2）属性：controls（控制条）poster（海报）loop（循环）preload（预加载，与autoplay冲突）muted（静音）width/height；
（3）另一种 video 格式：解决浏览器的兼容
（4）让所有的浏览器支持 video 标签：通过 js 框架来实现
2、audio 标签
（1）使用基本和 video 一样，属性只有宽高和 poster 不能用，也是两种格式
3、details 和 summary 标签
（1）格式：
4、marquee标签（跑马灯效果）
（1）w3c 不推荐，但是浏览器的支持好
（2）属性：direction（方向）scrollamount（滚动的速度）loop（滚动次数，默认-1）behavior（滚动类型 slide）
（3）废弃的标签：<br><hr><font><b>加粗<u>下划线<i>斜体<s>删除线（无语义）
替代的标签：<strong><ins><em><del>（加入了语义）
5、字符实体
（1） ；空格 <；>； ©；版权符号
（2）理解：html 占用了的不显示的特殊字符用另外的代替符号表示，使他们正常在 html 页面上显示