(二)HTML标签与元素

HTML标签与元素

  • HTML标签与元素
    • 1、标签
      • 1.1、介绍
      • 1.2、网页标签组成
        • 1.2.1、顶级标签:
        • 1.2.2、网页元信息head
        • 1.2.3、语义结构标签:
        • 1.2.4、文本标签:
        • 1.2.5、列表标签:
        • 1.2.6、媒体标签
        • 1.2.7、链接标签
        • 1.2.8、ifream标签
        • 1.2.9、表格:
        • 1.2.10、表单:
    • 2、元素
      • 2.1 块级元素
      • 2.2 行内元素
      • 2.3 行内块元素
      • 2.4 空(void)元素

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:标题容器标签,主标

你可能感兴趣的:(HTML,前端,html)