首页 > 文章 > web前端 > HTML5／CSS3相关的知识讲解

HTML5／CSS3相关的知识讲解

jacklove原创: 2018-05-21 14:53:181249浏览

在html和css学习中遇到一些常见的知识点，本篇将会对其进行详解。

HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签？

HTML5是HTML第五次重大修改，废弃了许多沉冗的标签，同时也新增了许多新的标签，使HTML更加语义化，交互功能更加丰富。
在HTML5中，拥有许多新的特性：
1、更多语义化标签，赋予网页更好的意义和结构；
2、支持本地存储。网页APP拥有更短的启动时间，更快的联网速度
3、设备兼容。外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头进行交互
4、链接更快。实现了Server-Sent Event和WebSockets，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现
5、audio和video标签的引用，可以在页面上嵌入多媒体内容
6、基于svg，canvas的三维、图形及特效特性

下面就是一些新增的标签和改变
1、关于DOCTYPE

//以前的HTMLf813f7193f868ef4bc678facce8ab50c//HTML50772a90437cbe396124ca9876f4aee70

2、关于meta

//以前HTML9317ed868ece2cd4e4dc85851b15638c//HTML5ff94e7be1619a095952b0217c283b66c

3、新的标签
canvas标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
audio定义音频内容
video定义视频（video 或者 movie）
source定义多媒体资源 39000f942b2545a5315c57fa3276f220 和b97864c2e0ef2353a16c4d64c7734e92
embed定义嵌入的内容，比如插件
track为诸如 39000f942b2545a5315c57fa3276f220 和 b97864c2e0ef2353a16c4d64c7734e92 元素之类的媒介规定外部文本轨道
datalist定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值
keygen规定用于表单的密钥对生成器字段
output定义不同类型的输出，比如脚本的输出
article定义页面正文内容
aside定义页面内容之外的内容
bdi设置一段文本，使其脱离其父元素的文本方向设置
command定义命令按钮，比如单选按钮、复选框或按钮
details用于描述文档或文档某个部分的细节
dialog定义对话框，比如提示框
summary标签包含details元素的标题
figure规定独立的流内容（图像、图表、照片、代码等等）
figcaption定义24203f2f45e6606542ba09fd2181843a元素的标题
footer定义section或document的页脚
header定义了文档的头部区域
mark定义带有记号的文本
meter定义度量衡。仅用于已知最大和最小值的度量
nav导航
progress定义任何类型的任务的进度
ruby定义ruby注释（中文注音或字符）
rt定义字符（中文注音或字符）的解释或发音
rp在 ruby 注释中使用，定义不支持ruby元素的浏览器所显示的内容
section定义文档中的节（section、区段）
time定义日期或时间
wbr规定在文本中的何处适合添加换行符

以往我们会使用dc6dce4a544fdca2df29d5ac0ea9906b标签了划分页面区块，现在HTML5中新增了c37f8231a37e88427e62669260f0074d、1aa9e5d373740b65a0cc8f0a02150c53等新元素，页面结构就更清晰了

如何让低版本的IE也支持HTML5新元素
方法1
在93f0f5c25f18dab9d176bd4f6de5d30e中加入JavaScript

<head>
     <script type="text/javascript">
          document.createElement(&#39;header&#39;)          document.createElement(&#39;footer&#39;)     </script></head>

这样就可以在IE中使用添加的标签

1aa9e5d373740b65a0cc8f0a02150c53ab946e7546ab66a280dd9c9f9310ecd5c37f8231a37e88427e62669260f0074d84122da5b51c58ef54d7045814144010

方法2
使用html5shiv.js
在93f0f5c25f18dab9d176bd4f6de5d30e中加入

<!--[if lt IE 9]>
<script type="text/javascript"  src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->

如果浏览器版本低于IE9，这段script就会被解析

input有哪些新增类型？

emali输入邮箱，不符合邮箱格式无法提交，且会弹出提示
url输入url，不符合url格式无法提交，且会弹出提示
number只能输入数字
range一个拖动控件

range

Date日期选择控件

浏览器本地存储中Cookie和localStorage有什么区别？localStorage如何存储删除数据？

什么是Cookie
Cookie指某些网站为了辨别用户身份而储存在用户本地终端（Client Side）上的数据
Cookie总是保存在客户端中，按在客户端中的存储位置，可分为内存Cookie和硬盘Cookie。
内存Cookie由浏览器维护，保存在内存中，浏览器关闭后就消失了，其存在时间是短暂的。硬盘Cookie保存在硬盘里，有一个过期时间，除非用户手工清理或到了过期时间，硬盘Cookie不会被删除，其存在时间是长期的。所以，按存在时间，可分为非持久Cookie和持久Cookie
以登陆为例
1、客户端发送用户名和密码到服务端
2、服务端验证成功，把用户的认证状态与SessionID绑定记录在服务器端
3、向客户端响应时，会在响应头部字段Set-Cookie内写入SessionID
4、客户端收到响应，把SessionID作为一个Cookie保存下来，从这以后，客户端发送的请求都会在请求头带上这一个Cookie
什么是localStorage
localStorage是本地持久储存客户端数据的API
同一个域名的网站共享同一个localStorage对象，不同域名的localStorage不能相互访问（cookie也是一样的）
每一个域名的储存空间是有限的，至少为5MB （cookie大约只有4kb）
localStorage使用键值对的方式储存数据,键值都必须为字符串（cookie也一样）
cookie和localStorage有什么区别？
1、服务器发送请求时会带上cookie
2、cookie有存储期限，到期了会自动失效，而localStorage则不会，除非手动删除
3、cookie大小限制大约为4KB，localStorage大约为5MB

本篇对tml和css进行相关的讲解，更多相关内容请关注php中文网。

HTML5／CSS3相关的知识讲解

相关文章