1.路径
1）相对路径:
以当前位置作为参考点，去建立路径。
./：同一级
/：下一级
../：上一级
2）绝对路径
以根位置作为参考点，去建立路径。
2.超链接
主要作用：从当前页面进行跳转。
可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定应用。
1.跳转到页面
<a>标签：常用格式如下图
<a href="https://www.baidu.com/" target="_self"> 可搜索</a>
<a href="https://www.baidu.com/" target="_blank"> 可搜索</a><a>标签中的常用属性：
href：指定要跳转的目标。
target：页面跳转的方式，其中包含两个属性值selef和blank。
1）selef：点击后在当前页面打开网页。
点击可搜索后在当前页面打开，效果如下图：
2）blank：点击后新建页面打开网页。
点击可搜索后，新建了一个页面打开了百度的网页。
注意：<a>标签可以包含所有的元素，但是不能包含它自身。
id：元素的唯一 标识，可用于设置锚点。
name：元素的名字，写在 a 标签中，也能设置锚点。
2.跳转到文件
红色框中的文件浏览器能都能直接打开。
<a href="./resource/我的自拍.jpg">自拍</a>
<a href="./resource/小电影.mp4">看电影</a>
绿色框中的文件浏览器不能直接打开，浏览器就会引导用户下载。
<a href="./resource/内部资源.zip">内部资源</a>
download：强制触发下载。
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
3.跳转锚点
什么是锚点？—— 网页中的一个标记点。
具体操作如下：
1.设置锚点，两种方式
第一种方式：a标签配合name属性
具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点。
<a name="test1"></a>
第二种方式：其他标签配合id属性
<h2 id="test2">我是一个位置</h2>
注意：name和id都是区分大小写，id最好开头不要用数字。
2.跳转锚点
<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a> <a href="#atm">看奥特曼</a>
<a href="#zp">看自拍</a>
<p>一个小怪兽</p>
<img src="./path_test/怪兽.jpg" alt="怪兽">
<a name="atm"></a>
<p>善良的奥特曼</p>
<img src="./奥特曼.jpg" alt="奥特曼">
<p id="zp">很帅的自拍</p>
<img width="200" src="resource/我的自拍.jpg" alt="自拍">
<p>
介绍完毕
</p>
<!-- a标签里面不加#号就是刷新页面-->
<a href="#">回到顶部</a>4.唤起应用
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:[email protected]">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>5.列表
1.有序列表（Ordered list)<ol>
<h2>我想去的几个城市</h2>
<ul>
<li>武汉</li>
<li>长沙</li>
<li>北京</li>
</ul>
2.无序列表（Unordered list）<ul>
<h2>要把大象放冰箱一共分几步？</h2>
<ol>
<li>打开冰箱门</li>
<li>把大象放进去</li>
<li>关上冰箱门</li>
</ol> 
注意：li最好是在ol和ul中出现。
3.自定义列表（Definition list）<dl>
<h2>如何更好地学习</h2>
<dl>
<dt>做好笔记</dt>
<dd>笔记有助于复习</dd>
</dl> 
6.表格标签
表格<table>;表格标题<caption>;表格头部<thead>;表格主体<tbody>;表格脚注<tfoot>
头部标签里面的行和列：tr和th
主体标签里面的行和列：tr和td
<table border="1">
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>18</td>
<td>回族族</td>
<td>团员</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>党员</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计四人</td>
</tr>
</tfoot>
</table>
7.表格标签常用属性
1.基本属性
表格：table
表格标题：caption (没有属性，css进行调整)
表格头部：thead 行：tr 列：th (只能有height属性)
表格主体：tbody 行：tr 单元格：td
表格脚注：tfoot
cellspacing:单元格之间的间距
align:水平对齐方式(left center right) valign：垂直对齐方式(top middle bottom)
<table border="1" width="500" height="400" cellspacing="0">
<caption>学生信息</caption>
<thead height="30" align="center" valign="middle">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody height="450" align="center" valign="middle">
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>18</td>
<td>回族</td>
<td>团员</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>党员</td>
</tr>
</tbody>
<tfoot height="30" align="center" valign="middle">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计四人</td>
</tr>
</tfoot>
</table> 效果：
2.跨行和跨列
rowspan：指定要跨的行数
colspan：指定要跨的列数
简单的效果呈现：
<table border="1" cellspacing="0">
<caption>课程表</caption>
<thead>
<tr>
<td>项目</td>
<td colspan="5" align="center">上课</td>
<td colspan="2">活动与休息</td>
</tr>
</thead>
<tbody>
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
<td>3-6</td>
<td>3-7</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
<td>4-6</td>
</tr>
<tr>
<td>5-1</td>
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
<td>5-5</td>
<td>5-6</td>
</tr>
<tr>
<td>6-1</td>
<td>6-2</td>
<td>6-3</td>
<td>6-4</td>
<td>6-5</td>
<td>6-6</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>7-2</td>
<td>7-3</td>
<td>7-4</td>
<td>7-5</td>
<td>7-6</td>
<td>7-7</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<td>8-1</td>
<td>8-2</td>
<td>8-3</td>
<td>8-4</td>
<td>8-5</td>
<td>8-6</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
8.补充一些标签
<br>：换行标签
<hr>：分割线标签
<pre>：使代码按照输入样式输出
<body>
<!-- 换行标签<br> -->
<a href="https://www.baidu.com">去百度</a><br>
<a href="https://www.jd.com">去京东</a><br>
<!-- 分割线<hr>(想要有分隔线就用hr，其他时候选择css) -->
<div>
<p>第一章</p>
<p>嘻嘻嘻嘻嘻嘻，</p>
<hr>
<p>第二章</p>
<p>哈哈哈哈哈</p>
</div>
<!-- 按原文显示 -->
<pre>
<div>
I LOVE YOU
I LOVE YOU
ILOVEYOU
</div>
</pre>
</body>
9.表单
<form>：表单
<input>：输入框
<button>：按钮
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>去百度搜索</button>
</form>
<form action="https://search.jd.com/search" target="_blank">
<input type="text" name="keword">
<button>去京东搜索</button>
</form>
1、 文本输入框
常用属性如下：
<input type="text">
name 属性：数据的名称。
value 属性：输入框的默认输入值。
maxlength 属性：输入框最大可输入长度。
2、密码输入框
<input type="password">name 属性：数据的名称。
value 属性：输入框的默认输入值（密码输入框一般不用）。
maxlength 属性：输入框最大可输入长度。
3、单选框
<input type="radio" name="gender" value="male">男
<input type="radio"name="gender" value="fmale" checked>女<br>name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
value 属性：提交的数据值。
checked 属性：让该单选按钮默认选中。
4、复选框
<input type="checkbox" name="hobby" value="some" checked>抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">泡脚<br>name 属性：数据的名称。
value 属性：提交的数据值。
checked 属性：让该复选框默认选中。
5、下拉框
<select name="palace">
<option value="鲁" selected>山东</option>
<option value="静">广东</option>
<option value="赣">江西</option>
</select>name 属性：指定数据的名称。
option 标签设置 value 属性， 如果没有 value 属性，提交的数据是 option 中间的文
字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）
option 标签设置了 selected 属性，表示默认选中。
6、提交按钮，重置按钮
两种形式：
第一种：
<button type="submit">点我提交</button>
<button type="reset">点我重置</button>第二种：
<input type="submit" value="确认">
<input type="reset" value="重置">7、文本域
<textarea name="msg" rows="22" cols="3">文本域</textarea>1. rows 属性：指定默认显示的行数，会影响文本域的高度。
2. cols 属性：指定默认显示的列数，会影响文本域的宽度。
3. 不能编写 type 属性，其他属性，与普通文本输入框一致。