HTML notes

发表于 更新于 分类于 ， 本文字数： 9.1k 阅读时长 ≈ 8 分钟

HTML

1. HTML概念

HTML(HyperText Markup Language,超文本标记语言)是一种用来告知浏览器如何组织页面的标记语言

HTML标签不区分大小写

2. HTML元素

由开始标签、内容、结束标签构成一个整体

  • 开始标签（Opening tag）：包含元素的名称，被<>包裹。开头标签标志着元素开始或开始生效的地方

  • 内容（Content）：元素的内容

  • 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含一个/。这标志着该元素的结束

2.1 元素

<p> 元素

  • 定义段落<p></p>

<h> 标题元素

  • 每个标题（Heading）都必须被包裹在一个标题元素中

  • <h1>–<h6>:共六种标题元素标签，每个元素代表文档中不同级别的内容

  • <h1> 也是一个语义元素，塌缩包裹的文本具有“页面上的顶级标题”的作用。

  • 注意

    • 最好只对每个页面使用一次 <h1>——这是顶级标题，所有其他标题位于层次结构中的下方。

    • 请确保在层次结构中以正确的顺序使用标题。不要使用 <h3> 来表示副标题，后面再跟 <h2> 来表示二级副标题——这是没有意义的，会导致奇怪的结果。

    • 在现有的六个标题层次中，除非觉得有必要，否则应该争取每页使用不超过三个。有很多层次的文件（例如，深层次的标题层次）会变得笨重，难以浏览。在这种情况下，如果可能的话，建议将内容分散到多个页面。

<ul> 无序列表标签

  • <ul></ul>包裹所需要的清单项目

  • <li></li> 把每个列出的项目单独包裹起来

<ol> 有序列表标签

需要按照项目的顺序列出来

  • 结构与无序列表相同，但需要用<ol> 元素包裹所有项目

列表之间可以嵌套

<dl>描述列表

使用闭合标签<dl> ，此外，每一项都用 <dt> 元素闭合，每个描述都用 <dd> 元素闭合

  • 浏览器的默认样式会在描述列表的术语及其定义之间产生缩进

  • 单个术语可以同时有多个描述

<img> 元素

是一个空元素，

  • 需要src使其生效，src 属性包含了图片的路径。

<img src="">

  • alt 对图片进行描述，用于图片无法显示或不能被看到的情况

  • title 鼠标放置图片上显示信息

  • 可通过width和height元素设置宽高，尽量使用CSS调整图片尺寸

  • srcset 定义了浏览器可选择的图片设置及每个图片的大小，每张图片信息的设置要用逗号分隔。

    每个设置为

    • 一个文件名

    • 一个空格

    • 图片的固有宽度

  • sizes 定义了一组媒体条件并且指明当前某些媒体条件为真时，最佳尺寸是多少

<figure> 元素

为元素提供语义容器，在标题和图片之间建立关联 —— <figcaption>

该元素中不一定要是图片，可以是一个独立内容单元

  • 用简洁、易懂的方式表达意图

  • 可以置于页面线性流的某处

  • 为主要内容提供重要的补充说明

  • 可以是图片、代码、音频、方程等

<video> 元素

嵌入一段视频

属性

  • src 指向想要嵌入的视频资源地址

  • control 控制视频的回放功能， 可用其来包含浏览器提供的控件页面

  • 标签中内容：也称为后备内容，当浏览器不支持该标签时，就会显示该内容

  • autoplay 会使视频内容立即播放

  • loop 循环播放

  • muted 媒体播放时，默认关闭声音

  • poster 指向一个图像的URL，这个图像会在视频播放前显示，通常用于预览或广告

  • preload 被用来缓冲较大的文件

    • none 不缓冲

    • auto 页面加载后缓存媒体文件

    • metadata 仅缓冲文件的元数据

<audio> 元素

同video 元素

注意：

  • 不支持width/height属性

  • 不支持poster属性

<iframe> 元素

可以将其他Web文档嵌入到当前的文档中。

基本要素

  • allowfullscreen 可以通过全屏API设置为全屏模式

  • frameborder 如设置为1，则会在此框架和其他框架之间绘制边框，默认行为；0删除边框

  • src 与<video>元素表示文档中的图像，指向要嵌入文档的URL路径

  • sandbox 提高安全性设置

<table> 表格元素

<table></table>

  • <tr> 元素（table row）

  • 在表格中最小的内容容器是单元格，通过<td> 元素创建（table data）

  • <th> 元素添加标题

  • 属性 colspan,rowspan 可以控制单元格宽高

  • <caption> 元素可以为表格添加标题，放在<table> 标签的下面

采用<thead>,<tfoot>,<tbody>使表格结构更明确

  • <thead> 必须包住表格中作为表头的部分，一般是第一行，往往都是每列的标题

    • 若使用<col>/<colground> 元素，那么<thead> 元素需要在其下面

  • <tfoot> 元素需要包住表格中作为表脚的部分，一般是最后一行，往往是对前面所有行的总结

  • <tbody> 元素需要包住表格内容中不再表头或表尾的其他部分

强调元素

  1. <em> 内容呈粗斜体

  2. <strong> 内容呈粗体

表象元素

  • <i> 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……

  • <b>被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……

  • <u>被用来传达传统上用下划线表达的意义：专有名词，拼写错误……

换行和水平分割线

<br>：换行元素，可在段落中进行换行；唯一能够生成多个短行结构的元素

<hr> ：主题性中断元素，在文档中生成一条水平分割线，表示文本中主题的变化

缩略语

<abbr> 常被用来包裹一个缩略语或缩写，并且提供缩写的解释。

如果为缩写提供扩展信息的意义不大，而且该缩写或首字母缩写是一个相当简短的术语，则应提供该术语的完整扩展，作为 title 属性的值

<address> 标记联系元素

仅仅包含联系方式，其中可以包含更复杂的标记和其他形式的联系方式

 <address>元素只能用于提供最近的 <article>)或<body>元素所含文件的联系信息。在一个网站的页脚使用它来包括整个网站的联系信息，或者在一篇文章里面使用它来包括作者的联系信息，这都是正确的，但不能用来标记与该页面内容无关的地址列表。

上下标元素

  • <sup>

  • <sub>

展示计算机代码

  • <code> 用于标记计算机通用代码

  • <pre> 用于保留空白字符（通常用于代码块）——如果文本中使用了缩进或多余的空白，浏览器将忽略它，你将不会在呈现的页面上看到它。但是，如果你将文本包含在 <pre></pre> 标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。

  • <var> 用于标记具体变量名。

  • <kbd> 用于标记输入电脑的键盘（或其他类型）输入。

  • <samp> 用于标记计算机程序的输出。

<time> 标记时间日期

支持将时间和日期标记为可供机器识别的格式

2.2 嵌套元素

    可以将元素放到其他元素之中，保证所有元素都正确的打开和关闭。

2.3 块级元素和内联元素

块级元素

特点

  • 在页面中以块的形式展现

  • 占据其父元素（容器）的整个水平空间，垂直空间等于其内容的高度

  • 独占一行

    • 一个块级元素出现在它前面内容的新行上

    • 任何跟在块级元素后面的内容也会出现在新的行上

  • 块级元素通常是页面上的结构元素

  • 一个块级元素不会嵌套在一个内联元素里面

  • 一个块级元素可能嵌套在另一个块级元素里面

用法
  • 块级元素只能出现在<body>元素内
元素列表

<address>

  • 联系方式信息

<article>

  •  文章内容

<aside>

  • 伴随内容

<blockquote>

  • 块引用

<dd>

  • 定义列表中定义条目描述

<div>

  • 文档分区

<dl>

  • 定义列表

<fieldset>

  • 表单元素分组

<figcaption>

  • 图文信息组标题

<figure>

  • 图文信息组

<footer>

  • 区段尾或页尾

<form>

  • 表单

h1-h6

  • 标题级别 1-6

<header>

  • 区段头或页头

<hgroup>

  • 标题组

<hr>

  • 水平分割线

<ol>

  • 有序列表

<p>

  • 行

<pre>

  • 预格式化文本

<section>

  • 一个页面区段

<table>

  • 表格

<ul>

  • 无序列表

内联元素

特点

  • 通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或一组内容

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

  • 通常与文本一起使用

元素列表
  • b, big, i, small, tt
  • abbr, acronym, cite, code, dfn, em, kbd,
    strong, samp, var
  • a, bdo, br, img, map, object, q, script,
    span, sub, sup
  • button, input, label, select, textarea

块级元素与行内元素的关键区别

  • 格式

    • 默认情况下，块级元素会新起一行

    • 默认情况下，行内元素不会以新行开始

  • 内容模型

    • 一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更“大型”的结构

    • 一般行内元素只能包含数据和其他行内元素

2.4 空元素

    一些元素只有一个表亲啊，通常用来在此元素所在位置插入/嵌入一些东西，这些元素被称为空元素

3. 属性

    元素拥有属性，属性包含元素的额外信息，这些信息不会出现在实际的内容中

    属性必须包含

  • 一个空格：在属性和元素名称之间。如果一个元素具有多个属性，则每个属性之间必须用空格分隔

  • 属性名称，后面添加等号=

  • 一个属性值，由一对引号引起来

布尔属性

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

4. HTML文档结构

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

  1. <!DOCTYPE html>声明文档类型。

  2. <html></html> :这个元素包裹了页面中所有内容，有时被称为根元素

  3. <head></head> :这个元素是一个容器，包含了所有想包含在HTML页面中但不在HTML页面中显示的内容。这些内容包括了关键字、页面描述、CSS样式、字符集声明等。

  4. <meta>:这个元素代表了不能由其他HTML元相关元素表示的元数据。

  5. <title></title> :设置了页面的标题，即出现在该页面加载的浏览器标签中的内容

  6. <body></body> :包含了你访问页面时所有显示在页面上的内容，包含文本、图片、视频、游戏、可播放音频轨道等等。

4.1HTML头部

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

标题

    采用<title> 元素为文档添加标题

  • <h1> (en-US)元素在页面加载完毕时显示在页面中，通常只出现一次，用来标记页面内容的标题（故事名称、新闻摘要等等）。

  • <title> 元素是一项元数据，用于表示整个 HTML 文档的标题（而不是文档内容）。

元数据<meta> 元素

    元数据就是描述数据的数据

指定文档中的字符编码
1
<meta charset="utf-8" />

    用改元素指定了文档中被允许使用的字符集，<utf-8> 是一个通用的字符集，包含了任何人类语言中的大部分的字符，意味着web页面可以显示任意的语言。

 一些浏览器（比如 Chrome）会自动修正错误的编码，所以根据你所使用的浏览器不同，你或许不会看到这个问题。无论如何，你仍然应该为你的页面手动设置编码为 utf-8，来避免在其他浏览器中可能出现的问题。

添加作者和描述

    <meta> 元素包含了name 和 content 属性

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

    可在元数据中添加对自定义图标的引用，最常见的用例为favicon

    页面添加网页图标的方式有：

  1. 将其保存在与网站的索引页面相同的目录中，以 .ico 格式保存（大多数浏览器支持更通用的格式，如 .gif 或 .png）

  2. 将以下行添加到 HTML 的 <head> 块中以引用它：

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

4.2 应用CSS和JS

    采用<link> 元素和 <script> 元素

  • <link> 元素经常位于文档的头部，它有 2 个属性，rel="stylesheet" 表明这是文档的样式表，而 href 包含了样式表文件的路径：

    1
    <link rel="stylesheet" href="my-css-file.css" />

  • <script> 元素也应当放在文档的头部，并包含 src 属性来指向需要加载的 JavaScript 文件路径，同时最好加上 defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容。

    1
    <script src="my-js-file.js" defer></script>

 <script> 元素看起来像一个空元素，但它并不是，因此需要一个结束标记。还可以选择将脚本放入 <script> 元素中，而不是指向外部脚本文件。

4.3 设置主语言

    通过添加lang属性到HTML标签

文档的基本组成部分

  • 页眉

    • 通常横跨于整个页面顶部有一个大标题 和/或 一个标志。这是网站的主要一般信息，通常存在于所有网页。

  • 导航栏

    • 指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致。

  • 主内容

    • 中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。

  • 侧边栏

    • 一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。

  • 页脚

    • 横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。

HTML构建内容

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，如：

  • <header>：页眉。

    简介形式的内容。如果它是 <body>的子元素，那么就是网站的全局页眉。如果它是<article>或<section>的子元素，那么它是这些部分特有的页眉

  • <nav>：导航栏。

  • <main>：主内容。主内容中还可以有各种子内容区段，可用<article> 和<div>等元素表示。

    存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于<body>中。最好不要把它嵌套进其他元素。

  • <aside>：侧边栏，经常嵌套在<main> 中。

  • <footer>：页脚。

  • <section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 标题作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。

  • <span>是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。

  • <div>是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时。

5. 特殊字符

    在HTML中，特殊字符需要防止被浏览器视为代码。

    使用字符引用——表示字符的特殊编码，每个字符引用以符号&开始，以分号；结束。

只要HTML的字符编码设置为UTF-8，就不需要为任何其他字符使用实体引用

原义字符 等价字符引用
< &lt;
> &gt;
“ &quot;
‘ &apos;
& &amp;

6. HTML注释

    HTML拥有在代码中写注释的机制，为了将HTML中的一段内容置为注释，需要用<!--和-->包裹起来

7. 超链接

使文档连接到任何其他文档（或其他资源），可链接到文档的指定部分。

几乎任何网络内容都可以转换为链接，点击超链接将使网络浏览器转到另一个网址（URL）

URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。如果浏览器不知道如何显示或处理文件，它会询问你是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（以后处理它）。

7.1 链接解析

通过将文本或其他内容包裹在 <a> 元素内，并给其一个包含网址的 href 属性(也称为超文本引用或目标)来创建一个基本链接。

块级链接

将其包裹在锚点元素 <a> 内

图片链接

使用 <a> 元素来包裹要引用图片的 <img> 元素

title属性添加支持信息

链接中可添加title属性，包含关于链接的补充信息，当鼠标指针悬停在链接上时，标题将作为提示信息出现

7.2 统一资源定位符（URL）与路径（path）

统一资源定位符（Uniform Resource Locator，URL）是一个定义了在网络上的位置的一个文本字符串

URL使用路径查找文件

  • 指向当前目录，只需要指定想要链接的文件名

  • 指向子目录，需要采用层级向下的方式链接文件名

  • 指向上级目录，需要采用../的方式逐级查找

如果需要，你可以将这些功能的多个实例组合成复杂的 URL。例如 ../../../complex/path/to/my/file.html。

绝对URL和相对URL

绝对URL（绝对链接）

  • 指向由其Web上的绝对位置定义的位置，包括协议和域名。

  • 不管绝对URL在哪使用，它总指向确定的相同位置。

相对URL（相对链接）

  • 指向与链接的文件相关的位置

  • 一个相对的URL将指向不同的位置，这取决于引用文件的实际位置

文档片段

超链接除了可以链接到文档外，也可以连接到HTML文档的特定部分（也被称为文档片段）

必须给要链接到的元素分配一个id属性

使用download属性下载链接

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

7.3 电子邮件链接

当点击一个链接或按钮时，可能会开启新的邮件的发送而不是链接到一个资源或页面，需要采用<a>元素和mailto:URL协议实现

其最基本和最常用的使用形式为一个指明收件人电子邮件地址的 mailto: 链接。

1
<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>
  • 电子邮件的地址是可选的

指定详细信息

除了电子邮件地址，你还可以提供其他信息。事实上，任何标准的邮件头字段可以被添加到你提供的 mailto URL 中。其中最常用的是主题（subject）、抄送（cc）和主体（body）（这不是一个真正的标头字段，但允许你为新邮件指定一个简短的内容消息）。每个字段及其值被指定为查询项。

下面是一个包含 cc、bcc、主题和主体的示例：

1
2
3
4
<a
  href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  发送含有 cc、bcc、主题和主体的邮件
</a>

每个字段的值必须使用 URL 编码，即使用百分号转义的非打印字符（不可见字符如制表符、换行符、分页符）和空格。同时注意使用问号（?）来分隔主 URL 与参数值，以及使用 & 符来分隔 mailto: URL 中的各个参数。这是标准的 URL 查询标记方法。

8. 引用

HTML存在用于标记引用的特性

块引用

如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用 [<blockquote>]元素包裹起来表示，并且在 cite属性里用 URL 来指向引用的资源。

行内引用

除了使用 <q> 元素以外，行内元素用同样的方式工作

引文

cite 属性需要配合JS、CSS，否则浏览器无法显示cite的内容

引文默认的字体样式为斜体