HTML 整理

Posted on | In , |

HTML 可以按照功能和语言来划分它的知识，HTML 的知识主要由标签来承担，所以我们首先会把标签做一些分类。诸如 title、meta、style、link、base 这些，它们用来描述文档的一些基本信息。还有一类是诸如 section、nav 的标签，它们在视觉表现上跟 div 没有区别，但是各有各的适用场景，我们把它们称作是语义类标签。另外一类是 img、video、audio 之类的替换型媒体类标签，用来引入外部内容，平常开发中也很常用。再有就是表单类的，比如 input、button。

元素

文档元信息

通常是出现在 head 标签中的元素，包括了描述文档自身的一些信息

  • title: 文档标题。

  • base: 页面的基准 URL: 历史遗留标签。它的作用是给页面上所有的 URL 相对地址提供一个基础。base 标签最多只有一个，它改变全局的链接地址，它是一个非常危险的标签。

  • meta: 元信息通用标签: 是一组键值对，是一种通用的元信息表示标签。一般由 name(表示元信息的名)和 content(则用于表示元信息的值)两个属性来定义。

    1
    2
    <meta name="application-name" content="lsForums" />
    <!-- meta 标签可以被自由定义，只要写入和读取的双方约定好 name 和 content 的格式就可以 -->

    • 具有 charset 属性的 meta: 描述了 HTML 文档自身的编码形式

      1
      2
      <meta charset="UTF-8" />
      <!-- 浏览器读到这个标签之前，处理的所有字符都是 ASCII 字符，因此建议这个标签放在 head 的第一个。 -->

    • 具有 http-equiv 属性的 meta: 表示执行一个命令，这样的 meta 标签可以不需要 name 属性了。

      1
      2
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
      <!-- 相当于添加了 content-type 这个 http 头，并且指定了 http 编码方式。 -->

      • cache-control: 缓存请求指令

        1
        2
        3
        4
        5
        6
        7
        Cache-Control: max-age=<seconds>
        Cache-Control: max-stale[=<seconds>]
        Cache-Control: min-fresh=<seconds>
        Cache-control: no-cache
        Cache-control: no-store
        Cache-control: no-transform
        Cache-control: only-if-cached

      • content-type: 指定 http 编码方式

      • content-language: 指定内容的语言

      • default-style: 指定默认样式表

      • refresh: 刷新

      • set-cookie: 模拟 http 头 set-cookie，设置 cookie

      • x-ua-compatible: 模拟 http 头 x-ua-compatible，指定文件兼容性模式

      • content-security-policy: 模拟 http 头 content-security-policy，声明内容安全策略

    • name 为 viewport 的 meta: 没有在 HTML 标准中定义，却是移动端开发的事实标准: 它就是 name 为 viewport 的 meta。

      1
      2
      3
      4
      5
      <meta
        name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
      />
      <!-- 这类 meta 的 name 属性为 viewport，它的 content 是一个复杂结构，是用逗号分隔的键值对，键值对的格式是 key=value。 -->

      • width: 页面宽度，可以取值具体的数字，也可以是 device-width，表示跟设备宽度相等。

      • height: 页面高度，可以取值具体的数字，也可以是 device-height，表示跟设备高度相等。

      • initial-scale: 初始缩放比例。

      • minimum-scale: 最小缩放比例。

      • maximum-scale: 最大缩放比例。

      • user-scalable: 是否允许用户缩放。

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        <meta
          name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
        />
        <!-- 移动端适配的网页: 禁止用户缩放功能，宽度设为设备宽度 -->
        <meta
          name="viewport"
          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"
        />
        <!-- iOS 7.1的Safari为meta标签新增 minimal-ui 属性，在网页加载时隐藏地址栏与导航栏 -->

    • 其它预定义的 meta

      • apple-mobile-web-app 的标签组:

        1
        2
        3
        4
        5
        6
        7
        8
        9
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!-- Web应用程序以全屏模式运行/删除苹果默认的工具栏和菜单栏 -->
        <meta
          name="apple-mobile-web-app-status-bar-style"
          content="black-translucent"
        />
        <!-- 设置苹果工具栏颜色 -->
        <meta name="format-detection" content="telephone=no,email=no,adress=no" />
        <!-- 关闭iOS上的内容识别 -->

      • application-name: 如果页面是 Web application，用这个标签表示应用名称。

      • author: 页面作者。

      • description: 页面描述，这个属性可能被用于搜索引擎或者其它场合。

      • generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网页，不需要加这个 meta。

      • keywords: 页面关键字，对于 SEO 场景非常关键。

      • referrer: 跳转策略，是一种安全考量。

      • Open Graph 的标签组: 包括 title, type, URL, site_name, description 和 image，是为 Facebook 分享提供信息

        1
        2
        3
        4
        5
        6
        7
        8
        9
        <meta property="og:type" content="website" />
        <meta property="og:title" content="mine-website" />
        <meta property="og:url" content="https://mine-website.com" />
        <meta property="og:description" content="description" />
        <meta
          property="og:image"
          content="https://mine-website.com/images/image.png"
        />
        <meta property="og:ttl" content="604800" />

      • renderer: 声明渲染使用的浏览器内核 (360 这一类双核浏览器的约定属性)

        • webkit
        • ie-comp ie 兼容内核
        • ie-stand ie 标准内核

      • robots: 机器人协议，声明希望或者不希望搜索引擎或者其他类型的爬虫抓取的部分。

        1
        2
        3
        <meta name="robots" content="index,follow" />
        <!-- 或者可以声明拒绝 -->
        <meta name="robots" content="noindex,nofollow" />

      • theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外的 UI（如窗口边框或者 tab 的颜色）。

      • Twitter 的标签组，包括 card, title, description 和 image，是为 Twitter 分享提供信息

        1
        2
        3
        4
        5
        6
        7
        8
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@MaterialUI" />
        <meta name="twitter:title" content="mine-website" />
        <meta name="twitter:description" content="description" />
        <meta
          name="twitter:image"
          content="https://material-ui.com/static/brand.png"
        />

语义相关内容

拓展了纯文本，表达文章结构，不同语言要素的标签

  • head: 元信息的容器: head 标签规定了自身必须是 html 标签中的第一个标签，它的内容必须包含一个 title，并且最多只能包含一个 base。如果文档作为 iframe，或者有其他方式指定了文档标题时，可以允许不包含 title 标签。

链接

提供到文档内核文档外的链接

替换型元素

引用声音、图片、视频等外部元素替换自身的一类标签

表单

用于填写和提交信息的一类标签

表格

表头、表尾、单元格等表格的结构

总集

语言

实体

命名空间

补充标准