1. 路径问题
- 相对路径：从html文件夹开始查找
- 同级：
src="xx.jpg" - 下级：
src="img/xx.jpg" - 上级：
scr="../xx.jpg"
- 绝对路径：从指定的盘符开始查找的
src="c:\user\desktop\xx.jpg"
注意：
- 路径中不能有中文
- 不能跨盘符
- 统一使用反斜杠 “/”
- 不使用绝对路径
2. a标签
控制页面之间的跳转
<a href="#" target="_blank" title="xx">xx</a>
- href属性：为跳转的链接地址。
-
href="#"，这个假连接会跳转到顶部 -
href="javascript:"，这个假连接不会跳回顶部。 -
href="#id名"，为页面某处设置锚点（id="xx"），跳转到这个页面的指定处，没有过渡动画。 -
href="xxx.html#id名"，设置锚点，跳转到指定页面的某处。
- target属性：控制页面跳转方式
-
targe="_self"是在本页面打开 -
targe="_blank"是在新的空白页面打开
- title属性：控制鼠标悬停时出现的文字，同image
注意：
- href属性为跳转的地址（本地或者网络），必须加上http://或https://
- a标签中间为展现的内容，可以添加image标签
3. base标签
<base target="_self">
base标签是一个单标签，用来统一指定当前网页所有超链接的打开类型，写在head标签里。
4. 列表标签
列表标签是赋予一堆数据列表的语义，让浏览器知道这堆数据是列表
- 无序列表（ul）
无序列表是赋予一堆数据列表语义且这堆数据没有先后之分
<ul>
<li> </li>
...
<li> </li>
</ul>
注意：
1.只是赋予数据列表的语义，不管样式。
2.ul和li成对出现，不单独出现
3.ul和li标签绑定，ul标签里不能写别的标签，li可以。
4.ul和li标签的嵌套。
- Emmet语法
- ! + tab 快速生成H5模版，包含viewport
- 任何标签缩写+tab ，快速生成标签
- “ # ”+id名 ：快速生成<div id="id名">
- “ . ”+类名 ：快速生成<div class="类名">
- “ > ” ：子级标签，
- “ + ” ：同级标签，
- “ * ” x ：生成标签数量为x个
- “ $ ”*x ：名称中的变量名从1开始递增到x
- “ $@n ” *x ：名称中的变量名从n开始递增，递增x次
- “ $@- ” *x ：名称中的变量名从x开始递减到1
- “ $@-n ” *x ：名称中的变量名递减到n
例如： table>(thead>tr>th{第$}*3)+(tfoot>tr>td{第$@-10}*3)+(tbody>tr>td{第$@7}*3)，按下tab键生成：
<table>
<thead>
<tr>
<th>第1</th>
<th>第2</th>
<th>第3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>第12</td>
<td>第11</td>
<td>第10</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>第7</td>
<td>第8</td>
<td>第9</td>
</tr>
</tbody>
</table>
- 有序列表（ol）
给一堆数据添加列表语义，并且这堆数据又先后顺序
<ol>
<li> </li>
......
<li> </li>
</ol>
- 定义列表（dl）
dt：定义标题
dd：定义描述
<dl>
<dt></dt>
<dd></dd>
</dl>
注意：
- dl，dt，dd是整体，不单独出现
- 推荐一个dt对应一个dd，dd中再添加别的标签。
- 可以在dt和dd中添加其他标签
- 无序列表仅仅用于表示内容之间存在有并列关系，也是分为多个子项，但是子项之前没有相应的编号，只有一个原点用于标识。
有序列表通常用来表示内容之间的顺序或者是重要性关系，每一个列表都分为多个子项，每一个子项都有相应的编号。
定义列表常用于表示名词或者是概念的定义，每一个子项有两个部分组成，第一部分是名词或者是概念，第二部分是相应的解释和描述。
- 表格标签
赋予数据表格语义，tr个数代表行数，一个td代表一格
<table>
<caption></caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
- 表格的标题：caption，一定要放在table中，指定标题，自动相对于表格居中。有align属性
- table：width/border/bgcolor/cellpadding/cellspacing
- thead（表头信息）：高度固定，不会随table高度变化而变化
- tfoot（页尾信息）：高度固定，不会随table高度变化而变化，放在thead和tbody中间
- /tbody（主体信息）：没写tbody标签时，浏览器会自动补充。
- tr：bgcolor/align/valign
- th（每列的标题单元格：自动居中粗体）/td：width/height/bgcolor/align/valign
- 细线表格：不用设置border，使cellspacing=“1”（默认值为2），利用table的bgcolor与tr的bgcolor的色差配合cellspacing形成细线。
- 单元格合并：
- 水平方向：合并列：
td colspan="2"，当前单元格变成两格，要删除后面的一个单元格，永远是在向后合并。 - 垂直方向：合并行：
td rowspan="2"，当前单元格变成两行，要删除下行的单元格，永远是在向下合并。
- 水平方向：合并列：
注意：
- 默认border属性为0，不可见
- table tr td 绑定出现
- 宽度和高度默认随内容大小变，可以赋值给table和td。但赋值给td不改变整个table大小。
- 水平位置 align
- 垂直位置 valign
- thead与tbody tfoot一起出现
网友评论