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一起出现