HTML5知识点总结
HTML5知识点总结(一)
一、HTML新增元素
1、IE9版本以下支持HTML5的方法
1 <!--[if lt IE9]>
2 <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
3 <![endif]-->
2、header元素:是HTML5中的非主体结构元素
(1)header元素:是一种具有引导和导航作用的结构元素,通常用来放置整个页面或者页面内的一个内容区块的标题,但也可以包含其他的内容如:header中放置logo图片、搜索表单等等
(2)一个页面中并没有限制header元素出现的次数,也就是说在同一个页面上,不同的内容区块上分别加一个header元素,也可以包含其他的元素如nav
(3)代码示例如下:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>header</title>
6 <style>
7 body,h1,ul{margin: 0;padding: 0}
8 body{font-family: 微软雅黑;}
9 div{width: 100%;margin: 0 auto;text-align: center}
10 a{color: #f60;text-decoration: none}
11 nav{width: 100%;height: 48px;background:#f60;margin-top: 10px}
12 ul{width: 50%;list-style: none}
13 li{float: left;width: 15%;height:30px; background-color: black;line-height: 30px;text-align: center;margin:10px 2px 3px 2px;border-radius: 5px}
14 </style>
15 </head>
16 <body>
17 <header>
18 <div>
19 <h1>HTML5学习</h1>
20 <a href="/">[手机版]</a>
21 <a href="/">[HTML5论坛]</a>
22 </div>
23 <nav>
24 <ul>
25 <li><a href="/">首页</a></li>
26 <li><a href="/">手机版</a></li>
27 <li><a href="/">HTML5论坛</a></li>
28 </ul>
29 </nav>
30 </header>
31 </body>
32 </html>
运行后的结果为:
3、nav元素
(1)标签定义导航链接的部分。
(2)并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。
(3)在不同设备上(手机或者PC)可以制定导航链接是否显示,以适应不同屏幕的需求。
(4)使用场景:导航条、侧边栏的导航、内页导航、翻页操作(可用nav嵌套)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <h1>nav使用方法</h1>
9 <nav>
10 <ul>
11 <li><a href="/">首页</a></li>
12 <li><a href="/">aside</a></li>
13 <li><a href="/">section</a></li>
14 <li><a href="/">header</a></li>
15 </ul>
16 </nav>
17
18 <!--独立区域块article-->
19 <article>
20 <header>
21 <h2>NAV-1多层嵌套</h2>
22 <nav>
23 <ul>
24 <li><a href="/">nav</a></li>
25 <li><a href="/">footer</a></li>
26 <li><a href="/">article</a></li>
27 </ul>
28 </nav>
29 </header>
30 </article>
31 <article>
32 <header>
33 <h2>NAV-2多层嵌套</h2>
34 <nav>
35 <ul>
36 <li><a href="/">nav</a></li>
37 <li><a href="/">footer</a></li>
38 <li><a href="/">article</a></li>
39 </ul>
40 </nav>
41 </header>
42 </article>
43 <time datetime="2017-1-4">2017-1-4</time>
44 </body>
45 </html>
4、article元素
(1)定义页面独立内容区域
5、aside元素
(1)定义页面侧边栏内容。注意:IE 8 或更早版本的 IE 浏览器不支持 <aside> 标签。
6、address元素
(1)定义文档作者或者相拥有者的相关信息。
7、footer元素:
(1)作为它的上层父级区域块或者是一个根区域块的注脚,footer一般情况下包括与它相关的区块注脚信息,比如作者,版权信息等。
(2)footer元素没有限制它的使用次数,可以为section和article元素添加footer元素
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>footer元素</title>
6 <style>
7 body,p{margin: 0;padding: 0}
8 body{font-family: 微软雅黑;text-align: center}
9 .footer{margin-bottom: 20px}
10 .footer a,.footer p,footer a,footer p{color: gray}
11 </style>
12 </head>
13 <body>
14 <!-- HTML5之前的写法如下 -->
15 <div class="footer">
16 <p>
17 <a href="/">联系我们</a>
18 <a href="/">加入我们</a>
19 <a href="/">站点地图</a>
20 <a href="/">版权信息</a>
21 </p>
22 <p>©huanglanlan版权所有</p>
23 </div>
24 <!-- HTML5的写法如下 -->
25 <footer>
26 <p>
27 <a href="/">联系我们</a>
28 <a href="/">加入我们</a>
29 <a href="/">站点地图</a>
30 <a href="/">版权信息</a>
31 </p>
32 <p>©huanglanlan版权所有</p>
33 </footer>
34 </body>
35 </html>
代码效果如下:
二、其他的新增元素
1、figuer元素与figcaption元素
(1)figuer元素是一种元素组合,带有可选标题。用来表示页面上一块独立的内容,将它从页面删除不会给页面带来任何影响
(2)figcaption元素表示figuer元素的标题,它属于figuer元素,figcaption元素必须书写在figuer元素内部,可以写在其从属元素前面或者后面。一个figuer元素里面最多只允许放置一个figcaption元素
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <figuer>
9 <img src="img/1.jpg" alt="风景"/>
10 <img src="img/2.jpg" alt="风景"/>
11 <img src="img/3.jpg" alt="风景"/>
12 <figcaption>风景</figcaption>
13 </figuer>
14 </body>
15 </html>
2、details元素与summary元素(* 目前只有Chrome浏览器支持)
(1)details元素是一种用于标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型的open属性,当该值为TRUE时,该元素内部的子元素应该被展开;当该属性为FALSE时,当页面打开时其内部的子元素应该处于收缩的状态。
(2)summary元素从属于details元素,用鼠标点击summary元素中的内容文字时,details元素中的其他所有从属元素将会展开或者收缩。如果details元素内没有summary元素,浏览器那你会提供默认的文字以供点击,例如“details”
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <details>
9 <summary>
10 我有一个愿望
11 </summary>
12 <p>我希望某天可以去趟*、青海、还有云南</p>
13 </details>
14 <details>
15 <p>我希望某天可以去趟*、青海、还有云南</p>
16 </details>
17 </body>
18 </html>
3、mark元素
(1)mark元素表示页面中需要突出显示或高亮显示的,对于当前用户具有参考作用的一段文字。通常那个在引用原文是时使用mark元素,目的的引起读者的注意。mark元素是对原文内容具有补充作用的一个元素
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <h2>我喜欢<mark>大海</mark>,给人一种宽广的感觉</h2>
9 <article>
10 <p>
11 <a href="/">当心情不好的时候,看到大海会不会好点呢,<mark>海浪声那么优美</mark></a>
12 </p>
13 </article>
14 </body>
15 </html>
4、progress元素
(1)progress元素代表一个任务的完成进度,这个进度是可以不确定的,可以表示进度正在进行,也可以用0到某个最大数字(如100)之间的s数字来表示准确的进度情况(比如百分比)
(2)该元素具有两个表示当前任务完成情况的属性,value属性表示已经完成了多少工作量,max属性表示总共有多少工作量,工作量的单位是随意的,不指定的。
(3)在设定属性点时,value属性和max属性只能指定为有效浮点数,value属性必须大于0,且小于等于max的属性,max的属性值必须大于0
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <p>
9 当前任务完成进度:
10 <progress max="100" value="70">70%</progress>
11 </p>
12 </body>
13 </html>
5、meter元素
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <!--
9 meter元素表示规定范围内的数量值
10 1、value属性:在元素中特定表示出来的实际值。该属性默认为0,可以为该属性制定一个浮点小数值
11 2、min属性:指定规定范围时允许使用的最小值,默认为0,
12 3、max属性:指定规定范围内使用的最大值,如果在设定该属性值小于min的值,那么把min属性的值视为最大值。max属性的默认值为1
13 4、low属性:规定范围的下限值,必须小于或者等于high的值。
14 5、high属性:规定范围的上限值,如果该属性的值小于low属性值,那么把low属性的值视为high属性的值,如果该属性的值大于max的值,那么max的值视为high值
15 6、optimum属性:最佳值属于在min属性与max属性值之间,可以大于high属性值
16 注意:
17 当 optimum > high 时 颜色为红色
18 当 optimum < low 时 颜色为绿色
19 当 low < optimum <high 时 颜色为黄色
20 -->
21 <p>硬盘实际使用情况 <meter value="43.9" max="119" min="0">43.9/119</meter>GB</p>
22 <p>硬盘实际使用情况 <meter value="43.9" max="119" min="0" low="50" high="70" optimum="55">43.9/119</meter>GB</p>
23 <p>硬盘实际使用情况 <meter value="43.9" max="119" min="0" low="50" high="70" optimum="99">43.9/119</meter>GB</p>
24 <p>硬盘实际使用情况 <meter value="43.9" max="119" min="0" low="50" high="70" optimum="10">43.9/119</meter>GB</p>
25 </body>
26 </html>
代码运行后的效果为如下:
三、HTML5中废除的元素
1、能使用CSS代替的元素:basefont、big、center、font、s、u、tt、strike
2、不再使用frame框架
(1)对于frameset元素,frame元素与noframes元素,由于frame框架对页面可用性存在负面影响。
(2)在HTML5中已经不在支持frame框架,只支持iframe框架,同事废除上面的三个元素
3、只有部分浏览器支持的元素
(1)对于applet元素、bgsound、blink、marquee元素,由于只有部分浏览器支持。所以被废除了。