首页 > web前端 > js教程 > HTML5/CSS3相关的知识讲解

HTML5/CSS3相关的知识讲解

jacklove
发布: 2018-05-21 14:53:18
原创
1293 人浏览过

在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

//以前的HTML "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">//HTML5

2、关于meta

//以前HTML//HTML5

3、新的标签
canvas标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API
audio定义音频内容
video定义视频(video 或者 movie)
source定义多媒体资源

元素的标题
footer定义section或document的页脚
header定义了文档的头部区域
mark定义带有记号的文本
meter定义度量衡。仅用于已知最大和最小值的度量
nav导航
progress定义任何类型的任务的进度
ruby定义ruby注释(中文注音或字符)
rt定义字符(中文注音或字符)的解释或发音
rp在 ruby 注释中使用,定义不支持ruby元素的浏览器所显示的内容
section定义文档中的节(section、区段)
time定义日期或时间
wbr规定在文本中的何处适合添加换行符

以往我们会使用

标签了划分页面区块,现在HTML5中新增了
等新元素,页面结构就更清晰了

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

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

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


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

<!--[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一个拖动控件

5662101-2b8deff8a2ceefcd.png

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中文网。

相关推荐:

Javascript操作DOM常用API总结

JavaScript全总结之定时器&DOM的document

详解AJAX工作原理及其优缺点

以上是HTML5/CSS3相关的知识讲解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板