HTML5知识点总结（一）

一、HTML新增元素

1、IE9版本以下支持HTML5的方法　

 <!--[if lt IE9]>
 <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
 <![endif]-->

2、header元素：是HTML5中的非主体结构元素

　　（1）header元素：是一种具有引导和导航作用的结构元素，通常用来放置整个页面或者页面内的一个内容区块的标题，但也可以包含其他的内容如：header中放置logo图片、搜索表单等等

　　（2）一个页面中并没有限制header元素出现的次数，也就是说在同一个页面上，不同的内容区块上分别加一个header元素，也可以包含其他的元素如nav

　　（3）代码示例如下：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>header</title>
     <style>
         body,h1,ul{margin: 0;padding: 0}
         body{font-family: 微软雅黑;}
         div{width: 100%;margin: 0 auto;text-align: center}
         a{color: #f60;text-decoration: none}
         nav{width: 100%;height: 48px;background:#f60;margin-top: 10px}
         ul{width: 50%;list-style: none}
         li{float: left;width: 15%;height:30px; background-color: black;line-height: 30px;text-align: center;margin:10px 2px 3px 2px;border-radius: 5px}
     </style>
 </head>
 <body>
 <header>
     <div>
         <h1>HTML5学习</h1>
         <a href="/">[手机版]</a>
         <a href="/">[HTML5论坛]</a>
     </div>
     <nav>
         <ul>
             <li><a href="/">首页</a></li>
             <li><a href="/">手机版</a></li>
             <li><a href="/">HTML5论坛</a></li>
         </ul>
     </nav>
 </header>
 </body>
 </html>

运行后的结果为：

3、nav元素

　　（1）标签定义导航链接的部分。

　　（2）并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。

　　（3）在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。

　　（4）使用场景：导航条、侧边栏的导航、内页导航、翻页操作（可用nav嵌套）

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title></title>
 </head>
 <body>
 <h1>nav使用方法</h1>
 <nav>
     <ul>
         <li><a href="/">首页</a></li>
         <li><a href="/">aside</a></li>
         <li><a href="/">section</a></li>
         <li><a href="/">header</a></li>
     </ul>
 </nav>

 <!--独立区域块article-->
 <article>
     <header>
         <h2>NAV-1多层嵌套</h2>
         <nav>
             <ul>
                 <li><a href="/">nav</a></li>
                 <li><a href="/">footer</a></li>
                 <li><a href="/">article</a></li>
             </ul>
         </nav>
     </header>
 </article>
 <article>
     <header>
         <h2>NAV-2多层嵌套</h2>
         <nav>
             <ul>
                 <li><a href="/">nav</a></li>
                 <li><a href="/">footer</a></li>
                 <li><a href="/">article</a></li>
             </ul>
         </nav>
     </header>
 </article>
 <time datetime="2017-1-4">2017-1-4</time>
 </body>
 </html>

4、article元素

　　（1）定义页面独立内容区域

5、aside元素

　　（1）定义页面侧边栏内容。注意：IE 8 或更早版本的 IE 浏览器不支持 <aside> 标签。

6、address元素

　　（1）定义文档作者或者相拥有者的相关信息。

7、footer元素：

　　（1）作为它的上层父级区域块或者是一个根区域块的注脚，footer一般情况下包括与它相关的区块注脚信息，比如作者，版权信息等。

　（2）footer元素没有限制它的使用次数，可以为section和article元素添加footer元素

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>footer元素</title>
     <style>
         body,p{margin: 0;padding: 0}
         body{font-family: 微软雅黑;text-align: center}
         .footer{margin-bottom: 20px}
         .footer a,.footer p,footer a,footer p{color: gray}
     </style>
 </head>
 <body>
 <!-- HTML5之前的写法如下 -->
 <div class="footer">
     <p>
         <a href="/">联系我们</a>
         <a href="/">加入我们</a>
         <a href="/">站点地图</a>
         <a href="/">版权信息</a>
     </p>
     <p>&copy;huanglanlan版权所有</p>
 </div>
 <!-- HTML5的写法如下 -->
 <footer>
     <p>
         <a href="/">联系我们</a>
         <a href="/">加入我们</a>
         <a href="/">站点地图</a>
         <a href="/">版权信息</a>
     </p>
     <p>&copy;huanglanlan版权所有</p>
 </footer>
 </body>
 </html>

代码效果如下：　　　

二、其他的新增元素

1、figuer元素与figcaption元素

　　（1）figuer元素是一种元素组合，带有可选标题。用来表示页面上一块独立的内容，将它从页面删除不会给页面带来任何影响

　　（2）figcaption元素表示figuer元素的标题，它属于figuer元素，figcaption元素必须书写在figuer元素内部，可以写在其从属元素前面或者后面。一个figuer元素里面最多只允许放置一个figcaption元素

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title></title>
 </head>
 <body>
 <figuer>
     <img src="img/1.jpg" alt="风景"/>
     <img src="img/2.jpg" alt="风景"/>
     <img src="img/3.jpg" alt="风景"/>
     <figcaption>风景</figcaption>
 </figuer>
 </body>
 </html>

2、details元素与summary元素（* 目前只有Chrome浏览器支持）

　　（1）details元素是一种用于标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型的open属性，当该值为TRUE时，该元素内部的子元素应该被展开；当该属性为FALSE时，当页面打开时其内部的子元素应该处于收缩的状态。

　　（2）summary元素从属于details元素，用鼠标点击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或者收缩。如果details元素内没有summary元素，浏览器那你会提供默认的文字以供点击，例如“details”

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title></title>
 </head>
 <body>
 <details>
     <summary>
         我有一个愿望
     </summary>
     <p>我希望某天可以去趟西藏、青海、还有云南</p>
 </details>
 <details>
     <p>我希望某天可以去趟西藏、青海、还有云南</p>
 </details>
 </body>
 </html>

3、mark元素

　　（1）mark元素表示页面中需要突出显示或高亮显示的，对于当前用户具有参考作用的一段文字。通常那个在引用原文是时使用mark元素，目的的引起读者的注意。mark元素是对原文内容具有补充作用的一个元素

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title></title>
 </head>
 <body>
 <h2>我喜欢<mark>大海</mark>，给人一种宽广的感觉</h2>
 <article>
     <p>
         <a href="/">当心情不好的时候，看到大海会不会好点呢，<mark>海浪声那么优美</mark></a>
     </p>
 </article>
 </body>
 </html>

4、progress元素

　　（1）progress元素代表一个任务的完成进度，这个进度是可以不确定的，可以表示进度正在进行，也可以用0到某个最大数字（如100）之间的s数字来表示准确的进度情况（比如百分比）

　　（2）该元素具有两个表示当前任务完成情况的属性，value属性表示已经完成了多少工作量，max属性表示总共有多少工作量，工作量的单位是随意的，不指定的。

　　（3）在设定属性点时，value属性和max属性只能指定为有效浮点数，value属性必须大于0，且小于等于max的属性，max的属性值必须大于0

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title></title>
 </head>
 <body>
 <p>
     当前任务完成进度：
     <progress max="100" value="70">70%</progress>
 </p>
 </body>
 </html>

5、meter元素

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title></title>
 </head>
 <body>
 <!--
 meter元素表示规定范围内的数量值
 1、value属性：在元素中特定表示出来的实际值。该属性默认为0，可以为该属性制定一个浮点小数值
 2、min属性：指定规定范围时允许使用的最小值，默认为0，
 3、max属性：指定规定范围内使用的最大值，如果在设定该属性值小于min的值，那么把min属性的值视为最大值。max属性的默认值为1
 4、low属性：规定范围的下限值，必须小于或者等于high的值。
 5、high属性：规定范围的上限值，如果该属性的值小于low属性值，那么把low属性的值视为high属性的值，如果该属性的值大于max的值，那么max的值视为high值
 6、optimum属性：最佳值属于在min属性与max属性值之间，可以大于high属性值
 注意：
 当 optimum > high 时  颜色为红色
 当 optimum < low 时   颜色为绿色
 当 low < optimum <high 时  颜色为黄色
 -->
 <p>硬盘实际使用情况 <meter value="43.9" max="119" min="0">43.9/119</meter>GB</p>
 <p>硬盘实际使用情况 <meter value="43.9" max="119" min="0" low="50" high="70" optimum="55">43.9/119</meter>GB</p>
 <p>硬盘实际使用情况 <meter value="43.9" max="119" min="0" low="50" high="70" optimum="99">43.9/119</meter>GB</p>
 <p>硬盘实际使用情况 <meter value="43.9" max="119" min="0" low="50" high="70" optimum="10">43.9/119</meter>GB</p>
 </body>
 </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元素，由于只有部分浏览器支持。所以被废除了。

未完待续。。。。。。

HTML5知识点总结的更多相关文章

HTML5 知识点
HTML5 知识点 (1)语义化标记 <header>,<footer>,<nav>,<article>,<section> ...
html5知识点：DOM编程
DOM是Document Object Model的缩写,中文名称是文档对象模型. DOM是处理HTML页面的标准编程接口,DOM可被JavaScript用来读取.改变HTML的内容和结构. 前端三大 ...
Html5知识点
学习资料:http://how2j.cn/p/1036 周期:3天 github:https://github.com/BenCoper/Html5欢迎大家去Star以及Fork 总结:采用的都是ht ...
HTML5知识点汇总（1）
HTML5 1.html5是什么万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.-------h5并不是一门新的语言,而是html语言的第五次修订. 2.h ...
HTML/HTML5 知识点思维导图
1 - 浏览器 | 浏览器页面构成 2 - 浏览器 | 浏览器内核相关知识点 3 - W3C | 对WEB标准以及W3C的理解与认识? 4 - 标签 | Doctype相关知识点 5 - 标签 | m ...
HTML5知识点总结（一）
最近在复习前端的基础知识,在这里做一个总结,这是HTML5篇. 新特性取消了过时的显示效果标记<font></font>和<center></center& ...
Html5知识点以及兼容性
什么的HTNL5? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提供的 ...
HTML5知识点笔记
1.HTML是一种标记语言 2.HTML元素不区分大小写 //可以在xss绕过waf时使用 3.<code></code>为空元素标签 <code/>为自闭合标签 ...
html5知识点补充—footer元素的使用
使用footer元素创建脚注顾名思义,footer元素通常位于页面的底部.尽管footer通常位于某个区域或者页面的底部,但并非总是如此.footer元素旨在包含作者.网站所有者.版权数据.网站规章 ...

随机推荐

tomcat开发远程调试端口以及利用eclipse进行远程调试
一.tomcat开发远程调试端口方法1 WIN系统在catalina.bat里: SET CATALINA_OPTS=-server -Xdebug -Xnoagent -Djava.compi ...
Linux 添加新磁盘，在线扩充空间
CentOS 7开发环境中的home 目录空间满了,需要增加空间到虚拟机上执行"ls /sys/class/scsi_host",然后重新扫描SCSI总线来添加设备.如右图.然后 ...
记录我这一年的技术之路(nodejs纯干货)
2015年12月28日23:19:54 更新koa应用.学习型网站和开发者工具等 coding伊始开始认认真真的学习技术还是2015.10.21日开始的,记得很清楚,那天,是我在龙湖正式学习的第一天 ...
Redis百亿级Key存储方案（转）
1 需求背景该应用场景为DMP缓存存储需求,DMP需要管理非常多的第三方id数据,其中包括各媒体cookie与自身cookie(以下统称supperid)的mapping关系,还包括了supperi ...
History API与浏览器历史堆栈管理
移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现不存在兼容性问题,但是缺点也有--针对不支持o ...
C# 对象实例化用json保存泛型类可以很方便的保存程序设置
参考页面: http://www.yuanjiaocheng.net/webapi/test-webapi.html http://www.yuanjiaocheng.net/webapi/web-a ...
Ajax使用WCF实现小票pos机打印源码
通过ajax跨域方式调用WCF服务,实现小票pos机的打印,源码提供web方式,客户端方式测试,服务驻留右侧底部任务栏,可控制服务开启暂停,用户可自定义小票打印模板,配合零售录入. qq 22945 ...
beans.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
我理解的MVC
前言前一阶段对MVC模式及其衍生模式做了一番比较深入的研究和实践,这篇文章也算是一个阶段性的回顾和总结. 经典MVC模式经典MVC模式中,M是指业务模型,V是指用户界面,C则是控制器,使用MVC的 ...
Android种使用Notification实现通知管理以及自定义通知栏（Notification示例四）
示例一:实现通知栏管理当针对相同类型的事件多次发出通知,作为开发者,应该避免使用全新的通知,这时就应该考虑更新之前通知栏的一些值来达到提醒用户的目的.例如我们手机的短信系统,当不断有新消息传来时,我 ...

HTML5知识点总结

HTML5知识点总结（一）

HTML5知识点总结的更多相关文章

随机推荐

热门专题