html tag classification

不言
Release: 2018-04-28 16:44:19
Original
2556 people have browsed it

Group HTML elements by function. Let’s briefly summarize it first, and put the familiar ones first.

根元素:<html> 文档元数据:<link>、<meta>、<style>、<style>
内容分区:<header>、<nav>、 <section>、<aside> 、<footer> 、<h1>~<h6> 、<article> 、<address>、<hgroup> 
文本内容:<main>、<p>、<p>、<pre class="brush:php;toolbar:false">、<ol>、 <ul>、<li>、<dl> 、<dt>、<dd>、<figure> 、<figcaption>、<blockquote> 、<hr>
内联文本语义:<span>、<a>、<strong>、<em>、<q>、<br>、<mark>、<code>、<abbr>、<b>、<bdi>、<bdo>、<sub>、<sup>、<time>、<i>、<u>、<cite>、<data>、<kbd>、<nobr>、<s>、<samp>、<tt>、<var>、<wbr>、<rp>、<rt>、<rtc>、<ruby>
图片和多媒体:<img><audio> <video><track><map><area>
内嵌内容:<iframe>、<embed>、<object> 、<param>、<picture>、<source>
脚本:<canvas>、<noscript>、<script>
编辑标识:<del>、<ins> 
表格内容:<table>、<caption>、<thead>、<tbody>、<tfoot>、<tr>、、<col><colgroup>、<th>、<td>
表单:<form> 、<input>、<textarea> 、<label>、<button>、<datalist>、<fieldset>、<legend>、<meter>、<optgroup>、<option>、<output>、<progress>、<select>
交互元素<details>、<summary>、<dialog>、<menu>Web 组件:<slot>、<template>
过时的和弃用的元素:<acronym><applet><basefont><bgsound><big><blink><center><command><content><dir><element><font><frame><frameset><image><isindex><keygen><listing><marquee><menuitem><multicol><nextid><nobr><noembed><noframes><plaintext><spacer><strike><shadow><tt><xmp>
Copy after login

1. Root element

<html>  HTML文档的根
Copy after login

2. Document metadata

Metadata contains page-related information, including styles, scripts and data. It can help some software (such as search engines, browsers, etc.) better use and render pages. Metadata for styles and scripts can be defined directly in the web page or linked to external files containing related information.

<link> 链接<meta> 元数据信息,(<base>, <link>, <script>, <style> 或 <title>不能表示的元数据信息) 
<style> 样式信息
<style> 文档标题
Copy after login

3. Content Partition

The content partition element allows you to logically organize document content. Use partitioning elements including header, footer, navigation, and title (h1~h6) to create a clear outline for the page content to distinguish the content of each chapter.

<header> 表示一组引导性的帮助
<nav>  导航
<section> 表示文档中的一个区域(或节),通过是否含一个标题作为子节点来辨识<section>
<aside> 表示与其余页面无关的内容部分
<footer> 表示最近一个章节内容或者根节点元素的页脚<h1>~<h6> 标题
<article> 表示文档、页面、应用或网站中的独立结构
<address> 地址信息
<hgroup> 代表一个段的标题
Copy after login

4. Text content

Use HTML text content elements to organize the content of blocks or sections in opening tags and closing tags. These elements identify the purpose or structure of the content, which is important for accessibility and SEO.

<main> 文档<body>或应用的主体部分
<div> 文档分区元素, 通用型流内容容器
<p> 段落
<pre class="brush:php;toolbar:false"> 预定义格式文本
<ol> 有序列表
<ul> 无序列表
<li> 列表条目元素
<dl> 描述列表元素
<dt>术语定义元素
<dd> 描述元素,描述列表  (<dl>) 的子元素,<dd>与 <dt> 一起用。
<figure> 代表一段独立的内容, 经常与说明(caption) 
<figcaption> 配合使用<figcaption>图片说明/标题,于描述其父节点 
<figure> 元素里的其他数据
<blockquote> HTML 块级引用元素<hr>表示段落级元素之间的主题转换,视觉上看是水平线
Copy after login

5. Inline text semantics

Use HTML inline text semantics (Inline text semantics) to define statements and structures, which can be a word, a paragraph, or any style of text.

<kbd> 表示用户输入
<span> 通用行内容器
<a> 超链接
<strong> 粗体显示
<em> 标记出需要用户着重阅读的内容,可通过嵌套加深着重程度
<q> 短的引用文本
<br> 换行
<mark> 代表突出显示的文字,可以用来显示搜索引擎搜索后关键词。
<code> 呈现一段计算机代码
<abbr> 缩写,并可选择提供一个完整的描述
<b>提醒注意,样式和粗体类似(不要用于显示粗体,用css font-weight来创建粗体)
<bdi> 双向隔离元素
<bdo> 双向覆盖元素
<sub> 排低文本
<sup> 排高文本
<time> 时间
<i> 区分普通文本的一系列文本,内容通常以斜体显示
<u> 使文本在其内容的基线下的一行呈现下划线
<cite> 表示一个作品的引用
<data> 将一个指定内容和机器可读的翻译联系在一起。但如果内容是与 time 或者 date 相关的,一定要使用 <time>。
<dfn> 表示术语的一个定义
<kbd> 表示用户输入
<nobr> 阻止文本自动拆分成新行,不应该使用,应该使用css属性
<s> 删除线,提倡使用 <del> 和 <ins> 元素
<samp> 标识计算机程序输出
<tt> 电报文本元素
<var> 表示变量的名称,或者由用户提供的值
<wbr> 一个文本中的位置,其中浏览器可以选择来换行<rp><rt><rtc><ruby>
Copy after login

6. Images and Multimedia

HTML 支持各种多媒体资源,例如图像,音频和视频。
<img> 图片
<audio> 音频内容
<video> 视频内容
<track> 被当作媒体元素—
<audio> 和 <video>的子元素来使用。它允许指定计时字幕(或者基于事件的数据),例如自动处理字幕。
<map> 与 <area> 属性一起使用来定义一个图像映射(一个可点击的链接区域).
<area> 在图片上定义一个热点区域,可以关联一个超链接。
<area>元素仅在<map>元素内部使用。
Copy after login

7. Embedded Content

In addition to regular multimedia content, HTML can include a variety of other content, even if it is not easy Interaction.

<iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中。
<embed> 将外部内容嵌入文档中的指定位置
<object> 表示引入一个外部资源
<param>  定义了 <object>的参数<picture> 容器,用来为其内部特定的 <img> 元素提供多样的 <source> 元素。<source> 资源
Copy after login

8. Scripting

To create dynamic content and web applications, HTML supports the use of scripting languages, the most prominent being JavaScript. Some elements support this feature.

<canvas> 通过脚本(通常是JavaScript)绘制图形<noscript> 替代未执行脚本<script> 用于嵌入或引用可执行脚本
Copy after login

9. Edit tags

These elements can mark the changed part of a certain text.

<del>  表示一些被从文档中删除的文字内容<ins>  定义已经被插入文档中的文本
Copy after login

10. Table content

The elements here are used to create and process table data. One or more elements can appear in an element.

<table> 表格
<caption> 表格的标题,通常作为 <table> 的第一个子元素出现
<thead> 表格页眉
<tbody> 表格主体
<tfoot> 表格页脚<tr> 行<col> 列, 通常位于<colgroup>元素内
<colgroup> 表格列组
<th> 表头<td> 表格单元
Copy after login

11. Forms

HTML provides a number of elements that can be used together to create a form that users can fill out and submit to a website or application.

<form> 表单
<input> 输入域
<textarea> 多行文本域
<label> 标题
<button> 按钮
<datalist> 包含了一组<option>元素,这些元素表示其它表单控件可选值<fieldset> 一组相关的表单元素,并使用外框包含起<legend> 表示它的父元素<fieldset>的内容的标题
<meter> 显示已知范围的标量值或者分数值
<optgroup> 一个 <select> 元素中的一组选项
<option>  用于定义在<select>,  <optgroup> 或<datalist> 元素中包含的项
<output> 表示计算或用户操作的结果
<progress> 进度条
<select> 选项菜单
Copy after login

12. Interactive elements

HTML provides a series of elements that help create interactive user interface objects.

<details><summary> 用作 一个<details>元素的一个内容的摘要,标题或图例。<dialog> 对话框<menu> 菜单
Copy after login

13. Web Components

Web Components are an HTML-related technology that enables, in essence, the creation and use of custom elements, just like It's plain HTML. Additionally, you can even create customized versions of standard HTML elements. (Note: The specification has not been finalized yet)

<slot> web组件技术的一部分,slot是web组件的一个占位符<template> 用于保存客户端内容的机制
Copy after login

14. Obsolete and deprecated elements

<acronym><applet><basefont><bgsound><big><blink><center><command><content><dir><element><font><frame><frameset><image><isindex><keygen><listing><marquee><menuitem><multicol><nextid><nobr><noembed><noframes><plaintext><spacer><strike><shadow><tt><xmp>
Copy after login

15. Reference link

  • https:/ /developer.mozilla.org/zh-CN/docs/Web/HTML/Element

  • ##php Chinese website online manual http://www.php.cn/course/27.html


The above is the detailed content of html tag classification. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template