所有的元素都需要正确的打开和关闭, 这样才能按你所想的方式展现.

开始学习 HTML

块级元素和内联元素

一个块级元素不会嵌套在一个内联元素里面, 但它可能嵌套在另一个块级元素里面.

内联元素不会导致文本换行.

空元素

只有一个标签, 而不包含开始标签, 内容和结束标签, 如 <img>:

1	`<img src="" alt="">`

属性

属性包含元素的额外信息, 这些信息不会出现在实际的内容中 (实际内容指标签之间的文本信息).

<a> 元素可以添加的部分属性如:

href
title
target

布尔属性

布尔属性只能有一个值, 这个值一般与属性名称相同, 如:

1
2
3

<input type="text" disabled="disabled" />
<input type="text" disabled />
<input type="text" />

省略包围属性值的引号

在某些情况下它是被允许的，但是其他情况下会破坏你的标记.

如:

1	`<a href=https://www.mozilla.org>favorite website<a>`

不会有问题, 但加上 title 属性就会出错:

1	`<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>`

此时 title=The 被视作一个属性.

剖析 HTML 文档

<!DOCTYPE html> 是最短的文档声明.

示例:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

HTML 中的空白

无论你在 HTML 元素的内容中使用多少空格（包括一个或多个空白字符或换行），当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减少为一个单独的空格符.

实体引用：在 HTML 中包含特殊字符

用特殊的编码表示 HTML 语法中的一些字符:

每个字符引用以符号 & 开头, 以分号 ; 结束.

HTML 注释

用  包裹, 如:

1
2
3

<p>我在注释外！</p>

<!-- <p>我在注释内！</p> -->

HTML 元信息

Web 浏览器将使用文档头部 (head) 的信息正确渲染 HTML 文档.

HTML 头部包含 HTML <head> 元素的内容，与 <body> 元素内容不同，页面在浏览器加载后它的内容不会在浏览器中显示，它的作用是保存页面的一些元数据:

<head>
  <meta charset="utf-8" />
  <title>我的测试页面</title>
</head>

添加标题

区分 <h1> 和 <title>:

<h1> (en-US) 元素在页面加载完毕时显示在页面中，通常只出现一次，用来标记页面内容的标题（故事名称、新闻摘要等等）
<title> 元素是一项元数据，用于表示整个 HTML 文档的标题（而不是文档内容）

元数据: 元素

用 <meta> 为一个文档添加元数据.

指定文档中的字符编码

如:

1	`<meta charset="utf-8" />`

设置为拉丁字母表的字符集:

1	`<meta charset="ISO-8859-1" />`

添加作者和描述

name 指定了 meta 元素的类型；说明该元素包含了什么类型的信息。
content 指定了实际的元数据内容。

如:

<meta name="author" content="Chris Mills" />
<meta
  name="description"
  content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications." />

可以看出, 能够设置多个 <meta> 元素.

description 也被使用在搜索引擎显示的结果页中.

其他类型的元数据

如 Facebook 编写的元数据协议 Open Graph Data

Twitter 拥有自己的类型的专有元数据协议 Twitter Cards

增加自定义图标

如添加 favicon (favorites icon)

将图片保存在与网站的索引页面相同的目录中, 以 .ico 格式保存

在 <head> 块中引用:

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

在 HTML 中应用 CSS 和 JavaScript

应用 CSS 和 JavaScript 分别用 <link> 元素和 <script> 元素.

<link> 元素经常位于文档的头部，它有 2 个属性，rel="stylesheet" 表明这是文档的样式表，而 href 包含了样式表文件的路径：
1
<link rel="stylesheet" href="my-css-file.css" />
<script> 元素也应当放在文档的头部，并包含 src 属性来指向需要加载的 JavaScript 文件路径，同时最好加上 defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容。这样你就不会因为 JavaScript 试图访问页面上不存在的 HTML 元素而产生错误。实际上有很多方法来处理在你的页面上加载 JavaScript，但对于现代浏览器来说，这是最可靠的方法（对于其他方法，请阅读脚本加载策略）。
1
<script src="my-js-file.js" defer></script>
注意 <script> 元素不是空元素, 需要一个结束标记.

为文档设定主语言

通过添加 lang 属性到 HTML 开始的标签中来实现:

1
2
3

<html lang="zh-CN">
...
</html>

也可以将文档的分段设置为不同的语言:

1	`<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>`

HTML 文本处理基础

基础: 标题和段落

<p>段落</p>
<h1>标题</h1>

可以让任一元素看起来像一个顶级标题:

1	`<span style="font-size: 32px; margin: 21px 0; display: block;">这是顶级标题吗？</span>`

列表

无序列表

<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

<ul> 为 “unordered list”.

<li> 为 “list”

有序列表

<ol>
  <li>沿这条路走到头</li>
  <li>右转</li>
  <li>直行穿过第一个十字路口</li>
  <li>在第三个十字路口处左转</li>
  <li>继续走 300 米，学校就在你的右手边</li>
</ol>

<ol> 为 “ordered list”.

嵌套列表

如:

<ol>
  <li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀，腌渍半小时。</li>
  <li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调成“综合调味料”。</li>
  <li>鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干油汁备用。</li>
  <li>在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。
    <ul>
      <li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。</li>
      <li>如果你在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。</li>
    </ul>
  </li>
</ol>

重点强调

强调

用 <em> (emphasis) 元素来标记, 如:

1	`<p>我很<em>庆幸</em>你没有<em>迟到</em>。</p>`

其会加上斜体

强烈的重要性

用 <strong> (strong importance) 元素来标记, 如:

1
2
3

<p>这杯液体<strong>毒性很大</strong>。</p>

<p>就指望你了，千万<strong>不要</strong>迟到！</p>

其会标记为粗体 .

斜体字, 粗体字, 下划线…

经验法则：只有在没有更合适的元素时，才适合使用 <b>、<i> 或 <u> 来表达传统上用粗体、斜体或下划线表达的意思；而通常是有的。<strong>、<em>、<mark> 或 <span> 可能是更加合适的选择。

创建超链接

链接的解析

用 <a> 元素, 以及 href (hypertext reference) 属性:

1
2
3

<p>
  我创建了一个指向 <a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>的链接。
</p>

块级链接

如把标题元素变为链接:

<a href="https://developer.mozilla.org/zh-CN/">
  <h1>MDN Web 文档</h1>
</a>
<p>自从 2005 年起，就开始记载包括 CSS、HTML、JavaScript 等网络技术。</p>

图片链接

图片作为链接, 用 <a> 包裹 <img>:

1
2
3

<a href="https://developer.mozilla.org/zh-CN/">
  <img src="mdn_logo.svg" alt="MDN Web 文档主页" />
</a>

使用 title 属性添加支持信息

鼠标悬停时显示:

<p>
  我创建了一个指向<a href="https://www.mozilla.org/zh-CN/"
   title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">Mozilla 主页</a>的超链接。
</p>

文档片段

连接到 HTML 文档的特定部分, 需要给要链接到元素分配一个 id 属性:

1	`<h2 id="Mailing_address">邮寄地址</h2>`

链接到这个 id, 要将它放在 URL 的末尾，并在前面包含井号（#），例如:

1
2
3

<p>
  要提供意见和建议，请将信件邮寄至<a href="contacts.html#Mailing_address">我们的地址</a>。
</p>

链接到当前文档的一部分:

1
2
3

<p>
  本页面底部可以找到<a href="#Mailing_address">公司邮寄地址</a>。
</p>

链接注意

跳转到文档

在下载链接时使用 `download` 属性

当你链接到要下载的资源而不是在浏览器中打开时，你可以使用 download 属性来提供一个默认的保存文件名:

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
   download="firefox-latest-64bit-installer.exe">
  下载最新的 Firefox 中文版 - Windows（64 位）
</a>

电子邮件链接

用 <a> 元素和 mailto: URL 协议来实现, 如:

1	`<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>`

文本格式进阶

描述列表

用于标记一组项目及其相关描述 , 浏览器的默认样式会在描述列表的术语及其定义之间产生缩进.

使用 <dl> (description list) 包裹.

每一项术语用 <dt> (description term) 包裹

每个描述用 <dd> (description definition) 来包裹.

如:

<dl>
  <dt>旁白</dt>
  <dd>
    戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。
  </dd>
  <dd>
    写作中，指与当前主题相关的一段内容，通常不适于直接置于内容主线中，因此置于附近的其他位置（通常位于主线内容旁边一个文本框内）。
  </dd>
</dl>

引用

块引用

用 <blockquote> 元素, 以及 cite 属性:

<p>Here is a blockquote:</p>
<blockquote
  cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>
    The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>

行内引用

用 <q> 元素, 同样 cite 属性:

1 2	`<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended for short quotations that don't require paragraph breaks.</q></p>`

引文

用 <cite> 元素, 其用来包含所引用资源的标题 (如书名)：

<p>
  According to the
  <a href="/en-US/docs/Web/HTML/Element/blockquote">
    <cite>MDN blockquote page</cite></a>:
</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q> — <a href="/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p>

缩略语

<abbr>, 包裹一个缩略语或缩写, 并且提供缩写的解释:

<p>
  我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。
</p>

<p>
  第 33 届<abbr title="夏季奥林匹克运动会">奥运会</abbr>将于 2024 年 8 月在法国巴黎举行。
</p>

鼠标悬停时显示 title 属性中的解释.

标记联系方式

用 <address> 元素, 如:

1	`<address>Chris Mills, Manchester, The Grim North, UK</address>`

上标和下标

用 <sup> (superscript, 上标) 和 <sub> (subscript, 下标):

<p>
  咖啡因的化学方程式是
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。
</p>
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

展示计算机代码

文档与网站架构

用于构建内容的 HTML

HTML 布局元素细节

<div>, “division”

<br>, “line break”

<hr>, “horizontal rule”

HTML 调试

让 HTML 页面通过 Markup Validation Service

HTML 中的图片

将图片存储在和 HTML 页面同路径的 images 文件夹下.

<img> 元素:

1 2	`<img src="images/dinosaur.jpg"> <img src="https://www.example.com/images/dinosaur.jpg">`

宽度和高度

可指定高度和宽度:

<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">

图片标题

<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

为图片搭配说明文字

用 HTML5 的 <figure> 和 <figcaption> 元素:

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
      alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
      width="400"
      height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

CSS 背景图片

用 CSS 把图片嵌入网站:

1
2
3

p {
  background-image: url("images/dinosaur.jpg");
}

如果图像对您的内容里有意义，则应使用 HTML 图像。如果图像纯粹是装饰，则应使用 CSS 背景图片

视频和音频内容

web 中的音频和视频

用 <video> 和 <audio> 元素.

`<video>` 标签

如:

1
2
3

<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

使用多个播放源以提高兼容性

像 MP3、MP4、WebM 这些术语叫做容器格式。他们定义了构成媒体文件的音频轨道和视频轨道的储存结构，其中还包含描述这个媒体文件的元数据，以及用于编码的编码译码器等等。

格式主要用于将音频和视频压缩成可管理的文件（原始的音频和视频文件非常大）.

而浏览器包含了不同的 Codecs,，如 Vorbis 和 H.264，它们用来将已压缩的音频和视频转化成二进制数字。

提供多个播放源的示例, 使用 <source> 标签:

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

其他 `<video>` 特性

<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

`<audio>` 标签

显示音轨文本

给那些听不懂音频语言的人们提供一个音频内容的副本.

使用 <track> 标签.

如:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

从 object 到 iframe – 其他嵌入技术

<iframe>, <embed> 和 <object> 元素, 用于在网页中嵌入各种内容类型的元素.

<iframe> 用于嵌入其他网页
<embed> 和 <object> 用于嵌入 PDF, SVG 甚至 Flash

Iframe 详解

<iframe> 示例:

Bing 地图

<div>
     <iframe width="500" height="400" frameborder="0" src="https://cn.bing.com/maps/embed?h=400&w=500&cp=p30czxspp0xq&lvl=11&typ=d&sty=r&src=SHELL&FORM=MBEDV8" scrolling="no">
     </iframe>
     <div style="white-space: nowrap; text-align: center; width: 500px; padding: 6px 0;">
        <a id="largeMapLink" target="_blank" href="https://cn.bing.com/maps?cp=p30czxspp0xq&amp;sty=r&amp;lvl=11&amp;FORM=MBEDLD">View Larger Map</a> &nbsp; | &nbsp;
        <a id="dirMapLink" target="_blank" href="https://cn.bing.com/maps/directions?cp=p30czxspp0xq&amp;sty=r&amp;lvl=11&amp;rtp=~pos.p30czx_spp0xq____&amp;FORM=MBEDLD">Get Directions</a>
    </div>
</div>

bilibili 视频

1	`<iframe src="//player.bilibili.com/player.html?aid=740177698&bvid=BV1Qk4y1a7p2&cid=1102944324&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>`

安全隐患

单击劫持是一种常见的 iframe 攻击.

防范措施:

只在必要时嵌入.
使用 HTTPS.
始终使用 sandbox 属性
配置 CSP 指令

`<embed>` 和 `<object>` 元素

<embed> 和 <object> 元素可用于嵌入 Java 小程序和 Flash，PDF（可在浏览器中显示为一个 PDF 插件）这样的插件技术，甚至像视频，SVG 和图像的内容.

在网页中添加矢量图形

什么是矢量图形

区分位图和矢量图

位图使用像素网格来定义 — 一个位图文件精确得包含了每个像素的位置和它的色彩信息。流行的位图格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)
矢量图使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。

矢量图在放大后不会出现类似马赛克.

矢量图形相较于同样的位图，通常拥有更小的体积，因为它们仅需储存少量的算法，而不是逐个储存每个像素的信息。

SVG 是什么

SVG 是可缩放矢量图形（Scalable Vector Graphics) 的缩写, 其基于 XML 标记语言, 用于描述二维的矢量图形.

如:

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

将 SVG 添加到页面

快捷方式: `<img>`

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />

在 HTML 中引入 SVG 代码

1
2
3

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

用 `<iframe>` 嵌入 SVG

1
2
3

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

响应式图片

其为能在不同的屏幕尺寸、分辨率或具有其他类似特性的设备上都呈现良好的图片.

如何创建响应式图片

CSS 是比 HTML 更好的响应式设计的工具.

分辨率切换: 不同的尺寸

用 <img> 元素的 srcset 和 sizes 属性.

如:

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

分辨率切换: 相同的尺寸, 不同的分辨率

1
2
3

<img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg"
     alt="Elva dressed as a fairy" />

HTML 表格基础

每一个表格的内容都包含在 <table></table> 中.

在表格中, 最小的内容容器是单元格, 是通过 <td> (table data) 元素创建的.

表格中的行用 <tr> (table row) 元素, 创建一个行如:

<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>

使用 `<th>` 元素添加标题

表格中的标题是特殊的单元格，通常在行或列的开始处，定义行或列包含的数据类型.

Web

Web-开发技术-HTML

http://example.com/2023/05/15/Web-开发技术-HTML/

作者

Jie

发布于

2023年5月15日

许可协议

Web-开发技术-HTTP 上一篇

Web-开发技术-JavaScript 下一篇