HTML5与HTML的区别,CSS3与CSS的区别

144 阅读2分钟

因为平时都在用所以分不清,面试官问了之后感觉没答好找资料记录一下

# html
头部的doctype,我们只要写<!doctype html>就可以了。

HTML5的文档解析不再基于SGML(Standard Generalized Markup Language)标准,而是形成了自己的一套标准。

html5新增了<canvas>标签,<canvas>标签来代替flash,很多时候,如果我们在网页中放入很多的flash,是很不友好的,现在只要使用<canvas>标签就可以产生交互,并且可以实现很多flash的功能。

html5新增了很多标签,例如<header>和<footer>标签,有利于网页中的结构,<menu>和<figure>标签可以创建传统的菜单,<audio>和<video>标签用来播放音频。

<header>、<footer>、<section>、<article>、<nav>、<hgroup>、<aside>、<figure>

html5同时也删除了b标签和font标签,如果想要效果的话,可以使用css带代替这两个标签。

<big>、<u>、<font>、<basefont>、<center>、<s>、<tt>

增加了一些表单属性, 主要是其中的input属性的增强

<!-- 此类型要求输入格式正确的email地址 -->

<input type=email >

<!-- 要求输入格式正确的URL地址  -->

<input type=url >

<!-- 要求输入格式数字,默认会有上下两个按钮 -->

<input type=number >

<!-- 时间系列,但目前只有 Opera和Chrome支持 -->

<input type=date >

<input type=time >

<input type=datetime >

<input type=datetime-local >

<input type=month >

<input type=week >

<!-- 默认占位文字 -->

<input type=text placeholder="your message" >

<!-- 默认聚焦属性 -->

<input type=text autofacus="true” >

其他标签新增了一些属性,

<!-- meta标签增加charset属性 -->

<meta charset="utf-8">

<!-- script标签增加async属性 -->

<script async></script>

使部分属性名默认具有boolean属性

<!-- 只写属性名默认为true -->

<input type="checkbox"  checked/>

<!-- 属性名="属性名"也为true -->

<input type="checkbox"  checked="checked”/>

### 存储方面

新增WebStorage, 包括localStorage和sessionStorage    

1.  新增WebStorage, 包括localStorage和sessionStorage
2.  引入了IndexedDB和Web SQL,允许在浏览器端创建数据库表并存储数据, 两者的区别在于IndexedDB更像是一个NoSQL数据库,而WebSQL更像是关系型数据库。W3C已经不再支持WebSQL。
3.  引入了应用程序缓存器(application cache),可对web进行缓存,在没有网络的情况下使用,通过创建cache manifest文件,创建应用缓存,为PWA(Progressive Web App)提供了底层的技术支持。



# css
区别:1、CSS3是指CSS层叠样式表技术的升级版本;而CSS是指一种用来表现HTML或XML等文件样式的计算机语言。2、CSS3比CSS多了很多新特征,例如圆角效果、图形化边界、块阴影与文字阴影等等。
CSS3:主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
CSS3:新特征有很多,例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等。

box-shadow(阴影效果)

border-colors(为边框设置多种颜色)

boder-image(图片边框)

text-shadow(文本阴影)

text-overflow(文本截断)

border-radius(圆角边框)

opacity(不透明度)

box-sizing(控制盒模型的组成模式):指定两个boxes接壤

resize(元素缩放):指定一个div元素,允许用户调整大小

outline(外边框)

background-origin(指定背景图片从哪里开始显示)

background-clip(指定背景图片从什么位置开始裁切)

background(为一个元素指定多个背景)