社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 web前端 js教程 HTML5／CSS3相关的知识讲解

HTML5／CSS3相关的知识讲解

jacklove
jacklove
May 21, 2018 pm 02:53 PM
css css3 html5

在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中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
3 周前 By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前 By DDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前 By DDD
刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制
1 个月前 By DDD
<🎜>：死铁路 - 如何完成所有挑战
3 周前 By DDD
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7634
15
CakePHP 教程
1390
52
steam的账户名称是什么格式
90
11
win11激活密钥永久
71
19
NYT连接提示和答案
32
147
显示更多
Related knowledge
vue中怎么用bootstrap vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

HTML，CSS和JavaScript的角色：核心职责 HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

bootstrap怎么写分割线 bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用 标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

了解HTML，CSS和JavaScript：初学者指南 了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

H5指的是什么？探索上下文 H5指的是什么？探索上下文 Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

bootstrap按钮怎么用 bootstrap按钮怎么用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

bootstrap怎么调整大小 bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

bootstrap怎么设置框架 bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

See all articles