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 |
|---|---|---|
| 圆角边框 | 支持 | 不支持 |
| 阴影效果 | 支持 | 不支持 |
| 渐变 | 支持 | 不支持 |
| 过渡动画 | 支持 | 不支持 |
| 媒体查询 | 支持 | 不支持 |
| 弹性盒子 | 支持 | 不支持 |
| 网格布局 | 支持 | 不支持 |
| 变换 | 支持 | 不支持 |