HTML 链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
HTML 超链接(链接)
HTML使用标签 <a>来设置超文本链接,是可以从一个页面指向另一个目的端的链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
在标签 <a> 中使用了 href 属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线
- 访问过的链接显示为紫色并带上下划线
- 点击链接时,链接显示为红色并带上下划线
注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定来显示。
HTML 空链接
HTML 空链接:指指向链接后,鼠标变成手形,但单击后仍停留在当前页面。
临时加的空链接,主要为了能更好的看到最终的效果。
基本语法:
<a href="#">链接文字</a>
其中“ # ”表示空链接。
HTML 链接语法
链接的 HTML 代码很简单。它类似这样:
<a href="url">Link text</a>
href 属性描述了链接的目标。
提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
HTML 链接 - target 属性
使用 Target 属性,你可以定义被链接的文档在何处显示(在新的窗口打开,还是在原有的窗口中打开)。
在 HTML 文档中插入 ID:
<a id="tips">Useful Tips Section</a>
在 HTML 文档中创建一个链接到"有用的提示部分 (id="tips")":
<a href="#tips">Visit the Useful Tips Section</a>
或者,从另一个页面创建一个链接到"有用的提示 (id="tips")部分":
<a href="//www.w3cschool.cn/html_links.html#tips"> Visit the Useful Tips Section</a>
提示:默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。
HTML 链接 - id 属性
id 属性可用于在一个 HTML 文档中创建书签标记。
提示: 书签是不以任何特殊的方式显示,在 HTML 文档中是不显示的,所以对于读者来说是隐藏的。
注意: 请始终将正斜杠添加到子文件夹。假如这样书写链接:href="//www.w3cschool.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="//www.w3cschool.cn/html/"。
HTML 链接标签
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>本地文件链接</h1>
<P><a>这是一个链接</a></P>
<p><a href="#">这是一个链接</a></p>
<!-- href 当前目录/abc -->
<p><a href="abc">这是一个链接</a></p>
<p><a href="05.图像.html" target="_self">这是一个链接</a></p>
<h1>链接到网址</h1>
<!-- 链接到网址,需要使用协议+域名 -->
<p><a href="baidu.com">百度</a></p>
<p><a href="https://www.baidu.com" target="_blank">百度</a></p>
<h1>链接到当前目录 锚点</h1>
<a href="#ch01">第一章</a>
<a href="#ch02">第二章</a>
<a href="#ch03">第三章</a>
<a href="#ch04">第四章</a>
<a href="https://www.baidu.com"><img src="imgs/1.jpg" height="100px"></a>
<!-- 块 -->
<div id="ch01" style="height:200px;background-color: aquamarine;">
第一章
</div>
<div id="ch02" style="height:200px;background-color: skyblue;">
第二章
</div>
<div id="ch03" style="height:200px;background-color: bisque;">
第三章
</div>
<div id="ch04" style="height:200px;background-color: chartreuse;">
第四章
</div>
</body>
</html>
HTML 表格实例
HTML 表格
表格由<table>标签来定义。每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML 表格的基本结构:
<table>…</table>:定义表格
<th>…</th>:定义表格的标题栏(文字加粗)
<tr>…</tr>:定义表格的行
<td>…</td>:定义表格的列
HTML 表格和边框属性
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性border来显示一个带有边框的表格。
HTML 表格表头单元格
表格的表头单元格使用<th>标签进行定义。
表格的表头单元格属性主要是一些公共属性,如:align、dir、width、height。
大多数浏览器会把表头显示为粗体居中的文本。
表格标题 <caption>
在<table>标签中我们可以使用<caption> ... </ caption>标签作为标题,并在表的顶部显示出来。
注:此标签在较新版本的HTML / XHTML中已弃用。
HTML 表格高度和宽度
在<table>标签中您可以使用width(宽)和height(高)属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。
HTML 表格背景
使用以下方法之一设置 HTML 表格的背景
bgcolor属性 - 可以为整个表格或仅为一个单元格设置背景颜色。
background属性 - 可以为整个表设置背景图像或仅为一个单元设置背景图像。
bordercolor属性 - 可以设置边框颜色。
注:HTML5 中不推荐使用bgcolor,background和bordercolor属性。不要使用这些属性。
使用background属性需要提供图像 URL 地址。
HTML 表格空间
有以下两个属性,用于调整 HTML 表格中单元格的空间:
cellspacing属性-定义表格单元格之间的空间
cellpadding属性-表示单元格边框与单元格内容之间的距离
HTML 合并单元格
如果要将两个或多个列合并为一个列,将使用colspan属性
如果要合并两行或更多行,则将使用rowspan属性。
HTML 表格头部、主体、页脚
表格可以分为三个部分 - 头部,主体和页脚,如同word 文档中页面的页眉、正文、页脚。每个页面保持相同,而正文是表格的主要内容持有者。
头部,主体和页脚的对应的三个标签是:
- <thead> - 创建单独的表头。
- <tbody> - 表示表格的主体。
- <tfoot> - 创建一个单独的表页脚。
表可以包含多个<tbody>元素以指示不同的页面。
但值得注意的是<thead>和<tfoot>标签应出现在<tbody>之前。
HTML 表格的嵌套
可以在另一个表中使用一个表。可以使用<table>内的几乎所有标签。
HTML 表格标签
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- talbe 表格 tr 行 td 列 数据-->
<!-- border=1 边框 -->
<h2></h2>
<table border="1" cellspacing="0" cellpadding="6">
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>18</td>
</tr>
<tr>
<td>王五</td>
<td>22</td>
</tr>
<tr>
<td>赵六</td>
<td>23</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合计</td>
<td>4</td>
</tr>
</tfoot>
</table>
<h1>行列合并</h1>
<table border=1 width="100%" bgcolor="green">
<tr>
<td colspan="2" width="50%">科目</td>
<td rowspan="2">总得分</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>50</td>
<td>50</td>
<td>100</td>
</tr>
</table>
</body>
</html>
HTML 强调
为了突出一句话的意思,我们通常强调某些词,并且我们通常想要标记某些词作为重点或者表示某种程度上的不同。
可以使用em(emphasis)元素来标记这样的情况,浏览器默认风格为斜体:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>我<em>很高兴</em>见到<em>你</em></p>
</body>
</html>
在 HTML 中我们还可以使用<strong>(strong importance)元素来标记这样的请况,浏览器默认风格为粗体:
<p>希望你明天<strong>不迟到</strong></p>
注意:为了不同的字体风格,我们应该使用元素和一些 CSS 的样式。
HTML 引用
短引用
HTML <q> 元素定义短的引用。
浏览器通常会为 <q> 元素包围引号。
<p>WWF 的目标是:<q>构建人与自然和谐共存的世界。</q></p>
长引用
HTML <blockquote> 元素定义被引用的节。
浏览器通常会对 <blockquote> 元素进行缩进处理。
<p>以下内容引用自 WWF 的网站:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来,WWF 一直致力于保护自然界的未来。
世界领先的环保组织,WWF 工作于 100 个国家,
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
缩略词
HTML <abbr> 元素定义缩写或首字母缩略语。
对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
定义
HTML <dfn> 元素定义项目或缩写的定义。
<dfn> 的用法,按照 HTML5 标准中的描述,有点复杂:
1. 如果设置了 <dfn> 元素的 title 属性,则定义项目:
<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>
2. 如果 <dfn> 元素包含具有标题的 <abbr> 元素,则 title 定义项目:
<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>
3. 否则,<dfn> 文本内容即是项目,并且父元素包含定义。
<p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>
注释:如果您希望简而化之,请使用第一条,或使用 <abbr> 代替。
联系信息
HTML <address> 元素定义文档或文章的联系信息(作者/拥有者)。
此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
<address>
Written by Donald Duck.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
著作标题
HTML <cite> 元素定义著作的标题。
浏览器通常会以斜体显示 <cite> 元素。
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
双向重写
HTML <bdo> 元素定义双流向覆盖(bi-directional override)。
<bdo> 元素用于覆盖当前文本方向:
<bdo dir="rtl">This text will be written from right to left</bdo>