Html5标签

一、主体结构

header	页面头部，不同与
aside	边栏
nav	外部链接集合
section	章节或段落
article	类似文章、摘要或留言POST等形式的记录（一般搭配内嵌头部、尾部、底部结构使用）
hggroup	类似子标题，标题信息、可选标题、TAG标签这样的数据，还是英文更好理解一些，heading of a section
address	联系信息，一般用在article或body锚元素周围
footer	页脚

二、HTML 5元素标记汇总表

文档类型宣告
根元素元素	html
META元素	head、 title、base、link、meta、style
部件元素	body、section、nav、article、aside、h1、 h2、 h3、h4、 h5、 h6、hgroup、header、footer、address
分组内容元素	p、hr、br、pre、blockquote、ol、ul、li、dl、dt、dd、figure、figcaption、div
文本层次语义元素	a、em、strong、small、cite、q、dfn、abbr、time、code、var、samp、kbd、sub、sups、i、b、mark、ruby、rt、rp、bdo、span
编辑元素	ins、del
嵌入内容元素	img、iframe、embed、object、param、video、audio、source、canvas、map、area
表格元素	table、caption、colgroup、col、tbody、thread、tfoot、tr、td、th
表单元素	form、fieldset、legend、label、button、select、datalist、optgroup、option、textarea、keygen、output、progress、meter
互动元素	details、summary、command、menu
脚本元素	script、noscript

三、HTML 5元素通用属性和事件句柄

HTML5元素通用属性表

accesskey、class、contenteditable、contextmenu、dir、 draggable、hidden、id、lang、spellcheck、style、tabindex、title

HTML5元素事件句柄属性

onabort、onblur*、oncanplay、oncanplaythrough、onchange、 onclick、 oncontextmenu、ondblclick、ondrag、ondragend、ondragenter、ondragleave、 ondragover、ondragstart、ondrop、ondurationchange、onemptied、onended、 onerror*、onfocus*、onformchange、onforminput、oninput、oninvalid、onkeydown、 onkeypress、onkeyup、onload*、onloadeddata、onloadedmetadata、onloadstart、 onmousedown、onmousemove、onmouseout、onmouseover、onmouseup、onmousewheel、 onpause、onplay、onplaying、onprogress、onratechange、onreadystatechange、 onscroll、onseeked、onseeking、onselect、onshow、onstalled、onsubmit、 onsuspend、ontimeupdate、onvolumechange、onwaiting。

四、HTML5元素标记释义

标记	类型	意义	介绍
文件标记
	●	根文件标记	让浏览器知道这是HTML 文件
META标记
	●	开头	提供文件整体信息
</td> <td>●</td> <td>标题</td> <td>定义文件标题，显示于浏览器顶端</td> </tr> <tr> <td><base></td> <td>o</td> <td>基准标记</td> <td>可将相对URL转绝对及指定链接</td> </tr> <tr> <td><link></td> <td>o</td> <td>外部资源连接</td> <td>必须带rel属性描述</td> </tr> <tr> <td><meta></td> <td>o</td> <td>其它META数据</td> <td>不能被title, base, link, style, 和script元素描述的META数据</td> </tr> <tr> <td><style></td> <td>●</td> <td>嵌入文档风格信息</td> <td> </td> </tr> <tr> <td colspan="4"><strong>部件标记</strong></td> </tr> <tr> <td><body></td> <td>●</td> <td>文档主体开始</td> <td>文档内容容器</td> </tr> <tr> <td><section></td> <td>●</td> <td>代表通用文档或应用部件</td> <td> </td> </tr> <tr> <td><nav></td> <td>●</td> <td>导航链接</td> <td>外部链接或文档内部链接</td> </tr> <tr> <td><article></td> <td>●</td> <td>页面模块</td> <td>类似文章、摘要或留言POST等形式的记录</td> </tr> <tr> <td><aside></td> <td>●</td> <td>孤立模块</td> <td>一般作为边栏广告、说明、引用、导航等，aside围堵部分一般与正文耦合较小</td> </tr> <tr> <td><h1></td> <td>●</td> <td>标题标记</td> <td>此外还有h2, h3, h4, h5, h6</td> </tr> <tr> <td><hgroup></td> <td>●</td> <td>群组标题</td> <td>用在一组h1-h6这样的元素集合时使用，用来区分主副标题？？</td> </tr> <tr> <td><header></td> <td>●</td> <td>组说明或组导航</td> <td>也可叫页头标题</td> </tr> <tr> <td><footer></td> <td>●</td> <td>页脚标题</td> <td>作用范围跟最近部件元素有关</td> </tr> <tr> <td><address></td> <td>●</td> <td>地址或联系信息</td> <td> </td> </tr> <tr> <td><strong>分组内容标记</strong></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><p></td> <td>●</td> <td>段落标记</td> <td> </td> </tr> <tr> <td><hr></td> <td>o</td> <td>水平分割线</td> <td> </td> </tr> <tr> <td><br></td> <td>o</td> <td>换行</td> <td> </td> </tr> <tr> <td><pre></td> <td>●</td> <td>预格式化分本块</td> <td> </td> </tr> <tr> <td><blockquote></td> <td>●</td> <td>块引用</td> <td> </td> </tr> <tr> <td><ol></td> <td>●</td> <td>编号列表</td> <td> </td> </tr> <tr> <td><ul></td> <td>●</td> <td>项目列表</td> <td> </td> </tr> <tr> <td><li></td> <td>●</td> <td>列表项</td> <td> </td> </tr> <tr> <td><dl></td> <td>●</td> <td>定义列表</td> <td> </td> </tr> <tr> <td><dt></td> <td>●</td> <td>定义名称</td> <td> </td> </tr> <tr> <td><dd></td> <td>●</td> <td>定义说明</td> <td> </td> </tr> <tr> <td><figure></td> <td>●</td> <td>流内容区块说明</td> <td>多结合figcaption使用</td> </tr> <tr> <td><figcaption></td> <td>●</td> <td>figure内容属性</td> <td> </td> </tr> <tr> <td><div></td> <td>●</td> <td>定位标记</td> <td>无实际意义</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="4"><strong>文本层次语义标记</strong></td> </tr> <tr> <td><a></td> <td>●</td> <td>链接标记</td> <td> </td> </tr> <tr> <td><em></td> <td>●</td> <td>强调标记</td> <td> </td> </tr> <tr> <td><strong></td> <td>●</td> <td>加重标记</td> <td> </td> </tr> <tr> <td><small></td> <td>●</td> <td>字体缩小</td> <td> </td> </tr> <tr> <td><cite></td> <td>●</td> <td>斜体标记</td> <td> </td> </tr> <tr> <td><q></td> <td>●</td> <td>引用标记内容</td> <td>原文是phrasing content，暂不清楚如何翻译</td> </tr> <tr> <td><dfn></td> <td>●</td> <td>术语定义</td> <td> </td> </tr> <tr> <td><abbr></td> <td>●</td> <td>缩略语</td> <td> </td> </tr> <tr> <td><time></td> <td>●</td> <td>日期时间</td> <td> </td> </tr> <tr> <td><code></td> <td>●</td> <td>程序代码</td> <td> </td> </tr> <tr> <td><var></td> <td>●</td> <td>变量</td> <td> </td> </tr> <tr> <td><samp></td> <td>●</td> <td>范例</td> <td> </td> </tr> <tr> <td><kbd></td> <td>●</td> <td>键盘字</td> <td> </td> </tr> <tr> <td><sub><sups></td> <td>●</td> <td>上标字/下标字</td> <td> </td> </tr> <tr> <td><i></td> <td>●</td> <td>斜体标记</td> <td> </td> </tr> <tr> <td><b></td> <td>●</td> <td>粗体标记</td> <td> </td> </tr> <tr> <td><mark></td> <td>●</td> <td>标记或高亮</td> <td> </td> </tr> <tr> <td><ruby></td> <td>●</td> <td>注解标记</td> <td> </td> </tr> <tr> <td><rt></td> <td>●</td> <td>ruby子元素</td> <td>结合ruby使用，比如:<ruby>天<rt>Tian</rt>缘<rt>Yuan</rt></ruby></td> </tr> <tr> <td><rp></td> <td>●</td> <td>ruby子元素</td> <td>一般做rt元素注释使用</td> </tr> <tr> <td><bdo></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><span></td> <td>●</td> <td>自定义标记</td> <td> </td> </tr> <tr> <td colspan="4"><strong>编辑标记</strong></td> </tr> <tr> <td><ins></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><del></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td colspan="4"><strong>嵌入内容标记</strong></td> </tr> <tr> <td><img></td> <td>●</td> <td>图片标记</td> <td> </td> </tr> <tr> <td><iframe></td> <td>●</td> <td>框架标记</td> <td> </td> </tr> <tr> <td><embed></td> <td>●</td> <td>嵌入标记</td> <td> </td> </tr> <tr> <td><object></td> <td>●</td> <td>对象标记</td> <td> </td> </tr> <tr> <td><param></td> <td>●</td> <td>参数标记</td> <td> </td> </tr> <tr> <td><video></td> <td>●</td> <td>视频标记</td> <td> </td> </tr> <tr> <td><audio></td> <td>●</td> <td>音频标记</td> <td> </td> </tr> <tr> <td><source></td> <td>●</td> <td>来源标记</td> <td> </td> </tr> <tr> <td><canvas></td> <td>●</td> <td>制图标记</td> <td> </td> </tr> <tr> <td><map></td> <td>●</td> <td>地图标记</td> <td> </td> </tr> <tr> <td><area></td> <td>●</td> <td>区域标记</td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="4"><strong>表格标记</strong></td> </tr> <tr> <td><table></td> <td>●</td> <td>表格标记</td> <td>设定该表格的各项参数</td> </tr> <tr> <td><caption></td> <td>●</td> <td>表格标题</td> <td>做成一打通列以填入表格标题</td> </tr> <tr> <td><colgroup></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><col></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><tbody></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><thread></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><tfoot></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><tr></td> <td>●</td> <td>表格列</td> <td>设定该表格的列</td> </tr> <tr> <td><td></td> <td>●</td> <td>表格栏</td> <td>设定该表格的栏</td> </tr> <tr> <td><th></td> <td>●</td> <td>表格标头</td> <td>相等于<TD>，但其内文字字体会变粗</td> </tr> <tr> <td colspan="4"><strong>表单标记</strong></td> </tr> <tr> <td><form></td> <td>●</td> <td>表单标记</td> <td>决定该表单的运作模式</td> </tr> <tr> <td><fieldset></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><legend></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><input></td> <td>●</td> <td>输入标记</td> <td> </td> </tr> <tr> <td><label></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><button></td> <td>●</td> <td>按钮</td> <td> </td> </tr> <tr> <td><select></td> <td>●</td> <td>选择标记</td> <td> </td> </tr> <tr> <td><datalist></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><optgroup></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><option></td> <td>●</td> <td>选项</td> <td> </td> </tr> <tr> <td><textarea></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><keygen></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><output></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><progress></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><meter></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="4"> <p><strong>互动元素</strong></p> </td> </tr> <tr> <td><details></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><summary></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><command></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><menu></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td colspan="4"><strong>其他标记</strong></td> </tr> <tr> <td><script></td> <td>●</td> <td> </td> <td> </td> </tr> <tr> <td><noscript></td> <td>●</td> <td> </td> <td> </td> </tr> </tbody> </table> </div> <!--conend--> <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid4929-0.html' class='tagbtn' target='_blank'>htmlcss</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div> <!--xg--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <!----> <!----> </div> <!--xgend--> </div> <div class="col-lg-3 col-12 p-0 ps-lg-2"> <!--box--> <!--boxend--> <!--<div class="p-2"></div>--> <!--box--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div> <!--box end--> </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt \|\| []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>