一、概述

HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。HTML 的全名是“超文本标记语言”（HyperText Markup Language），上个世纪90年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。

浏览器的网页开发，涉及三种技术：HTML、CSS 和 JavaScript。HTML 语言定义网页的结构和内容，CSS 样式表定义网页的样式，JavaScript 语言定义网页与用户的互动行为。

二、组成

网页的 HTML 代码由许许多多不同的标签（tag）构成。学习 HTML 语言，就是学习各种标签的用法。 一个典型的 HTML 代码由主要架构包括如下：和标签两部分

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />   <!--设置网页的元数据。-->
    <meta name = "viewport" content="width=device-width,initial-scale=1.0" />
    <meta http-equiv="X_UE_Compatible" content="ie=edge"/>
    <title>网页标题</title>
  </head>

  <body>

  </body>
</html>

本文选取几个重要的标签进行详细讲述，包括：a 、table 和 img

三、a 标签的用法

链接（hyperlink）是互联网的核心。它允许用户在页面上，从一个网址跳转到另一个网址，从而把所有资源联系在一起。 链接通过<a>标签表示，用户点击后，浏览器会跳转到指定的网址。下面就是一个典型的链接。 维基百科

1

<a href="https://wikipedia.org/">维基百科</a>

上面代码就定义了一个超级链接。浏览器显示“维基百科”，文字下面默认会有下划线，表示这是一个链接。用户点击后，浏览器跳转到href属性指定的网址。

<a>标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。

属性

(1) href

href属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。如下：

1

<a href="#demo">示例</a>

上面代码中，href属性的值是#加上锚点名称。点击后，浏览器会自动滚动，停在当前页面里面demo锚点所在的位置。 href下可以取以下值：

名字 值 功能
网址 https:// http:// //(无协议网址) 最后网址表示继承当前网页协议，自动选择
路径 /a/b/c(绝对路径) a/b/c(相对路径) 获取该网页中其他路径页面文件
伪协议 “javascript：alert(1)” 点击链接直接执行代码
锚点 “#id” 跳转到id所在标签，id为全页面唯一
邮件 “mailto:…" 弹出发邮件应用
电话 “tel:xxx” 自动拨打电话

(2) target

target属性制定如何展示打开的连接。它可以是子制定的窗口中打开，也可以在页面内块<iframe>中打开（现在这个标签已经很少用了） target下可以取以下值：

值 功能
_self 当前窗口打开，这是默认值。
_blank 新窗口打开。
_parent 上层窗口打开，这通常用于从父窗口打开的子窗口，或者<iframe>里面的链接。如果当前窗口没有上层窗口，这个值等同于_self。
_top 顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self。

以下为代码示例：

1
2

<p><a herf="http://foo.com" target="test">foo</a>
<a herf="https://www.exaple.com" target="_blank">示例链接</a>

上面代码中，第一个链接在名叫test的窗口打开。首先点击链接foo，浏览器发现没有叫做test的窗口，就新建一个窗口，起名为test， 第二个链接上面代码点击后，浏览器会新建一个窗口，在该窗口打开链接，并且新窗口没有名字。

(3) download

download属性表明当前链接用于下载，而不是跳转到另一个 URL。 示例如下：

1
2

<a href="demo.txt" download>下载</a>
<a href="foo.exe" download="bar.exe">点击下载</a>

上面代码点击后，会出现下载对话框。如果download属性设置了值，那么这个值就是下载的文件名。

注意，download属性只在链接与网址同源时，才会生效。也就是说，链接应该与网址属于同一个网站。

(4) rel

rel属性说明链接与当前页面的关系。在使用css编码时可以获取链接性质

1

<a href="help.html" rel="help">帮助</a>

上面代码的rel属性，说明链接是当前页面的帮助文档。 下面是一些常见的rel属性的值。

值 功能
alternate 当前文档的另一种形式，比如翻译。
author 作者链接。
bookmark 用作书签的永久地址。
external 当前文档的外部参考文档。
help 帮助链接。
license 许可证链接。
next 系列文档的下一篇。
nofollow 告诉搜索引擎忽略该链接，主要用于用户提交的内容，防止有人企图通过添加链接，提高该链接的搜索排名。
noreferrer 告诉浏览器打开链接时，不要将当前网址作为 HTTP 头信息的Referer字段发送出去，这样可以隐藏点击的来源。
noopener 告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的window.opener属性引用原始窗口，这样就提高了安全性。
prev 系列文档的上一篇。
search 文档的搜索链接。
tag 文档的标签链接。

四、img 标签的用法

<img>标签用于插入图片。它是单独使用的，没有闭合标签。

1

<img src="foo.jpg"/>

上面代码在网页插入一张图片foo.jpg。src属性指定图片的网址，上例是相对 URL，表示图片与网页在同一个目录。 <img>默认是一个行内元素，与前后的文字处在同一行。 <img>可以放在<a>标签内部，使得图片变成一个可以点击的链接。

1
2
3

<a href="example.html">
  <img src="foo.jpg">
</a>

属性

(1) alt

alt属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。

1

<img src="foo.jpg" alt="示例图片">

上面代码中，alt是图片的说明。图片下载失败时，浏览器会在图片位置，显示文字“示例图片”。

(2) height 和 weight

图片默认以原始大小插入网页，width属性和height属性可以指定图片显示时的宽度和高度，单位是像素或百分比。 注意，一旦设置了这两个属性，浏览器会在网页中预先留出这个大小的空间，不管图片有没有加载成功。不过，由于图片的显示大小可以用 CSS 设置，所以不建议使用这两个属性。

一种特殊情况是，width属性和height属性只设置了一个，另一个没有设置。这时，浏览器会根据图片的原始大小，自动设置对应比例的图片宽度或高度。举例来说，图片大小是 800像素 x 800像素，width属性设置成200，那么浏览器会自动将height设成200。

1

<img src="foo.jpg" width="400" height="300">

(3) loading

浏览器的默认行为是，只要解析到标签，就开始加载图片。loading属性改变了这个行为，可以指定图片的懒加载，即图片默认不加载，只有即将滚动进入视口，变成用户可见时才会加载，这样就节省了带宽。 loading属性可以取以下三个值。

值 功能
auto 浏览器默认行为，等同于不使用loading属性。
lazy 启用懒加载。
eager 立即加载资源，无论它在页面上的哪个位置。 
1

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

由于行内图片的懒加载，可能会导致页面布局重排，所以使用这个属性的时候，最好指定图片的高和宽。

五、table 标签的用法

<table>是一个块级容器标签，所有表格内容都要放在这个标签里面。

第一级<caption>

<caption>总是<table>里面的第一个子元素，表示表格的标题。该元素是可选的。

1
2
3

<table>
  <caption>示例表格</caption>
</table>

第二级<thead>、<tbody>、<tfoot>

<thead>、<tbody>、<tfoot>都是块级容器元素，且都是<table>的一级子元素，分别表示表头、表体和表尾。

这三个元素都是可选的。如果使用了<thead>，那么<tbody>和<tfoot>一定在<thead>的后面。如果使用了<tbody>，那么<tfoot>一定在<tbody>后面。

大型表格内部可以使用多个<tbody>，表示连续的多个部分。

第三级 <tr>

<tr>标签表示表格的一行（table row）。如果表格有<thead>、<tbody>、<tfoot>，那么<tr>就放在这些容器元素之中，否则直接放在<table>的下一级。

第四级 <th>，<td>

<th>和<td>都用来定义表格的单元格。其中，<th>是标题单元格，<td>是数据单元格。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<table>
  <tr>
    <th>学号</th><th>姓名</th>
  </tr>
  <tr>
    <td>001</td><td>张三</td>
  </tr>
  <tr>
    <td>002</td><td>李四</td>
  </tr>
</table>

上面代码中，表格一共有三行。第一行是标题行，所以使用<th>；第二行和第三行是数据行，所以使用<td>。

六 结语

html标签有上百个，想一一记录但是篇幅有限，这里仅介绍其中几个重要的标签，如果需要学习更多标签或前端知识，可以前往网道网站上去学习，这里的资源经常更新新,非常有效~