版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/GongchuangSu/article/details/53939209
HTML 链接(超链接)
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
可以通过使用<a>
标签在 HTML 中创建链接,有两种使用<a>
标签的方式:
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
URL 格式
格式说明:
- 协议(protocol):指定使用的传输协议,如https、http、file等
- 主机名(host):指存放资源的服务器的域名系统(DNS)主机名或IP地址
- 端口号(port):整数,可选,省略时使用方案的默认端口,各种传输协议都有默认的端口号,如http的默认端口为80
- 路径(path):由零或多个“/”符号隔开的字符串,一般用来表示主机上的一个目录或文件地址
- 查询(query):可选,用于给动态网页(如使用CGI、ISAPI、PHP/JSP/ASP/ASP。NET等技术制作的网页)传递参数,可有多个参数,用“&”符号隔开,每个参数的名和值用“=”符号隔开
- 信息片段(fragment):字符串,用于指定网络资源中的片断。例如一个网页中有多个名词解释,可使用fragment直接定位到某一名词解释
HTML 链接语法
<a href="http://www.w3.org">W3C</a>
说明 :
href
属性规定链接的目标- “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
页面内链接(锚点)
name
属性规定锚点的名称。当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接。
<h1>锚点</h1>
<p><a href="#test">到test</a></p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p id="test">test</p>
<p><a href="#">回顶部</a></p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
说明:可以使用
id
属性来代替name
属性,命名锚同样有效
链接目标
通过target
属性,可以定义被链接的文档在何处显示。
值 | 描述 |
---|---|
_blank | 在新窗口中打开被链接文档 |
_self | 默认。在相同的框架中打开被链接文档 |
_parent | 在父框架集中打开被链接文档 |
_top | 在整个窗口中打开被链接文档 |
framename | 在指定的框架中打开被链接文档 |
<a href="http://www.w3.org" target="_self">W3C(当前窗口)</a>
<a href="http://www.w3.org" target="_blank">W3C(新窗口)</a>
<a href="http://www.w3.org" target="abc">W3C(abc)</a>
<a href="http://www.example.com" target="abc">Example(abc)</a>
相对路径和绝对路径
链接中的特殊符号及其代表的意义
符号 | 描述 |
---|---|
. |
代表目前所在目录,相对路径 |
.. |
代表上一级目录,相对路径 |
../../ |
代表上一级目录的上一级目录,相对路径 |
/ |
代表根目录,绝对路径 |
在使用相对路径时,使用
.
来表示当前目录,使用..
来表示当前目录的父目录。
HTML 图像
在 HTML 中,图像由 <img>
标签定义,<img>
标签是空标签,只包含属性,没有闭合标签。
定义图像的语法:<img src="url" />
,src
属性的值为图像的URL地址。
<img src="/path/to/img.jpg" alt="替代文字"
width="300" height="200">
说明:
alt
属性规定了图像的替代文本。width
和height
属性设置了图像的大小,其值可以为pixels或%。
<img>
标签通常配合<figure>
标签一起使用来表示图像。
<figure>
标签规定了独立的流内容,如图像、图表、照片、代码等等。
<figure>
<img src="/path/to/img.png" alt="替代文字">
<figcaption>图片说明</figcaption>
</figure>
说明:
<figcaption>
元素为figure
添加标题(caption)
HTML 表格
表格由 <table>
标签来定义。每个表格均有若干行(由 <tr>
标签定义),每行被分割为若干单元格(由 <td>
标签定义)。字母 td
指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格标签
表格 | 描述 |
---|---|
<table> |
定义表格 |
<caption> |
定义表格标题 |
<th> |
定义表格的表头 |
<tr> |
定义表格的行 |
<td> |
定义表格单元 |
<thead> |
定义表格的页眉 |
<tbody> |
定义表格的主体 |
<tfoot> |
定义表格的页脚 |
<col> |
定义用于表格列的属性 |
<colgroup> |
定义表格列的组 |
实例
<table border="1">
<thead>
<tr>
<th>浏览器</th>
<th>渲染引擎</th>
<th>JavaScript 引擎</th>
</tr>
</thead>
<tbody>
<tr>
<th>Chrome</th>
<td>Blink</td>
<td>V8</td>
</tr>
<tr>
<th>Opera</th>
<td>Blink</td>
<td>V8</td>
</tr>
<tr>
<th>Firefox</th>
<td>Gecko</td>
<td>SpiderMonkey</td>
</tr>
<tr>
<th>Edge</th>
<td>EdgeHTML</td>
<td>Chakra</td>
</tr>
</tbody>
</table>
效果
浏览器 | 渲染引擎 | JavaScript 引擎 |
---|---|---|
Chrome | Blink | V8 |
Opera | Blink | V8 |
Firefox | Gecko | SpiderMonkey |
说明:
- 合并行:在
<td>
标签中设置rowspan
属性可以规定单元格可横跨的行数- 合并列:在
<td>
标签中设置colspan
属性可以规定单元格可横跨的列数- 若要设置
<caption>
,其必须是<table>
的第一个元素- 若需要对全部列应用样式,
<colgroup>
标签将会很有用