一、超链接
主要作用:从当前页面进行跳转。
可以实现:①跳转到指定页面、②跳转到指定文件(也可触发下载)、③跳转到锚点位置、④唤起指定应用。
标签名 | 标签语义 | 常用属性 | 单 / 双 标签 |
a | 超链接 | href : 指定要跳转到的具体目标。 | 双 |
target : 控制跳转时如何打开页面,常用值如下: _self :在本窗口打开。 _blank :在新窗口打开。 | 双 | ||
id : 元素的唯一 标识,可用于设置锚点。 | 双 | ||
name : 元素的名字,写在 a 标签中,也能设置锚点。 | 双 |
1. 跳转到页面
<!-- 跳转其他网页 -->
<a href="https://www.xxx.com/" target="_blank">跳转其他网页</a>
<!-- 跳转本地网页 -->
<a href="./xxx.html" target="_self">跳转本地网页</a>
注意点:
-
代码中的多个空格、多个回车,都会被浏览器解析成一个空格!
-
虽然 a 是行内元素,但 a 元素可以包裹除它自身外的任何元素!
2. 跳转到文件
<!-- 浏览器能直接打开的文件 -->
<a href="./xxx/xxx.jpg">jpg文件</a>
<a href="./xxx/xxx.mp4">mp4文件</a>
<a href="./xxx/xxx.gif文件">gif文件</a>
<a href="./xxx/xxx.pdf">pdf文件</a>
<!-- 浏览器不能打开的文件,会自动触发下载 -->
<a href="./xxx/xxx.zip">zip文件</a>
<!-- 强制触发下载 -->
<a href="./xxx/xxx.mp4" download="xxx.mp4">下载mp4文件</a>
注意1:若浏览器无法打开文件,则会引导用户下载。
注意2:若想强制触发下载,请使用 download 属性,属性值即为下载文件的名称。
3. 跳转到锚点
什么是锚点?—— 网页中的一个标记点。
具体使用方式:
- 第一步:设置锚点
<!-- 第一种方式:a标签配合name属性 -->
<a name="test1"></a>
<!-- 第二种方式:其他标签配合id属性 -->
<h2 id="test2">我是一个位置</
注意点:
-
具有 href 属性的 a 标签是超链接,具有 name 属性的 a 标签是锚点。
-
name 和 id 都是区分大小写的,且 id 最好别是数字开头。
- 第二步:跳转锚点
<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
<!-- 执行一段js,如果还不知道执行什么,可以留空,javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>
4. 唤起指定应用
通过 a 标签,可以唤起设备应用程序。
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>
列表
1. 有序列表
概念:有顺序或侧重顺序的列表。
<h2>要把大象放冰箱总共分几步</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
2. 无序列表
概念:无顺序或不侧重顺序的列表。
<h2>我想去的几个城市</h2>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
3. 列表嵌套
概念:列表中的某项内容,又包含一个列表(注意:嵌套时,请务必把解构写完整)。
<h2>我想去的几个城市</h2>
<ul>
<li>北京</li>
<li>
<span>上海</span>
<ul>
<li>外滩</li>
<li>杜莎夫人蜡像馆</li>
<li>
<a href="https://www.opg.cn/">东方明珠</a>
</li>
<li>迪士尼乐园</li>
</ul>
</li>
<li>广州</li>
<li>深圳</li>
</ul>
注意: li 标签最好写在 ul 或 ol 中,不要单独使用。
4. 自定义列表
-
概念:所谓自定义列表,就是一个包含术语名称以及术语描述的列表。
-
一个 dl 就是一个自定义列表,一个 dt 就是一个术语名称,一个 dd 就是术语描述(可以有多 个)。
<h2>怎样精通打某游戏?</h2>
<dl>
<dt>了解某游戏</dt>
<dd>基础的了解是我们精通的前提</dd>
<dd>了解可以让我们初步熟悉</dd>
<dt>多加练习</dt>
<dd>没有什么是天生的,即使是天才也需要多加练习</dd>
<dt>别怕失败</dt>
<dd>失败乃是成功之母</dd>
</dl>
表格
1. 基本结构
- 一个完整的表格由:表格标题、表格头部、表格主体、表格脚注,四部分组成。
- 表格涉及到的标签:
table :表格
caption :表格标题
thead :表格头部
tbody :表格主体
tfoot :表格注脚
tr :每一行
th 、 td :每一个单元格(备注:表格头部中用 th ,表格主体、表格脚注中用: 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>20</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计:4人</td>
</tr>
</tfoot>
</table>
2. 常用属性
标签名
|
标签语义
|
常用属性
|
单
/
双 标
签
|
table
|
表格
|
width
:设置表格宽度。
height
:设置表格
最小
高度,表格最终高度可能比设置
的值大。
border
:设置表格边框宽度。
cellspacing
: 设置单元格之间的间距。
|
双
|
thead
|
表格头部
|
height
:设置表格头部高度。
align
: 设置单元格的
水平
对齐方式,可选值如下:
1.
left
:左对齐
2.
center
:中间对齐
3.
right
:右对齐
valign
:设置单元格的
垂直
对齐方式,可选值如下:
1.
top
:顶部对齐
2.
middle
:中间对齐
3.
bottom
:底部对齐
|
双
|
tbody
|
表格主体
|
常用属性与
thead
相同。
|
双
|
tr
|
行
|
常用属性与
thead
相同。
|
双
|
tfoot
|
表格脚注
|
常用属性与
thead
相同。
|
双
|
td
|
普通单元 格
|
width
:设置单元格的宽度,同列所有单元格全都受影
响。
heigth
:设置单元格的高度,同行所有单元格全都受影
响。
align
:设置单元格的水平对齐方式。
valign
:设置单元格的垂直对齐方式。
rowspan
:指定要跨的行数。
colspan
:指定要跨的列数。
|
双
|
th
|
表头单元 格
|
常用属性与
td
相同。
|
双
|
3. 跨行跨列
-
rowspan :指定要跨的行数。
-
colspan :指定要跨的列数。
常用标签补充
标签名 | 标签含义 | 单 / 双 标签 |
br | 换行 | 单 |
hr | 分隔 | 单 |
pre | 按原文显示(一般用于在页面中嵌入大段代码) | 双 |
注意点:
-
不要用 < br >来增加文本之间的行间隔,应使用 <p> 元素
-
< hr > 的语义是分隔,如果不想要语义,只是想画一条水平线,那么应当使用 CSS 完成。