Web 前端学习笔记之 HTML 入门（2）

HTML 链接（超链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
可以通过使用<a>标签在 HTML 中创建链接，有两种使用<a>标签的方式：

1. 通过使用 href 属性 - 创建指向另一个文档的链接
2. 通过使用 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>

说明 ：

1. href 属性规定链接的目标
2. “链接文本” 不必一定是文本。图片或其他 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

说明：

1. 合并行：在<td>标签中设置rowspan属性可以规定单元格可横跨的行数
2. 合并列：在<td>标签中设置colspan属性可以规定单元格可横跨的列数
3. 若要设置<caption>，其必须是<table>的第一个元素
4. 若需要对全部列应用样式，<colgroup>标签将会很有用

参考资料

1. w3school