目录
*** 什么是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/figcaption2、多媒体标签
<!-- 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新增和删除标签》
-
删除的标签
-
重定义的标签
397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
