HTML 标签汇总


元素标签

文档和元数据元素

标签 说明
表示 HTML 文档的开始
表示文档的 HTML 部分
表示 HTML 文档的头部区域
</code></td> <td>表示 HTML 文档的标题</td> </tr> <tr> <td><code><base></code></td> <td>设置相对 URL 的基础</td> </tr> <tr> <td><code><meta></code></td> <td>提供关于文档的信息</td> </tr> <tr> <td><code><style></code></td> <td>定义 CSS 样式(内嵌样式)</td> </tr> <tr> <td><code><link></code></td> <td>使用外部样式表</td> </tr> <tr> <td><code><script></code></td> <td>定义脚本程序,可以是文档内嵌的 也可以是外部文件中的</td> </tr> <tr> <td><code><noscript></code></td> <td>包含浏览器禁用脚本或不支持脚本时显示的内容</td> </tr> <tr> <td><code><body></code></td> <td>表示 HTML 文档的内容</td> </tr> </tbody> </table> <h2 id="文本元素">文本元素</h2> <blockquote> <p>文本元素用来为内容提供基本的结构和含义</p> </blockquote> <table> <thead> <tr> <th>标签</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><a></code></td> <td>超链接</td> </tr> <tr> <td><code><b></code></td> <td>加粗;样式化</td> </tr> <tr> <td><code><strong></code></td> <td>加粗;语义标签;表示重要文本</td> </tr> <tr> <td><code><i></code></td> <td>斜体;样式化</td> </tr> <tr> <td><code><em></code></td> <td>斜体;语义标签;表示强调的文本</td> </tr> <tr> <td><code><s></code></td> <td>删除线;语义标签;对那些不正确、不准确或者没有用的文本进行标识</td> </tr> <tr> <td><code><del></code></td> <td>删除线;语义标签;表示从文档中删除的文字</td> </tr> <tr> <td><code><u></code></td> <td>下划线;样式化</td> </tr> <tr> <td><code><ins></code></td> <td>表示加入文档的文字;表现为下划线样式</td> </tr> <tr> <td><code><small></code></td> <td>定义小型文本(和旁注)</td> </tr> <tr> <td><code><sub></code></td> <td>表示下标文字</td> </tr> <tr> <td><code><sup></code></td> <td>表示上标文字</td> </tr> <tr> <td><code><br></code></td> <td>表示换行</td> </tr> <tr> <td><code><wbr></code></td> <td>规定在文本中的何处适合添加换行符</td> </tr> <tr> <td><code><code></code></td> <td>表示计算机代码片段</td> </tr> <tr> <td><code><var></code></td> <td>表示程序或计算机系统中的变量</td> </tr> <tr> <td><code><kbd></code></td> <td>表示用户输入内容</td> </tr> <tr> <td><code><samp></code></td> <td>表示计算机程序的输出内容</td> </tr> <tr> <td><code><abbr></code></td> <td>表示简称或缩写</td> </tr> <tr> <td><code><dfn></code></td> <td>表示术语定义;斜体展示</td> </tr> <tr> <td><code><q></code></td> <td>用于简短的行内引用;浏览器一般会在内容开头和结尾添加双引号表示引用</td> </tr> <tr> <td><code><cite></code></td> <td>表示其他作品的标题</td> </tr> <tr> <td><code><ruby></code></td> <td>表示位于表意文字上方或右方的注音符号</td> </tr> <tr> <td><code><rt></code></td> <td>与ruby元素结合使用,用来标记注音符号</td> </tr> <tr> <td><code><rp></code></td> <td>与ruby元素结合使用,标记括号;用来标记供不支持注音符号特性的浏览器显示在注音符号前后的括号</td> </tr> <tr> <td><code>bdo</code></td> <td>用来覆盖默认的文本方向</td> </tr> <tr> <td><code>bdi</code></td> <td>表示一段出于文字方向考虑而与其他内容隔离开来的文字</td> </tr> <tr> <td><code><span></code></td> <td>一个没有自己的语义的通用元素。可以用在希望应用一些全局属性却又不想引入额外语义的情况</td> </tr> <tr> <td><code><mark></code></td> <td>高亮文本;语义标签;表示标注的/突出显示的文本</td> </tr> <tr> <td><code><time></code></td> <td>表示时间或日期</td> </tr> </tbody> </table> <h2 id="对内容分组">对内容分组</h2> <blockquote> <p>对内容分组:用来将相关内容分组</p> </blockquote> <table> <thead> <tr> <th>标签</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><p></code></td> <td>表示段落</td> </tr> <tr> <td><code><div></code></td> <td>一个没有任何既定语义的通用元素</td> </tr> <tr> <td><code><pre></code></td> <td>使用预先编排好格式的内容</td> </tr> <tr> <td><code><blockquote></code></td> <td>表示大段的块引用内容</td> </tr> <tr> <td><code><hr></code></td> <td>水平线;HTML5中代表着向另一个相关主题的转换</td> </tr> <tr> <td><code><ol></code></td> <td>有序列表</td> </tr> <tr> <td><code><ul></code></td> <td>无序列表</td> </tr> <tr> <td><code><li></code></td> <td>用在ul、ol和menu元素中,表示列表项</td> </tr> <tr> <td><code><dl></code></td> <td>表示包含一系列术语和定义的说明列表</td> </tr> <tr> <td><code><dt></code></td> <td>用在dl元素之中,表示术语</td> </tr> <tr> <td><code><dd></code></td> <td>用在dl元素之中,表示定义</td> </tr> <tr> <td><code><figure></code></td> <td>表示图片</td> </tr> <tr> <td><code><figcaption></code></td> <td>表示figure元素的标题</td> </tr> </tbody> </table> <h2 id="划分内容">划分内容</h2> <blockquote> <p>划分内容:让每个概念、观点或主题彼此分隔开</p> </blockquote> <table> <thead> <tr> <th>标签</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><h1>~<h6></code></td> <td>标题</td> </tr> <tr> <td><code><hgroup></code></td> <td>标题组;将一组标题组织在一起,以便文档大纲只显示其中第一个标题</td> </tr> <tr> <td><code><section></code></td> <td>章节;一般来说会有包含一个标题;比如章节、页眉、页脚或文档中的其他部分</td> </tr> <tr> <td><code><header></code></td> <td>定义 section 或 page 的首部</td> </tr> <tr> <td><code><footer></code></td> <td>定义 section 或 page 的尾部;可以包含作者介绍、版权信息、到相关内容的链接、徽标及免责声明等</td> </tr> <tr> <td><code><nav></code></td> <td>定义一组导航元素</td> </tr> <tr> <td><code><article></code></td> <td>定义一段独立的内容</td> </tr> <tr> <td><code><aside></code></td> <td>表示与周边内容稍有牵涉的内容</td> </tr> <tr> <td><code><address></code></td> <td>表示文档或article的联系信息</td> </tr> <tr> <td><code><details></code></td> <td>生成一个区域,用户将其展开可以获得更多细节知识</td> </tr> <tr> <td><code><summary></code></td> <td>用在details元素中,表示该元素内容的标题或说明</td> </tr> </tbody> </table> <h2 id="制表">制表</h2> <blockquote> <p>制表:用于制作显示数据的表格</p> </blockquote> <table> <thead> <tr> <th>标签</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><table></code></td> <td>表格</td> </tr> <tr> <td><code><caption></code></td> <td>表示表格标题</td> </tr> <tr> <td><code><thead></code></td> <td>表示标题行</td> </tr> <tr> <td><code><tbody></code></td> <td>表示表格主体</td> </tr> <tr> <td><code><tfoot></code></td> <td>表示表脚</td> </tr> <tr> <td><code><tr></code></td> <td>表示表格中的行</td> </tr> <tr> <td><code><th></code></td> <td>表示表头的单元格,它可以用来区分数据和对数据的说明</td> </tr> <tr> <td><code><td></code></td> <td>表示表格中的单元格</td> </tr> <tr> <td><code><colgroup></code></td> <td>表示一组列</td> </tr> <tr> <td><code><col></code></td> <td>表示一列</td> </tr> </tbody> </table> <h2 id="创建表单">创建表单</h2> <blockquote> <p>创建表单:用于创建HTML表单,以便获取用户的输入数据</p> </blockquote> <table> <thead> <tr> <th>标签</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><form></code></td> <td>表示HTML表单</td> </tr> <tr> <td><code><input></code></td> <td>表示用来收集用户输入数据的控件</td> </tr> <tr> <td><code><button></code></td> <td>表示可用来提交或重置表单的按钮(或一般按钮)</td> </tr> <tr> <td><code><label></code></td> <td>表示表单元素的说明标签</td> </tr> <tr> <td><code><fieldset></code></td> <td>表示一组表单元素</td> </tr> <tr> <td><code><legend></code></td> <td>表示fieldset元素的说明性标签</td> </tr> <tr> <td><code><datalist></code></td> <td>定义一组提供给用户的建议值</td> </tr> <tr> <td><code><select></code></td> <td>给用户提供一组固定的选项</td> </tr> <tr> <td><code><option></code></td> <td>表示供用户选择的一个选项</td> </tr> <tr> <td><code><optgroup></code></td> <td>表示一组相关的option元素</td> </tr> <tr> <td><code><textarea></code></td> <td>用户可以用它输入多行文字</td> </tr> <tr> <td><code><keygen></code></td> <td>生成一对公钥和私钥</td> </tr> <tr> <td><code><output></code></td> <td>表示计算结果</td> </tr> </tbody> </table> <h3 id="定制-input-元素">定制 input 元素</h3> <p>在HTML5中,input元素的 type 属性有23个不同的值</p> <table> <thead> <tr> <th>type取值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>type="text"</td> <td>单行文本框</td> </tr> <tr> <td>type="search"</td> <td>搜索框</td> </tr> <tr> <td>type="password"</td> <td>输入密码</td> </tr> <tr> <td>type="submit"</td> <td>用来提交表单的按钮</td> </tr> <tr> <td>type="reset"</td> <td>用来重置表单的按钮</td> </tr> <tr> <td>type="button"</td> <td>生成不执行任何操作的按钮</td> </tr> <tr> <td>type="image"</td> <td>图像按钮</td> </tr> <tr> <td>type="radio"</td> <td>单选按钮</td> </tr> <tr> <td>type="checkbox"</td> <td>复选框</td> </tr> <tr> <td>type="hidden"</td> <td>用于隐藏的数据项</td> </tr> <tr> <td>type="email"</td> <td>输入数据为电子邮箱地址</td> </tr> <tr> <td>type="tel"</td> <td>输入数据为电话号码</td> </tr> <tr> <td>type="url"</td> <td>输入数据为 URL</td> </tr> <tr> <td>type="number"</td> <td>输入框只接受数值;会在旁边显示用来上调和下调数值的箭头形小按钮</td> </tr> <tr> <td>type="range"</td> <td>获取指定范围内的数值</td> </tr> <tr> <td>type="datetime"</td> <td>获取世界时日期和时间,包括时区信息</td> </tr> <tr> <td>type="datetime-local"</td> <td>获取本地日期和时间(不含时区信息)</td> </tr> <tr> <td>type="date"</td> <td>获取本地日期(不含时间和时区信息)</td> </tr> <tr> <td>type="month"</td> <td>获取年月信息(不含日、时间和时区信息)</td> </tr> <tr> <td>type="week"</td> <td>获取当前星期</td> </tr> <tr> <td>type="time"</td> <td>获取时间</td> </tr> <tr> <td>type="color"</td> <td>选择颜色</td> </tr> <tr> <td>type="file"</td> <td>上传文件</td> </tr> </tbody> </table> <h2 id="嵌入内容">嵌入内容</h2> <blockquote> <p>嵌入内容:用于在HTML文档中嵌入内容</p> </blockquote> <table> <thead> <tr> <th>标签</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code><img></code></td> <td>嵌入图像</td> </tr> <tr> <td><code><map></code></td> <td>定义客户端分区响应图</td> </tr> <tr> <td><code><area></code></td> <td>表示一个用于客户端分区响应图的区域</td> </tr> <tr> <td><code><embed></code></td> <td>用插件在HTML文档中嵌入内容</td> </tr> <tr> <td><code><object></code></td> <td>在HTML文档中嵌入内容。也可用于生成浏览上下文和生成客户端分区响应图</td> </tr> <tr> <td><code><param></code></td> <td>将通过object元素传递给插件的参数</td> </tr> <tr> <td><code><iframe></code></td> <td>通过创建一个浏览上下文在一个文档中嵌入另一个文档</td> </tr> <tr> <td><code><progress></code></td> <td>嵌入目标进展或任务完成情况的图形表示</td> </tr> <tr> <td><code><meter></code></td> <td>嵌入数值在许可值范围背景中的图形表示</td> </tr> <tr> <td><code><audio></code></td> <td>表示一个音频资源</td> </tr> <tr> <td><code><video></code></td> <td>表示视频资源</td> </tr> <tr> <td><code><source></code></td> <td>表示媒体资源</td> </tr> <tr> <td><code><track></code></td> <td>表示媒体的附加轨道(例如字幕)</td> </tr> <tr> <td><code><canvas></code></td> <td>生成一个动态的图形画布</td> </tr> <tr> <td><code><svg></code></td> <td>表示结构化矢量内容</td> </tr> </tbody> </table> <h1 id="全局属性">全局属性</h1> <table> <thead> <tr> <th>属性名</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>id</td> <td>用来给元素分配一个唯一的标识符</td> </tr> <tr> <td>class</td> <td>用来将元素归类;从而能够为其应用CSS样式</td> </tr> <tr> <td>style</td> <td>用来直接在元素身上定义CSS样式</td> </tr> <tr> <td>tabindex</td> <td>用于改变默认的 Tab 键盘焦点的转移顺序</td> </tr> <tr> <td>hidden</td> <td>用于隐藏相关元素(布尔属性)</td> </tr> <tr> <td>title</td> <td>用于提供元素的额外信息;浏览器通常用这些东西显示工具提示</td> </tr> <tr> <td>lang</td> <td>用于说明元素内容使用的语言</td> </tr> <tr> <td>spellcheck</td> <td>用来表明浏览器是否应该对元素的内容进行拼写检查(true/false)</td> </tr> <tr> <td>accesskey</td> <td>用来设置一个或几个用来选择页面上的元素的快捷键</td> </tr> <tr> <td>dir</td> <td>用来规定元素中文字的方向(ltr/rtl)</td> </tr> <tr> <td>contenteditable</td> <td>用来让用户能够修改页面上的内容</td> </tr> <tr> <td>contextmenu</td> <td>用来为元素设定快捷菜单(鼠标右击弹出)</td> </tr> <tr> <td>draggable</td> <td>用来表示元素是否可被拖放</td> </tr> <tr> <td>dropzone</td> <td>与上述draggable属性搭配使用</td> </tr> </tbody> </table> <h1 id="html-实体">HTML 实体</h1> <table> <thead> <tr> <th>字符</th> <th>实体名称</th> <th>实体编号</th> </tr> </thead> <tbody> <tr> <td><</td> <td><code><</code></td> <td><code><</code></td> </tr> <tr> <td>></td> <td><code>></code></td> <td><code>></code></td> </tr> <tr> <td>&</td> <td><code>&</code></td> <td><code>&</code></td> </tr> <tr> <td>€</td> <td><code>€</code></td> <td><code>€</code></td> </tr> <tr> <td>£</td> <td><code>£</code></td> <td><code>£</code></td> </tr> <tr> <td>§</td> <td><code>§</code></td> <td><code>§</code></td> </tr> <tr> <td>?</td> <td><code>©</code></td> <td><code>©</code></td> </tr> <tr> <td>?</td> <td><code>®</code></td> <td><code>®</code></td> </tr> <tr> <td>?</td> <td><code>™</code></td> <td><code>™</code></td> </tr> </tbody> </table> <h1 id="具体使用示例">具体使用示例</h1> <pre><code><!DOCTYPE html> <html lang="en"> <head> <!-- title元素的作用是设置文档的标题或名称(必写) --> <title>设置文档标题
Enter Your Details