html5 自定义标签
2015年03月04日 10:52
0 点赞
0 评论
更新于 2025-11-21 16:40
本文是我学习 HTML5 时整理的笔记，希望能助力自己学好 HTML5，也欢迎感兴趣的同学一起交流学习。
我认为 HTML5 在未来的开发中会占据主导地位，接下来让我们从 HTML5 标签开始深入学习。
一、HTML5 标签
在 HTML5 出现之前，网页布局主要依靠 div + CSS 来控制。HTML5 诞生后，W3C 给出了明确规范，引入了一些新标签来重新定义 HTML 标签的语义。
1. 文档类型声明
在 HTML5 中，必须定义文档类型声明 <!DOCTYPE html>，doctype 不区分大小写。
2. 常用语义化标签
<header>：用于定义文档的页眉，通常包含网站的标题、导航等信息。<section>：定义独立的内容章节，可将页面按主题进行划分。<aside>：侧边栏标签，用于展示与页面主要内容相关的辅助信息。<article>：定义独立的、完整的内容，如文章、博客帖子等。<footer>：文档的底部标签，一般包含版权信息、联系方式等。<hr/>：分割行标签，在 HTML5 中重新定义了其语义，用于分隔内容。<hgroup>：用于对网页或区段（section）的标题进行组合，当有多个标题元素时使用。<figure>：规定独立的流内容，如图像、图表、照片、代码等。figure元素的内容应与主内容相关，但删除它不会影响文档流。<figcaption>：定义figure元素的标题。<dt>：定义一个定义列表中的一个项目。<dd>：定义一个定义列表中对项目的描述。<dialog>：定义对话框或窗口。<menu>：可定义一个菜单列表。<menuitem>：菜单列表的具体内容。<meter>：定义度量衡，仅用于已知最大和最小值的度量。<progress>：定义运行中的进度（进程）。<details>：用于描述文档或文档某个部分的细节，可实现展开和折叠效果。<ruby><rp><rt>：这三个标签通常一起使用，用于显示东亚文字的注音或注释。<mark>：定义带有记号的文本，用于突出显示特定文本。
二、实例
以下是一个使用 HTML5 标签的实例代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
/* 页面头部 */
div {
margin-top: 10px;
height: 1000px;
}
header {
height: 150px;
background: #abcdef;
}
nav {
height: 30px;
background: #ff9900;
margin-top: 100px;
}
nav ul li {
width: 100px;
height: 30px;
float: left;
line-height: 30px;
}
/* 页面中间 */
section {
height: 1000px;
background: #abcdef;
width: 70%;
float: left;
}
article {
background: #f90;
width: 500px;
margin: 0 auto;
text-align: center;
}
aside {
height: 1000px;
background: #abcdef;
width: 28%;
float: right;
}
/* 页面底部 */
footer {
height: 100px;
background: #abcdef;
clear: both;
margin-top: 10px;
}
</style>
</head>
<body>
<header>
<p>这是一个 header 标签</p>
<nav>
<ul>
<li>首页</li>
<li>婚纱摄影</li>
<li>社区</li>
<li>旅行</li>
<li>联系我们</li>
</ul>
</nav>
</header>
<div>
<section>
<p>这是一个 section 标签</p>
<article>
<h2>春晓</h2>
<p>
春眠不觉晓，<br/>
春眠不觉晓，<br/>
春眠不觉晓，<br/>
春眠不觉晓，<br/>
</p>
</article>
<hr/>
<article>
<h2>上学歌</h2>
<p>
太阳当空照，<br/>
花儿对我笑，<br/>
小鸟说早早早，<br/>
你为什么背上小书包，<br/>
早上老师好！<br/>
</p>
</article>
<hr/>
<figure>
<figcaption>UFO</figcaption>
<p>不明飞行物 Unknown Flying object</p>
</figure>
<figure>
<dt>DDS</dt>
<p>大屌丝</p>
</figure>
<hr/>
<dialog>
<dt>唐僧：悟空，你又调皮了，观音姐姐的月光宝盒怎么能扔呢？</dt>
<dd>悟空：........</dd>
<dt>唐僧：乱扔是不对的，碰到小朋友怎么办？</dt>
<dd>悟空：....(纠结)</dd>
<dt>唐僧：悟空你想要么？想要你就告诉我呀？你不告诉我我怎么知道你想要呢？</dt>
<dd>悟空：我靠；(一棍子轮上去)</dd>
</dialog>
<hr/>
<menu>
<li>点击</li>
<li>右键单击</li>
</menu>
<hr/>
<span contextmenu="caidan">右键单击我试试</span>
<menu type="context" id="caidan">
<menuitem label="菜单一" onclick="alert('这是一个内嵌菜单')" icon="http://www.baidu.com/img/bdlogo.gif"></menuitem>
</menu>
<hr/>
<meter min="0" max="10" value="5" low="3" high="7"></meter>
<progress max="100" value="0" id="pro"></progress>
<script>
var pro = document.getElementById('pro');
setInterval(function () {
pro.value += 1;
}, 100);
</script>
<hr/>
<details>
<dt>这是一个问题？</dt>
<dd>to be or not to be</dd>
<dt>这是一个问题？</dt>
<dd>to be or not to be</dd>
</details>
<hr/>
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<hr/>
<p>女人<mark>最喜欢做的事情</mark>就是逛街，吃零食！于是总结一下女人：逛吃，逛吃，逛吃。</p>
</section>
<hr/>
<section>
<p>HTML5 优点：简单，标记数量有限和语法较弱；不足：结构性差（不能创建自定义标签），存在恶性竞争。</p>
</section>
<aside>
<p>这是一个 aside 标签</p>
<hgroup>
<h3>女生宿舍为何频频被盗</h3>
<h3>两百头母猪为何惨死</h3>
<h3>是人性的扭曲？</h3>
<h3>男人为何压力大！</h3>
</hgroup>
</aside>
</div>
<footer>
<p>这是一个 footer 标签</p>
<hr/>
<small>联系我们</small>
<small>客户意见</small>
<small>招商引资</small>
</footer>
</body>
</html>
以上就是目前我学习 HTML5 标签的相关内容，学习需要循序渐进，后续我会继续深入探索。