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…
- charset:指定网页的编码方式,例如:
- 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
:用来声明图标文件的尺寸,比如加载苹果手机的图标文件。
- rel:必需属性,外部资源与当前文档之间的关系。
- 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:标题容器标签,主标题包含多级标题(比如带有副标题),可将多级标题放在其中。
- address:表示某人或某个组织的联系方式(不适用于地址),通常放在footer内。
- details:只有 Chrome 和 Safari 6 支持;规定了用户可见的或者隐藏的需求的补充细节。
- summary:一个可见的标题。 当用户点击标题时会显示出详细信息。
- 其他内容:对用户是不可见的,除非设置了 open 属性。
- dialog:定义一个对话框、确认框或窗口。
- open:规定 dialog 元素是有效的,用户可以与它进行交互。
1.2.4、文本标签:
- div p span:区块、段落、通用目的的行内标签;
- abbr mark pre small:行内缩写 / 行内亮黄背景标记 / 保留原来格式 / 行内小一号字体;
- strong/b:加粗,前者具有引起注意的语义;
- em/i:斜体,前者具有强调语义;
- del/s:删除线,前者表示删除内容;
- ins/u:下划线,前者表示添加内容;后者提供某种注释,常表示拼写错误;
- br/wbr hr:换行/可选断行 水平线;
- bdi/bdo:文字方向,后者dir属性ltr/rtl;
- time/data:提供机器可读的时间格式/内容;
- blockquote/cite/q:引用;块级容器/表示引言出处或者作者,斜体表示/行内标签,默认自动添加引号;
- sub/sup/var:上标/下标/变量;
- code/samp/kbd/dfn:行内计算机代码,多行配合pre使用 / 行内计算机输出内容 / 行内键盘输入 / 行内术语;
- ruby/rp/rt/rb:语音