子曰:温故而知新,可以为师矣。 《论语》-- 孔子
一、新增标签
1. 结构标签(块状元素)
<article>
:标记定义一篇文章。<header>
:标记定义一个页面或一个区域的头部。<nav>
:标记定义导航链接。<section>
:标记定义一个区域。aside
:标记定义页面内容部分的侧边栏。hgroup
:标记定义文件中一个区块的相关信息。figure
:标记定义一组媒体内容以及它们的标题。figcaption
:标记定义 figure 元素的标题。footer
:标记定义一个页面或一个区域的底部。dialog
:标记定义一个对话框(会话框)类似微信。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构标签</title>
<style type="text/css">
footer {
height: 50px;
background: #abcdef;
line-height: 50px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #696969;
}
</style>
</head>
<body>
<header>
<div>Logo</div>
<nav>
<a href="index.html">首页</a>
<a href="#">介绍</a>
<a href="#">案例</a>
<a href="#">链接</a>
<a href="#">关于</a>
</nav>
</header>
<section>
<hgroup>
<h1>树下的猫</h1>
<h3>文/爱米</h3>
<h4>佛说:人世间的一千次回眸,才换来今生的相逢。也许我就是那佛前的一只猫,为了和你相逢,我在佛前求了500年,因为我许的诺言是一生一世……</h4>
</hgroup>
<aside>
<a href="#se1">Section One</a>
<a href="#se2">Section Two</a>
<a href="#se3">Section Three</a>
</aside>
<article>
Section ONE
<p>我是一只坐在树下的貓,每天我都坐在树下,看花花世界,人海茫茫……</p>
我每天都会做相同的梦,梦里看到一位公子,身患重病,危在旦夕。公子身边有一名女子,她的眼里尽是关切和深深的依恋。梦里,她喂药给他,他流着泪拉着她的手对他说:“谢谢你,下辈子我一定好好待你,来世还要娶你……”
每当这时,一切混沌,出现一位老者对我说着同样的话:“三世情缘,切忌把握!”每次我还想问一些什么,梦就醒了。
后来我终于明白,那个女子就是我,那个梦是我的前世,那位公子是我前世的丈夫。我不知道是不是猫都有记忆,也不知道是不是猫都会做梦。我只知道,那个梦越来越真实,我甚至可以感觉到他的心跳,他的痛苦。梦中醒来,泪流满面,滴在地上,久而久之,地上便出现了一个坑。坑里,我的眼泪像血一般殷红……
这辈子,我是一只猫,坐在树下,因为无家可归。在漆黑的夜里,抬头望天,对着星星说话,对着天空祈祷……
每天都坐在树下等,希望有一天可以见到我的前世今生。我想,如果一切都是真的,我一定可以认出他。
不曾遗忘那盘古洪荒是与你的诺言,千万岁月只在弹指一挥间,等你将我的似水年华烙上爱的印记,然后我们相依相偎,地老天荒……
Section TOW
最近总是看见一个高大帅气的男孩。每天他经过身旁,都会停下来抚摸我的头,很大很温暖的手,我总是闭上眼睛很乖的享受。他走的时候,总会给我说再见,眼眸相对,我看到了前世的记忆。
我拼命叫他,他总是温柔的对我笑笑,然后转身离去,留给我一个美好的背影……
他不知道,我有好多话想要告诉他,却忘了我是猫,我的话他听不懂。
每日必经之路,一棵树下,总是看见一直猫,全身白色,眼睛却天空般蔚蓝。看到它,我总是不由自主去到它身边,抚摸它的头,喜欢它闭上眼睛静静地很乖地享受的样子。一瞬间,总有一种熟悉的感觉,放佛已经相识千年。每次走的时候,它总是不停地叫,看着它变得忧伤的眼神,总是觉得很心疼。
日子就这样一天天过去,我几乎忘了老者的话,以为只要哪天他愿意带我回家,每天可以看见他,每天享受他的温暖,只做猫我也无怨无悔。
那是个慵懒的下午,天空很蓝,太阳很暖。见他走来,却看到身边一张陌生而又熟悉的脸。脸上一对和他一样美丽的眼睛,看他的眼神特别温柔。我大脑一片空白,天空也变成了灰色。
“走吧,刮风了……”
熟悉的声音,我忽然全想起来了……
…………
那时我还没有轮回转世,因为我前世的善行感动上苍,所以不用受地狱之刑。于是我整日闲逛于地府,等待轮回。三年一轮回,我也迎来了自己的三年。轮回门前一共有五个,其中一个女孩和我名字相同,孟婆婆叫我的时候她也站了出来。她站在我的右边,孟婆婆笑着说:“怎么你们两个名字相同,长得也挺像。呆会可要仔细听好了别弄错了。”
我们面前出現了兩扇門,她在右边的那扇。
婆婆說你們站好啦別亂動,說完婆婆就去那口大鐵鍋裏舀湯了,我看見那個女孩向我招手叫我過去,我走了過去,她對我說:你知道嗎?待会我們只要一喝那碗孟婆湯我們就会失去所有的記憶。
孟婆婆教我们站好别乱动,说完就去舀汤。那个女孩叫我过去,对我说:“你知道吗?孟婆婆舀的孟婆汤,我们喝了就会失去所有的记忆。”
“失去所有的记忆?”
“对!”
“不可以,我绝对不可以失去所有的记忆。”我的眼前出现了他流泪的脸,“他说她要娶我的。”
我的眼泪滴了下來,心痛……
“没关系,我有办法可以帮你。”
“真的吗?”
“呆会我先喝,轮到你的时候你和我对换一下位置就好。”
“那你不是一下子喝了两碗,什么都不记得了吗?”
“没关系,你记得我就好。”
感激的不知道说什么才好,我只顾一个劲地说谢谢。
我们终于骗过了孟婆婆,看她从左边的门走出,临别的时候还对我笑了笑……
后来我才知道,从左边门走出去的是人,右边的是动物……
…………
看着他们转身离去,我像发了疯似的叫喊。我好想告诉他,站在他身边的应该是我。可是不论我怎么呼喊,他毅然和她一起转身离去。我开始崩溃,眼泪如水。又一次忘了我是猫,我的话,他听不懂……
那天,他说要带我去一个地方,一棵普通的树,树下有一只猫,很美。他说他每次看见它都会好心疼,好想给它温暖。我听后很好奇,也见到了它。可是那双蔚蓝色的瞳孔中尽是怨恨,让我有些怕。我急忙拉着他走开,走得时候听到它更加凄惨的叫声。我的心为之一震,只好把他拉的更紧……
那天晚上,我选择离开。不知道继续呆在这里的意义,也恨自己当初相信了她。我知道这一切已经无力挽回,看着他现在幸福的样子,也许我应该学会忘记,忘记一切的一切,学会只做一只普通的猫,去寻找属于猫的幸福。回头望了一眼那棵树,还有那个盛着我的眼泪的坑,他那温柔的脸又一次浮现。想起他曾经给我的短暂的幸福,我心如刀割,眼里却没有了眼泪。我差点忘了猫的眼泪是有限的,而我却已经流尽了一生的泪水……
我是一只坐在树下的猫,跌落红尘,却未曾蒙尘。千年前,一句承诺,千年后,一片痴心……
Section THERE
华灯初上,人流涌动,我就这样漫无目的的走着。
前面的路口不知为何围了好多人,和我无关,我也无心去看。路过的时候,听到一个熟悉的声音。是他,抱着浑身是血的她。
围观的人议论纷纷,也听出事故来龙去脉。原来,她手链掉路中央,他去给她捡。背后货车疾驰而来,她跑去推开他,自己却被撞了。
他的眼泪滑落于她脸上,每一滴好似献血。突然一阵心痛,却不知如何帮他,只有在人群中发了疯的大喊,希望有人可以听见,有人可以帮他。然而,任凭我喊破嗓子,没人理我。又一次,我忘了我是猫,我的话,没人会懂。
女孩的魂魄走了出来,暗处走出两个鬼差,要带她走。见她回头望他,眼里尽是不舍。我急忙跑过去,对那两个鬼差说:“求你们了,求你们让她回去吧。”
“走开,哪来的猫。”
我使劲地抱着一名鬼差的腿说:“求你们了,求你。”
梦中的老者不知什么时候出现在我面前,我急忙跑过去对他说:“我求你,求你让他回去吧,如果你们非要带一个人走的话就带我走吧。”
“你别忘了,是她抢走了你的幸福啊,那幸福本来就是属于你的。现在我们要把她带走,她应该接受惩罚。我现在就帮你做回你自己,从此以后你就好好的享受幸福吧。”
“请等一等,让我跟她说几句话可以吗?”
老者点点头。
走到她身边,她满脸泪痕。
“你一定很爱他吧?我知道,你并不想走。可以答应我一个请求吗?拜托你好好珍惜他,可以吗?
其实……其实我,已经习惯做猫了,真的。“
“谢谢你,我想我恐怕没办法答应你了。其实我应该跟你说对不起,是我一时贪恋骗了你。
我以为我可以和他幸福到老,我以为这辈子不会遇到你。可是我错了,你们才是命中注定的恋人。
告诉你一个秘密。其实,他没有忘记你,从来没有。他其实不用每天都经过那棵树的,他只是想去看你。我们现在终于可以做回自己了,我祝你们幸福。”
…………
三年后,我和他在全市最大的礼堂举行婚礼。
婚礼那天,教堂边一棵树下,两只黑色的猫映入眼帘。其中一只眼睛很蓝,正盯着我微笑。
我知道,她也找到了幸福,属于她自己的幸福……
叮咚敲着礼堂的钟声,望着身边高大帅气的他,看着他的笑脸,忽然觉得这样真好……
</article>
</section>
<section>
<figure>
<figcaption>树下的猫咪怎么生活?</figcaption>
<div class="video">...</div>
</figure>
</section>
<section>
<dialog>
<dt>张三:嗯,,,,内容还不错,,</dt>
<dd>李四:还好吧,就是主题不突出</dd>
<dt>张三:嗯,,,,内容还不错,,</dt>
<dd>李四:还好吧,就是主题不突出</dd>
<dt>张三:嗯,,,,内容还不错,,</dt>
<dd>李四:还好吧,就是主题不突出</dd>
<dt>张三:嗯,,,,内容还不错,,</dt>
<dd>李四:还好吧,就是主题不突出</dd>
</dialog>
<dialog>
<dt>张三:嗯,,,,内容还不错,,</dt>
<dd>李四:还好吧,就是主题不突出</dd>
<dt>张三:嗯,,,,内容还不错,,</dt>
<dd>李四:还好吧,就是主题不突出</dd>
<dt>张三:嗯,,,,内容还不错,,</dt>
<dd>李四:还好吧,就是主题不突出</dd>
<dt>张三:嗯,,,,内容还不错,,</dt>
<dd>李四:还好吧,就是主题不突出</dd>
</dialog>
<dialog>
<dt>张三:嗯,,,,内容还不错,,</dt>
<dd>李四:还好吧,就是主题不突出</dd>
<dt>张三:嗯,,,,内容还不错,,</dt>
<dd>李四:还好吧,就是主题不突出</dd>
<dt>张三:嗯,,,,内容还不错,,</dt>
<dd>李四:还好吧,就是主题不突出</dd>
<dt>张三:嗯,,,,内容还不错,,</dt>
<dd>李四:还好吧,就是主题不突出</dd>
</dialog>
</section>
<footer>
Copyright,,,,,
</footer>
<!--
第一点补充:header/section/aside/article/footer
第二点补充:header/section/footer > aside/article/figure/hgroup/nav > div/figcaption
-->
</body>
</html>
2. 多媒体标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多媒体标签</title>
</head>
<body>
<!-- 标记定义一个视频-->
<video src="../Source/pal4.mp4" controls="controls"></video>
<video controls="controls" width="1024" height="768">
<!-- 标记定义媒体资源-->
<source src="./source/pal4.mp4" type="video/mp4">
</video>
<!-- 标记定义音频内容-->
<audio autoplay="autoplay">
<source src="./source/passion.mp3" type="audio/mpeg">
</audio>
<!-- 适配-->
<audio src="./source/passion.mp3" autoplay="autoplay" controls="controls" loop="-1">
您的浏览器也该退休了,是否考虑一下Chrome这样的新鲜血液呢?
</audio>
<!-- 标记定义外部可交互的内容或插件,比如flash-->
<embed src="./source/HappyBirthday.swf" width="1024" height="768"> </embed>
</body>
</html>
3. Web应用标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meter</title>
</head>
<body>
<!-- 状态标签(实时状态显示:气压、气温)-->
<meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="0.75">75%</meter>
<!-- 状态标签(任务过程:安装、加载)-->
<progress value="30" max="100"></progress>
<progress max="100"></progress>
<!-- 列表标签 -->
<input placeholder="请选择您喜欢的手机品牌" list="phoneList">
<!-- 列表标签 为input标记定义一个下拉列表,配合option使用 -->
<datalist id="phoneList">
<option value="iPhone">iPhone</option>
<option value="Samsung">Samsung</option>
<option value="Huawei">Huawei</option>
<option value="hTC">hTC</option>
<option value="Meizu">Meizu</option>
</datalist>
<!-- 标记定义一个元素的详细内容,配合summary使用 -->
<details open="open">
<summary>树下的猫</summary>
<p>我是一只坐在树下的貓,每天我都坐在树下,看花花世界,人海茫茫……
我每天都会做相同的梦,梦里看到一位公子,身患重病,危在旦夕。公子身边有一名女子,她的眼里尽是关切和深深的依恋。梦里,她喂药给他,他流着泪拉着她的手对他说:“谢谢你,下辈子我一定好好待你,来世还要娶你……”
每当这时,一切混沌,出现一位老者对我说着同样的话:“三世情缘,切忌把握!”每次我还想问一些什么,梦就醒了。
后来我终于明白,那个女子就是我,那个梦是我的前世,那位公子是我前世的丈夫。我不知道是不是猫都有记忆,也不知道是不是猫都会做梦。我只知道,那个梦越来越真实,我甚至可以感觉到他的心跳,他的痛苦。梦中醒来,泪流满面,滴在地上,久而久之,地上便出现了一个坑。坑里,我的眼泪像血一般殷红……
这辈子,我是一只猫,坐在树下,因为无家可归。在漆黑的夜里,抬头望天,对着星星说话,对着天空祈祷……
每天都坐在树下等,希望有一天可以见到我的前世今生。我想,如果一切都是真的,我一定可以认出他。
不曾遗忘那盘古洪荒是与你的诺言,千万岁月只在弹指一挥间,等你将我的似水年华烙上爱的印记,然后我们相依相偎,地老天荒……</p>
</details>
</body>
</html>
4. 其它标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ruby</title>
</head>
<body>
<p>我们来
<!-- ruby : 标记定义注释或音标
rp : 告诉那些不支持ruby元素的浏览器如何去显示
rt : 标记定义对ruby的注释内容文本
-->
<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp>
</ruby>
一个话题。
</p>
<!-- 标记定义有标记的文本(黄色选中状态)-->
<p>妈妈叫我回家的时候顺路买一盒<mark>牛奶</mark>,需要很新鲜的那种。</p>
<!-- 标记定义一些输出类型,计算表单结果配合oninput事件-->
<form oninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)">
<input type="text" id="price" value="5000">
*<input type="number" id="number" value="1">
=<output name="totalPrice" for="price number"></output>
</form>
</body>
</html>
二、删除标签
- 纯表现的元素:basefont、big、center、font、s、strike、tt、u。
- 对可用性产生负面影响的元素:frame、frameset、noframes。
- 产生混淆的元素:acronym、applet、isindex、dir。
三、HTML 属性变化
1. input 属性变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input新增属性</title>
</head>
<body>
<!--电子邮件-->
<input type="email" name="email">
<!--统一资源定位符-->
<input type="url" name="url">
<!--电话号码-->
<input type="tel" name="tel">
<!--数字-->
<input type="number" name="number">
<!--输入范围1到10-->
<input type="range" name="range" min="1" max="10">
<!--搜索框-->
<input type="search" name="search">
<!--颜色选择框-->
<input type="color" name="color">
<!--选取年月日-->
date:<input type="date" name="date"><br>
<!--选取年月-->
month:<input type="month" name="month"><br>
<!--选取周年-->
week:<input type="week" name="week"><br>
<!--选取时间(小时和分钟)-->
time:<input type="time" name="time"><br>
<!--选取时间 日 月 年 (UTC时间)-->
datetime:<input type="datetime" name="datetime"><br>
<!--选取时间 日 月 年 (本地时间)-->
datetime-local:<input type="datetime-local" name="datetime-local"><br>
</body>
</html>
2. 表单属性变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--autocomplete : 自动补全-->
<form autocomplete="on">
<input type="text" name="text">
<input autocomplete="off" type="submit" name="submit">
<input type="email" name="email">
</form>
<!-- autofocus 使用所有标签,自动获取标签 -->
<form>
<input type="text" name="text">
<input type="submit" name="submit">
<input type="email" name="email" autofocus="on">
</form>
<!--multiple: 规定输入域中可选择多个值-->
<form>
<input type="file" name="file" multiple="multiple">
<input type="submit" name="submit">
<input type="email" name="email" autofocus="on" multiple="multiple">
</form>
<!-- placeholder: 提供一种提示,描述输入域所期待的值 -->
<form>
<input type="text" name="text" placeholder="您好,请在这里输入您的用户名!">
<input type="submit" name="submit" >
<input type="email" name="email" autofocus="on">
</form>
<!-- required: 规定必须在提交之前填写输入域(不能为空) -->
<form>
<input type="text" name="text" required="required">
<input type="email" name="email" required="required">
<input type="submit">
</form>
</body>
</html>
写在文末
纸上得来终觉浅,绝知此事要躬行。 《冬夜读书示子聿》-- 陆游
好了,关于 HTML5
基础知识就说到这,各位看官食用愉快。