当前位置：首页 > news >正文

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

news 2025/7/10 18:10:37

HTML5 与 HTML

HTML 概述

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

HTML 2.0 (1995年)：最早的标准化版本
HTML 4.01 (1999年)：增加了样式表支持
XHTML (2000年)：基于XML的更严格版本
HTML5 (2014年正式发布)：现代网页标准

HTML5 的主要特点

语义化标签：引入了更具描述性的元素
多媒体支持：原生支持音频和视频
图形支持：Canvas 和 SVG
本地存储：localStorage 和 sessionStorage
设备访问：地理位置API、摄像头访问等
更好的表单控制：新的输入类型和属性

HTML5 独有的重要标签和属性

语义化标签

<header>定义文档或节的页眉</header>
<nav>定义导航链接</nav>
<section>定义文档中的节</section>
<article>定义独立的自包含内容</article>
<aside>定义内容之外的内容（如侧边栏）</aside>
<footer>定义文档或节的页脚</footer>
<main>定义文档的主要内容</main>
<figure>和<figcaption>定义图像及其标题</figure>

多媒体标签

<video src="movie.mp4" controls></video>
<audio src="music.mp3" controls></audio>

图形标签

<canvas id="myCanvas" width="200" height="100"></canvas>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" fill="yellow" />
</svg>

表单增强

<input type="email" name="user_email">
<input type="url" name="user_url">
<input type="number" name="quantity" min="1" max="10">
<input type="range" name="points" min="0" max="10">
<input type="date" name="bday">
<input type="color" name="favcolor">
<input type="search" name="googlesearch">
<input type="tel" name="usrtel">

新属性

<input placeholder="请输入内容">
<input required>
<input autofocus>
<input pattern="[A-Za-z]{3}">
<video controls autoplay loop muted>
<div contenteditable="true">可编辑内容</div>

CSS3 与 CSS

CSS 概述

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

CSS1 (1996年)：基础样式功能
CSS2 (1998年)：定位、媒体类型等
CSS2.1 (2011年)：修正CSS2
CSS3 (模块化发布)：引入众多新特性

CSS3 的主要特点

模块化结构：不同功能分成独立模块
圆角边框：border-radius
阴影效果：box-shadow 和 text-shadow
渐变：线性渐变和径向渐变
过渡和动画：transition 和 animation
媒体查询：响应式设计基础
多列布局：column-count
弹性盒子：Flexbox
网格布局：Grid
变换：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 是一个非常基础的版本，只包含最基本的标签：

<html>
<head>
<title>文档标题</title>
</head>
<body>
<h1>到<h6>标题</h1>
<p>段落</p>
<a href="url">链接</a>
<img src="image.gif" alt="图片">
<ul>, <ol>, <li>列表
<dl>, <dt>, <dd>定义列表
<pre>预格式化文本</pre>
<blockquote>引用</blockquote>
<address>地址</address>
<hr>水平线
<br>换行
<em>强调</em>
<strong>更强强调</strong>
<code>代码</code>
<samp>示例输出</samp>
<kbd>键盘输入</kbd>
<var>变量</var>
<cite>引用</cite>

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

总结对比

HTML5 vs HTML4

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

CSS3 vs CSS2

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