一, html5 简介
HTML 5 的第一份正式草案已于 2008 年 1 月 22 日公布. HTML5 仍处于完善之中. 然而, 大部分现代浏览器已经具备了某些 HTML5 支持.
HTML5 不仅仅是超文本标记语言的新版本, 而是一整套浏览器新 API 的综合:
新的语义标签. 我们知道 HTML 就是超文本标记语言, 负责描述的是文档的语义, 结构. HTML5 中, 提供了非常多的新的标签,<header>,<section>,<footer>,<nav>,<aside>,<article>,<address > 等等. 丰富了表单元素.
新的本地存储. HTML 如果想往客户端存储东西(不是服务器), 只能通过 cookie.HTML5 中提供了一个新的 API, 叫做本地存储, 可以让浏览器轻松的在客户端本地存储数据.
设备兼容特性. HTML5 提供了移动设置的所有兼容的 API 方案, 浏览器获得摄像头, 陀螺仪, 蜂鸣器等等的权利. 对于 PC 浏览器, 还加上了全屏 API 和拖放 API.
连接特性. HTTP 是无连接的, 你的浏览器和服务器之间没有长久链接, HTML5 中提出了 web socket 特性, 可以让浏览器和服务器实时链接! 比如制作联机对战的俄罗斯方块.
新的音频, 视频. 曾几何时, Flash 一统网页中的音视频, 此时 HTML5 提出了新的 video 和 audio 标签. 可以让网页轻松的, 不通过安装任何插件 (比如不用安装 Adobe Flash Player) 网页播放视频, 音频.
新的画布和 svg: 制作网页的 banner, 游戏, 可以不用 Flash 了! 现在有了 Canvas! 我们要用 canvas 制作手机游戏, 比如开心爱消除, Flappy Bird.
性能与集成特性: 比如 XMLHTTPRequest 对象出了 2 代版本, 我们可以获得进度的 API.HTML 现在提供了网页性能的 API, 能够检测 HTTP 请求的拥堵, 序列等等.
新的样式表: CSS3 来了! 炫酷爆了!
HTML5 不是 HTML 的新版本, 而是包含 HTML,CSS,JavaScript, 浏览器的一整套 API!
所以 HTML5 简称为 H5 有道理! 不用刻意强调是 HTML, 因为 HTML 就是一个超文本标记语言, 除了描述语义, 什么都没有! 但是你看见没有 HTML5 干到了 HTTP!
1.1 兼容性如何?
HTML5 的兼容程度到底怎么样了呢?
兼容性测试: http://www.webqianduan.cn/css3test/
Chrome |
Firefox |
IE 11 |
IE9 |
IE8 |
HTML5 的实现, 特别依赖浏览器! 所以现在 PC 端大家都在审慎使用 HTML5, 但是在移动端, HTML5 已经火爆全球!!! 整个微信中充斥 HTML5 小页面! 婚礼请柬, 炫酷页面.
华为 P9,iPhone 中的测试:
量化评分网站: http://html5test.com/ HTML5 一共 555 个新特性, 每个小点算一个, 不分权重.
特性兼容性查询网站 https://caniuse.com/ HTML5 所有特性 (包括 CSS3 新属性, 选择器) 都能够进行查询, 可以精确的告诉你什么浏览器兼容, 什么不兼容.
统计研究院:
- http://tongji.baidu.com/
- http://tongji.baidu.com/data/
二, HTML5 骨架和语法改变
2.1HTML5 新骨架
- <!DOCTYPE HTML>
- →DTD 极大简化 DTD 的书写
- <HTML>
- <head>
- <meta charset="UTF-8" />
- →字符集设置
- <title>
- Document
- </title>
- </head>
- <body>
- </body>
- </HTML>
这个 DTD 是 IE67 不支持, IE8 开始支持.
<!DOCTYPE html> |
IE8 开始支持, 如果为了更大用户兼容, 还要写以前的写法
<meta charset="UTF-8" /> |
2.2HTML5 新的语言规定
1,HTML5 中, 属性的引号可以省略(除了有很多属性的)
<div title = 你好 id=box class="box1 box2"></div> |
2,HTML5 中标签不分大小写
<DiV> 标签不分大小写 & lt;/dIv> |
3,HTML5 中, 自封闭标签可以省略 "/" 关闭符号
<img src=""alt="" > <input type=""name=""> <br> |
4,HTML5 中, type 类型可以不写
<style></style> <link rel="stylesheet" href=""> <script></script> |
XHTML 系列, 在 HTML5 诞生之后就停止维护了, 在 HTML5 中规范都放宽了标准, 但是 IE678 对上面的支持不好.
作为老一代前端工程师, 我们要保持风骨, 在 HTML5 中也要以 XHTML1.0 的规范严格要求自己.
三, HTML5 新增语义化标签
3.1 新布局标签
传统布局风格:
- <div class="header">
- </div>
- <div class="nav">
- </div>
- <div class="main">
- </div>
- <div class="footer">
- </div>
HTML5 推出了新的大纲标签, 都是双标签, 都有 div 的性质, 块级元素, 是容器
- <header>
- </header>
- 头部的语义
- <footer>
- </footer>
- 尾部的意义
- <nav>
- </nav>
- 导航语义
- <main>
- </main>
- 主体内容
- <article>
- </article>
- 文章语义
- <section>
- </section>
- 区域语义, 代替 div
- <aside>
- </aside>
- 侧边语义
- <header class="header">
- <h1 class="logo"></h1>
- <section class="right">
- </section>
- </header>
- <nav>
- <ul>
- <li > 导航</li>
- <li > 导航</li>
- <li > 导航</li>
- <li > 导航</li>
- </ul>
- </nav>
- <section class="content">
- <aside > 侧边栏</aside>
- <main>
- <article>
- <header><h2 > 文章标题</h2></header>
- <section>
- </section>
- </article>
- </main>
- </section>
- <footer>
- <code>
- for(var i = 0;i <100;i++){
- if(i % 2 == 0){
- while(){
- console.log()
- }
- }
- }
- </code>
- <figure > 定义媒介内容的分组, 以及它们的标题.
- <figcaption > 定义 figure 元素的标题.
- <figure>
- <img src="images/1.jpg">
- <figcaption > 这个是我最喜欢的明星, 但是有人了</figcaption>
- </figure>
- <details open="open">
- <summary > 中南海</summary>
- <address > 北京市西城区南长街 81 号</address>
- <img src="img/znh.jpg" alt="">
- </details>
- <dialog open>
- <p > 您好</p>
- <p > 我很好</p>
- </dialog>
- <pre>
- for(var i = 0 ; i <100 ; i ++){
- if(i % 2 == 0){
- while(true){
- }
- }
- }
- </pre>
- <Ruby>
- 定义 Ruby 注释.
- <rt>
- 定义 Ruby 注释的解释.
- <rp>
- 定义若浏览器不支持 Ruby 元素显示的内容(可选)
- <Ruby>
- <menu type="context">
- <menuitem > 西红柿炒番茄</menuitem>
- <menuitem > 土豆炒马铃薯</menuitem>
- <menuitem > 番薯煮地瓜</menuitem>
- </menu>
- <h1>
- 显示度量:
- </h1>
- <p>
- 张三的分数:
- <meter min="0" low="40" high="90" max="100" value="95">
- </meter>
- </p>
- <p>
- 李四的成绩:
- <meter min="0" low="40" high="90" max="100" value="65">
- </meter>
- </p>
- <p>
- 王五的成绩:
- <meter min="0" low="40" high="90" max="100" value="35">
- </meter>
- </p>
- <template>
- <p><%p%></p>
- <span><%sp%></span>
- </template>
- <select>
- <optgroup label="明星">
- <option > 张学友</option>
- <option > 刘德华</option>
- <option > 黎明</option>
- <option > 郭富城</option>
- </optgroup>
- <optgroup label="汽车">
- <option > 奥拓</option>
- <option > 比亚迪</option>
- <option > 众泰</option>
- </optgroup>
- </select>
- <form action="http://www.baidu.com" autocomplete="on">
- <p><input type="text" name="user1"></p>
- <p><input type="text" name="user2"></p>
- <p><input type="email" autocomplete="off"></p>
- <input type="submit">
- </form>
- <form action="" id="user_form">
- </form>
- <input type="text" name="name" form="user_form" />
- <input type="url" list="url_list" />
- <datalist id="url_list">
- <option label="W3School" value="http://www.W3School.com.cn" />
- <option label="Google" value="http://www.google.com" />
- <option label="Microsoft" value="http://www.microsoft.com" />
- </datalist>
- 输入内容: <input type="text" list="cur" />
- <datalist id="cur">
- <option value="奥迪汽车">奥迪</option>
- <option value="奥利奥饼干">奥利奥</option>
- <option value="迪奥汽车">迪奥</option>
- <option value="宝马汽车">宝马</option>
- <option value="悍马汽车">悍马</option>
- <option value="宝宝汽车">宝宝</option>
- <option value="众泰汽车">众泰</option>
- <option value="大众汽车">大众</option>
- </datalist>
- <audio controls>
- <source src="music/yinyue.mp3">
- <source src="music/yinyue.ogg">
- <a href="http://www.baidu.com">您的浏览器太旧了, 请升级!</a>
- </audio>
- <video controls>
- <source src="video/movie.mp4" type="video/mp4">
- <source src="video/movie.ogg" type="video/ogg">
- <a href="http://www.baidu.com">您的浏览器太旧了, 请升级!</a>
- </video>
- btn[0].onclick = function(){
- // 要存储的数据
- var data = {"a":100,"b":200,"c":300,"d":[1,2,3,4]}
- // 存储之前, 把数据转为字符串
- var dataStr = JSON.stringify(data);
- // 存储数据
- localStorage.setItem('iqianduan.cn',dataStr);
- // 读取
- var str = localStorage.getItem('iqianduan.cn');
- // 转为 JSON 对象
- var dataObj = JSON.parse(str);
- console.log(dataObj.a)
- }
- btn[0].onclick = function(){
- // 要存储的数据
- var data = {"a":100,"b":200,"c":300,"d":[1,2,3,4]}
- // 存储之前, 把数据转为字符串
- var dataStr = JSON.stringify(data);
- // 存储数据
- localStorage.setItem('iqianduan.cn',dataStr);
- // 读取
- var str = localStorage.getItem('iqianduan.cn');
- // 转为 JSON 对象
- var dataObj = JSON.parse(str);
- // 改变数据
- dataObj.c = 999;
- dataObj.e = 888;
- console.log(dataObj)
- // 修改, 再存储新的值
- var dataStr = JSON.stringify(dataObj);
- localStorage.setItem('iqianduan.cn',dataStr);
- }
来源: https://www.cnblogs.com/rope/p/10658526.html