Skip to content

ia319/HTML-element-dictionary

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 

Repository files navigation


    	I.  文本格式化
基础文本:
<b> 元素用于将文本加粗。它表示文本的视觉样式,而不一定表达文本的语义。以下是 <b> 元素的基本格式和使用示例:

<b>加粗文本</b>

<base> 元素用于指定文档中所有相对 URL 的基本 URL。它通常放在 <head> 元素内。以下是 <base> 元素的基本格式和常用属性:

<base href="基础 URL" target="目标窗口">
常用属性
	1. href: 定义文档中相对 URL 的基础 URL。所有相对链接都将以此 URL 为基础。
	2. target: 定义在何处打开文档中的链接。可选值包括:
			o _blank:在新窗口或标签页中打开链接。
			o _self:在相同的框架或窗口中打开链接(默认值)。
			o _parent:在父框架中打开链接。
			o _top:在整个窗口中打开链接。

<i> 元素用
于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等,它的内容通常以斜体显示。以下是 <i> 元素的基本格式:

<i>斜体文本</i>

<strong> 元素用于表示重要的文本,通常会加粗显示。以下是 <strong> 元素的基本格式:

<strong>重要文本</strong>

<mark> 元素
表示为引用或符号目的而标记或突出显示的文本,这是由于标记的段落在封闭上下文中的相关性或重要性造成的。
以下是 <mark> 元素的基本格式:

<mark>突出显示的文本</mark>

<s> 元素 使用删除线来渲染文本。使用 <s> 元素来表示不再相关,或者不再准确的事情。但是当表示文档编辑时,不提倡使用 <s> ;为此,提倡使用 <del> 和 <ins> 元素。以下是 <s> 元素的基本格式:

<s>被删除的文本</s>

<em> 元素
将文本标记为强调(emphasis)格式。<em> 元素可以嵌套,嵌套层次越深,则强调的程度越深。通常会以斜体显示。以下是 <em> 元素的基本格式:

<em>强调文本</em>

<sub> 元素用于表示下标文本。以下是 <sub> 元素的基本格式:

<sub>下标文本</sub>

<sup> 元素用于表示上标文本。以下是 <sup> 元素的基本格式:

<sup>上标文本</sup>

<small> 元素代表旁注和小字印刷(如版权和法律文本),与其样式的呈现方式无关。默认情况下,它以比其中的文本小一号的字体大小呈现,例如从 small 变为 x-small。。以下是 <small> 元素的基本格式:

<small>较小的文本</small>

<u> 元素用于
表示行内文本拥有一个非文本形式的注释,该注释需要以某种方式渲染出来。默认情况下渲染为一个实线下划线,可以用 CSS 替换。

警告:此元素以前在旧版本的 HTML 中称为“下划线”元素,但有时仍会以这种方式被滥用。要为文本加下划线,你应该应用包含 CSS text-decoration 属性设置为 underline 的样式。
。以下是 <u> 元素的基本格式:

<u>带下划线的文本</u>

<big> 元素用于将文本显示得比周围的文本大。该元素已弃用,建议使用 CSS 进行样式设置。以下是 <big> 元素的基本格式:

<big>较大的文本</big>

<tt> 元素用于表示等宽字体(typewriter text),它已被弃用,建议使用 CSS 来实现相同的效果。以下是 <tt> 元素的基本格式:

<tt>等宽字体文本</tt>

引用和引用

<q> 元素表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本,所以请不要引入换行符; 对于长的文本的引用请使用 <blockquote> 替代。以下是 <q> 元素的基本格式:

<q>引用文本</q>

<blockquote> 元素用于表示长引用的内容,通常会有一个缩进。以下是 <blockquote> 元素的基本格式:

<blockquote cite="引用来源">
    引用内容
</blockquote>
常用属性:
	1. cite: 提供引用的来源 URL。

<cite> 元素用于表示引用的来源或作品的标题。以下是 <cite> 元素的基本格式:

<cite>引用来源或作品标题</cite>

<code> 元素用于表示计算机代码。以下是 <code> 元素的基本格式:

<code>代码内容</code>

<samp> 元素用于表示计算机程序的输出。以下是 <samp> 元素的基本格式:

<samp>程序输出文本</samp>

<kbd> 元素用于表示用户输入的文本。以下是 <kbd> 元素的基本格式:

<kbd>键盘输入</kbd>

<var> 元素用于表示变量名,通常会用斜体显示。以下是 <var> 元素的基本格式:

<var>变量名</var>

删除线和替代文本

<del> 元素用于表示文档中删除的内容。以下是 <del> 元素的基本格式:

<del cite="来源" datetime="删除时间">删除的内容</del>
<p>这个内容已于 <del datetime="2024-07-30T14:00">删除</del>。</p>
常用属性:
	1. cite: 提供删除内容的来源 URL。
	2. datetime: 定义删除的时间。

<ins> 元素用于表示已插入的文本。以下是 <ins> 元素的基本格式:

<ins datetime="插入日期时间">插入文本</ins>
常用属性:
	1. datetime: 定义文本插入的日期和时间。

<strike> 元素用于表示文本的删除线效果。它已被弃用,建议使用 CSS text-decoration: line-through; 替代。以下是 <strike> 元素的基本格式:

<strike>删除线文本</strike>

定义和说明:

<dfn> 元素用于标识一个定义的术语。以下是 <dfn> 元素的基本格式:

<dfn>术语</dfn>

<abbr> 元素用于定义缩写或首字母缩略词,并且可以提供一个完整的描述。基本格式如下:
<abbr title="完整描述">缩写</abbr>

<acronym> 元素在 HTML5 中已被弃用,但了解它的格式和用法仍然有助于理解旧的 HTML 代码。以下是 <acronym> 元素的基本格式:

<acronym title="完整描述">缩写</acronym>

与 <abbr> 类似,<acronym> 元素的 title 属性用于提供缩写的完整描述。

	II. 结构性元素

文档结构:

<html> 元素是文档的根元素。以下是 <html> 元素的基本格式:

<!DOCTYPE html>
<html lang="语言代码">
    <head>
        <meta charset="UTF-8">
        <title>文档标题</title>
    </head>
    <body>
        内容
    </body>
</html>
常用属性:
	1. lang: 定义文档的语言(例如 en 表示英语,zh 表示中文)。

<head> 元素包含文档的元数据和链接资源。以下是 <head> 元素的基本格式:

<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>

<body> 元素定义文档的主体内容。以下是 <body> 元素的基本格式:

<body>
    页面内容
</body>

<header> 元素用于定义文档或部分的头部。以下是 <header> 元素的基本格式:

<header>
    页头内容
</header>

<footer> 元素用于定义文档或部分的页脚。以下是 <footer> 元素的基本格式:

<footer>
    页脚内容
</footer>

<main> 元素用于定义文档的主要内容区域。以下是 <main> 元素的基本格式:

<main>
    主要内容
</main>

<h1> 元素用于定义文档中的最高级别标题。以下是 <h1> 元素的基本格式:

<h1>标题内容</h1>

<p> 元素用于定义段落。以下是 <p> 元素的基本格式:

<p>段落内容</p>

<section> 元素用于定义文档中的节或区域,通常包含标题和内容。以下是 <section> 元素的基本格式:

<section>
    <h2>节标题</h2>
    <p>节内容</p>
</section>

<article> 元素用于表示文档、页面、应用或网站中的独立结构,其内容应具有独立的意义。这个元素适合用来表示诸如博客文章、新闻报道、用户评论、论坛帖子等内容。以下是 <article> 元素的基本格式和一些使用示例:

<article>
    内容
</article>

<menu> 元素用于定义菜单列表,通常用于菜单项。以下是 <menu> 元素的基本格式:

<menu>
    <li>菜单项 1</li>
    <li>菜单项 2</li>
</menu>

<aside> 元素用于表示页面内容之外的部分,比如侧栏、广告、引用的侧栏内容等。这个元素的内容通常是与周围内容相关的补充信息,但如果被移除,仍不会影响周围内容的主体结构。以下是 <aside> 元素的基本格式和一些使用示例:

<aside>
    内容
</aside>

<hgroup> 元素用于将一组标题(<h1> 至 <h6>)组合在一起,这个元素已被弃用。以下是 <hgroup> 元素的基本格式:

<hgroup>
    <h1>主要标题</h1>
    <h2>副标题</h2>
</hgroup>

容器和分区:

<div> HTML 元素是流式内容的通用容器。它对内容或布局没有影响。除非以某种方式使用 CSS 对其进行样式设置(例如,直接应用样式,或者对其父元素应用某种布局模型,否则它对内容或布局没有影响。以下是 <div> 元素的基本格式:
<div>
    内容
</div>

<span> 元素用于定义内联区域,可以用于样式化或脚本化文本。以下是 <span> 元素的基本格式:

<span>内联内容</span>

<form> 元素用于定义一个用户提交数据的表单。以下是 <form> 元素的基本格式:

<form action="提交地址" method="提交方法" enctype="编码类型">
    表单控件
</form>
常用属性:
	1. action: 定义表单数据提交到的 URL。
	2. method: 定义提交表单的 HTTP 方法,通常为 GET 或 POST。
	3. enctype: 定义表单数据的编码类型(例如 application/x-www-form-urlencoded、multipart/form-data、text/plain)。

<fieldset> 元素用于将表单中的一组控件进行分组,并通常与 <legend> 元素结合使用,以提供描述。以下是 <fieldset> 元素的基本格式:

<fieldset>
    <legend>组标题</legend>
    表单控件
</fieldset>

<legend> 元素用于为 <fieldset> 元素提供标题。以下是 <legend> 元素的基本格式:

<fieldset>
    <legend>组标题</legend>
    表单控件
</fieldset>

<dl>
(或 HTML 描述列表元素)是一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据 (键 - 值对列表)。以下是 <dl> 元素的基本格式:

<dl>
    <dt>术语</dt>
    <dd>术语的定义</dd>
</dl>

<dt> 元素用于定义定义列表(<dl>)中的术语。以下是 <dt> 元素的基本格式:

<dl>
    <dt>术语</dt>
    <dd>术语的定义</dd>
</dl>

<dd> 元素用于定义定义列表(<dl>)中每个定义的描述。以下是 <dd> 元素的基本格式:

<dl>
    <dt>术语</dt>
      <dd>术语的定义</dd>
</dl>

<ul> 元素用于定义无序列表。以下是 <ul> 元素的基本格式:

<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
</ul>

<ol> 元素用于定义有序列表。以下是 <ol> 元素的基本格式:

<ol>
    <li>列表项 1</li>
    <li>列表项 2</li>
</ol>

<li> 元素用于定义列表项,通常与 <ul> 或 <ol> 元素结合使用。以下是 <li> 元素的基本格式:

<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
</ul>

<table> 元素用于定义表格。以下是 <table> 元素的基本格式:
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
</table>

<thead> 元素用于定义表格的表头部分。以下是 <thead> 元素的基本格式:

<table>
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </tbody>
</table>

<tbody> 元素用于在表格中定义表格主体部分。以下是 <tbody> 元素的基本格式:

<table>
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>页脚1</td>
            <td>页脚2</td>
        </tr>
    </tfoot>
</table>

<tfoot> 元素用于定义表格的页脚部分。以下是 <tfoot> 元素的基本格式:

<table>
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>页脚1</td>
            <td>页脚2</td>
        </tr>
    </tfoot>
</table>
<th> 元素用于定义表格的表头单元格。以下是 <th> 元素的基本格式:

<tr>
    <th>表头数据</th>
</tr>
常用属性:
	· colspan: 定义表头单元格跨越的列数。
	· rowspan: 定义表头单元格跨越的行数。

<tr> 元素用于定义表格中的行。以下是 <tr> 元素的基本格式:

<tr>
    <td>单元格数据</td>
</tr>

<td> 元素用于在表格中定义单元格数据。以下是 <td> 元素的基本格式:

<tr>
    <td>单元格数据</td>
</tr>
常用属性:
	· <td> 元素可以使用所有全局属性,例如 class、id、style 等。
	· colspan: 定义单元格跨越的列数。
	· rowspan: 定义单元格跨越的行数。

<caption> 元素用于为 <table> 表格添加标题。以下是 <caption> 元素的基本格式:

<table>
    <caption>表格标题</caption>
    <!-- 表格内容 -->
</table>

<colgroup> 元素用于定义表格中一组列的属性。以下是 <colgroup> 元素的基本格式:

<colgroup>
    <col span="列数" style="样式">
    <!-- 更多 <col> 元素 -->
</colgroup>

<col> 元素用于定义表格中 <colgroup> 元素中的列的属性。以下是 <col> 元素的基本格式:

<col span="列数" style="样式">
常用属性:
	1. span: 定义该列覆盖的列数。
	2. style: 定义列的样式(如背景色、宽度等)。

	III. 超链接和导航

链接:

<a> 元素(锚点元素)用于创建超链接。它的基本格式如下:

<a href="URL">链接文本</a>
<a href="mailto:example@example.com">发送电子邮件</a>

这里是 <a> 元素的一些常用属性及其作用:
	1. href: 指定链接的目标 URL。例如,href="https://www.example.com"。
	2. target: 指定在何处打开链接。常用值包括:
			· _self(默认值,在同一框架中打开)
			· _blank(在新窗口或新标签页中打开)
			· _parent(在父框架中打开)
			· _top(在整个窗口中打开)
	3. title: 为链接提供额外的信息,当用户悬停在链接上时会显示此信息。
	4. rel: 指定当前文档与被链接文档之间的关系。例如,rel="noopener noreferrer" 用于安全地在新窗口中打开链接。
	5. download: 提示浏览器下载链接目标而不是导航到它。可以指定下载文件的名称。

<link> 元素用于链接外部资源,通常用于定义文档的样式表。以下是 <link> 元素的基本格式:

<link rel="关系" href="资源路径" type="类型" media="媒介">
常用属性:
	1. rel: 定义与链接资源的关系(例如 stylesheet)。
	2. href: 定义链接资源的 URL。
	3. type: 定义资源的 MIME 类型(通常用于样式表)。
	4. media: 定义样式表应用的媒介(例如 screen、print)。

<nav> 元素用于定义文档中的导航链接区域,通常包含链接到不同部分的菜单或链接。以下是 <nav> 元素的基本格式:

<nav>
    <ul>
        <li><a href="链接1">链接文本1</a></li>
        <li><a href="链接2">链接文本2</a></li>
        <li><a href="链接3">链接文本3</a></li>
    </ul>
</nav>
常用属性:
	· <nav> 元素可以使用所有全局属性,例如 class、id、style 等。
	· <a> 元素的常用属性包括 href、target 和 title。
	· <ul> 元素用于创建无序列表。
	· <li> 元素用于定义列表项。
	· <nav>: 表示导航区域,用于包含导航链接。
	· <ul>: 定义无序列表,通常用于容纳导航链接。
	· <li>: 列表项,用于定义导航链接项。
	· <a>: 链接,用于定义点击后跳转的目标。

<map> 元素用于定义图像映射区域的集合。以下是 <map> 元素的基本格式:

<map name="地图名称">
    区域定义
</map>

<map name="example-map">
    <area shape="rect" coords="34,44,270,350" href="https://www.example.com" alt="Example Link">
</map>
<img src="image.jpg" usemap="#example-map" alt="示例图像">

常用属性:
	1. name: 定义图像映射的名称,用于在 <img> 元素中引用。

<area> 元素用于在图像映射(image map)中定义可点击的区域。它通常与 <map> 元素结合使用。以下是 <area> 元素的基本格式和一些常用属性:

<area shape="区域形状" coords="坐标" href="链接" alt="替代文本">
常用属性
	1. shape: 定义区域的形状。可选值包括:
			o rect(矩形)
			o circle(圆形)
			o poly(多边形)
			o default(图像的全部区域)
	2. coords: 定义区域的坐标,根据 shape 属性的不同,格式会有所变化。
			o 对于 rect,格式为 x1,y1,x2,y2。
			o 对于 circle,格式为 x,y,r(中心点的 x 和 y 坐标及半径)。
			o 对于 poly,格式为 x1,y1,x2,y2,...,xn,yn(每个顶点的 x 和 y 坐标)。
	3. href: 定义点击区域时导航到的 URL。
	4. alt: 提供区域的替代文本。
	5. target: 指定在何处打开链接(类似于 <a> 元素的 target 属性)。
	6. title: 为区域提供额外的信息,当用户悬停在区域上时会显示此信息。
示例
	1. 矩形区域:

<map name="example-map">
    <area shape="rect" coords="34,44,270,350" href="https://www.example.com" alt="Example Link">
</map>
<img src="image.jpg" usemap="#example-map" alt="Example Image">

	IV. 嵌入内容

多媒体:

<audio> 元素用于嵌入音频内容,允许在网页上播放音频文件。以下是 <audio> 元素的基本格式和一些常用属性:

<audio controls autoplay loop muted preload="预加载行为">
    <source src="音频文件路径" type="音频类型">
    Your browser does not support the audio element.
</audio>
常用属性
	1. controls: 启用音频播放器控件(如播放、暂停、音量等)。
	2. autoplay: 页面加载时自动播放音频。
	3. loop: 播放完毕后自动重新开始。
	4. muted: 静音音频。
	5. preload: 指定音频的预加载行为。可选值包括:
			o auto: 浏览器应该预加载整个音频文件。
			o metadata: 浏览器仅预加载音频的元数据(如时长)。
			o none: 浏览器不预加载音频文件。

<video> 元素用于嵌入视频。以下是 <video> 元素的基本格式:

<video src="视频路径" controls width="宽度" height="高度">
    <source src="视频路径" type="视频类型">
    您的浏览器不支持视频标签。
</video>
常用属性:
	1. src: 定义视频的 URL。
	2. controls: 如果存在,显示视频控件(如播放、暂停按钮)。
	3. width: 定义视频的宽度。
	4. height: 定义视频的高度。
	5. autoplay: 如果存在,视频会自动播放。
	6. loop: 如果存在,视频播放结束后会循环播放。
	7. muted: 如果存在,视频会静音播放。
示例:
	1. 基本使用:



<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持视频标签。
</video>

<picture> 元素用于提供不同版本的图像以适应不同的设备和屏幕尺寸。以下是 <picture> 元素的基本格式:

<picture>
    <source srcset="图片路径" media="媒体查询">
    <img src="默认图片路径" alt="替代文本">
</picture>
常用属性:
	1. srcset: 定义不同分辨率或尺寸的图像 URL。
	2. media: 定义与之匹配的媒体查询。
	3. alt: 提供图像的替代文本。

<source> 元素用于为 <audio> 和 <video> 元素指定多个资源。以下是 <source> 元素的基本格式:

<source src="资源路径" type="媒体类型">
常用属性:
	1. src: 定义媒体资源的 URL。
type: 定义资源的 MIME 类型。

<track> 元素用于为 <video> 和 <audio> 元素提供文本轨道,例如字幕。以下是 <track> 元素的基本格式:
常用属性:
	1. src: 定义轨道文件的 URL。
	2. kind: 定义轨道的类型。可能的值包括 subtitles(字幕)、captions(隐藏字幕)、descriptions(音频描述)、chapters(章节) 和 metadata(元数据)。
	3. srclang: 定义轨道的语言(使用语言代码,例如 en、zh)。
	4. label: 提供轨道的标签,这通常用于显示在用户界面中。
示例:
	1. 基本使用:



<video controls>
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
    <track src="subtitles-zh.vtt" kind="subtitles" srclang="zh" label="Chinese">
    您的浏览器不支持视频标签。
</video>

<img> 元素用于在页面中嵌入图像。以下是 <img> 元素的基本格式:

<img src="图像路径" alt="替代文本" width="宽度" height="高度">
常用属性:
	1. src: 定义图像的 URL。
	2. alt: 提供图像的替代文本。
	· Referrer/CORS 控制,保证安全与隐私:详见 crossorigin 和 referrerpolicy 属性。
	· 使用 width 和 height 设置图像的固有尺寸(intrinsic size):这将设置图像应占用的空间,以确保图像被加载之前页面的布局是稳定的。
	3. width: 定义图像的宽度(像素)。
	4. height: 定义图像的高度(像素)。

<figure> 元素用于包含图像、图表、插图等,并与 <figcaption> 元素结合使用以提供说明。以下是 <figure> 元素的基本格式:

<figure>
    <img src="图片路径" alt="图片描述">
    <figcaption>图像说明</figcaption>
</figure>

<figcaption> 元素用于为 <figure> 元素提供标题或说明。以下是 <figcaption> 元素的基本格式:

<figure>
    <img src="图片路径" alt="图片描述">
    <figcaption>图像说明</figcaption>
</figure>

<object> 元素用于嵌入外部对象,如图像、视频、音频或其他文档。以下是 <object> 元素的基本格式:

<object data="对象路径" type="类型" width="宽度" height="高度">
    替代内容
</object>
常用属性:
archive 已弃用
	用来指名对象资源列表的以空格分隔的 URI 列表。
border 已弃用
	元素周围的边框的宽度,单位为像素。
classid 已弃用
	对象实现的 URI,可以同时与 data 属性使用,或者使用 data 属性替代。
codebase 已弃用
	解析 classid,data 或者 archive 中定义的相对路径的根路径,如果没有定义,默认为当前文档的 base URI。
codetype 已弃用
	classid 定义的 data 的内容类型。
data
	一个合法的 URL 作为资源的地址,需要为 data 和 type 中至少一个设置值。
declare 已弃用
	取值为布尔的属性可以设置这个元素为仅声明的格式。对象必须被随后的 <object> 元素实例化。在 HTML5 中,完整的重复 <object> 元素,可以重用元素。
form
	对象元素关联的 form 元素(属于的 form)。取值必须是同一文档下的一个 <form> 元素的 ID。
height
	资源显示的高度,单位是 CSS 像素。
name
	浏览上下文名称(HTML5),或者控件名称(HTML 4)。
standby 已弃用
	对象的实现和数据加载过程中,浏览器可以显示的信息。
tabindex 已弃用
	当前元素在文档 Tab 导航中的顺序。
type
	data 指定的资源的 MIME 类型,需要为 data 和 type 中至少一个设置值。
usemap
	指向一个 <map> 元素的 hash-name;格式为‘#’加 map 元素 name 元素的值。
width
	资源显示的宽度,单位是 CSS 像素。

<embed> 元素用于嵌入外部资源(如视频、音频、交互式内容等)。以下是 <embed> 元素的基本格式:

<embed src="资源路径" type="资源类型" width="宽度" height="高度">
<embed src="example.pdf" type="application/pdf" width="600" height="400">
常用属性:
	1. src: 定义嵌入资源的 URL。
	2. type: 定义资源的 MIME 类型。
	3. width: 定义嵌入内容的宽度(像素)。
	4. height: 定义嵌入内容的高度(像素)。

<iframe> 元素用于在当前文档中嵌入另一个文档。以下是 <iframe> 元素的基本格式:

<iframe src="子文档路径" width="宽度" height="高度" frameborder="边框" allowfullscreen></iframe>
常用属性:
	1. src: 定义嵌入文档的 URL。
	2. width: 定义嵌入文档的宽度(像素)。
	3. height: 定义嵌入文档的高度(像素)。
	4. frameborder: 定义是否显示边框(在 HTML5 中已废弃,使用 CSS 代替)。
	5. allowfullscreen: 允许全屏模式。

画布和图形:

<canvas> 元素用于绘制图形。以下是 <canvas> 元素的基本格式:

<canvas width="宽度" height="高度"></canvas>
常用属性:
	1. width: 定义画布的宽度(像素)。
	2. height: 定义画布的高度(像素)。

	V. 表单控件

表单元素:

<input> 元素用于创建各种类型的用户交互控件。以下是 <input> 元素的基本格式:

<input type="类型" name="名称" value="值" placeholder="占位符" maxlength="最大长度">
常用属性:
	1. type: 定义输入控件的类型(例如 text、password、submit)。
	2. name: 定义控件的名称,表单提交时作为标识符。
	3. value: 定义控件的默认值。
	4. placeholder: 提供控件的占位符文本。
	5. maxlength: 定义输入的最大字符长度。

<textarea> 元素用于定义多行文本输入区域。以下是 <textarea> 元素的基本格式:

<textarea name="textarea名称" rows="行数" cols="列数">默认文本</textarea>
常用属性:
	1. name: 定义文本区域的名称,用于表单提交。
	2. rows: 定义文本区域的行数。
	3. cols: 定义文本区域的列数。
	4. placeholder: 提供文本区域的占位符文本。
	5. readonly: 如果存在,文本区域将为只读。
	6. disabled: 如果存在,文本区域将禁用。
示例:
	1. 基本使用:

<textarea name="message" rows="4" cols="50" placeholder="输入您的消息......"></textarea>

<progress> 元素用于显示任务的进度。以下是 <progress> 元素的基本格式:

<progress value="当前值" max="最大值"></progress>
常用属性:
	1. value: 定义当前的进度值。
	2. max: 定义进度的最大值。

<button> 元素用于创建按钮。以下是 <button> 元素的基本格式:

<button type="button" name="buttonName" value="buttonValue">按钮文本</button>
常用属性:
	1. type: 定义按钮的类型。可选值包括:
			o button:普通按钮。
			o submit:提交按钮。
			o reset:重置按钮。
	2. name: 定义按钮的名称。
	3. value: 定义按钮的值。
	4. disabled: 禁用按钮。

<select> 元素用于定义下拉列表。以下是 <select> 元素的基本格式:

<select name="选择名称">
    <option value="值1">选项 1</option>
    <option value="值2">选项 2</option>
</select>
常用属性:
	1. name: 定义下拉列表的名称,用于表单提交。
	2. size: 定义下拉列表中显示的选项数(多选模式下使用)。

<option> 元素用于定义 <select> 元素中的选项。以下是 <option> 元素的基本格式:

<option value="值" selected>选项文本</option>
常用属性:
	1. value: 定义选项的值。
	2. selected: 如果存在,则表示选项为默认选择项。

<optgroup> 元素用于将 <select> 元素中的选项分组。以下是 <optgroup> 元素的基本格式:

<select>
    <optgroup label="分组标签">
        <option value="值1">选项 1</option>
        <option value="值2">选项 2</option>
    </optgroup>
</select>
常用属性:
	1. label: 定义分组的标签。

<label> 元素用于为表单控件提供标签。以下是 <label> 元素的基本格式:

<label for="控件ID">标签文本</label>
常用属性:
	1. for: 指定与之关联的表单控件的 ID。

<fieldset> 元素用于将表单中的一组控件进行分组,并通常与 <legend> 元素结合使用,以提供描述。以下是 <fieldset> 元素的基本格式:

<fieldset>
    <legend>组标题</legend>
    表单控件
</fieldset>

<legend> 元素用于为 <fieldset> 元素提供标题。以下是 <legend> 元素的基本格式:

<fieldset>
    <legend>组标题</legend>
    表单控件
</fieldset>

<output> 元素用于表示计算或用户操作的结果。以下是 <output> 元素的基本格式:

<output for="计算对象" name="名称">结果</output>
常用属性:
	1. for: 定义生成结果的计算对象。
	2. name: 定义结果的名称。

<datalist> 元素用于定义一个预定义选项列表,用于 <input> 元素的自动完成。以下是 <datalist> 元素的基本格式:

<input list="dataListId">
<datalist id="dataListId">
    <option value="选项1">
    <option value="选项2">
    <option value="选项3">
</datalist>

<meter> 元素用于表示度量数据,通常用于显示一个有限范围内的值。以下是 <meter> 元素的基本格式:

<meter value="当前值" min="最小值" max="最大值" low="低值" high="高值" optimum="最佳值"></meter>

<meter value="70" min="0" max="100" low="30" high="80" optimum="50"></meter>
常用属性:
	1. value: 定义当前的度量值。
	2. min: 定义值的最小范围。
	3. max: 定义值的最大范围。
	4. low: 定义低范围值。
	5. high: 定义高范围值。
	6. optimum: 定义最佳值。

	VI. 布局和样式

布局:

<br> 元素用于在文本中插入换行符

<hr> 元素用于在文档中插入水平线

<wbr> 元素用于建议浏览器在某个位置换行。以下是 <wbr> 元素的基本格式:

长文本<wbr>可能在此处换行
常用属性:
	· <wbr> 元素没有特定属性,仅作为换行建议。

<pre> 元素用于表示预格式化的文本,保留文本中的空白和换行。以下是 <pre> 元素的基本格式:

<pre>预格式化文本</pre>

<style> 元素用于在文档中嵌入 CSS 样式。以下是 <style> 元素的基本格式:

<style>
    /* CSS 规则 */
</style>

<template> 元素用于定义模板内容,该内容不会被渲染,直到通过 JavaScript 动态插入到文档中。以下是 <template> 元素的基本格式:

<template>
    <!-- 模板内容 -->
</template>

<center> 元素用于将文本或其他元素居中显示。该元素已弃用,建议使用 CSS 进行样式设置。以下是 <center> 元素的基本格式:

<center>居中文本</center>

实验性和废弃:

<fencedframe> 元素是一个实验性元素,用于嵌入子文档。以下是 <fencedframe> 元素的基本格式:

<fencedframe src="子文档路径"></fencedframe>
常用属性:
	1. src: 定义子文档的 URL。

<portal> 元素是实验性的,用于创建与其他文档或资源进行交互的框架。以下是 <portal> 元素的基本格式:

<portal src="资源路径"></portal>
常用属性:
	1. src: 定义要嵌入的资源或文档的 URL。

<dir> 元素用于定义目录列表,该元素已弃用。以下是 <dir> 元素的基本格式:

<dir>
    <li>目录项1</li>
    <li>目录项2</li>
</dir>

<Font> 元素(<font>)定义了该内容的字体大小、顏色与表现。元素已弃用
color 已弃用
这个属性使用颜色名称或是十六进制的 #RRGGBB 格式,来设置文字的颜色。

<noframes> 元素用于为不支持 <frameset> 的浏览器提供备用内容。它已被弃用,建议使用现代技术替代。以下是 <noframes> 元素的基本格式:

<noframes>备用内容</noframes>

<noembed> 元素用于提供在不支持 <embed> 元素的浏览器中显示的替代内容。它已被弃用,建议使用其他现代技术。以下是 <noembed> 元素的基本格式:

<noembed>替代内容</noembed>

<nobr> 元素用于防止文本自动换行。它已被弃用,建议使用 CSS 进行控制。以下是 <nobr> 元素的基本格式:

<nobr>不换行的文本</nobr>

<xmp> 元素用于表示原始文本内容。该元素已被弃用,建议使用 <pre> 元素代替。以下是 <xmp> 元素的基本格式:

<xmp>
    原始文本内容
</xmp>

<plaintext> 元素用于显示原始文本内容,忽略任何 HTML 标签。它已被弃用,建议使用 <pre> 元素代替。以下是 <plaintext> 元素的基本格式:

<plaintext>
    原始文本内容
</plaintext>

<search> 元素实验性,尚未被广泛接受。以下是 <search> 元素的基本格式:

<search>
    <!-- 搜索内容 -->
</search>
常用属性:
	· <search> 元素可以使用所有全局属性,例如 class、id、style 等。

<ruby> 元素用于标记 Ruby 注释,用于对东亚字符的注释。以下是 <ruby> 元素的基本格式:

<ruby>
    字符<rt>注释</rt>
</ruby>

<rt> 元素用于提供 Ruby 注释文本,通常与 <ruby> 元素一起使用。以下是 <rt> 元素的基本格式:

<ruby>
    <rb>基本文本</rb>
    <rt>注释文本</rt>
</ruby>

<rtc> 元素用于提供 Ruby 注释的文本修饰。它已被弃用,建议使用现代技术。以下是 <rtc> 元素的基本格式:

<ruby>
    <rb>基本文本</rb>
    <rtc>修饰文本</rtc>
    <rt>注释文本</rt>
</ruby>

<rb> 元素用于表示 Ruby 注释的基本文本。它已被弃用,建议使用现代技术。以下是 <rb> 元素的基本格式:

<ruby>
    <rb>基本文本</rb>
    <rt>注释文本</rt>
</ruby>

<rp> 元素用于为那些不能使用 <ruby> 元素展示 ruby 注解的浏览器,提供随后的圆括号。Ruby 注解用于展示东亚文字的发音,例如使用日语罗马音和汉语拼音的文字。 <rp> 元素用于不支持 <ruby> 元素的情况。 <rp> 的内容提供了应该展示的东西,通常是圆括号,以便表示 ruby 注解的存在。以下是 <rp> 元素的基本格式:

<ruby>
    漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>

	VII. 特殊和杂项

数据和元数据:

<meta> 元素用于提供关于文档的元数据(如字符集、作者、描述等)。以下是 <meta> 元素的基本格式:

<meta name="名称" content="内容" charset="字符集">
常用属性:
charset: 定义文档的字符编码。
<meta charset="UTF-8">
 name: 定义元数据的名称(用于常规元数据)。
	· description: 定义页面的简短描述。

<meta name="description" content="这是一个示例页面">
	· keywords: 定义页面的关键字。

<meta name="keywords" content="HTML, CSS, JavaScript">
	· author: 定义页面的作者。

<meta name="author" content="John Doe">
	· viewport: 定义视口设置,以便在移动设备上优化显示。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  http-equiv: 提供 HTTP 头部的信息(通常用于缓存控制和刷新)。
	· refresh: 刷新页面的时间间隔和新 URL。

<meta http-equiv="refresh" content="30;url=https://www.example.com">
	· cache-control: 定义缓存控制策略。

<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
  property: 用于 Open Graph 协议,提供社交媒体的元数据。
	· og
: 定义社交媒体分享的标题。

<meta property="og:title" content="示例标题">
	· og
: 定义社交媒体分享的描述。

<meta property="og:description" content="示例描述">
	· og
: 定义社交媒体分享的图片。

<meta property="og:image" content="https://www.example.com/image.jpg">
	· og: 定义社交媒体分享的 URL。

<meta property="og:url" content="https://www.example.com">

<data> 元素用于关联内容与机器可读的值,以便在客户端或服务器端进行数据处理。以下是 <data> 元素的基本格式:

<data value="机器可读值">显示的文本</data>
<p>该书籍的 ISBN 号是 <data value="978-3-16-148410-0">978-3-16-148410-0</data>。</p>
常用属性:
	1. value: 定义与内容关联的机器可读值。

<time> 元素用于表示时间或日期。以下是 <time> 元素的基本格式:

<time datetime="日期时间">显示时间</time>
常用属性:
	1. datetime: 定义时间或日期的机器可读格式(例如,2024-08-01T12:00)。

<title> 元素用于定义文档的标题,显示在浏览器的标题栏或标签页中。以下是 <title> 元素的基本格式:

<title>文档标题</title>

<address> 元素用于定义联系信息,通常用于作者或拥有者的联系信息。以下是 <address> 元素的基本格式和一些使用示例:
<address>
    联系信息内容
</address>

<slot> 元素是——Web 组件技术套件的一部分——它是一个在 web 组件内部的占位符,你可以使用自己的标记来填充该占位符,从而创建单独的 DOM 树并将其一起呈现。。以下是 <slot> 元素的基本格式:

<slot name="slot名称"></slot>
常用属性:
	1. name: 定义插槽的名称,用于匹配 <slot> 元素中的内容。

<param> 元素用于为 <object> 元素定义参数。它已被弃用,建议使用其他现代技术。以下是 <param> 元素的基本格式:

<object data="对象数据" type="对象类型">
    <param name="参数名" value="参数值">
</object>

文档和脚本:

<script> 元素用于定义客户端脚本,如 JavaScript。以下是 <script> 元素的基本格式:

<script src="脚本路径" type="类型">
    // JavaScript 代码
</script>
内联脚本:

<script>
    console.log('Hello, World!');
</script>
外部脚本:

<script src="script.js"></script>

常用属性:
	1. src: 定义外部脚本的 URL。
	2. type: 定义脚本的 MIME 类型(默认是 text/javascript)。
	3. async: 如果存在,脚本会异步加载。
	4. defer: 如果存在,脚本会在文档解析完成后执行。

<noscript> 元素用于定义在浏览器不支持脚本(如 JavaScript)时显示的内容。以下是 <noscript> 元素的基本格式:

<noscript>
    不支持脚本时显示的内容
</noscript>

<template> 元素用于定义模板内容,该内容不会被渲染,直到通过 JavaScript 动态插入到文档中。以下是 <template> 元素的基本格式:

<template>
    <!-- 模板内容 -->
</template>

	VIII.  其它

标记和说明:

<bdi> 元素用于隔离一段文本的双向格式,以确保其在不同语言方向的文本中正确显示。它通常用于在包含多种语言文本的网页中保持文本的方向性。以下是 <bdi> 元素的基本格式和常用属性:

<bdi>需要隔离的文本</bdi>

<bdo> 元素用于控制文本的双向排版方向。它允许你覆盖文本的默认方向。以下是 <bdo> 元素的基本格式和常用属性:

<bdo dir="ltr">文本内容</bdo>
常用属性:
	1. dir: 定义文本的方向。可选值包括:
			o ltr:从左到右(默认值)。
			o rtl:从右到左。

<dialog> 元素用于表示对话框或模态窗口。以下是 <dialog> 元素的基本格式:

<dialog open>
    对话框内容
    <button onclick="this.closest('dialog').close()">关闭</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">打开对话框</button>
<dialog id="myDialog">
   <p>这是一个对话框示例。</p>
   <button onclick="document.getElementById('myDialog').close()">关闭</button> </dialog>
常用属性:
	1. open: 定义对话框是否打开。

<summary> 元素用于定义 <details> 元素的可见标题。以下是 <summary> 元素的基本格式:

<details>
    <summary>标题</summary>
    内容
</details>

<details> 元素用于提供用户可以展开和折叠的详细信息。以下是 <details> 元素的基本格式:

<details>
    <summary>总结或标题</summary>
    详细内容
</details>

	IX. 不推荐或实验性

废弃元素:

<acronym> 元素在 HTML5 中已被弃用,但了解它的格式和用法仍然有助于理解旧的 HTML 代码。以下是 <acronym> 元素的基本格式:

<acronym title="完整描述">缩写</acronym>
与 <abbr> 类似,<acronym> 元素的 title 属性用于提供缩写的完整描述。

<big> 元素用于将文本显示得比周围的文本大。该元素已弃用,建议使用 CSS 进行样式设置。以下是 <big> 元素的基本格式:

<big>较大的文本</big>

<center> 元素用于将文本或其他元素居中显示。该元素已弃用,建议使用 CSS 进行样式设置。以下是 <center> 元素的基本格式:

<center>居中文本</center>

<marquee> 元素用于创建滚动文本或图像效果。它已被弃用,不推荐使用。以下是 <marquee> 元素的基本格式:

<marquee>滚动文本或图像</marquee>
常用属性:
	1. direction: 定义滚动的方向。可能的值包括 left、right、up、down。
	2. behavior: 定义滚动行为。可能的值包括 scroll(滚动)、slide(滑动)、alternate(交替)。
	3. scrollamount: 定义每次滚动的像素数。
	4. scrolldelay: 定义滚动之间的延迟时间,以毫秒为单位。

<nobr> 元素用于防止文本自动换行。它已被弃用,建议使用 CSS 进行控制。以下是 <nobr> 元素的基本格式:

<nobr>不换行的文本</nobr>

<strike> 元素用于表示文本的删除线效果。它已被弃用,建议使用 CSS text-decoration: line-through; 替代。以下是 <strike> 元素的基本格式:

<strike>删除线文本</strike>

<tt> 元素用于表示等宽字体(typewriter text),它已被弃用,建议使用 CSS 来实现相同的效果。以下是 <tt> 元素的基本格式:

<tt>等宽字体文本</tt>

<frameset> 元素用于定义一个包含多个 <frame> 元素的框架集。它已被弃用,建议使用 <iframe> 元素代替。以下是 <frameset> 元素的基本格式:

<frameset rows="行数" cols="列数">
    <frame src="框架内容的URL" name="框架名称" scrolling="滚动" noresize>
    <!-- 更多 frame 元素 -->
</frameset>
常用属性:
	1. rows: 定义框架集的行数和高度。格式为 高度,高度,...,例如 50%, 50%。
	2. cols: 定义框架集的列数和宽度。格式为 宽度,宽度,...,例如 25%, 75%。
	3. border: 设定框架的边框宽度(HTML 4.01 及以前版本使用,不再推荐)。


 

About

HTML元素字典.HTML element dictionary

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published