六检一

前端之路-HTML ​

整理所学过的所有HTML相关的内容。

资料汇总 ​

  1. 【书籍】【微信读书】《从 0 到 1：HTML+CSS 快速上手》莫振杰 第一部分 HTML

  2. 【书籍】【纸书】《Head First HTML 与 CSS》HTML 部分

  3. 【极客时间】《重学前端》Winter 模块 2-HTML+CSS 中 HTML 相关部分

  4. 【书籍】【微信读书】《HTML 并不简单：Web 前端开发精进秘籍》张鑫旭

  5. 【网站】

    1. MDN 教程：https://developer.mozilla.org/zh-CN/docs/Web/HTML

    2. 菜鸟教程：https://www.runoob.com/html/html-tutorial.html

    3. HTML 规范教程

    4. w3schools：https://www.w3schools.com/html/default.asp

各资源详细学习笔记 ​

《从 0 到 1：HTML+CSS 快速上手》莫振杰 第一部分 HTML ​

HTML 标签的分类方式 ​

1. 根据写法分 ​
  1. 一般标签，也就是开和闭成套，如<div></div>。
  2. 自闭和标签，也就是写一个即可，如<hr>、<br>。
2. 根据表现形式分 ​
  1. 块元素：独占一行。如：div、h1-h6、p、hr、ul/ol/li。
  2. 行内元素：独占一块。如：span、strong、em、a
3. 根据用途分 ​
  1. 文档类型标签
  2. 基本标签
  3. 文本展示类标签
  4. 列表标签
  5. 表格标签
  6. 图片标签
  7. 超链接标签
  8. 表单标签
  9. 框架标签。

标题用途细分 ​

下面根据标签的用途，来对标签进行一个详细的总结。

1. 文档类型标签 ​

HTML 的文档类型分几个版本，目前都是 HTML5，所以在 html 文件第一行写入<!DOCTYPE html>即可，表明这是一个 HTML5 的文档。

2. 基本标签 ​

包含 3 个，分别是 html、head、body。

  • html 代表一颗完整的树

  • head 可以理解为看不见的树根

    head 里面放一些我们看不见的元信息，比如：页面标题、脚本引用、样式引用等等。body 则放置一切用于显示的标签。

  • body 则可以理解为地平面以上我们能看到的树的所有外在。

对于基本标签我们重点关注 head 即可，head 里面可以放的元素有 6 个：title、meta、link、script、style、base，重点也只关注 meta 和 link。

  • meta：用于定于页面的特殊信息，也是用来告诉爬虫一些信息的地方。主要有 2 个重要的属性：name、http-equiv，且需要搭配 content 一起使用。

    对于 name 属性，一般有 4 个值：keywords、description、author、copyright。示例如下：

    html
    <meta name="keywords" content="前端开发" />
<meta name="description" content="一个富有活力的网站" />
<meta name="author" content="coder" />
<meta name="copyright" content="禁止转载" />

    对于 http-equiv 属性，有两个重要的作用，网页的编码和网页自动刷新跳转。示例如下：

    html
    <meta
  http-equiv="Content-Type"
  content="text/html; charset=utf-8"
/>可以简写为：<meta charset="utf-8" />（要放到title标签前）
<meta http-equiv="refresh" content="6;url=https://www.baidu.com" />

  • link：可用于网页 icon、引入外部的样式表。

3. 文本展示类 ​

主要有：标题标签（h1-h6）、段落标签（p）、换行标签（br）、文本标签（重要）、水平线标签（hr）、特殊符号。

文本标签涉及的标签较多，常用的有 8 种：

  1. strong/b（粗体标签）推荐 strong
  2. i/em/cite（斜体标签）推荐 em
  3. sup（上标标签）
  4. sub（下标标签）
  5. s（中划线标签）一般通过 css
  6. u（下划线标签）一般通过 css
  7. big（大字号）一般通过 css
  8. small(小字号) 一般通过 css

特殊符号

由于 html 的解析机制会导致一些正常的内容无法显示，比如空格，大于号和小于号等，所以需要用特殊的内容来编写，这样浏览器才能解析成我们想要展示的内容。 参考：https://developer.mozilla.org/zh-CN/docs/Glossary/Entity

4. 列表标签 ​

列表有 3 种：有序列表、无序列表和定义列表，分别对应的标签是：

  1. 有序列表对应：ol（可指定 type 属性更改前面的数字样式）、li。

  2. 无序列表对应：ul（可指定 type 属性更改前面的数字样式）、li。

  3. 定义列表：dl（容器 definition list），内容由名词和描述组成：dt（definition term 定义名词）、dd（definition description 定义描述）。

    html
    <dl>
  <dt>HTML</dt>
  <dd>标记语言</dd>
</dl>
5. 表格标签 ​

主要包含 3 点：表格涉及的标签、合并行、合并列。

html
<table>
  <caption>表格标题</captyion>
  <thead>
    <tr>
      <th>表头单元格：列1</th>
      <th>表头单元格：列2</th>
      <th>表头单元格：列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">表行单元格</td>
      <td colspan="2">表行单元格</td>
    </tr>
    <tr>
      <td>表行单元格</td>
      <td>表行单元格</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>表行单元格：第1行-第1列 表脚</td>
      <td>表行单元格：第1行-第2列 表脚</td>
      <td>表行单元格：第1行-第2列 表脚</td>
    </tr>
  </tfoot>
</table>
6. 图片标签 ​

用的是 img 标签，其中 src 属性和 alt 属性是必要的。

html
<img src="" alt="" title="" />

图片的格式主要是：位图(又叫像素图 png/jpg/gif)和矢量图(svg)。

  • 位图：高清用 jpg，一般图片 png，动图用 gif。
  • 矢量图：用数学描述的方式来表示图片的内容。
7. 超链接标签 ​

超链接可以链接到的地方有 2 个：网页内(#id)和网页外(url)。另外点击后的打开方式通过 target 属性设置，支持 _self、_blank、_parent、_top。

html
<a href="#">点我跳转</a>
8. 表单标签 ​

用于提交信息到服务端，表单相关标签还可以继续根据标签名和外观进行分类

  • 根据标签名分：form、input、textarea、select 和 option。 表单内容包裹在 form 标签内，它有 5 个属性：name、method、action、target、enctype(用于表单数据的编码方式，一般不设置，除非用到文件上传)。

    input 最为复杂，包含很多类型：text、password、radio、checkbox、button/submit/reset、file。

  • 根据外观分（8 种）：单行文本框、多行文本框、密码文本框、单选框、多选框、按钮、文件上传、下拉列表。

整体示例

html
<form name="myForm" method="get" action="https://www.baidu.com" target="_blank">
  <label
    >姓名：<input
      type="text"
      value=""
      placeholder="包含3个属性：value、size、maxlength"
      size="100" /></label
  ><br />
  <label>密码：<input type="password" /></label><br />
  <label
    >性别： <input type="radio" name="gender" value="男" checked />男
    <input type="radio" name="gender" value="女" />女 </label
  ><br />
  <label
    >我喜欢的水果： <input type="checkbox" name="fruits" value="苹果" />苹果
    <input type="checkbox" name="fruits" value="香蕉" />香蕉
    <input type="checkbox" name="fruits" value="芒果" />芒果 </label
  ><br />
  <label
    >按钮组：
    <input type="button" value="普通按钮" onclick="alert('我是普通按钮')" />
    <input type="submit" value="提交按钮" />
    <input type="reset" value="重置按钮" /> </label
  ><br />
  <label>文件上传：<input type="file" /></label><br />
  <label
    >简介（多行文本框）：<br />
    <textarea rows="5" cols="20" placeholder="请输入简介"></textarea>
  </label>
  <label
    >下拉列表：
    <select name="selects" multiple size="3">
      <option value="HTML" selected>HTML</option>
      <option value="CSS">CSS</option>
      <option value="JS">JS</option>
    </select>
  </label>
</form>
9. 框架标签 ​

用来实现内嵌框架，可以内嵌别的网页。

html
<iframe src="" width="" height=""></iframe>

《Head First HTML 与 CSS》前 6 章 HTML 部分 ​

2013 年出版，对于 2024 的今天来说已经很久远了，很早从多抓鱼买的，如今多抓鱼已经不收了，可见已经过时了。但书中的一些知识点我这里总结一下，没有必要再去读了。

HTML 相关的知识点（至于每个标签是做什么用的，可以在 MDN 中定向搜索）：

  1. HTML 发展简史：html1.0-2.0(1989、1991)、html3(1995)、html4(1998)、html4.01(1999)、xhtml1.0(2001)、html5(2009、2012)
  2. 都有哪些常用的 html 标签：html、head、body、div/span、a、img、q/blockquote、br、Void 标签概念(空元素，也就是自闭合标签)、ul/ol/li、code、pre、em/strong、table/caption/thead/tbody/tfoot/tr/th/td、form。
  3. html 元素的属性做什么用的：给元素附加信息，比便给 CSS 或者 JS 使用。
  4. 新的 html5 标签：article、nav、header、footer、aside、section、video、time、progress、canvas、figure。
  5. 字符实体是什么：防止被浏览器误当做 html 内容解析而定义的一套映射，使用这套映射里对应的编码，可以渲染出不同的内容。详见：https://www.w3schools.com/html/html_entities.asp
  6. a 标签的 4 种打开方式是什么：_blank、_self、_parent、_top。
  7. img 表现用到的常见图片格式：jpeg、png、gif。
    1. jpeg：最适合保存照片和其他复杂图像。可以按不同质量压缩，可以很好地权衡图像质量和文件大小。
    2. gif：最适合用来制作动图，无损格式，往往比 jpeg 大，允许建立透明背景，只支持 256 种颜色。
    3. png：最适合保存 logo 和其他包含单色，线条或文本的简单图形。无损格式，往往比 jpeg 大允许建立透明背景，比 gif 有更好的透明度控制，png 有 3 种不同的大小选择：png-24（支持数百万种颜色）、png-16（支持数千种颜色），png-8（支持 256 种颜色）。
  8. video 视频的种类：
    1. MP4 容器，包含 H.264 视频和 AAC 音频。
    2. WebM 容器，包含 VP8 视频和 Vorbis 音频
    3. Ogg 容器，包含 Theora 视频和 Vorbis 音频。
  9. 验证 HTML 文档标签合法程度：https://validator.w3.org/
  10. 验证 CSS 样式合法程度：http://jigsaw.w3.org/css-validator

《重学前端-极客时间》Winter 模块 2-HTML+CSS-16 讲 ​

  1. HTML 语义：div 和 span 不是够用了吗？

    正确的使用语义标签的两个好处：对开发者友好、机器宜读且有利于 SEO。

    • 「自然语言表达能力补充」：一些文章常常会拿 em 和 strong 做对比，实际上，我们只要理解了 em 的真正意思，表示重音，它和 strong 可谓天差地别，并没有任何混淆的可能。

      html
      <div>今天我吃了<em>一个</em>苹果</div>
<div>今天我吃了一个<em>苹果</em></div>

    • 「文章标题摘要」：hgroup、section 等。从 HTML 5 开始，我们有了 section 标签，这个标签可不仅仅是一个“有语义的 div”，它会改变 h1-h6 的语义。section 的嵌套会使得其中的 h1-h6 下降一级，因此，在 HTML5 以后，我们只需要 section 和 h1 就足以形成文档的树形结构。

    • 「适合机器阅读的整体结构」：header、footer、aside、nav、section、address 等。