HTML5 vs HTML 和 CSS3 vs CSS：全面对比

HTML5 与 HTML

HTML 概述

HTML (HyperText Markup Language) 是构建网页的标准标记语言。HTML 经历了多个版本的发展：

1. HTML 2.0 (1995年)：最早的标准化版本

2. HTML 4.01 (1999年)：增加了样式表支持

3. XHTML (2000年)：基于XML的更严格版本

4. HTML5 (2014年正式发布)：现代网页标准

HTML5 的主要特点

1. 语义化标签：引入了更具描述性的元素

2. 多媒体支持：原生支持音频和视频

3. 图形支持：Canvas 和 SVG

4. 本地存储：localStorage 和 sessionStorage

5. 设备访问：地理位置API、摄像头访问等

6. 更好的表单控制：新的输入类型和属性

HTML5 独有的重要标签和属性

语义化标签

定义文档或节的页眉
定义导航链接
定义文档中的节
定义独立的自包含内容
定义内容之外的内容（如侧边栏）
定义文档或节的页脚
定义文档的主要内容
和
定义图像及其标题

多媒体标签

图形标签

表单增强

新属性

CSS3 与 CSS

CSS 概述

CSS (Cascading Style Sheets) 是用于描述HTML文档样式的语言。CSS 经历了多个版本：

1. CSS1 (1996年)：基础样式功能

2. CSS2 (1998年)：定位、媒体类型等

3. CSS2.1 (2011年)：修正CSS2

4. CSS3 (模块化发布)：引入众多新特性

CSS3 的主要特点

1. 模块化结构：不同功能分成独立模块

2. 圆角边框：border-radius

3. 阴影效果：box-shadow 和 text-shadow

4. 渐变：线性渐变和径向渐变

5. 过渡和动画：transition 和 animation

6. 媒体查询：响应式设计基础

7. 多列布局：column-count

8. 弹性盒子：Flexbox

9. 网格布局：Grid

10. 变换：transform

CSS3 独有的重要属性和功能

选择器增强

/* 属性选择器 */
input[type="text"] { ... }

/* 伪类 */
a:hover { ... }
li:nth-child(odd) { ... }
input:checked { ... }

/* 伪元素 */
p::first-line { ... }
p::before { content: "→"; }

边框和背景

/* 圆角 */
border-radius: 10px;

/* 阴影 */
box-shadow: 5px 5px 5px #888;
text-shadow: 2px 2px 2px #000;

/* 多重背景 */
background: url(img1.png) top left no-repeat, 
            url(img2.png) bottom right no-repeat;

渐变

/* 线性渐变 */
background: linear-gradient(to right, red, yellow);

/* 径向渐变 */
background: radial-gradient(red, yellow, green);

过渡和动画(重点噢噢噢！！！！)

/* 过渡 */
transition: width 2s, height 2s, transform 2s;

/* 动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
animation: example 4s infinite;

变换

transform: rotate(30deg);
transform: scale(1.5);
transform: translate(50px, 100px);
transform: skew(20deg, 10deg);

弹性盒子(Flexbox)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

网格布局(Grid)

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
}

媒体查询

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

HTML2 的标签和属性

HTML2.0 是一个非常基础的版本，只包含最基本的标签：

到
标题
段落
链接

, 
, 
列表
, 
, 
定义列表
预格式化文本
引用
地址
水平线

换行
强调
更强强调
代码
示例输出
键盘输入
变量
引用

HTML2.0 几乎没有样式属性，所有样式都是通过内容的结构来暗示的。

总结对比

HTML5 vs HTML4

特性	HTML5	HTML4
语义化标签	有	无
多媒体支持	原生支持	需要插件
图形支持	Canvas/SVG	有限
本地存储	localStorage	cookie
表单控件	丰富	有限
设备API	多种API	无

CSS3 vs CSS2

特性	CSS3	CSS2
圆角边框	支持	不支持
阴影效果	支持	不支持
渐变	支持	不支持
过渡动画	支持	不支持
媒体查询	支持	不支持
弹性盒子	支持	不支持
网格布局	支持	不支持
变换	支持	不支持