首页  >  文章  >  web前端  >  html5 常用标签汇总详情

html5 常用标签汇总详情

黄舟
黄舟原创
2017-03-20 16:13:362292浏览

一、主体结构

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、p
文本层次语义元素 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、canvasmap、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> <a href="http://www.php.cn/html5/html5-3-mip-normal.html" target="_blank">其它</a>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> <a href="http://www.php.cn/code/9303.html" target="_blank">导航</a>链接</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>一般作为边栏广告、说明、<a href="http://www.php.cn/wiki/231.html" target="_blank">引用</a>、导航等,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 class="brush:php;toolbar:false"></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><p></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><a href="http://www.php.cn/wiki/70.html" target="_blank">变量</a></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元素<a href="http://www.php.cn/code/8105.html" target="_blank">注释</a>使用</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> <a href="http://www.php.cn/css/css-rwd-images.html" target="_blank">图片</a>标记</td> <td> </td> </tr> <tr> <td><iframe></td> <td>●</td> <td> <a href="http://www.php.cn/css/css-rwd-frameworks.html" target="_blank">框架</a>标记</td> <td> </td> </tr> <tr> <td><embed></td> <td>●</td> <td>嵌入标记</td> <td> </td> </tr> <tr> <td><object></td> <td>●</td> <td> <a href="http://www.php.cn/wiki/60.html" target="_blank">对象</a>标记</td> <td> </td> </tr> <tr> <td><param></td> <td>●</td> <td>参数标记</td> <td> </td> </tr> <tr> <td><video></td> <td>●</td> <td> <a href="http://www.php.cn/code/6707.html" target="_blank">视频</a>标记</td> <td> </td> </tr> <tr> <td><audio></td> <td>●</td> <td> <a href="http://www.php.cn/code/6093.html" target="_blank">音频</a>标记</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> <a href="http://www.php.cn/code/7891.html" target="_blank">地图</a>标记</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><a href="http://www.php.cn/code/5991.html" target="_blank">按钮</a></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> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody></table> <p><strong>备注: </strong></p> <p>1、● 表示该标记属于围堵标记,需要结束标记</标记>。</p> <p>2、o 表示该标记属空标记,不需要结束标记。</p><p>以上是html5 常用标签汇总详情的详细内容。更多信息请关注PHP中文网其他相关文章!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明:</span><div>本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn</div></div></div><div class="nphpSytBox"><span>上一篇:<a class="dBlack" title="html5 WebWorkers防止浏览器假死的示例代码分享" href="http://m.php.cn/zh/faq/357701.html">html5 WebWorkers防止浏览器假死的示例代码分享</a></span><span>下一篇:<a class="dBlack" title="HTML5 Placeholder属性的详情介绍" href="http://m.php.cn/zh/faq/357705.html">HTML5 Placeholder属性的详情介绍</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相关文章</h2><em><a href="http://m.php.cn/zh/article.html" class="bBlack"><i>查看更多</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/zh/faq/348281.html" title="AlloyTouch全屏滚动插件 30秒搞定顺滑H5页" class="aBlack">AlloyTouch全屏滚动插件 30秒搞定顺滑H5页</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh/faq/348372.html" title="HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)" class="aBlack">HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh/faq/348373.html" title="HTML5 canvas 9绘制图片实例详解" class="aBlack">HTML5 canvas 9绘制图片实例详解</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh/faq/348374.html" title="正则表达式与HTML5新元素" class="aBlack">正则表达式与HTML5新元素</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh/faq/348469.html" title="NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法" class="aBlack">NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/zh/"><b class="icon1"></b><p>首页</p></a></li><li><a href="http://m.php.cn/zh/course.html"><b class="icon2"></b><p>课程</p></a></li><li><a href="http://m.php.cn/zh/wenda.html"><b class="icon4"></b><p>问答</p></a></li><li><a href="http://m.php.cn/zh/login"><b class="icon5"></b><p>我的</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/zh/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/zh/"><b class="icon1"></b><span>首页</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/course.html"><b class="icon2"></b><span>课程</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/article.html"><b class="icon3"></b><span>文章</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/wenda.html"><b class="icon4"></b><span>问答</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/dic.html"><b class="icon6"></b><span>词典</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/course/type/99.html"><b class="icon7"></b><span>手册</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/xiazai/"><b class="icon8"></b><span>下载</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/faq/zt" title="专题"><b class="icon12"></b><span>专题</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/zh/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/zh/" >首页</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/article.html" class="hover">文章</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/wenda.html" >问答</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/course.html" >课程</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/faq/zt" >专题</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/xiazai" >下载</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/game" >手游</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/dic.html" >词典</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>(ZH-CN)</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>(EN)</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>(ZH-TW)</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>(JA)</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>(KO)</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>(MS)</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>(FR)</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>(DE)</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时,自动初始化swiper observeParents: true,//修改swiper的父元素时,自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>