2.元素—上-灵析社区

一、什么是 HTML 标签？

HTML 超文本标记语言标记标签通常被称为 HTML 标签
HTML 标签是 HTML 语言中最基本单位和重要组成部分
HTML 标签不区分大小写，从一致性、可读性等方面来说，最好仅使用小写字母
HTML 标签以尖括号（ <> ）开始和结束

通常成对出现，分别是开始标签和结束标签，也可以称为开放标签和闭合标签

自闭合标签只有其本身，在开始标签中自动闭合

二、HTML 标签区分大小写吗？

HTML 标签不区分大小写

输入标签时，既可以使用大写字母，也可以使用小写字母

从一致性、可读性等方面来说，最好仅使用小写字母

三、什么是 HTML 元素？

HTML 元素是指从开始标签到结束标签的所有代码

开始标签：包含元素的名称，被左、右角括号所包围。表示元素从这里开始或者开始起作用
结束标签：与开始标签相似，只是其在元素名之前包含了一个斜杠，表示着元素的结尾
内容：元素的内容
元素：开始标签、结束标签与元素相结合，便是一个完整的元素

四、HTML 元素有哪些分类方法？

按闭合特征分类

双标签元素：开始标签和结束标签成对，中间包括内容

单标签元素：空元素，开始标签自动闭合，没有内容

按显示方式分类

行内元素（内联元素）

只占据它对应标签的边框所包含的空间

块级元素

占据其父元素（容器）的整个空间

通常浏览器会在块级元素前后另起一行

块级元素可以包含行内元素和其他块级元素

按 HTML5 规范文档（HTML-conformant document）分类
主内容类：描述了很多元素共享的内容规范
元数据内容（Metadata content）：此类元素修改文档的其余部分的陈述或者行为，建立与其他文档的链接，或者传达其他外带信息
举例： <base> <link> <meta> <noscript> <script> <style> <title>
流式元素（Flow content）：此类元素同行包含文本或植入的内容
举例： <a> <abbr> <address> <article> <aside> <audio> <b> <bdo> <bdi> <blockquote> <br> <button> <canvas> <cite> <code> <data> <datalist> <del> <details> <dfn> <div> <dl> <em> <embed> <fieldset> <figure> <footer> <form> <h1> <h2> <h3> <h4> <h5> <h6> <header> <hgroup> <hr> <i> <iframe> <img> <input> <ins> <kbd> <label> <main> <map> <mark> <math> <menu> <meter> <nav> <noscript> <object> <ol> <output> <p> <pre> <progress> <q> <ruby> <s> <samp> <script> <section> <select> <small> <span> <strong> <sub> <sup> <svg> <table> <template> <textarea> <time> <ul> <var> <video> <wbr> 等和 Text

以下元素仅限于某种特殊情况，属于此类

<area> 仅限于它作为 <map> 的子元素时

章节元素（Heading content）：隶属于分节内容模型的元素，再当前的大纲中创建一个分节。此分节将定义 <header> 元素、 <footer> 元素和标题元素的范围

举例： <article> <aside> <nav> 和 <section>

标题元素（Heading content）：定义了分节的标题，而这个分节可能由一个明确的分节内容元素直接标记，也可能由标题本身隐式地定义

举例： <h1> - <h6> 和 <hgroup>

短语元素（Phrasing content）：规定文本和它包含的标记，一些短语元素构成段落

举例： <abbr> <audio> <b> <bdo> <br> <button> <canvas> <cite> <code> <datalist> <dfn> <em> <embed> <i> <iframe> <img> <input> <kbd> <label> <mark> <math> <meter> <noscript> <object> <output> <progress> <q> <ruby> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <svg> <textarea> <time> <var> <video> <wbr> 和 plain text

以下元素仅限于某种特殊情况，属于此类

<a> 仅限于它包含 phrasing content 时

<area> 仅限于它作为 <map> 的子元素时

<del> 仅限于它包含 phrasing content 时

<ins> 仅限于它包含 phrasing content 时

<map> 仅限于它包含 phrasing content 时

嵌入元素（Embedded content）：输入另一个资源或者将来自另一种标记语言或命名空间的内容插入到文档中

举例： <audio> <canvas> <embed> <iframe> <img> <math> <object> <svg> <video>

交互元素（Interactive content）：交互式内容包含为用户交互而特别设计的元素

举例： <a> <button> <details> <embed> <iframe> <label> <select> 和 <textarea>

以下元素仅限于某种特殊情况，属于此类

<audio> 仅限于 controls 属性存在

<img> 仅限于 usemap 属性存在

<input> 仅限于 type 属性不处于隐藏（hidden）状态

<menu> 仅限于 type 属性处于工具栏（toolbar）状态

<video> 仅限于 controls 属性存在

表单相关内容类：描述了表单相关元素共有的内容规范

可列举的元素（listed）

举例： <button> <fieldset> <input> <object> <output> <select> 和 <textarea>

可标签的元素（labelable）

可以和 <label> 相关联的元素

举例： <button> <input> <meter> <output> <progress> <select> 和 <textarea>

可提交的元素（submittable）

包括当表单提交时，可以用来组成表单数据的元素

举例： <button> <input> <object> <select> 和 <textarea>

可重置的元素（resettable）

当表单重置时会被重置的元素

举例： <input> <output> <select> 和 <textarea>

特殊内容类：描述了仅在某些特殊元素商才需要遵守的规范，通常这些元素都有特殊的上下文关系

支持脚本元素：不会直接渲染输出在页面文档中。被用来存放脚本代码及脚本代码所要用到的数据

举例： <script> <template>

透明内容模型元素（Transparent content model）

如果一个元素拥有透明内容模型，将透明标签删除，依然是合法的 HTML5 元素

举例： <del> <ins>

五、什么是 HTML 头部元素？

HTML 头部元素，即 <head> 元素

HTML 头部元素的内容不会在浏览器中显示
HTML 头部元素的作用是保存页面的标题、元数据

六、什么是元数据？

元数据（Metadata），简单的来说就是描述数据的数据
HTML 文件在头部元素，即 <head> 标签中包含描述该文档的元数据
HTML 元数据通常使用 <meta> 标签表示，共有 4 种类型

如果设置了 name 属性

meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面

meta 指定了元素的类型，说明该元素包含了什么类型的信息

与 content 一起使用，后者指定实际的元数据内容，用来添加 author description 用于提交作者、摘要和 SEO

如果设置了 http-equiv 属性

meta 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同

content-security-policy

允许页面作者定义当前页的内容策略

指定允许的服务器源和脚本，有助于防止跨站点脚本攻击（XSS）

content-type

用于声明文档类型，如 text/html; charset=utf-8

default-style

设置默认 CSS 样式表组的名称

content 属性的值必须匹配同一文档中一个 link 元素上的 title 属性的值

x-ua-compatible

content 属性必须为 IE=edge

refresh

content 只包含一个正整数，则为重新载入页面的时间间隔（秒）

content 包含一个正整数，并且后面跟着字符串 ;ulr= 和一个合法的 URL，则是重定向到指定链接的时间间隔（秒）

如果设置了 charset 属性，

meta 元素是一个字符集声明，告诉文档使用哪种字符编码

值与 ASCII 大小写（ASCII case-insensitive）无关，如 utf-8

如果设置了 itemprop 属性，meta 元素提供用户定义的元数据

content 属性对应用户定义的值，可用于数据标记和结构化数据提交

property 属性通常与 itemprop作用一致，如 Facebook 编写的元数据协议（Open Graph protocol）使用 property 声明属性名

七、什么是 Open Graph protocol？

元数据协议（Open Graph Data）由 Facebook 编写制定的 Metatags 规格，用来标注页面

帮助社交媒体、搜索引擎高效、准确地获取网页的标题、主图及元数据
使得网页在社交分享及搜索结果中有更好的展现
除网页外，还可以用于声明将音乐、视频、文章、书籍、用户信息等转换为图形对象

应用元数据协议，需要在页面添加 <meta> 标签放在网页的 <head> 中，其中包括：

基本元数据

og:title - 标题
og:type - 对象类型
og:image - 图像 URL
og:url - 对象 URL

可选元数据

og:audio - 音频文件 URL
og:description - 描述
og:determiner - 出现在对象标题前的单词，可选 a / an / the / auto，默认为空
og:locale - 语言环境，格式为 language_TERRITORY，默认为 en_US
og:locale:alternate - 页面可用的其他语言环境数组
og:site_name - 网站名称，如 Facebook
og:video - 视频 URL

结构化属性

某些属性可以附加额外的元数据

og:image

og:image:url - 图像 URL

og:image:secure_url - HTTPS 下的图像 URL

og:image:type - 图像 MIME 类型

og:image:width - 图像宽度

og:image:height - 图像高度

og:image:alt - 图像内容描述（不是标题）

og:video

og:video:url - 视频 URL

og:video:secure_url - HTTPS 下的视频 URL

og:video:type - 视频 MIME 类型

og:video:width - 视频宽度

og:video:height - 视频高度

og:audio

og:audio:url - 音频 URL

og:audio:secure_url - HTTPS 下的音频 URL

og:audio:type - 音频 MINE 类型

2.元素—上-灵析社区

一、什么是 HTML 标签 ？

二、HTML 标签区分大小写吗 ？

三、什么是 HTML 元素 ？

四、HTML 元素有哪些分类方法 ？

五、什么是 HTML 头部元素 ？

六、什么是元数据 ？

七、什么是 Open Graph protocol？

一、什么是 HTML 标签？

二、HTML 标签区分大小写吗？

三、什么是 HTML 元素？

四、HTML 元素有哪些分类方法？

五、什么是 HTML 头部元素？

六、什么是元数据？