（二）HTML标签与元素

HTML标签与元素

1、标签

1.1、介绍

标签用来告诉浏览器，如何处理这段代码。标签的内容就是浏览器所要渲染的、展示在网页上的内容。

• 标签可以嵌套，必须保证正确的闭合顺序，不能跨层嵌套。
• 大小写不敏感，习惯都是使用小写。
• 忽略缩进和换行。
  • 标签内容的头部和尾部的空格，一律忽略不计；
  • 多个连续空格（包含制表符\t），会被浏览器合并成一个。
  • 换行符（\n）和回车符（\r），会被浏览器替换成空格。

1.2、网页标签组成

1.2.1、顶级标签：

• !DOCTYPE
  • 声明文档类型，位于文档中的最前面的位置，处于 标签之前，告知浏览器的解析器用什么文档标准解析这个文档。
  • 在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
• html：是网页的顶层容器，即标签树结构的顶层节点，也称为根元素。lang属性表示网页内容默认的语言。
  • head：网页元信息，为网页渲染提供额外信息。
  • body：网页主体内容
  • 注释：

1.2.2、网页元信息head

• meta：设置或说明网页的元数据。
  • charset：指定网页的编码方式，例如：charset="utf-8"。
  • name、content：元数据的名字和值。
    • description、keywords、author；
    • viewport、application-name、generator、subject、referrer；
  • http-equiv、content：覆盖 HTTP 回应的头信息字段。
    • Content-Type、refresh、Cache-control…
• link：将当前网页与相关的外部资源联系起来，最常见的用途就是加载 CSS 样式表。
  • rel：必需属性，外部资源与当前文档之间的关系。
    • alternate：文档的另一种表现形式的链接，比如打印版。
    • author：文档作者的链接。
    • dns-prefetch：要求浏览器提前执行指定网址的 DNS 查询。
    • preconnect：要求浏览器提前与给定服务器，建立 HTTP 连接。
    • prefetch：要求浏览器提前下载并缓存指定资源，供下一个页面使用。
    • preload：要求浏览器提前下载并缓存指定资源，当前页面稍后就会用到。
    • prerender：要求浏览器提前渲染指定链接。
    • help：帮助文档的链接。
    • icon：加载文档的图标文件。
    • license：许可证链接。
    • prev：表示当前文档是系列文档的一篇，这里给出上一篇文档的链接。
    • next：系列文档下一篇的链接。
    • pingback：接收当前文档 pingback 请求的网址。
    • search：提供当前网页的搜索链接。
    • stylesheet：加载一张样式表。
  • media：外部资源生效的媒介条件。
    • print：打印时加载的css；
    • screen and (max-width: 600px)：移动设备访问时（设备宽度小于600像素）加载的样式；
  • crossorigin：加载外部资源的跨域设置。
  • href：外部资源的网址。
  • referrerpolicy：加载时Referer头信息字段的处理方法。
  • as：rel为preload/prefetch时，设置外部资源的类型。
  • type：外部资源的 MIME 类型，目前仅用于rel为preload/prefetch的情况。
  • title：加载样式表时，用来标识样式表的名称。
  • sizes：用来声明图标文件的尺寸，比如加载苹果手机的图标文件。
• title：指定网页的标题，会显示在浏览器窗口的标题栏。
• style：定义 HTML 文档的样式信息。
  • media：为样式表规定不同的媒体类型。
  • scoped：HTML5新属性，添加该属性，则样式仅应用到style元素的父元素及其子元素。
  • type：规定样式表的MIME类型。
• script：
  • 用于加载脚本代码，嵌入网页，会立即执行；
  • 加载外部脚本并执行。
  • 属性：
    • src：给出外部脚本的地址；
    • type：脚本的类型；
      • text/javascript：默认值，可省略；
      • module：表示是一个ES6模块，不是传统脚本；
    • nomodule：不支持ES6模块时加载此脚本，通常与type="module"配合使用。
    • async：异步加载，立即执行，无法保证顺序；执行的过程中文档将停止解析，直到脚本执行完毕。
    • defer：异步加载，但不是立即执行，而是页面解析完成后执行，按照加载顺序执行脚本。
    • crossorigin：HTTP 请求的头信息会加上origin字段。
    • integrity：给出外部脚本的哈希值，防止脚本被篡改。只有哈希值相符的外部脚本，才会执行。
    • nonce：一个密码随机数，由服务器在 HTTP 头信息里面给出，每次加载脚本都不一样。它相当于给出了内嵌脚本的白名单，只有在白名单内的脚本才能执行。
    • referrerpolicy：HTTP 请求的Referer字段的处理方法。
• noscript：浏览器不支持或关闭 JavaScript 时，所要显示的内容。
• base：设置网页内部相对 URL 的计算基准；
  • href：规定页面中所有相对链接的基准 URL。
  • target：所有的超链接和表单在何处打开，会被每个链接中的 target 属性覆盖。
• HTML5不支持：basefont；

1.2.3、语义结构标签：

• header
  • 表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。
  • 一个页面可有多个，但一个场景只能有一个，不能嵌套另外的header/footer。
• footer：表示网页、文章或章节的尾部。通常包含版权信息或者其他相关信息，不能嵌套另外的header/footer。
• main：html的顶层标签，页面的主体内容，一个页面只能有一个。
• nav：放置页面或文档的导航信息
• article：页面里面一段完整的内容，可以有自己的标题。
• section：一个含有主题的独立部分，通常用在文档里面表示一个章节。
• aside：放置与网页或文章主要内容间接相关的部分。文章级别的可以用来放置补充信息、评论或注释。
• h1 to h6：表示文章的标题。按照标题的等级，一共分成六级。
• hgroup：标题容器标签，主标