HTML-2_href 目标-CSDN博客

本文链接：https://blog.csdn.net/weixin_59938047/article/details/119645108

1.超链接

1.1简介

超链接表示用html中的<a>标签来设置的超文本链接。超链接可以是文本，也可以是一幅图片或视频，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

在标签<a> 中使用了href属性来描述链接的地址当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

1.2href属性

href 属性描述了链接的目标。

链接的目标路径与图片资源的访问路径一样可以是绝对路径/相对路径，当然网络地址也可以。

举例：

绝对路径的超链接

<a href="E:\wangxing\lianxi\20210811\1-1.html">什么是html</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>href属性</title>
	</head>
	<body>
		<a href="E:\wangxing\lianxi\20210811\1-1.html">绝对路径的超链接</a>
	</body>
</html>

相对路径的超链接

<a href="..\20210811\img2.jfif">相对路径的超链接</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>href属性</title>
	</head>
	<body>
		<a href="..\20210811\img2.jfif">相对路径的超链接</a>
	</body>
</html>

网络路径的超链接

<a href="https://baijiahao.baidu.com/s?id=1707869321574293610&wfr=spider&for=pc">网络路径的超链接</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>href属性</title>
	</head>
	<body>
		<a href="https://baijiahao.baidu.com/s?id=1707869321574293610&wfr=spider&for=pc">网络路径的超链接</a>
	</body>
</html>

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。

1.3 target 属性

target 属性定义超链接文档显示在新标签页或超链接文档所在标签页。

常用取值：_blank----在新标签页显示资源

_self-------在当前标签页显示资源

举例：

超链接文档在新标签页显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>target属性</title>
	</head>
	<body>
		<a href="https://xw.qq.com/amphtml/20210812A0846F00"target="_blank">湖北多地遭遇特大暴雨</a>
	</body>
</html>

浏览器运行后

点击网页内容“湖北多滴遭遇特大暴雨”’后，在新的标签页打开。

超链接文档在当前标签页显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>target属性</title>
	</head>
	<body>
		<a href="https://xw.qq.com/amphtml/20210812A0846F00"target="_self">湖北多地遭遇特大暴雨</a>
	</body>
</html>

运行后

不添加_blank和 _self属性，默认在当前标签页打开

1.4id属性

id属性可用于创建在一个HTML文档书签标记。

书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于我们来说是隐藏的。

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>id属性</title>
	</head>
	<body>
		<p><a id="1"第一段</a></p>
		<p>斗之力，三段！</p>
		<p>第二段</p>
		<p>望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字，少年面无表情，
			唇角有着一抹自嘲，紧握的手掌，因为大力，而导致略微尖锐的指甲深深
			的刺进了掌心之，带来一阵阵钻心的疼痛…</p>
		<p>第三段</p>
		<p>“萧炎，斗之力，三段！级别：低级！”测验魔石碑之旁，一位年男，看了一眼碑上所
			显示出来的信息，语气漠然的将之公布了出来…
		    话刚刚脱口，便是不出意外的在人头汹涌的广场上带起了一阵嘲讽的骚动。</p>
		<p>第四段</p>
		<p>“三段？嘿嘿，果然不出我所料，这个“天才”这一年又是在原地踏步！”</p>
		<p>第五段</p>
		<p> “哎，这废物真是把家族的脸都给丢光了。”</p>
		<p>第六段</p>
		<p>  “要不是族长是他的父亲，这种废物，早就被驱赶出家族，任其自生自灭了，
		哪还有机会待在家族白吃白喝。”</p>
		<p>第七段</p>
		<p>“唉，昔年那名闻乌坦城的天才少年，如今怎么落魄成这般模样了啊？”</p>
		<p>第八段</p>
		<p>“谁知道呢，或许做了什么亏心事，惹得神灵降怒了吧…”</p>
		<p>第九段</p>
		<p>周围传来的不屑嘲笑以及惋惜轻叹，落在那如木桩待在原地的少年耳，恍如一根根利
		刺狠狠的扎在心脏一般，让得少年呼吸微微急促。</p>
		<p>第十一段</p>
		<p>少年缓缓抬起头来，露出一张有些清秀的稚嫩脸庞，漆黑的眸木然的在周围那些嘲讽
		的同龄人身上扫过，少年嘴角的自嘲，似乎变得更加苦涩了。</p>
		<p>第十二段</p>
		<p>“这些人，都如此刻薄势力吗？或许是因为三年前他们曾经在自己面前露出过最谦卑
		的笑容，所以，如今想要讨还回去吧…”苦涩的一笑，萧炎落寞的转身，安静的回到了队
		伍的最后一排，孤单的身影，与周围的世界，有些格格不入</p>。
		<p>第十三段</p>
		<p>“下一个，萧媚！”</p>
		<p>第十四段</p>
		<p>听着测验人的喊声，一名少女快速的人群跑出，少女刚刚出场，附近的议论声便是
		小了许多，一双双略微火热的目光，牢牢的锁定着少女的脸颊…</p>
		<p>第十五段</p>
		<p>少女年龄不过十四左右，虽然并算不上绝色，不过那张稚气未脱的小脸，却是蕴含
		着淡淡的妩媚，清纯与妩媚，矛盾的集合，让得她成功的成为了全场瞩目的焦点…</p>
		<a href="#1">回到第一段</a>
	</body>
</html>

2.<head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

2.1<title>元素

<title>元素</title>

<title>显示在网页标签上标题。

2.2<base>元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title网页标签页</title>
		<!-- 基本网页为https://www.baidu.com/，新标签页显示 -->
		<base href="https://www.baidu.com/" target="_blank/" />
	</head>
	<body>
		base基本网页
	</body>
</html>

2.3 <link> 元素

设置导入外部css样式文件到当前网页中。

2.4<style> 元素

设置当前网页添加CSS样式。

2.5<script> 元素

为当前网页添加javaScrip脚本。

3.HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义行），每行被分割为若干单元格（由 <td> 标签定义行中的单元格）。

字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

thead标记表示表格中的表头

tbody标记表示表格中的身体

3.1table属性

<table>使用边框属性来显示一个带有边框的表格。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<table border="1" >
			<tr>
				<th>表格1</th>
				<th>表格2</th>
			</tr>
			<tr>
				<td>表格3</td>
				<td>表格4</td>
			</tr>
		</table>
	</body>
</html>

3.2表格边距与j间距

Cell padding元素定义单元格中的字与边框距离。

Cell spadding元素定义单元格与单元格距离。

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<table border="" cellspacing="4" cellpadding="10">
			<tr>
				<th>表格1</th>
				<th>表格2</th>
			</tr>
			<tr>
				<td>表格3</td>
				<td>表格4</td>
			</tr>
		</table>
	</body>
</html>

3.3表格跨行或跨列

colspan--设置表格跨列【左右合并单元格】

rowspan--设置表格跨行【上下合并单元格】

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<table border="1" cellspacing="5" cellpadding="2">
			<thead>
				<tr>
					<td colspan="5">手机配件</td>
				</tr>
				<tr>
					<td>屏幕</td>
					<td>耳机</td>
					<td>后盖</td>
					<td>听筒</td>
					<td>总计</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>600</td>
					<td>60</td>
					<td>1000</td>
					<td>400</td>
					<td rowspan="2">2600</td>
				</tr>
				<tr>
					<td>RMB</td>
					<td>RMB</td>
					<td>RMB</td>
					<td>RMB</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

运行结果：

4.HTML 列表

HTML 支持有序、无序和自定义列表

4.1HTML 有序列表

有序列表是一列项目，用<ol>标签。

列表项用 <li> 标签。

<ol type="1"start="1">
  <li>手机</li>
  <li>电脑</li>
  <li>平板</li>
  <li>音响</li>
</ol>

type属性--列表的类型。不赞成使用。

a 表示小写英文字母编号

A 表示大写英文字母编号

i 表示小写罗马数字编号

I 表示大写罗马数字编号

1 表示数字编号（默认）

start属性指定了列表编号的起始值。

<ol type="1"start="5">
  <li>手机</li>
  <li>电脑</li>
  <li>平板</li>
  <li>音响</li>
</ol>

4.2HTML无序列表

无序列表使用 <ul> 标签

各个列表项无级别之分。

每个标签项前面都有实心小圆圈。

<ul type="disc">
  <li>手机</li>
  <li>电脑</li>
  <li>平板</li>
  <li>音响</li>
</ul>

disc--默认，实心小圆圈

circle--空心小圆圈

square--实心小方块

通过css样式属性style="list-style-type:disc/circle/square"设置不同类型的无序列表。

4.3HTML 自定义列表

没有顺序

dl标记表示一个自定义序列表

dt标记表示自定义序列表的主标题

dd标记表示自定义序列表的主标题下的次级内容

 <dl>
	<dt>手机</dt>
		<dd>cpu</dd>
		<dd>外壳</dd>
		<dd>电池</dd>
	<dt>电脑</dt>
		<dd>屏幕</dd>
		<dd>键盘</dd>
		<dd>鼠标</dd
 </dl>

5.HTML 框架

src表示不同的网页地址。

height 和 width 属性用来定义iframe标签的高度与宽度。

frameborde设置是否显示框架的边缘（显示yes/1;不显示No/0）

name--设置当前框架的名称，提供给超链接的target属性，达到联动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框架</title>
	</head>
	<body>
		<a href="1-2.html"target="iframe">打开1-2</a><br>
		<a href="1-1.html"target="iframe">打开1-1</a><br>
		<iframe src="1-1.html" width="500" height="400"name="iframe"frameborder="0"></iframe>
	</body>
</html>

运行后