html5 自定义标签本文只是自己学习HTML5时的一些笔记。希望自己能够学好HTML5. 如果有感兴趣的同学。可以互相学习。
我觉得HTML5在未来的开发中站主导地位。
下面开始学习HTML5. 还是从HTML5标签开始。
一、HTML5标签
以前的布局都是用div+css 控制。自从HTML出来以后。W3C给出了一些明确规范。
用一些标签去重新定义了HTML标签意义。
<!DOCTYPE html"> 首先必须要定义 doctype 或者 DOCTYPE 不区分大小写。
<header> 标签定义文档的页眉
<section> 标签定义独立的内容
<aside> 侧边栏标签
<article> 标签定义独立的内容。
<footer> 这个就不用说了，底部标签
<hr/> 这个分割行标签，这个没有变化。只是HTML5 重新定义了意义
<hgroup> 标签用于对网页或区段（section）的标题进行组合。
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<figurecaption> 定义 figure 元素的标题（caption）
<dt> 标签定义一个定义列表中的一个项目。
<dd> 标签定义一个定义列表中对项目的描述。
<dialog> 标签定义对话框或窗口。
<menu> 标签可定义一个菜单列表。
<menuitem> 菜单列表的内容
<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。
<progress> 标签定义运行中的进度（进程）
<details> 标签用于描述文档或文档某个部分的细节。
<ruby><rp><rt> 这三个基本上一起使用
<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
暂时就学这么多了。一口吃不了胖子。下面会继续的。
二、实例
<!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>
<figurecaption>UFO</figurecaption>
<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" lew="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/>
女人<mark>最喜欢做的事情</mark>就是逛街，吃零食！
于是总结一下女人：逛吃，逛吃，逛吃。
</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在未来的开发中站主导地位。
下面开始学习HTML5. 还是从HTML5标签开始。
一、HTML5标签
以前的布局都是用div+css 控制。自从HTML出来以后。W3C给出了一些明确规范。
用一些标签去重新定义了HTML标签意义。
<!DOCTYPE html"> 首先必须要定义 doctype 或者 DOCTYPE 不区分大小写。
<header> 标签定义文档的页眉
<section> 标签定义独立的内容
<aside> 侧边栏标签
<article> 标签定义独立的内容。
<footer> 这个就不用说了，底部标签
<hr/> 这个分割行标签，这个没有变化。只是HTML5 重新定义了意义
<hgroup> 标签用于对网页或区段（section）的标题进行组合。
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<figurecaption> 定义 figure 元素的标题（caption）
<dt> 标签定义一个定义列表中的一个项目。
<dd> 标签定义一个定义列表中对项目的描述。
<dialog> 标签定义对话框或窗口。
<menu> 标签可定义一个菜单列表。
<menuitem> 菜单列表的内容
<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。
<progress> 标签定义运行中的进度（进程）
<details> 标签用于描述文档或文档某个部分的细节。
<ruby><rp><rt> 这三个基本上一起使用
<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
暂时就学这么多了。一口吃不了胖子。下面会继续的。
二、实例
<!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>
<figurecaption>UFO</figurecaption>
<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" lew="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/>
女人<mark>最喜欢做的事情</mark>就是逛街，吃零食！
于是总结一下女人：逛吃，逛吃，逛吃。
</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>
