HTML5和CSS3的核心新增特性及其语法

HTML5 新增特性与语法

1. 语义化标签

语义化标签使网页结构更清晰，有助于SEO和无障碍访问。

标签	语法示例	说明与上下文
`header`	`<header><h1>网站标题</h1></header>`	定义文档或章节的页眉，通常包含介绍性内容。
`nav`	`<nav><a href="/home">首页</a></nav>`	定义导航链接的集合。
`article`	`<article><h2>文章标题</h2><p>内容...</p></article>`	定义独立、可自力更生的内容块，如博客文章、新闻故事。
`section`	`<section><h2>章节标题</h2><p>章节内容...</p></section>`	定义文档中的一个通用章节。
`aside`	`<aside><h3>相关链接</h3></aside>`	定义与主内容间接相关的内容，如侧边栏、引用。
`footer`	`<footer><p>© 2025 公司名称</p></footer>`	定义文档或章节的页脚，通常包含版权、作者信息。
`main`	`<main>...</main>`	定义文档的主要内容，一个页面应只有一个 `main`标签。

注意：这些语义化标签在默认情况下是块级元素，但在IE9等旧版本浏览器中可能需要设置 display: block;。

2. 多媒体标签

HTML5原生支持音频和视频播放，无需插件。

视频 <video>标签语法：

复制代码

<video src="movie.mp4" controls autoplay muted loop width="600" poster="image.jpg">
  您的浏览器不支持 video 标签。
</video>

src: 视频文件的路径。
controls: 显示播放控件（如播放/暂停按钮）。
autoplay : 视频就绪后自动播放（注意：许多浏览器要求与 muted一起使用）。
muted: 静音播放。
loop: 循环播放。
poster: 指定视频播放前显示的封面图像。

音频 <audio>标签语法：

<audio>标签的属性与 <video>类似，常用 src, controls, autoplay, loop。

3. 表单增强

HTML5新增了多种输入类型和属性，提升了表单的功能和用户体验。

新增输入类型 type：

复制代码

<label>邮箱: <input type="email" name="user_email"></label>
<label>网址: <input type="url" name="user_url"></label>
<label>日期: <input type="date" name="user_date"></label>
<label>数字: <input type="number" name="user_number" min="1" max="10"></label>
<label>搜索: <input type="search" name="user_search"></label>
<label>颜色: <input type="color" name="user_color"></label>

这些类型在支持的设备上会调出相应的键盘或选择器。

新增表单属性：

复制代码

<input type="text" required placeholder="请输入姓名" autofocus autocomplete="off">

required: 规定字段为必填项。
placeholder: 提供输入提示。
autofocus: 页面加载时自动聚焦到该输入框。
autocomplete : 设置浏览器是否应自动填充该字段（on或 off）。

CSS3 新增特性与语法

1. 新增选择器

CSS3提供了更强大、更精确的元素选择方式。

属性选择器：

复制代码

/* 选择具有 title 属性的元素 */
a[title] { color: purple; }

/* 选择 type 属性值为 "email" 的 input 元素 */
input[type="email"] { border-color: blue; }

/* 选择 href 属性值以 "https" 开头的 a 元素 */
a[href^="https"] { font-weight: bold; }

/* 选择 src 属性值包含 "logo" 的 img 元素 */
img[src*="logo"] { opacity: 0.8; }

/* 选择 href 属性值以 ".pdf" 结尾的 a 元素 */
a[href$=".pdf"]::after { content: " (PDF)"; }

属性选择器的权重为 10 。

结构伪类选择器：

复制代码

/* 选择父元素下的第一个子元素 */
li:first-child { font-weight: bold; }

/* 选择父元素下的最后一个子元素 */
li:last-child { border-bottom: none; }

/* 选择父元素下的第 n 个子元素 */
/* 关键字：even(偶数), odd(奇数) */
tr:nth-child(even) { background-color: #f2f2f2; }

/* 公式：n 从 0 开始计算 */
/* 选择前 5 个元素 */
li:nth-child(-n+5) { color: red; }

/* 选择父元素下同类型中的第 n 个 */
p:nth-of-type(2) { font-size: 1.2em; }

nth-child与 nth-of-type的区别 ：nth-child不考虑元素类型，直接按所有子元素排序；nth-of-type只针对特定类型的子元素进行排序。

伪元素选择器：

复制代码

p::before {
  content: "前缀: "; /* content 属性必须存在 */
  font-weight: bold;
  color: green;
}
p::after {
  content: " (后缀)";
  font-size: 0.8em;
  color: gray;
}

伪元素选择器用于在元素内容的前面或后面插入内容，权重为 1。它们默认是行内元素，必须设置 content属性。

2. 视觉效果与盒子模型

盒子模型 (box-sizing)：

复制代码

div {
  box-sizing: border-box; /* 宽度和高度包含 padding 和 border */
  width: 300px;
  padding: 20px;
  border: 5px solid black; /* 总宽度仍是 300px */
}

content-box（默认）：width和 height只包括内容区域。
border-box：width和 height包括内容、内边距和边框。这在布局时更直观。

圆角、阴影与渐变：

复制代码

.button {
  border-radius: 10px; /* 圆角 */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* 盒子阴影: X偏移 Y偏移 模糊半径 颜色 */
  text-shadow: 2px 2px 4px #999; /* 文字阴影 */
  background: linear-gradient(to bottom, #ff7e5f, #feb47b); /* 线性渐变 */
}

3. 过渡与变换

过渡 (transition)：

复制代码

.box {
  transition: all 0.5s ease-in-out 0.1s;
  /* 属性 持续时间 速度曲线 延迟时间 */
}
.box:hover {
  transform: scale(1.1);
  background-color: lightblue;
}

属性：指定要过渡的CSS属性，如 width, background-color，或使用 all表示所有可过渡属性。
持续时间 ：过渡效果持续的时间，如 1s或 500ms。
速度曲线 ：定义过渡的速度变化，如 ease（默认，慢快慢）、linear（匀速）、ease-in（加速）、ease-out（减速）。
延迟时间：过渡效果开始前的等待时间。

变换 (transform)：

复制代码

.element {
  transform: translate(50px, 100px) rotate(45deg) scale(1.5);
  /* 平移(水平, 垂直) 旋转(度数) 缩放(倍数) */
  transform-origin: left top; /* 设置变换的原点 */
}

translate(x, y)：移动元素，百分比单位是相对于自身尺寸的。
rotate(angle)：旋转元素。
scale(x, y)：缩放元素。
skew(x-angle, y-angle)：倾斜元素。

4. 动画 (`animation`) 与 `@keyframes`

CSS3动画可以创建更复杂的多阶段动画。

定义动画：

复制代码

@keyframes example {
  0%   { background-color: red; transform: translateX(0); }
  50%  { background-color: yellow; }
  100% { background-color: green; transform: translateX(200px); }
}

使用动画：

复制代码

.animated-box {
  animation-name: example; /* 动画名称 */
  animation-duration: 3s; /* 动画持续时间 */
  animation-timing-function: ease-in-out; /* 速度曲线 */
  animation-delay: 0.5s; /* 延迟时间 */
  animation-iteration-count: infinite; /* 播放次数: 数值 或 infinite(无限) */
  animation-direction: alternate; /* 播放方向: normal(默认), alternate(交替反向) */
  animation-fill-mode: both; /* 动画外样式: forwards(保持结束状态), backwards(应用开始帧), both */
}

/* 简写形式 */
.animated-box {
  animation: example 3s ease-in-out 0.5s infinite alternate both;
}

animation简写属性的顺序为：name duration timing-function delay iteration-count direction fill-mode。

工具推荐

CodePen：前端开发者的创意游乐场与学习宝库

一、CodePen是什么？

CodePen是一个面向前端开发者的在线代码编辑器，被广泛誉为"前端代码沙盒"和"创意游乐场"。自2012年由Alex Vazquez等三位开发者创建以来，它已成为全球前端开发者必备的工具之一。

这个平台允许你在浏览器中直接编写HTML、CSS和JavaScript代码，并实时查看渲染结果，无需配置本地开发环境或不断刷新页面。它支持多种预处理器和主流框架，让前端开发变得简单而高效。

二、CodePen的核心功能

1. 实时预览与编辑

CodePen采用所见即所得的编辑模式，左侧代码的每一次修改都会立即在右侧预览区域显示效果。这一功能让调试和优化变得直观而高效，大大提升了开发体验。

2. 多语言与预处理器支持

CodePen不仅支持基础的HTML、CSS和JavaScript，还内置了对多种预处理器的支持：

HTML：支持Pug、Haml、Markdown等
CSS：支持Sass、Less、Stylus等
JavaScript：支持Babel、TypeScript、CoffeeScript等

3. 外部资源便捷引入

只需在专用输入框中输入库名，CodePen就会自动从cdnjs上寻找匹配的CSS或JS库。无论是jQuery、React、Vue还是其他流行框架，都能快速添加到你的项目中。

4. "Pen"项目系统

在CodePen中，每个独立项目被称为一个"Pen"。你可以保存、分类和分享自己的Pens，也可以Fork他人的作品进行二次创作。免费用户最多可创建三个模板，方便快速启动新项目。

HTML5和CSS3的核心新增特性及其语法

HTML5 新增特性与语法

1. 语义化标签

2. 多媒体标签

3. 表单增强

CSS3 新增特性与语法

1. 新增选择器

2. 视觉效果与盒子模型

3. 过渡与变换

4. 动画 (animation) 与 @keyframes

工具推荐

CodePen：前端开发者的创意游乐场与学习宝库

4. 动画 (`animation`) 与 `@keyframes`