目录
*** 什么是HTML5?***
//可以理解为html的最新版本
*** html5标签变化 ***
-
<!DOCTYPE>标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>doctype</title>
</head>
<body>
</body>
</html>
常用的 DOCTYPE 声明:
??为什么html5中声明doctype 不需要引用dtd文件呢??dtd文件是什么呢?
-
DTD
详细了解参考《HTML元素和有效的DTD教程》
-
新增的标签
1、结构标签
<!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>
</body>
</html>
建议级别补充:header/section/footer > aside/article/figure/hgroup/nav > div/figcaption
2、多媒体标签
<!-- canvas:画布,其拥有一个非常强大的api,可以定义很酷炫的动画,但是需要js基础-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio</title>
</head>
<body>
<!--audio-->
<!--方式一:-->
<audio src="../Source/passion.mp3" autoplay="autoplay" loop="-1" controls="controls">您的浏览器也该退休了,是否考虑一下Chrome这样的新鲜血液呢?</audio>
<!--loop:代表循环次数,-1会无限次重复;
controls:代表会出现控制按钮(这样的展示样式不能通过css修改,往后的学习中可以通过JS去修改)
audio标签中添加文字:是防止部分浏览器不支持播放而展示的备注文案-->
<!--方式二:-->
<audio autoplay="autoplay">
<!--不同浏览器所支持的音频格式不一样,所以这边就应该通过source标签,type:转码-->
<source src="../Source/passion.mp3" type="audio/mpeg">
</audio>
<!-- video -->
<!-- 方式一: -->
<video src="../Source/pal4.mp4" autoplay="autoplay" controls="controls"></video>
<!-- 方式二: -->
<video controls="controls" width="1024" height="768"><!--因为音频不需要定义宽度,而视频是需要的-->
<source src="../Source/pal4.mp4" type="video/mp4">
</video>
<!-- embed:在html4中就存在,但是当时未能得到w3c的认可,目前html5开始转正啦,可实现flash等带交互的文件-->
<embed src="../Source/HappyBirthday.swf" width="1024" height="768"></embed>
</body>
</html>
//多媒体标签引入的意义: 意味着富媒体的发展 以及 支持 不使用插件的情况下即可操作媒体文件,极大的提升了用户体验。
【详细了解多媒体标签,可参考《HTML5新增多媒体标签》】
3、Web应用标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meter、Progress</title>
</head>
<body>
<!-- meter标签 电压显示:只要不在正常值范围内,就变成黄色 ;optium代表最优值-->
<meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="0.75">75%</meter>
<!-- progress标签 -->
<progress value="30" max="100">
<progress max="100"></progress> <!--循环滚动-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Datalist、Details</title>
</head>
<body>
<!--datalist标签-->
<input placeholder="请选择您喜欢的手机品牌" list="phoneList" />
<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>
<!--details标签-->
<details open="open">
<summary>树下的猫</summary>
<p>我是一只坐在树下的貓,每天我都坐在树下,看花花世界,人海茫茫……
我每天都会做相同的梦,梦里看到一位公子,身患重病,危在旦夕。公子身边有一名女子,她的眼里尽是关切和深深的依恋。梦里,她喂药给他,他流着泪拉着她的手对他说:“谢谢你,下辈子我一定好好待你,来世还要娶你……” </p>
</details>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu</title>
</head>
<body>
<meun type="toolbar">
<li>
<meun label="File">
<button type="button">New...</button>
<button type="button">Open...</button>
<button type="button">Save...</button>
</meun>
</li>
<li>
<meun label="Edit">
<button type="button">Cut...</button>
<button type="button">Copy...</button>
<button type="button">Paste...</button>
</meun>
</li>
</meun>
</body>
</html>
4、其他标签
//<rp> 不能放到<rt>标签内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ruby</title>
</head>
<body>
<!-- <ruby>、<rt>、<rp>,<rp>标签包裹着<rt>为了以防有些浏览器不支持rt、rp标签,这样就会将括号展示出来-->
<p>我们来<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一个话题。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mark</title>
</head>
<body>
<p>妈妈叫我回家的时候顺路买一盒<mark>牛奶</mark>,需要很新鲜的那种。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Output</title>
</head>
<body>
<!-- oninput属性:可以实时监听文本框的输入变化 -->
<form oninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)">
0<input type="range" id="price" value="5000">1000
<!-- <input type="text" id="price" value="5000"> -->
*<input type="number" id="number" value="1">
=<output name="totalPrice" for="price number"></output>
<!-- type属性为text表示是一个文本框;type属性为number表示数值型;type属性为range表示范围 -->
</form>
</body>
</html>
这边只是比较常用的标签,具体可以参考《HTML5新增和删除标签》
-
删除的标签
-
重定义的标签