目录
1. 根元素
2. 文档元数据
3. 内容分区
4. 文本内容
5. 内联文本语义
6. 图片和多媒体
7. 内嵌内容
8. 脚本
9. 编辑标识
10. 表格内容
11. 表单
12. 交互元素
13. Web 组件
14. 过时的和弃用的元素
15. 参考链接
首页 web前端 html教程 html标签分类

html标签分类

Apr 28, 2018 pm 04:44 PM
html 分类 标签

将  HTML 元素按功能进行分组。先简单会汇总下,熟悉的放前面。

根元素:<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>
登录后复制

1. 根元素

<html>  HTML文档的根
登录后复制

2. 文档元数据

元数据(Metadata)含有页面的相关信息,包括样式、脚本及数据,能帮助一些软件 (如搜索引擎, 浏览器等等)更好地运用和渲染页面。对于样式和脚本的元数据,可以直接在网页里定义,也可以链接到包含相关信息的外部文件。

<link> 链接<meta> 元数据信息,(<base>, <link>, <script>, <style> 或 <title>不能表示的元数据信息) 
<style> 样式信息
<style> 文档标题
登录后复制

3. 内容分区

内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素,来为页面内容创建明确的大纲,以便区分各个章节的内容。

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

4. 文本内容

使用 HTML 文本内容元素来组织在开标签 和闭标签 里的块或章节的内容。这些元素能标识内容的宗旨或结构,而这对于 accessibility 和 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>表示段落级元素之间的主题转换,视觉上看是水平线
登录后复制

5. 内联文本语义

使用 HTML 内联文本语义(Inline text semantics)定义语句,结构,可以是一个词,一段,或任意风格的文字。

<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>
登录后复制

6. 图片和多媒体

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

7. 内嵌内容

除了常规的多媒体内容,HTML 可以包括各种其他的内容,即使它并不容易交互。

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

8. 脚本

为了创建动态内容和 Web 应用程序,HTML 支持使用脚本语言,最突出的就是 JavaScript。某些元素支持此功能。

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

9. 编辑标识

这些元素能标示出某个文本被更改过的部分。

<del>  表示一些被从文档中删除的文字内容<ins>  定义已经被插入文档中的文本
登录后复制

10. 表格内容

这里的元素用于创建和处理表格数据。元素在一个 元素中可以出现一个或者更多。

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

11. 表单

HTML 提供了许多可一起使用的元素,这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。

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

12. 交互元素

HTML 提供了一系列有助于创建交互式用户界面对象的元素。

<details><summary> 用作 一个<details>元素的一个内容的摘要,标题或图例。<dialog> 对话框<menu> 菜单
登录后复制

13. Web 组件

Web 组件是种近似 HTML(HTML-related) 的技术,这使得它能够,从本质上讲,创建和使用自定义元素,就好像它是普通的 HTML。此外,你甚至可以创建自定义版本的标准 HTML 元素。(注意:规范还没有确定)

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

14. 过时的和弃用的元素

<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>
登录后复制

15. 参考链接

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

  • php中文网在线手册 http://www.php.cn/course/27.html


以上是html标签分类的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1666
14
CakePHP 教程
1426
52
Laravel 教程
1328
25
PHP教程
1273
29
C# 教程
1254
24
HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

您如何在PHP中解析和处理HTML/XML? 您如何在PHP中解析和处理HTML/XML? Feb 07, 2025 am 11:57 AM

本教程演示了如何使用PHP有效地处理XML文档。 XML(可扩展的标记语言)是一种用于人类可读性和机器解析的多功能文本标记语言。它通常用于数据存储

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

See all articles