HTML Week 2 学习笔记
图片标签
按下 img + 回车之后会快捷出现 img 标签的基础框架：
<img src="" alt="">属性说明
src：指定图片路径（可以是相对路径也可以是绝对路径）alt：当图片无法正常显示的时候出现的提示文字
图片居中
图片标签 img 是没有对齐方式的，所以可以用嵌套标签去解决：
<p align="center"> <img src="xxxx"></p>路径
- 绝对路径：确切指向的路径
- 相对路径：相对于某个资源而言的路径
超链接
作用：点击超链接之后，会跳转到对应的页面。
- 标签是
<a>，是一个双标签：<a></a>
元素之间的关系
- 父子关系
- 祖先后代关系（父子关系也是一种特殊的祖先与后代的关系）
- 兄弟关系（拥有相同父标签的标签就是兄弟关系）
长度单位
%是一种长度单位，相对于父元素的百分比
列表
列表用于显示一项的内容，比如购物清单。
基本概念
- Item（项）：列表中的一项信息，就可以被称作是列表项
- li 标签：列表项使用的标签
列表分类
- 有序列表
- 无序列表（没有顺序关系，表现出来就是一个实心）
- 定义列表
无序列表
使用的标签是 ul 标签（unorderlist）。
快捷生成：
ul>li*数字>标签会自动出现写好的无序列表。比如：
ul>li*2>p[]中括号之内写属性：
<ul> <li> <p></p> </li> <li> <p></p> </li></ul>数字就是会出现几个列表项，p就是每一个列表项会包含的子标签。
快速生成带属性的标签
ul>li*3>a[href=#]{内容}用中括号之内输入属性并且直接等于，就可以快捷的写出列表标签和所属的属性。大括号之内输入的是内容，会显示在标签 a 里。
有序列表
Order list，简写为 ol，列表项还是 li。
<ol> <li></li></ol>type 属性
type=1：从 1,2,3,4,5… 开始排列type=a：从 a,b,c,d,e,f… 开始排列type=A：从 A,B,C,D,E,F 开始排列type=i：罗马数字（小写）type=I：罗马数字（大写）
start 属性
设置从哪里开始排序，取值应该是数字：
<ol type="a" start="3"></ol>这样列表排序就会从 c 开始（c,d,e,f…）。
reversed 属性
设置有序列表是否反排序：
<ol reversed></ol>设置之后，会变为原本相反的排序，例如原本是 12345 的排序，设置之后就是 54321 排序。
当属性名和属性值相等的时候，可以直接写属性名。
定义列表
dl 标签：可以自定一个主题（define definition list）。
dt标签：规定的主题（define topic）dd标签：规定的对主题的描述（define description）
<dl> <dt>主题1</dt> <dd>对主题的描述1</dd> <dd>对主题的描述2</dd>
<dt>主题2</dt> <dd>对主题的描述1</dd> <dd>对主题的描述2</dd></dl>dt 和 dd 是兄弟标签，所以在设置快捷标签的时候要这么写：
dl>dt+dd*3
大于号 > 表示设置子标签。加号 + 表示设置兄弟标签。
列表标签特点
- 都是双标签
- 都是块元素
表格标签
表格有三个最重要的属性：行（row）、列（column）和单元格（cell）。
表格结构
- table 标签：表格标签，是双标签
<table></table> - tr 标签：行标签（table row）
- td 标签：单元格标签（table cell data）
基本结构
<table> <tr> <td>内容</td> </tr> <tr> <td>内容</td> </tr></table>快捷生成
table>tr*3>td*3这样就会设置一个一共有三行，每行有三个单元格的表格。
表格标题
<caption> 用于设置表格的标题，这个标题会在表格中水平居中。
边框设置
用 border 来设置表格的边框，border 的取值是数字，其单位是像素，代表了边框的宽度。
快速编辑
生成表格之后，不要点击任何地方，直接输入文本就可以在单元格之内展示，按下 Tab 键切换单元格。
表格结构标签
thead标签：表格头部tbody标签：表格主体tfoot标签：表格底部
常规标签这三个写不写都不影响。如果不设置的话，浏览器会自动创建 tbody 标签，把表格内的标签全部移动到 tbody 中去。