diff options
Diffstat (limited to 'files/zh-cn/conflicting/web/html')
| -rw-r--r-- | files/zh-cn/conflicting/web/html/element/index.html | 592 | ||||
| -rw-r--r-- | files/zh-cn/conflicting/web/html/quirks_mode_and_standards_mode/index.html | 27 |
2 files changed, 619 insertions, 0 deletions
diff --git a/files/zh-cn/conflicting/web/html/element/index.html b/files/zh-cn/conflicting/web/html/element/index.html new file mode 100644 index 0000000000..4deec7c2ee --- /dev/null +++ b/files/zh-cn/conflicting/web/html/element/index.html @@ -0,0 +1,592 @@ +--- +title: HTML5 标签列表 +slug: conflicting/Web/HTML/Element +tags: + - HTML + - HTML5 + - Web + - 初学者 + - 指南 +translation_of: Web/HTML/Element +translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list +original_slug: Web/Guide/HTML/HTML5/HTML5_element_list +--- +<p>这里列出了所有<strong>标准化的 HTML5 元素</strong>，使用起始标签描述，按照功能分组。与列出所有标准化的、非标准化的、有效的、废弃的标签的 <a href="/zh-CN/docs/HTML/Element" title="HTML/Element">HTML 元素索引</a> 不同的是，该页只列出有效的 HTML5 元素。新网站应当只使用这里列出的元素。</p> + +<p>符号 <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a> 代表该元素是在 HTML5 中新增的。另外注意，这里列出的其他元素可能在 HTML5 标准中得到了扩充或经过修改。</p> + +<h2 id="根元素">根元素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("html")}}</td> + <td>代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。</td> + </tr> + </tbody> +</table> + +<h2 id="文档元数据">文档元数据</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("head")}}</td> + <td>代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。</td> + </tr> + <tr> + <td>{{HTMLElement("title")}}</td> + <td>定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。</td> + </tr> + <tr> + <td>{{HTMLElement("base")}}</td> + <td>定义页面上相对 URL 的基准 URL。</td> + </tr> + <tr> + <td>{{HTMLElement("link")}}</td> + <td>用于链接外部资源到该文档。</td> + </tr> + <tr> + <td>{{HTMLElement("meta")}}</td> + <td>定义其他 HTML 元素无法描述的元数据。</td> + </tr> + <tr> + <td>{{HTMLElement("style")}}</td> + <td>用于内联 CSS。</td> + </tr> + </tbody> +</table> + +<h2 id="脚本">脚本</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("script")}}</td> + <td>定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。</td> + </tr> + <tr> + <td>{{HTMLElement("noscript")}}</td> + <td>定义当浏览器不支持脚本时显示的替代文字。</td> + </tr> + <tr> + <td>{{HTMLElement("template")}}<a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>通过 JavaScript 在运行时实例化内容的容器。</td> + </tr> + </tbody> +</table> + +<h2 id="章节">章节</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("body")}}</td> + <td> + <div>代表 HTML 文档的内容。在文档中只能有一个 <code><body></code> 元素。</div> + </td> + </tr> + <tr> + <td>{{HTMLElement("section")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义文档中的一个章节。</td> + </tr> + <tr> + <td>{{HTMLElement("nav")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义只包含导航链接的章节。</td> + </tr> + <tr> + <td>{{HTMLElement("article")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义可以独立于内容其余部分的完整独立内容块。</td> + </tr> + <tr> + <td>{{HTMLElement("aside")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/HTML/Element/Heading_Elements"><code><h1>,<h2>,<h3>,<h4>,<h5>,<h6></code></a></td> + <td>标题元素实现了六层文档标题，<code><h1></code> 是最大的标题，<code><h6></code> 是最小的标题。标题元素简要地描述章节的主题。</td> + </tr> + <tr> + <td>{{HTMLElement("header")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。</td> + </tr> + <tr> + <td>{{HTMLElement("footer")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。</td> + </tr> + <tr> + <td>{{HTMLElement("address")}}</td> + <td>定义包含联系信息的一个章节。</td> + </tr> + <tr> + <td>{{HTMLElement("main")}}<a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义文档中主要或重要的内容。</td> + </tr> + </tbody> +</table> + +<h2 id="组织内容">组织内容</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("p")}}</td> + <td>定义一个段落。</td> + </tr> + <tr> + <td>{{HTMLElement("hr")}}</td> + <td>代表章节、文章或其他长内容中段落之间的分隔符。</td> + </tr> + <tr> + <td>{{HTMLElement("pre")}}</td> + <td>代表其内容已经预先排版过，格式应当保留 。</td> + </tr> + <tr> + <td>{{HTMLElement("blockquote")}}</td> + <td>代表引用自其他来源的内容。</td> + </tr> + <tr> + <td>{{HTMLElement("ol")}}</td> + <td>定义一个有序列表。</td> + </tr> + <tr> + <td>{{HTMLElement("ul")}}</td> + <td>定义一个无序列表。</td> + </tr> + <tr> + <td>{{HTMLElement("li")}}</td> + <td>定义列表中的一个列表项。</td> + </tr> + <tr> + <td>{{HTMLElement("dl")}}</td> + <td>定义一个定义列表（一系列术语和其定义）。</td> + </tr> + <tr> + <td>{{HTMLElement("dt")}}</td> + <td>代表一个由下一个 <code><dd></code> 定义的术语。</td> + </tr> + <tr> + <td>{{HTMLElement("dd")}}</td> + <td>代表出现在它之前术语的定义。</td> + </tr> + <tr> + <td>{{HTMLElement("figure")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个和文档有关的图例。</td> + </tr> + <tr> + <td>{{HTMLElement("figcaption")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个图例的说明。</td> + </tr> + <tr> + <td>{{HTMLElement("div")}}</td> + <td>代表一个通用的容器，没有特殊含义。</td> + </tr> + </tbody> +</table> + +<h2 id="文字形式">文字形式</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("a")}}</td> + <td>代表一个链接到其他资源的<em>超链接</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("em")}}</td> + <td>代表<em>强调</em> 文字。</td> + </tr> + <tr> + <td>{{HTMLElement("strong")}}</td> + <td>代表<em>特别重要</em> 文字。</td> + </tr> + <tr> + <td>{{HTMLElement("small")}}</td> + <td>代表<em>注释</em> ，如免责声明、版权声明等，对理解文档不重要。</td> + </tr> + <tr> + <td>{{HTMLElement("s")}}</td> + <td>代表<em>不准确或不相关</em> 的内容。</td> + </tr> + <tr> + <td>{{HTMLElement("cite")}}</td> + <td>代表<em>作品标题</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("q")}}</td> + <td>代表内联的<em>引用</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("dfn")}}</td> + <td>代表一个术语包含在其最近祖先内容中的<em>定义</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("abbr")}}</td> + <td>代表<em>省略</em> 或<em>缩写</em> ，其完整内容在 <code>title</code> 属性中。</td> + </tr> + <tr> + <td>{{HTMLElement("data")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>关联一个内容的<em>机器可读的等价形式</em> （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）。</td> + </tr> + <tr> + <td>{{HTMLElement("time")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>日期</em> 和<em>时间</em> 值；机器可读的等价形式通过 <code>datetime</code> 属性指定。</td> + </tr> + <tr> + <td>{{HTMLElement("code")}}</td> + <td>代表<em>计算机代码</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("var")}}</td> + <td>代表<em>代码中的变量</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("samp")}}</td> + <td>代表程序或电脑的<em>输出</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("kbd")}}</td> + <td>代表<em>用户输入</em> ，一般从键盘输出，但也可以代表其他输入，如语音输入。</td> + </tr> + <tr> + <td>{{HTMLElement("sub")}},{{HTMLElement("sup")}}</td> + <td>分别代表<em>下标</em> 和<em>上标</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("i")}}</td> + <td>代表一段<em>不同性质</em> 的文字，如技术术语、外文短语等。</td> + </tr> + <tr> + <td>{{HTMLElement("b")}}</td> + <td>代表一段<em>需要被关注</em> 的文字。</td> + </tr> + <tr> + <td>{{HTMLElement("u")}}</td> + <td>代表一段需要<em>下划线</em>呈现的文本注释，如标记出拼写错误的文字等。</td> + </tr> + <tr> + <td>{{HTMLElement("mark")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一段需要被高亮的<em>引用</em> 文字。</td> + </tr> + <tr> + <td>{{HTMLElement("ruby")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表被<em>ruby 注释</em> 标记的文本，如中文汉字和它的拼音。</td> + </tr> + <tr> + <td>{{HTMLElement("rt")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>ruby 注释</em> ，如中文拼音。</td> + </tr> + <tr> + <td>{{HTMLElement("rp")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表 ruby 注释两边的<em>额外插入文本</em> ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。</td> + </tr> + <tr> + <td>{{HTMLElement("bdi")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表需要<em>脱离</em> 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。</td> + </tr> + <tr> + <td>{{HTMLElement("bdo")}}</td> + <td>指定子元素的<em>文本方向</em> ，显式地覆盖默认的文本方向。</td> + </tr> + <tr> + <td>{{HTMLElement("span")}}</td> + <td>代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。</td> + </tr> + <tr> + <td>{{HTMLElement("br")}}</td> + <td>代表<em>换行</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("wbr")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>建议换行 (Word Break Opportunity)</em> ，当文本太长需要换行时将会在此处添加换行符。</td> + </tr> + </tbody> +</table> + +<h2 id="编辑">编辑</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("ins")}}</td> + <td>定义<em>增加</em> 到文档的内容。</td> + </tr> + <tr> + <td>{{HTMLElement("del")}}</td> + <td>定义从文档<em>移除</em> 的内容。</td> + </tr> + </tbody> +</table> + +<h2 id="嵌入内容">嵌入内容</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("img")}}</td> + <td>代表一张<em>图片</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("iframe")}}</td> + <td>代表一个<em>内联的框架</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("embed")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个<em>嵌入</em> 的外部资源，如应用程序或交互内容。</td> + </tr> + <tr> + <td>{{HTMLElement("object")}}</td> + <td>代表一个<em>外部资源</em> ，如图片、HTML 子文档、插件等。</td> + </tr> + <tr> + <td>{{HTMLElement("param")}}</td> + <td>代表 <code><object></code> 元素所指定的插件的<em>参数</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("video")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一段<em>视频</em> 及其视频文件和字幕，并提供了播放视频的用户界面。</td> + </tr> + <tr> + <td>{{HTMLElement("audio")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一段<em>声音</em> ，或<em>音频流</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("source")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>为 <code><video></code> 或 <code><audio></code> 这类媒体元素指定<em>媒体源</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("track")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>为 <code><video></code> 或 <code><audio></code> 这类媒体元素指定<em>文本轨道（字幕）</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("canvas")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>位图区域</em> ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。</td> + </tr> + <tr> + <td>{{HTMLElement("map")}}</td> + <td>与 <code><area></code> 元素共同定义<em>图像映射</em> 区域。</td> + </tr> + <tr> + <td>{{HTMLElement("area")}}</td> + <td>与 <code><map></code> 元素共同定义<em>图像映射</em> 区域。</td> + </tr> + <tr> + <td>{{SVGElement("svg")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义一个嵌入式<em>矢量图</em> 。</td> + </tr> + <tr> + <td>{{MathMLElement("math")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义一段<em>数学公式</em> 。</td> + </tr> + </tbody> +</table> + +<h2 id="表格">表格</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("table")}}</td> + <td>定义<em>多维数据</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("caption")}}</td> + <td>代表<em>表格的标题</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("colgroup")}}</td> + <td>代表表格中一组<em>单列或多列</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("col")}}</td> + <td>代表表格中的<em>列</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("tbody")}}</td> + <td>代表表格中一块<em>具体数据</em> （表格主体）。</td> + </tr> + <tr> + <td>{{HTMLElement("thead")}}</td> + <td>代表表格中一块<em>列标签</em> （表头）。</td> + </tr> + <tr> + <td>{{HTMLElement("tfoot")}}</td> + <td>代表表格中一块<em>列摘要</em> （表尾）。</td> + </tr> + <tr> + <td>{{HTMLElement("tr")}}</td> + <td>代表表格中的<em>行</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("td")}}</td> + <td>代表表格中的<em>单元格</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("th")}}</td> + <td>代表表格中的<em>头部单元格</em> 。</td> + </tr> + </tbody> +</table> + +<h2 id="表单">表单</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("form")}}</td> + <td>代表一个<em>表单</em> ，由控件组成。</td> + </tr> + <tr> + <td>{{HTMLElement("fieldset")}}</td> + <td>代表<em>控件组</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("legend")}}</td> + <td>代表 <code><fieldset></code> 控件组的<em>标题</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("label")}}</td> + <td>代表表单控件的<em>标题</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}</td> + <td>代表允许用户编辑数据的<em>数据区</em> （文本框、单选框、复选框等）。</td> + </tr> + <tr> + <td>{{HTMLElement("button")}}</td> + <td>代表<em>按钮</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("select")}}</td> + <td>代表<em>下拉框</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("datalist")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表提供给其他控件的<em>一组预定义选项</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("optgroup")}}</td> + <td>代表一个<em>选项分组</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("option")}}</td> + <td>代表一个 <code><select></code> 元素或 <code><datalist></code> 元素中的一个<em>选项</em></td> + </tr> + <tr> + <td>{{HTMLElement("textarea")}}</td> + <td>代表<em>多行文本框</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("keygen")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个<em>密钥对生成器</em> 控件。</td> + </tr> + <tr> + <td>{{HTMLElement("output")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>计算值</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("progress")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>进度条</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("meter")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>滑动条</em> 。</td> + </tr> + </tbody> +</table> + +<h2 id="交互元素">交互元素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("details")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个用户可以(点击)获取额外信息或控件的<em>小部件</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("summary")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表 <code><details></code> 元素的<em>综述</em> 或<em>标题</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("menuitem")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个用户可以点击的菜单项。</td> + </tr> + <tr> + <td>{{HTMLElement("menu")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表菜单。</td> + </tr> + </tbody> +</table> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li><a href="/zh-CN/docs/HTML/HTML5" title="HTML/HTML5">一系列 HTML5 文档</a>。</li> + <li><a href="/zh-CN/docs/HTML/Element" title="HTML/Element">所有 HTML 标签的参考</a>，包括 HTML5 中不再有效的元素。</li> +</ul> diff --git a/files/zh-cn/conflicting/web/html/quirks_mode_and_standards_mode/index.html b/files/zh-cn/conflicting/web/html/quirks_mode_and_standards_mode/index.html new file mode 100644 index 0000000000..b18bccd87b --- /dev/null +++ b/files/zh-cn/conflicting/web/html/quirks_mode_and_standards_mode/index.html @@ -0,0 +1,27 @@ +--- +title: Quirks Mode and Standards Mode +slug: conflicting/Web/HTML/Quirks_Mode_and_Standards_Mode +original_slug: Quirks_Mode_and_Standards_Mode +--- +<p>在web产生初期, <span class="long_text short_text" id="result_box" lang="zh-CN"><span>网页</span><span>通常被</span><span>写</span><span>成</span><span>两个版本</span></span>: 其中一个是为网景公司的 Netscape Navigator浏览器而写, 另外一个是为微软公司的 Internet Explorer浏览器而写. 随后,当W3C组织制定了web标准,各浏览器并不能立即的严格按标准执行,因为这样做会让一些已经存在的不符合新标准的网页无法正常显示.为此<span class="long_text short_text" id="result_box" lang="zh-CN"><span>,</span><span>浏览器</span><span>推出</span><span>了</span><span>两种</span><span>模式来</span><span>分别对待</span><span>新</span><span>的</span><span>符合标准的</span><span>网也与</span><span>旧的标准指定之前遗留的</span><span>网页</span><span>.</span></span></p> +<p>如今,浏览器的渲染引擎已发展成为拥有三种渲染模式:quirks mode, almost standards mode, 和full standards mode. 在<strong>quirks mode(</strong>混杂模式<strong>)</strong>中,渲染引擎会模拟Navigator 4 和 Internet Explorer 5这些古老浏览器的不标准的渲染行为来渲染网页,以防止现代浏览器不能正常渲染已经存在的一些古老网页.在<strong>full standards mode(标准规范模式)</strong>中,渲染引擎会尽量使用HTML 和 CSS 规范规定的行为来渲染网页.在<strong>almost standards mode(接近标准模式)</strong>中,渲染引擎有极少数行为不遵循标准.</p> +<h3 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">浏览器如何决定使用何种模式?</h3> +<p>对于HTML文档,浏览器使用该文档开头定义的DOCTYPE来决定是否使用quirks mode还是standards mode来渲染. 为了让你的网页完全按照full standards mode被渲染, 请确保页面开始处包含如下例子中的DOCTYPE:</p> +<pre><!DOCTYPE html> +<html> + <head> + <meta charset=UTF-8> + <title>Hello World!</title> + </head> + <body> + </body> +</html> +</pre> +<p>例子中的DOCTYPE是这样定义的:<code><!DOCTYPE html></code>,这是有史以来最简洁的DOCTYPE了,而且也是HTML5规范所推荐的写法.早起版本的HTML标准还推荐了其他的一些DOCTYPE写法,不过.<code>只有在<!DOCTYPE html>这样的</code>DOCTYPE定义下,才可以很好的保证所有浏览器都会按照full standards mode去渲染网页,即使是老掉牙的Internet Explorer 6也会如此.再没有什么理由去使用更复杂的DOCTYPE了,因为使用它们可能让你的网页触发一些浏览器的almost standards mode 或者 quirks mode.</p> +<p>确保你已经将DOCTYPE 放在HTML文档的最开始处,如果DOCTYPE前面放置了注释或XML声明等其他元素,Internet Explorer 9或更低版本将会按照quirks mode渲染该网页.</p> +<p>在HTML5中，使用DOCTYPE的唯一目的就是要激活full standards mode.旧版本的HTML标准给DOCTYPE添加了额外的意义，但是除了在quirks mode 和 standards mode之间切换,没有浏览器使用DOCTYPE做过其他的任何事情.</p> +<h4 id="XHTML">XHTML</h4> +<p>如果你将自己的网页 <code>Content-Type</code> HTTP头的值设定为 <code>application/xhtml+xml</code> MIME类型,你不需要在网页文档内部定义任何DOCTYPE就可以开启standards mode渲染网页.这是由于<code>Content-Type</code> HTTP头的优先级是最高的.但是这样的设置会导致Internet Explorer 8及其以下版本因不认识如上的MIME类型而显示下载文件的窗口,Internet Explorer 9及其以上版本解决了这个问题.</p> +<p>如果你将自己的XHML网页的<code>Content-Type</code> HTTP头设定为<code>text/html的</code>MIME类型,浏览器将会按照HTML文件去读取它,如果想使用standards mode,你必须指定DOCTYPE.</p><h3 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">不同模式之间的差别</h3> +<p>查看 <a href="/en/Mozilla_Quirks_Mode_Behavior" title="en/Mozilla_Quirks_Mode_Behavior">list of quirks</a> 和 <a href="/en/Gecko's_"Almost_Standards"_Mode" title="en/Gecko%27s_%22Almost_Standards%22_Mode">almost standards mode</a> 了解不同模式之间的差别.</p> +<p>{{ languages( { "en": "en/Quirks_Mode_and_Standards_Mode" } ) }}</p> |