视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
HTML5/CSS3相关的知识讲解
2020-11-27 19:48:21 责编:小采
文档
 在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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">//HTML5<!DOCTYPE htm>

2、关于meta

//以前HTML<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />//HTML5<meta charset="utf-8">

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

以往我们会使用<div>标签了划分页面区块,现在HTML5中新增了<footer>、<header>等新元素,页面结构就更清晰了

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

<head>
 <script type="text/javascript">
 document.createElement('header') document.createElement('footer') </script></head>

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

<header></header><footer></footer>

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

<!--[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进行相关的讲解,更多相关内容请关注Gxl网。

下载本文
显示全文
专题