HTML超链接、列表、表格、常用标签补充

lvshihao_

于 2024-05-01 15:27:58 发布

阅读量614

点赞数 26

文章标签：前端

本文链接：https://blog.csdn.net/lvshihao_/article/details/138373095

版权

一、超链接

主要作用：从当前页面进行跳转。

可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定应用。

标签名	标签语义	常用属性	单 / 双标签
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 相同。	双