>  기사  >  웹 프론트엔드  >  HTML 태그 분류

HTML 태그 분류

不言
不言원래의
2018-04-28 16:44:192542검색

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. 문서 메타데이터

메타데이터에는 일부 소프트웨어(예: 검색 엔진, 브라우저 등)를 더 잘 사용하고 페이지 렌더링. 스타일과 스크립트에 대한 메타데이터는 웹 페이지에서 직접 정의하거나 관련 정보가 포함된 외부 파일에 연결할 수 있습니다.

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

3. 콘텐츠 파티션

콘텐츠 파티션 요소를 사용하면 문서 콘텐츠를 논리적으로 구성할 수 있습니다. 머리글, 바닥글, 탐색, 제목(h1~h6) 등의 분할 요소를 사용하여 각 장의 내용을 구분할 수 있도록 페이지 내용에 대한 명확한 개요를 만듭니다.

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

4. 텍스트 콘텐츠

HTML 텍스트 콘텐츠 요소를 사용하여 여는 태그와 닫는 태그의 블록 또는 섹션 콘텐츠를 구성합니다. 이러한 요소는 접근성과 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 인라인 텍스트 의미론을 사용하여 단어, 단락 또는 텍스트 스타일이 될 수 있는 명령문과 구조를 정의하세요.

<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. 스크립트

동적 콘텐츠와 웹 애플리케이션을 만들기 위해 HTML은 가장 두드러진 JavaScript인 스크립트 언어 사용을 지원합니다. 일부 요소는 이 기능을 지원합니다.

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

9. 태그 편집

이 요소는 특정 텍스트의 변경된 부분을 표시할 수 있습니다.

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

10. 테이블 콘텐츠

여기에 있는 요소는 테이블 데이터를 생성하고 처리하는 데 사용됩니다. 하나 이상의 요소가 요소에 나타날 수 있습니다.

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

11. Forms

HTML은 사용자가 작성하여 웹사이트나 애플리케이션에 제출할 수 있는 양식을 만드는 데 함께 사용할 수 있는 다양한 요소를 제공합니다.

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

12. Interactive Elements

HTML은 대화형 사용자 인터페이스 개체를 만드는 데 도움이 되는 일련의 요소를 제공합니다.

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

13. 웹 구성 요소

웹 구성 요소는 기본적으로 일반 HTML인 것처럼 사용자 정의 요소를 생성하고 사용할 수 있는 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으로 문의하세요.