1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
| # HTML----------------------------------------------------------------------------------------------------------> //涵盖HTML5的全部标签以及可用属性值 |说明:HTML标签注重语义化,因此每个标签后的备注仅为经典使用场景,不代表唯一场景。
# 文档结构标签====================================== # <div> :通用布局容器(最高频)//页面区块划分 # <span> :行内容器(最高频)//行内元素包裹 # <body> :文档主体内容 //必备容器 # <header> :页面/区块头部(HTML5) //顶部导航区域 # <footer> :页面/区块底部(HTML5) //版权信息区域 # <nav> :导航链接(HTML5新增)//主导航菜单 # <main> :文档主要内容(HTML5新增)//核心内容区 # <section> :内容区块分组(HTML5) //章节划分 # <article> :独立内容(如博客)(HTML5) //独立内容单元 # <h1>-<h6> :标题(1-6级)//标题层级结构 # <aside> :侧边栏内容(HTML5) //侧边内容区 # <figure> :媒体内容组合(HTML5) //媒体组容器 # <figcaption> :媒体标题(HTML5) //figure的子标题 # <details> :折叠内容块(HTML5) //可展开/折叠模块 # <summary> :details的标题(HTML5) //折叠模块标题 # <!DOCTYPE> :声明文档类型 //单标签(页面首行) # <html> :根元素 //页面最外层容器 # <head> :文档头部元数据容器 //元信息存放区 # <title> :文档标题 //浏览器标签显示
# 元数据与脚本标签================================== # <meta> :文档元数据(字符集等)//单标签(必备charset) # <link> :链接外部资源 //单标签(CSS/图标引入) # <script> :嵌入或引用JavaScript //逻辑核心 # <style> :内嵌CSS样式 //页面样式定义 # <noscript> :脚本不支持时显示内容 //降级方案 # <template> :定义可复用模板(HTML5) //组件模板容器 # <base> :基础URL //单标签(相对路径基准) # <basefont> :基本字体(已废弃)//单标签(禁用)
# 文本内容标签====================================== # <p> :段落 //文本基础容器 # <a> :超链接 //交互核心(href属性) # <ul> :无序列表 //导航/条目展示 # <ol> :有序列表 //步骤流程 # <li> :列表项 //列表子元素 # <strong> :重要文本(语义加粗)//关键内容强调 # <em> :强调文本(语义倾斜)//语气强调 # <br> :换行 //单标签(文本换行) # <hr> :水平分隔线 //单标签(内容分割) # <b> :视觉加粗 //样式加粗 # <i> :视觉倾斜 //技术术语/图标 # <del> :删除线文本 //修改标记 # <sup> :上标文本 //公式标注 # <sub> :下标文本 //化学式(如H₂O) # <pre> :预格式化文本 //保留空格/回车 # <code> :计算机代码 //代码片段展示 # <blockquote> :长引用 //文献引用块 # <dl> :定义列表 //术语解释容器 # <dt> :定义项(术语)//dl子元素 # <dd> :定义描述 //dt对应说明 # <mark> :高亮文本(HTML5新增)//关键词标记 # <u> :下划线文本(不推荐)//CSS替代 # <ins> :插入的新内容 //更新内容标记 # <time> :日期/时间(HTML5新增)//时间语义化 # <ruby> :注音文本 //东亚文字注音 # <rt> :注音解释(HTML5新增)//ruby子标签
# 表格标签========================================== # <table> :表格容器 //数据表格 快捷:table>tr*5>td{文本},合并单元格:colspan,rowspan # <tr> :表格行 //行容器 # <td> :数据单元格 //基础单元格 # <th> :表头单元格 //标题单元格 # <thead> :表头区域 //标题行容器 # <tbody> :表体区域 //数据行容器 # <caption> :表格标题 //表格描述 # <tfoot> :表尾区域 //汇总行 # <colgroup> :列组 //多列样式控制 # <col> :列属性 //单标签(列样式设置) # <datagrid> :动态数据表格(非标准)//极少支持 //{CSS内嵌可用值}: # <border>=: "表格的边框" # <cellspacing>=: "格与格间距" # <cellpadding>=: "格与内容间距" # <colspan>=: "表格水平合并" [保留左边,删除右边](td:2) # <rowspan>=: "表格垂直合并" [保留上边,删除下边](td:2) # <valing>=: "top" [td:设置一个单元格宽/高,影响这一整列/行的宽/高] # 表格:type: 列表符号 | (ol:1,a,A,i,I)(ul:disc默认实心圆,circle空心圆,square小方块,none不显示)
# 媒体与嵌入标签==================================== # <img> :嵌入图像 //单标签(src/alt必备) # <video> :嵌入视频(HTML5新增)//多媒体播放 # <audio> :嵌入音频(HTML5新增)//音频播放 # <iframe> :内嵌网页 //第三方内容嵌入 # <canvas> :动态绘图(HTML5新增)//JS图形绘制 # <source> :多格式媒体源(HTML5新增)//格式兼容 # <track> :字幕/说明(HTML5新增)//视频字幕 # <embed> :外部插件嵌入(逐步淘汰)//传统插件 # <object> :嵌入外部资源 //PDF/Flash嵌入 # <param> :object参数 //单标签 # <map> :图像地图 //可点击区域定义 # <area> :图像地图区域 //单标签(热区坐标) //{CSS内嵌可用值}: # src:图片 | # ait:图像异常文本 | # href:链接 | a标签
# 表单标签========================================== # <form> :表单容器 //数据提交核心 # <input> :输入控件(文本/密码等)//交互核心 # <button> :可点击按钮 //表单操作 # <label> :表单控件标签 //焦点绑定 # <textarea> :多行文本输入 //长文本输入 # <select> :下拉选择框 //选项容器 # <option> :下拉选项 //select子项 # <datalist> :输入提示列表(HTML5新增)//输入建议 # <fieldset> :表单分组 //区块包裹 # <legend> :fieldset标题 //分组标题 # <optgroup> :选项分组 //选项分类 # <progress> :任务进度条(HTML5新增)//进度显示 # <meter> :标量值测量(HTML5新增)//数值范围 # <output> :计算结果输出(HTML5新增)//动态结果 # <keygen> :加密密钥生成(已废弃)//禁用 //{CSS内嵌可用值}: # 表单:type=: 表单按钮| (button按钮/submit提交按钮/value登录/name自定义文本/reset清空内容) # 表单:type=: 表单类型| (text文本框/password表单类型/) # 表单:action=:向何处发送表单数据 # 表单:method=:表单数据 | (get/从服务器获取数据,post/向服务器发送数据) # 表单:name=:数据名称 # 表单:value=:输入框默认输入值 # 表单:maxlength=: 输入框最大可输入长度 # 表单:target:网页打开方式 | (_self默认/_blank新窗口)
# 交互与脚本标签==================================== # <a> :超链接(已在文本类列出)//重复项 # <dialog> :对话框(HTML5新增)//模态弹窗 # <menu> :菜单列表//功能菜单 # <command> :命令按钮(已废弃)//禁用 # <noscript> :脚本不支持显示(已在元数据列出)
# 其他标签========================================== # <abbr> :缩写(如“HTML”)//title属性提示 # <address> :联系信息 //作者/公司信息 # <cite> :作品引用 //文献来源 # <q> :短引用 //自动加引号 # <bdo> :文本方向控制 //dir="rtl"设置 # <var> :变量名 //代码变量标识 # <wbr> :可选换行点(HTML5新增)//响应式断字
|