HTML基础笔记

前端学习 评论

HTML简介

HTML概述

HTML（HyperText Markup Language），超文本标记语言。最大的特点是支持超链接，从而构成了整个互联网。

浏览器访问网站，其实就是从服务器下载HTML代码，然后渲染出网页。

浏览器的网页开发，涉及三种技术，HTML、CSS、JavaScript。

HTML语言定义网页的结构和内容

CSS样式表定义网页的样式

JavaScript语言定义网页与用户的互动行为

最基本的网页HTMl代码

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <mata charset="utf-8">
    <title>网页标题</title>
</head>
<body>
    <p>Hello World！</p>
</body>
</html>

网页基本概念

标签

网页的HTMl代码由许多不同的标签（tags）构成，学习HTMl语言，就是学习各种标签的用法。

标签大小写不敏感，通常用小写

标签分为成对出现的和单独出现：

成对出现的：

<html></html>、<head></head>、<h></h>、<p></p>、<div></div>、更多标签见文本标签

单独出现的：

<!doctype>、<meta>、<img>、更多标签见文本标签

元素

浏览器渲染网页时，把HTML源码解析为标签树，每个标签是树的一个节点（node），节点被称为网页元素。标签和元素基本上是同一词，标签是从源码角度看，元素是从变成角度看。比如，<p>标签对应网页的p元素

所有元素可以分为两类：块级元素（block）和行内元素（inline）

块级元素： 默认占据一个独立区域，在网页上自动另起一行，占据100%宽度

<p>、<blockquote>、<address>、<pre>、、更多标签见文本标签

行内元素： 默认与其他元素在同一行，不产生换行

<span>、<strong>、<em>、<sub>、<u>、<span>、<s>、<code>、<mark>、、更多标签见文本标签

属性

属性（attribute）是标签的额外信息，使用空格将某一属性与标签名及其他属性分隔

属性可以使用等号指定属性值、属性名大小写不敏感、属性值一般放在双引号中

HTML提供大量属性，用来定制标签的行为，详情请看《元素的属性》篇

网页的基本标签

<!doctype>

通常作为网页的第一个标签，表示文档类型， 告诉浏览器如何解析网页，通常该标签采用完全大写的形式，以便区别于正常的HTML标签，因为<!doctype>本质上不是标签，更像一个处理指令

<html>

<html>标签是网页的顶层容器，即标签树结构的顶层节点，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个<html>标签。

该标签的lang属性，表示网页内容默认的语言。

<head>标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染提供额外信息。

<meta>

<meta>标签用于设置或说明网页的元数据，必须放在<head>里面。一个<meta>标签就是一项元数据，网页可以有多个<meta>。<meta>标签约定放在<head>内容的最前面。

<meta>的五个属性：

（1）charset

指定网页的编码方式，一般应采用utf-8

（2）name属性，content属性

<meta>标签的name属性表示元数据的名字，content属性表示元数据的值。它们合在一起使用，就可以为网页指定一项元数据。

1
2
3
4
5
6
7
8
<head>
    <!--网页内容描述-->
    <meta name="description" content="HTML 语言入门"> 
    <!--网页内容关键字-->
    <meta name="keywords" content="HTML，教程">
    <!--网页作者-->
    <meta name="author" content="张三">
</head>

其他元数据如：

1
2
3
4
5
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="Application Name">
<meta name="generator" content="program">
<meta name="subject" content="your document's subject">
<meta name="referrer" content="no-referrer">

（3）http-equiv属性，content属性

<meta>标签的http-equiv属性用来覆盖 HTTP 回应的头信息字段，content属性是对应的字段内容。这两个属性与 HTTP 协议相关，属于高级用法.

1
2
3
4
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta http-equiv="Content-Type" content="Type=text/html; charset=utf-8">
<meta http-equiv="refresh" content="30">
<meta http-equiv="refresh" content="30;URL='http://website.com'">

<title>

<title>标签用于指定网页的标题，会显示在浏览器窗口的标题栏。

搜索引擎根据这个标签，显示每个网页的标题。它对于网页在搜索引擎的排序，有很大的影响，应该精心安排，反映网页的主题。

<title>标签的内部，不能再放置其他标签，只能放置无格式的纯文本。

空格和换行

HTML有自己的空格处理规则，标签内容的头部和尾部空格一律忽略不计，内容中间的空格及换行不论多少，均合并为一个空格（换行替换为空格，空格合并为一个）

URL简介

URL概述

URL（Uniform Resource Locator），统一资源定位符，就是我们通常说的网址。表示各种互联网资源的地址。

资源： 互联网上的各种文件，如网页、图像、音频、视频、脚本等

一个URL对应一个资源，但一个资源可以对应多个URL

网页可以通过“链接”（link），包含其他URL，实现URL之间的跳转

网址的组成部分

URL 由多个部分组成。下面是一个比较复杂的 URL，实际的 URL 通常不会有这么多部分。

1
https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor

协议

协议（scheme）是浏览器请求服务器资源的方法，互联网支持多种协议，如：

http为互联网资源访问的协议，现在多用https（http的加密版本），其后面紧跟一个冒号和两个斜杠(://)

mailto为邮件地址协议，后面只有一个冒号，如mailto:foo@example.com

主机

主机（host）是资源所在的网站或服务器的名字，又称为域名。上例的主机是www.example.com。

有些主机没有域名，只有 IP 地址，比如192.168.2.15。这种情况常常出现在局域网。

端口

同一个域名下面可能同时包含多个网站，他们之间通过端口（port）区分。http协议的默认端口为80，https默认端口为443，端口紧跟在域名后面，两者之间使用冒号分隔，如www.example.com:80

路径

路径（path）指资源在网站的位置。

互联网早期，路径是真实存在的物理位置，现在由于服务器可以模拟这些位置，所以路径只是虚拟位置。

通常，服务器会默认跳转到路径下的index.html文件，这取决于服务器的设置。

查询参数

查询参数（parameter）是提供给服务器的额外信息。参数的位置在路径后面，两者用?分隔。

查询参数可以有一组或多组。每组参数都是键值对（key-value pair）的形式，同时具有键名(key)和键值(value)，它们之间使用等号（=）连接。比如，key1=value就是一个键值对，key1是键名，value1是键值。

多组参数之间使用&连接，比如key1=value1&key2=value2。

锚点

锚点（anchor）是网页内部的定位点，使用#加上锚点名称，放在网址的最后面，浏览器加载后，会自动滚动到锚点所在位置。

锚点名称通过网页元素的id属性命名，详见《元素的属性》一章

URL字符

URL的各组成部分，只能使用以下字符：

  • 26个英文字母（包括大小写）
  • 10个阿拉伯数字
  • 连词号（-）
  • 句点（.）
  • 下划线（_）

除此之外，还有18个字符为URL保留字符，出现在特定位置，比如定位锚点的#，查询参数的?，若路径中出现这些字符，需要进行转义，方法为在这些字符的十六进制 ASCII 码前面加上百分号（%）

中文字符会在浏览器请求中自动完成转义，每个中文变为三个字节的utf-8码（如中变为e4b8ad），之后进行转义%e4%b8%ad。这也是为什么有些URL看起来很长且带有很多%，因为每个中文都要变为9个字符。

绝对URL和相对URL

若超链接中使用http等地址，则为绝对URL，直接跳转到相应位置。

对于同一站点下的资源，可以在超链接中设置相对位置，访客相当于在同一网址下跳转。

<base>

<base>标签指定网页内所有相对URL的基准，整张网页只能有一个<base>标签，且放在<head>标签里面，比如：

1
2
3
<head>
<base href="https://www.example.com/files/" target="_blank">
</head>

注意，<base>标签必须至少具有href属性或target属性之一。

元素的属性

元素属性简介

网页元素的属性（attribute）可以定制元素的行为，不同的属性会导致元素有不同的行为。元素属性的写法是 HTML 标签内部的 “键值对”。

属性名与标签名一样，不区分大小写，lang和LANG是同一个属性。

属性值最好统一使用双引号，某些属性值可以不使用引号，但不建议这样写。

有些属性是不二属性，即属性值是个布尔值，只有“打开”和“关闭”两种情况，这时如果只写属性名，表示打开该属性（即属性值为“true”）

1
2
3
4
<form action="" method="get">
	测试：<input type="text" required="required">
	<input type="submit">
</form>

如上所示，执行提交时，若输入为空，会弹出提示

全局属性

全局属性（global attributes）是所有元素都可以使用的属性。可以把该属性加到任意网页元素上，不过有些属性对某些元素可能不产生意义。

id

id属性是元素在网页内的唯一标识符，因此id在整个网页是唯一的，同一个页面不能有两个相同的id属性。另外，id属性的值不得包含空格。

id属性的值可以当做URL的锚点。

class

class属性用来对网页元素进行分类。如果不同元素的class属性值相同，就表示它们是一类的。

1
2
3
<p class="para"></p>
<p></p>
<p class="para"></p>

上面代码中，第一个<p>和第三个<p>是一类，因为它们的class属性相同。

元素可以同时具有多个 class，它们之间使用空格分隔。

1
<p class="p1 p2 p3"></p>

上面的p元素同时具有p1、p2、p3三个 class。

title

title属性用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。

1
2
3
4
5
6
7
<body>
    <form  method="get">
        测试：<input type="text" required="required">
        <input type="submit"><br>
    </form>
    <p title="版权说明">本站内容使用创意共享许可证，可以自由使用。</p>
</body>

上面代码中，title属性解释了这一块内容的目的。鼠标悬停在上面时，浏览器会显示一个浮动提示。一旦鼠标移开，提示就会消失。

tabindex

对标签设置该属性后，可以使用TAB依次进行网页焦点的跳转，对于需要输入账号密码的元素，可以方便的直接进行输入而不需要鼠标点击。

网页的语义结构

语义简介

HTML标签的名称都带有语义（semantic），随意使用语义标签，有些虽然不会报错，但往往造成网页逻辑结构混乱。语义良好的网页，天然具有良好的结构，对于开发者易读易写，容易维护，也能帮助计算机更好地处理网页内容。

常用标签

<header>标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。

如果用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在<header>里面。

1
2
3
4
5
6
7
8
9
10
11
12
<header>
  <h1>公司名称</h1>
  <ul>  #<ul>表示无序列表（不用1、2、3的列表）\<ol>表示有序列表
    <li><a href="/home">首页</a></li>  #<li>表示列表前的标识符，无序列表中是黑点，有序列表中变为数字
    <li><a href="/about">关于</a></li>
    <li><a href="/contact">联系</a></li>
  </ul>
  <form target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

如果<header>用在文章的头部，则可以把文章标题、作者等信息放进去。

1
2
3
4
5
6
<article>
  <header>
    <h2>文章标题</h2>
    <p>张三，发表于2010年1月1日</p>
  </header>
</article>

由于<header>可以用在多种场景，所以一个页面可能包含多个<header>，但是一个具体的场景里面只能包含一个，比如网页的页眉只能有一个。另外，<header>里面不能包含另一个<header>或<footer>。

<footer>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息。

1
2
3
4
5
<body>
  <footer>
    <p>© 2018 xxx 公司</p> #版权信息
  </footer>
</body>

<footer>也可以放在文章里面。

1
2
3
4
5
6
7
8
<article>
  <header>
    <h1>文章标题</h1>
  </header>
  <footer>
    <p>© 禁止转贴</p>
  </footer>
</article>

<footer>不能嵌套，即内部不能放置另一个<footer>，也不能放置<header>。

<main>

<main>标签表示页面的主体内容，一个页面只能有一个<main>。

1
2
3
4
5
6
7
8
<body>
<header>页眉</header>
<main>
  <article>文章</article>
</main>
<aside>侧边栏</aside>
<footer>页尾</footer>
</body>

上面代码就是最典型的页面结构。

注意，<main>是顶层标签，不能放置在<header>、<footer>、<article>、<aside>、<nav>等标签之中。

另外，功能性区块（比如搜索栏）不适合放入<main>，除非当前页面就是搜索页面。

<aside>

<aside>标签用来放置与网页或文章主要内容间接相关的部分。网页级别的<aside>，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的<aside>，可以用来放置补充信息、评论或注释。

下面是网页级别的<aside>的例子。

1
2
3
4
<body>
  <main>主体内容</main>
  <aside>侧边栏</aside>
</body>

下面是文章评注的例子。

1
2
3
4
5
<p>第一段</p>

<aside>
  <p>本段是文章的重点。</p>
</aside>

<section>

<section>标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如<article>可以包含多个<section>。<section>总是多个一起使用，一个页面不能只有一个<section>。

1
2
3
4
5
6
7
8
9
10
11
<article>
  <h1>文章标题</h1>
  <section>
    <h2>第一章</h2>
    <p>...</p>
  </section>
  <section>
    <h2>第二章</h2>
    <p>...</p>
  </section>
</article>

上面代码中，<article>包含了两个<section>，代表两章。

<section>很适合幻灯片展示的页面，每个<section>代表一个幻灯片。

一般来说，<section>都应该有标题，即包含<h1>~<h6>标签。多个<section>可以放置在同一个<article>里面，一个<section>里面也可能包含多个<article>，这取决于<section>和<article>在当前页面的含义。

<nav>标签用于放置页面或文档的导航信息。

1
2
3
4
5
6
7
<nav>
  <ol>
    <li><a href="item-a">商品 A</a></li>
    <li><a href="item-b">商品 B</a></li>
    <li>商品 C</li>
  </ol>
</nav>

一般来说，<nav>往往放置在<header>里面，不适合放入<footer>。另外，一个页面可以有多个<nav>，比如一个用于站点导航，另一个用于文章导航。

<nav>里面通常是列表，但也可以放置其他标签。

<article>

<article>标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题（<h1>到<h6>）。

1
2
3
4
<article>
  <h2>文章标题</h2>
  <p>文章内容</p>
</article>

一个网页可以包含一个或多个<article>，比如包含多篇文章。

<h1>~<h6>

HTML 提供了6个标签，用来表示文章的标题。按照标题的等级，一共分成六级。

  • <h1>：一级标题
  • <h2>：二级标题
  • <h3>：三级标题
  • <h4>：四级标题
  • <h5>：五级标题
  • <h6>：六级标题

<h1>是最高级别的标题，<h6>是最低级别的标题。下一级标题都是上一级标题的子标题，比如，一个<h1>后面可以有多个<h2>，每个<h2>后面又可以有多个<h3>。

1
2
3
4
5
6
7
8
<body>
  <h1>JavaScript 语言介绍</h1>
    <h2>概述</h2>
    <h2>基本概念</h2>
      <h3>网页</h3>
      <h3>链接</h3>
    <h2>主要用法</h2>
</body>

上面代码，通过章节标题，清晰地表明了文章的主体结构。具体的内容，就可以写在章节标题的下面。

标题不应该越级，比如h1下面直接写h3。虽然这样不会报错，但会导致文章失去清晰的章节结构。

默认情况下，浏览器会粗体显示标题。h1的字号比h2大，h2比h3大，以此类推。

<hgrop>

如果主标题包含多级标题（比如带有副标题），那么可以使用<hgroup>标签，将多级标题放在其中。

1
2
3
4
5
<hgroup>
  <h1>Heading 1</h1>
  <h2>Subheading 1</h2>
  <h2>Subheading 2</h2>
</hgroup>

注意，<hgroup>只能包含<h1>~<h6>，不能包含其他标签。

文本标签

文本标签简介

历史上，网页的主要功能是文本展示。所以，HTML 提供了大量的文本处理标签。

<div>

是一个通用标签，表示一个区块（division）。它没有语义，如果网页需要一个块级元素容器，又没有其他合适的标签，就可以使用这个标签。

它的最常见用途就是提供 CSS 的钩子，用来指定各种样式。所以在早期，下面层层包裹的

就很常见。

1
2
3
4
5
6
7
<div class="main">
  <div class="article">
    <div class="title">
      <h1>文章标题</h1>
    </div>
  </div>
</div>

上面代码读起来很费力，因为不带有语义。后来，HTML 5 就提出了语义标签，改进了上面的代码。

1
2
3
4
5
6
7
<main>
  <article>
    <header>
      <h1>文章标题</h1>
    </header>
  </article>
</main>

只要样式上需要多个块级元素组合在一起，就可以使用<div>。但是，这应该是最后的措施，带有语义的块级标签（比如<article>、<section>、<aside>、<nav>等）始终应该优先使用，当且仅当没有其他语义元素合适时，才可以使用<div>。

<span>

<span>是一个通用目的的行内标签（即不会产生换行），不带有任何语义。它通常用作 **CSS 样式的钩子，**如果需要对某些行内内容指定样式，就可以把它们放置在<span>。

1
<p>这是一句<span>重要</span>的句子。</p>

<br>-换行

<br>让网页产生一个换行效果。该标签是单独使用的，没有闭合标签。

1
hello<br>world

注意，块级元素的间隔，不要使用<br>来产生，而要使用 CSS 指定。

1
2
3
4
<p>第一段</p>
<br>
<br>
<p>第二段</p>

上面的代码希望段落之间有两个换行，这时不应该使用<br>，而应该使用 CSS。

<wbr>-可选断行

<wbr>标签表示一个可选的断行。如果一行的宽度足够，则不断行；如果宽度不够，需要断行，就在<wbr>的位置的断行。

它是为了防止浏览器在一个很长的单词中间，不正确地断行或者不断行，所以事先标明可以断行的位置，主要用于欧洲一些单词很长的语言或者 URL 的断行。

1
2
3
<p>
Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz
</p>

上面代码是一个很长的德语单词，为了防止不正确断行，事先用<wbr>告诉浏览器，可以选择在哪里断行。

<hr>-水平线

<hr>用来在一篇文章中分隔两个不同的主题，浏览器会将其渲染为一根水平线。该标签是单独使用的，没有闭合标签。

1
2
3
<p>第一个主题</p>
<hr>
<p>第二个主题</p>

该标签是历史遗留下来的，建议尽量避免使用。主题之间的分隔可以使用<section>，如果想要水平线的效果，可以使用 CSS。

<pre>-块级元素

<pre>是一个块级元素，表示保留原来的格式（preformatted），即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。

1
2
3
<pre>hello

   world</pre>

上面代码中，换行和连续空格都会由于<pre>标签，而被保留下来，浏览器按照原样输出。

注意，HTML 标签在<pre>里面还是起作用的。<pre>只保留空格和换行，不会保留 HTML 标签。

1
<pre><strong>hello world</strong></pre>

上面代码中，<pre>标签的内容会加粗显示。

<strong>,<b>-加粗

<strong>是一个行内元素，表示它包含的内容具有很强的重要性，需要引起注意。浏览器会以粗体显示内容。

<b>与<strong>很相似，也表示它包含的内容需要引起注意，浏览器会加粗显示。它是 Boldface 的缩写。

1
2
<p>开会时间是<strong>下午两点</strong>。</p>
<p>开会时间是<b>下午两点</b>。</p>

<b>与<strong>的区别在于，由于历史原因，它没有语义，是一个纯样式的标签，违反了语义与样式分离的原则，因此**不建议使用，**应该优先使用<strong>标签。

<em>,<i>-斜体

<em>是一个行内标签，表示强调（emphasize），浏览器会以斜体显示它包含的内容。

1
<p>我们<em>已经</em>讨论过这件事情了。</p>

虽然浏览器通常会以斜体显示<em>，但无法保证一定如此，所以最好还是用 CSS 指定一下这个标签的样式。

<i>标签与<em>相似，也表示与其他地方有所区别，浏览器会以斜体显示。它是 Italic 的缩写。

1
<p>我心想，这件事是<i>真的</i>吗？</p>

<i>标签的语义不强，更接近是一个纯样式的标签，建议优先使用<em>标签代替它。

<sub>,<sup>,<var>-角标

<sub>标签将内容变为下标，<sup>标签将内容变为上标。它们都是行内元素，主要用于数学公式、分子式等。

1
<p>水分子是 H<sub>2</sub>O。</p>

<var>标签表示代码或数学公式的变量。

1
2
3
4
5
6
7
8
<p>勾股定理是
  <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup>
。</p>
<!--也可以只用一对<var>-->
<p>
    勾股定理是：<br>
    <var>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></var>
</p>

<u>,<s>-下划线、删除线

<u>标签是一个行内元素，表示对内容提供某种注释，提醒用户这里可能有问题，基本上只用来表示拼写错误。浏览器默认以下划线渲染内容。

1
2
3
<p>
一个容易写错的成语是把<em>安分守己</em>写成<u>安份守己</u>。
</p>

注意，<u>会产生下划线，由于链接也默认带有下划线，所以必须非常小心使用<u>标签，避免用户误以为可以点击。万一确有必要使用，最好使用 CSS 改变<u>的默认样式。

<s>标签是一个行内元素，为内容加上删除线。

1
<p>今天特价商品：<s>三文鱼</s>（售完）</p>

<blockquote>,<cite>,<q>-块级元素引用

<blockquote>是一个块级标签，表示引用他人的话。浏览器会在样式上，与正常文本区别显示（整儿区块缩进两格）。

1
2
3
<blockquote cite="https://quote.example.com">
  <p>天才就是 1% 的天赋和99%的汗水。</p>
</blockquote>

<blockquote>标签有一个cite属性，它的值是一个网址，表示引言来源，不会显示在网页上。

<cite>标签表示引言出处或者作者，浏览器默认使用斜体显示这部分内容。

1
2
3
4
<blockquote cite="https://quote.example.com">
  <p>天才就是 1% 的天赋和99%的汗水。</p>
</blockquote>
<cite>-- 爱迪生</cite>

（个人觉得<cite>标签应该放在<blockquote>里面用）

1
2
3
4
<blockquote cite="https://quote.example.com">
  <p>天才就是 1% 的天赋和99%的汗水。</p>
  <cite>-- 爱迪生</cite>
</blockquote>

<q>是一个行内标签，也表示引用。它与<blockquote>的区别，就是它不会产生换行。

1
2
3
4
<p>
  莎士比亚的《哈姆雷特》有一句著名的台词：
  <q cite="https://quote.example.com">活着还是死亡，这是一个问题。</q>
</p>

上面例子中，引言部分跟前面的说明部分是在同一行里面。

另外，跟<blockquote>一样，<q>也有cite属性，表示引言的来源网址。

注意，浏览器默认会斜体显示<q>的内容，并且会自动添加半角的双引号。所以，引用中文内容时要小心。

（经测试，自动添加半角双引号✔，斜体✖）

<code>

<code>标签是一个行内元素，表示标签内容是计算机代码，浏览器默认会以等宽字体显示。

1
<code>alert()</code>的作用是让网页弹出一个提示框。

如果要表示多行代码，<code>标签必须放在<pre>内部。<code>本身仅表示一行代码。

1
2
3
4
5
6
<pre>
<code>
  let a = 1;
  console.log(a);
</code>
</pre>

<kbd>,<samp>-行内元素、-输入输出

<kbd>标签是一个行内元素，原意是用户从键盘输入的内容，现在扩展到各种输入，包括语音输入。浏览器默认以等宽字体显示标签内容。

1
<p>Windows 可以按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> 重启。</p>

<kbd>可以嵌套，方便指定样式。

1
2
3
<p>Windows 可以按下
<kbd> <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> </kbd>
重启。</p>

<samp>标签是一个行内元素，表示计算机程序输出内容的一个例子。浏览器默认以等宽字体显示。

1
2
3
<p>如果使用没有定义的变量，浏览器会报错：
<samp>Uncaught ReferenceError: foo is not defined</samp>。
</p>

<mark>,-黄色高亮

<mark>是一个行内标签，表示突出显示的内容。Chrome 浏览器默认会以亮黄色背景，显示该标签的内容。

1
<p>Windows 可以按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> 重启。</p>

除了标记感兴趣的文本，<mark>还可以用于在搜索结果中，标记出匹配的关键词。

注意，不要只为了高亮的效果，而使用这个标签，因为不能保证浏览器的处理方式。如果要保证高亮，还是要使用 CSS 样式。

<small>-小一号字号

<small>是一个行内标签，浏览器会将它包含的内容，以小一号的字号显示，不需要使用 CSS 样式。它通常用于文章附带的版权信息或法律信息。

1
2
<p>文章正文</p>
<p><small>以上内容使用创意共享许可证。</small></p>

<time>,<data>-时间日期

<time>是一个行内标签，为跟时间相关的内容提供机器可读的格式。（不会显示出来）

1
2
<p>运动会预定<time datetime="2015-06-10">下周三</time>举行。</p>
<p>音乐会在<time datetime="20:00">晚上八点</time>开始。</p>

<time>的datetime属性，用来指定机器可读的日期，可以有多种格式。

  • 有效年份：2021
  • 有效月份：2021-11
  • 有效日期：2021-11-18
  • 无年份的日期：11-18
  • 年度的第几周：2021-W47
  • 有效时间：14:54、14:54:39、14:54:39.929
  • 日期和时间：2021-11-18T14:54:39.929

<data>标签与<time>类似，也是提供机器可读的内容，但是用于非时间的场合。

1
<p>本次马拉松比赛第一名是<data value="39">张三</data></p>。

<samp>标签是一个行内元素，表示计算机程序输出内容的一个例子。浏览器默认以等宽字体显示。

1
2
3
<p>如果使用没有定义的变量，浏览器会报错：
<samp>Uncaught ReferenceError: foo is not defined</samp>。
</p>

<address>-时间日期

<address>标签是一个块级元素，表示某人或某个组织的联系方式。

1
2
3
4
5
<p>作者的联系方式：</p>
<address>
  <p><a href="mailto:foo@example.com">foo@example.com</a></p>
  <p><a href="tel:+555-34762301">+555-34762301</a></p>
</address>

该标签有几个注意点。

（1）如果是文章里提到的地址（比如提到搬家前的地址），而不是联系信息，不要使用<address>标签。

（2）<address>的内容不得有非联系信息，比如发布日期。

（3）<address>不能嵌套，并且内部不能有标题标签（<h1>~<h6>），也不能有<article>、<aside>、<section>、<nav>、<header>、<footer>等标签。

（4）通常，<address>会放在<footer>里面，下面是一个例子。

1
2
3
4
5
6
<footer>
<address>
 文章的相关问题请联系<a href="mailto:zhangsan@example.com">张三
 McClure</a>。
</address>
</footer>

<abbr>-缩写标志

<abbr>标签是一个行内元素，表示标签内容是一个缩写。它的title属性给出缩写的完整形式，或者缩写的描述。鼠标悬停在该元素上方时，title属性值作为提示，会完整显示出来。

1
<abbr title="HyperText Markup Language">HTML</abbr>是一种编程语言

注意，某些浏览器可能对该标签提供圆点下划线。

<ins>,<del>-插入、删除标志

<ins>标签是一个行内元素，表示原始文档添加（insert）的内容。<del>与之类似，表示删除（delete）的内容。它们通常用于展示文档的删改。

1
2
<del><p>会议定于5月8日举行。</p></del>
<ins><p>会议定于5月9日举行。</p></ins>

浏览器默认为<del>标签的内容加上删除线，为<ins>标签的内容加上下划线。

这两个标签都有以下属性。

  • cite：该属性的值是一个 URL，表示该网址可以解释本次删改。
  • datetime：表示删改发生的时间。
1
2
3
<ins cite="./why.html" datetime="2018-05">
  <p>项目比原定时间提前两周结束。</p>
</ins>

<dfn>-术语

<dfn>是一个行内元素，表示标签内容是一个术语（definition），本段或本句包含它的定义。

1
2
3
4
<p>
通过 TCP/IP 协议连接的全球性计算机网络，叫做
<dfn title="全球性计算机网络">Internet</dfn>。
</p>

某些时候，术语本身是一个缩写，这时<dfn>和<abbr>可以结合使用。

1
2
3
4
<p>
<dfn><abbr title="acquired immune deficiency syndrome">AIDS</abbr></dfn>
的全称是获得性免疫缺陷综合征。
</p>

<ruby>-语音注释

<ruby>标签表示文字的语音注释，主要用于东亚文字，比如汉语拼音和日语的片假名。它默认将语音注释，以小字体显示在文字的上方。

1
2
3
4
<ruby>
汉<rp>(</rp><rt>han</rt><rp>)</rp>
字<rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

<bdo>,<bdi>-阅读方向

大部分文字的阅读方向是从左到右，但是有些文字的方向是从右到左，比如阿拉伯语、希伯来语等。<bdo>标签是一个行内元素，表示文字方向与网页主体内容的方向不一致。

1
<p>床前明月光，<bdo dir="rtl">霜上地是疑</bdo>。</p>

<bdo>的dir属性，指定具体的文字方向。它有两个值，ltr表示从左到右，rtl表示从右到左。

<bdi>标签用于不确定文字方向的情况。比如，网页有一个部分是用户输入的内容，但是不知道输入内容的文字方向。这种情况就可以使用<bdi>标签，告诉浏览器，不确定文字的方向，由浏览器自己决定。

1
<p><bdi>床前明月光，疑是地上霜。</bdi></p>

文本标签总结

HTML 5中不再以标签样式作为区分，而是以标签功能作为不同标签的区分项，不同功能的标签可能具有相同的样式或属性

  • 等宽显示：<pre>、<code>、<kbd>、<samp>

  • <blockquote>块级元素，整个元素块首行缩进2个字符

  • <pre>标签紧跟的内容左对齐直接显示，后面的内容同代码编辑器中的缩进

列表标签

<ol>

<ol>标签是一个有序列表容器（ordered list），会在内部的列表项前面产生数字编号。列表项的顺序有意义时，比如排名，就会采用这个标签。

1
2
3
4
5
<ol>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

<ol>标签内部可以嵌套<ol>标签或<ul>标签，形成多级列表。

1
2
3
4
5
<ol>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

标签属性：

  • reversed属性产生倒序的数字列表。

  • start属性的值是一个整数，表示数字列表的起始编号（从当前样式的第几个开始编号）。

  • type属性指定数字编号的样式。

<ul>

<ul>标签是一个无序列表容器（unordered list），会在内部的列表项前面产生实心小圆点，作为列表符号。列表项的顺序无意义时，采用这个标签。

1
2
3
4
5
<ul>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ul>

<li>

<li>表示列表项，用在<ol>或<ul>容器之中。

有序列表<ol>之中，<li>有一个value属性，定义当前列表项的编号，后面列表项会从这个值开始编号。

1
2
3
4
5
6
<ol>
  <li>列表项 A</li>
  <li value="4">列表项 B</li>
  <li>列表项 C</li>
</ol>
<!--列表编号为：1、4、5-->

<dl>，<dt>，<dd>

<dl>标签是一个块级元素，表示一组术语的列表（description list）。术语名（description term）由<dt>标签定义，术语解释（description detail）由<dd>标签定义。<dl>常用来定义词汇表。

1
2
3
4
5
6
7
8
9
10
<dl>
  <dt>CPU</dt>
  <dd>中央处理器</dd>

  <dt>Memory</dt>
  <dd>内存</dd>

  <dt>Hard Disk</dt>
  <dd>硬盘</dd>
</dl>

图像标签

<img>

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

1
<img src="foo.jpg">

<img>默认是一个行内元素，与前后的文字处在同一行。

标签属性：

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

  • width、height属性指定图片的宽度和高度，不过一般使用css进行设定。

  • loading属性指定图片加载方式。具体取值包括auto、lazy、eager

<figure>、<figcaption>

<figure>标签可以理解为一个图像区块，将图像和相关信息封装在一起。<figcaption>是它的可选子元素，表示图像的文本描述，通常用于放置标题，可以出现多个。

1
2
3
4
<figure>
  <img src="https://example.com/foo.jpg">
  <figcaption>示例图片</figcaption>
</figure>

<picture>

<img>标签的srcset属性和sizes属性分别解决了像素密度和屏幕大小的适配，但如果要同时适配不同像素密度、不同大小的屏幕，就要用到<picture>标签。

<picture>是一个容器标签，内部使用<source>和<img>，指定不同情况下加载的图像。

1
2
3
4
5
6
7
8
9
10
11
<picture>
  <source srcset="homepage-person@desktop.png,
                  homepage-person@desktop-2x.png 2x"
          media="(min-width: 990px)">
  <source srcset="homepage-person@tablet.png,
                  homepage-person@tablet-2x.png 2x"
          media="(min-width: 750px)">
  <img srcset="homepage-person@mobile.png,
               homepage-person@mobile-2x.png 2x"
       alt="Shopify Merchant, Corrine Anestopoulos">
</picture>

上面代码中，<source>标签的media属性给出屏幕尺寸的适配条件，每个条件都用srcset属性，再给出两种像素密度的图像 URL。

响应式图像

网页在不同尺寸的设备上，都能产生良好的显示效果，叫做“响应式设计”（responsive web design）。响应式设计的网页图像，就是“响应式图像”（responsive image）。

<srcset>

srcset属性用来指定多张图像，适应不同像素密度的屏幕。它的值是一个逗号分隔的字符串，每个部分都是一张图像的 URL，后面接一个空格，然后是像素密度的描述符。请看下面的例子。

1
2
3
4
5
6
<img srcset="foo-320w.jpg,
             foo-480w.jpg 1.5x,
             foo-640w.jpg 2x"
     src="foo-640w.jpg">
<!--浏览器根据当前设备的像素密度，选择需要加载的图像。
如果srcset属性都不满足条件，那么就加载src属性指定的默认图像。-->

<size>

像素密度的适配，只适合显示区域一样大小的图像。如果希望不同尺寸的屏幕，显示不同大小的图像，srcset属性就不够用了，必须搭配sizes属性。

1
2
3
4
5
6
7
8
9
10
<img srcset="foo-160.jpg 160w,
             foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1280w"
     sizes="(max-width: 440px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     src="foo-1280.jpg">
<!--浏览器根据当前设备的像素密度，选择需要加载的图像。
然后根据当前屏幕尺寸。调整选取的图片的大小。-->

图像选择

除了响应式图像，<picture>标签还可以用来选择不同格式的图像。比如，如果当前浏览器支持 Webp 格式，就加载这种格式的图像，否则加载 PNG 图像。

1
2
3
4
5
<picture>
  <source type="image/svg+xml" srcset="logo.xml">
  <source type="image/webp" srcset="logo.webp"> 
  <img src="logo.png" alt="ACME Corp">
</picture>

浏览器按照<source>标签出现的顺序，依次检查是否支持type属性指定的图像格式，如果支持就加载图像，并且不再检查后面的<source>标签了。上面例子中，图像加载优先顺序依次为 svg 格式、webp 格式和 png 格式。

链接、多媒体、表

链接

链接（hyperlink）是互联网的核心。它允许用户在页面上，从一个网址跳转到另一个网址，从而把所有资源联系在一起。

链接通过<a>标签表示，用户点击后，浏览器会跳转到指定的网址。

<a>

<a>标签有如下属性。

  • href属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。
  • title属性给出链接的说明信息。
  • target属性指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在<iframe>里面打开。（设置iframe的name属性，target指向该名称即可）
  • rel属性说明链接与当前页面的关系。

邮件链接

链接也可以指向一个邮件地址，使用mailto协议。用户点击后，浏览器会打开本机默认的邮件程序，让用户向指定的地址发送邮件。

1
<a href="mailto:contact@example.com">联系我们</a>

电话链接

如果是手机浏览的页面，还可以使用tel协议，创建电话链接。用户点击该链接，会唤起电话，可以进行拨号。

1
<a href="tel:13312345678">13312345678</a>

<link>标签主要用于将当前网页与相关的外部资源联系起来，**通常放在<head>元素里面。**最常见的用途就是加载 CSS 样式表。

1
<link rel="stylesheet" type="text/css" href="theme.css">

<link>还可以加载网站的 favicon 图标文件。

1
<link rel="icon" href="/favicon.ico" type="image/x-icon">

<link>结合rel、sizes等属性可以为不同访问条件下的设备提供不同的图片

1
2
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">

资源预加载

某些情况下，你需要浏览器预加载某些资源，也就是先把资源缓存下来，等到使用的时候，就不用再从网上下载了，立即就能使用。预处理指令可以做到这一点。

预加载主要有下面五种类型。

  • <link rel="preload">告诉浏览器尽快下载并缓存资源（如脚本或样式表），该指令优先级较高，浏览器肯定会执行。
  • <link rel="prefetch">的使用场合是，如果后续的页面需要某个资源，并且希望预加载该资源，以便加速页面渲染。该指令不是强制性的，优先级较低，浏览器不一定会执行。这意味着，浏览器可以不下载该资源，比如连接速度很慢时。
  • <link rel="preconnect">要求浏览器提前与某个域名建立 TCP 连接。当你知道，很快就会请求该域名时，这会很有帮助。
  • <link rel="dns-prefetch">要求浏览器提前执行某个域名的 DNS 解析。
  • <link rel="prerender">要求浏览器加载某个网页，并且提前渲染它。用户点击指向该网页的链接时，就会立即呈现该页面。如果确定用户下一步会访问该页面，这会很有帮助。

多媒体

<video>

<video>标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示<video>内部的子元素。

1
2
3
4
5
<video controls>
  <source src="example.mp4" type="video/mp4">
  <source src="example.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p>
</video>

<audio>

<audio>标签是一个块级元素，用于放置音频，用法与<video>标签基本一致。

1
2
3
4
5
<audio controls>
  <source src="foo.mp3" type="audio/mp3">
  <source src="foo.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，请直接下载<a href="foo.mp3">音频文件</a>。</p>
</audio>

<track>

<track>标签用于指定视频的字幕，格式是 WebVTT （.vtt文件），放置在<video>标签内部。它是一个单独使用的标签，没有结束标签。

1
2
3
4
<video controls src="sample.mp4">
   <track label="英文" kind="subtitles" src="subtitles_en.vtt" srclang="en">
   <track label="中文" kind="subtitles" src="subtitles_cn.vtt" srclang="cn" default>
</video>

<iframe>

<iframe>标签生成一个指定区域，在该区域中嵌入其他网页。它是一个容器元素，如果浏览器不支持<iframe>，就会显示内部的子元素。

1
2
3
4
5
<iframe src="https://www.example.com"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p><a href="https://www.example.com">点击打开嵌入页面</a></p>
</iframe>

sandbox属性

为防止嵌入的网页执行操作对当前网页/服务器造成损害，可以使用sandbox属性，相当于创建了一个沙箱。

sandbox可以当作布尔属性使用，表示打开所有限制。

1
2
<iframe src="https://www.example.com" sandbox>
</iframe>

loading属性

loading属性可以触发<iframe>网页的懒加载。该属性可以取以下三个值。

  • auto：浏览器的默认行为，与不使用loading属性效果相同。
  • lazy：<iframe>的懒加载，即将滚动进入视口时开始加载。
  • eager：立即加载资源，无论在页面上的位置如何。

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<table>
  <thead>
    <tr>
      <th scope="col">海报名称</th>
      <th scope="col">颜色</th>
      <th colspan="3" scope="colgroup">尺寸</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" scope="rowgroup">Zodiac</th>
      <th scope="row">Full color</th>
      <td>A2</td>
      <td>A3</td>
      <td>A4</td>
    </tr>
    <tr>
      <th scope="row">Black and white</th>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <th scope="row">Sepia</th>
      <td>A3</td>
      <td>A4</td>
      <td>A5</td>
    </tr>
  </tbody>
</table>

scope属性可以取下面这些值。

  • row：该行的所有单元格，都与该标题单元格相关。
  • col：该列的所有单元格，都与该标题单元格相关。
  • rowgroup：多行组成的一个行组的所有单元格，都与该标题单元格相关，可以与rowspan属性配合使用。
  • colgroup：多列组成的一个列组的所有单元格，都与该标题单元格相关，可以与colspan属性配合使用。
  • auto：默认值，表示由浏览器自行决定。

表单

<form>表单基本结构

1
2
3
4
5
<form action="https://example.com/api" method="post">
  <label for="POST-name">用户名：</label>
  <input id="POST-name" type="text" name="user">
  <input type="submit" value="提交">
</form>

<form>中注意的点包括：

  • 各控件的name、id、type、value等属性
  • <fieldset>标签组成一组控件
  • <select>标签搭配<option>
  • <input>、<datalist>标签搭配<option>组成各种表单选择效果

<progress>-进度条

<progress>标签是一个行内元素，表示任务的完成进度。浏览器通常会将显示为进度条。

1
<progress id="file" max="100" value="70"> 70% </progress>

如果省略了value属性，则**进度条会出现滚动，**表明正在进行中，无法知道完成的进度。

<meter>-指示器

<meter>标签是一个行内元素，表示指示器，用来显示已知范围内的一个值，浏览器通常会将其显示为一个不会滚动的指示条。

1
2
<p>烤箱的当前温度是<meter min="200" max="500"
  value="350"> 350 度</meter>。</p>

标签属性包括：

  • min：范围的下限，必须小于max属性。如果省略，则默认为0。
  • max：范围的上限，必须大于min属性。如果省略，则默认为1。
  • value：当前值，必须在min属性和max属性之间。如果省略，则默认为0。
  • low：表示“低端”的上限门槛值，必须大于min属性，小于high属性和max属性。如果省略，则等于min属性。
  • high：表示“高端”的下限门槛值，必须小于max属性，大于low属性和min属性。如果省略，则等于max属性。
  • optimum：指定最佳值，必须在min属性和max属性之间。它应该与low属性和high属性一起使用，表示最佳范围。如果optimum小于low属性，则表示“低端”是最佳范围；如果大于high属性，则表示“高端”是最佳范围；如果在low和high之间，则表示“中间地带”是最佳范围。如果省略，则等于min和max的中间值。
  • form：关联表单的id属性。
1
2
3
4
5
6
<meter id="fuel" name="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

上述代码，因为value=50，处于一般情况，因此指示器（进度条）显示为黄色

教程来自：HTML 教程 - 网道 (wangdoc.com)

枫与风