HTML、CSS基础大总结（一）
HTML、CSS教程的其他链接：
什么是HTML
HTML（超文本标记语言）是一种用于创建网页的标记语言。它使用标签来描述网页的结构和内容，并使用浏览器来呈现这些网页。
HTML文档由若干个HTML元素组成，每个元素都有一个开始标签和一个结束标签。HTML元素还可以包含属性，它们是用于描述HTML元素的特性。它是一种动态的语言，允许使用JavaScript在网页上执行各种操作。这使得HTML非常适合用于创建动态的网站和应用程序。它还可以使用样式表（通常是CSS）来设置样式，如字体、颜色和布局。这使得HTML非常适合用于创建美观的网页。
超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
第一个HTML
新建一个文件，命名为firstHTML.html，并添加如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>保存后，双击该文件，即可在浏览器中显示代码的结果
HTML中的名词解释
HTML标签：用于描述 HTML 文档中的内容的标识符，并且通常成对出现，表示开始标签和结束标签（加斜杆为结束）。例如：<h2></h2>
HTML属性：用于描述 HTML 元素的特定特性的标识符，HTML属性通常被包含在标签内部，并使用等于号（=）来分隔属性名称和值。例如：<img src="image.jpg">，src="image.jpg"为html属性
HTML注释
HTML 注释是用于插入 HTML 文档中的注释文本的语法。HTML 注释不会被浏览器显示，只是为了方便开发人员阅读和理解 HTML 代码。
其语法如下：
<!-- 注释文本 -->HTML基础标签
首先是最基础的标签：
标签 | 作用 | 例子 |
|---|---|---|
| HTML文档根元素 |
|
| HTML文档头部，包含文档的元数据，例如标题、关键字和样式表 |
|
| HTML文档主体，包含文档的内容。 |
|
| HTML文档标题，通常显示在浏览器的标签栏中。 |
|
以下是HTML文档中常用的标签：
标签 | 作用 | 例子 |
|---|---|---|
| 标题 |
|
| 段落 |
|
| 换行 |
|
| 分割线 |
|
| 链接 |
|
| 图像，src为图像位置，alt为描述文本 |
|
| 表格， |
|
| 无序列表， |
|
| 有序列表， |
|
| 自定义列表，自定义列表项以 |
|
| 块元素，可用于组合其他 HTML 元素的容器。 |
|
| 内联元素，可用作文本的容器。 |
|
表单
HTML 表单是用于收集用户输入的 HTML 元素。HTML 表单可用于收集用户注册信息、搜索查询、购物车等信息。
HTML 表单的基本语法如下：
<form action="URL" method="post/get">
<!-- 表单控件 -->
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="submit" value="Submit">
</form>其中标签如下：
<form>标签是表单的根元素，action属性会对接收到的用户输入数据进行相关的处理，method用于定义表单数据的提交方式，可以是以下值：post、get。action属性指定表单数据发送到哪里method属性指定表单数据如何发送<input>标签是表单控件的基本元素，它有许多不同的类型，例如文本框、密码框、按钮等。输入类型是由type属性定义。其中type字段值如下：文本域：值为
text，当用户要在表单中键入字母、数字等内容时，就会用到文本域。密码框：值为
password单选按钮：值为
radio复选框：值为
checkbox提交按钮：值为
submit，当用户单击确认按钮时，表单的内容会被传送到服务器。它会根据action中的url定义到服务器，并根据method执行请求。颜色：值为
color日期：值为
date日期（UTC 时间）：值为
datetime日期（无时区）：值为
datetime-localemail：值为
email月份：值为
month数值：值为
number
其中的属性为：
autocomplete：当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。autocomplete 适用于
<form>标签，以及以下类型的<input>标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
<form action="demo-form.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>novalidate：规定在提交表单时不应该验证的form 或 input 域。
<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>autofocus：在页面加载时，域自动地获得焦点。
First name:<input type="text" name="fname" autofocus>placeholder：提供一种提示（hint），描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。
<input type="text" name="fname" placeholder="First name">required：规定必须在提交之前填写输入域（不能为空）。
Username: <input type="text" name="usrname" required>pattern：设置正则表达式用于验证
<input>元素的值。
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">list：规定输入域的 datalist。datalist 是输入域的选项列表。
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>在html5中，表单新增了几个表单元素
<datalist>：规定输入域的选项列表。
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist><keygen>：提供一种验证用户的可靠方法。用于表单的密钥对生成器字段。
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form><output>：用于不同类型的输出，比如计算或脚本输出。
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>iframe框架
iframe（Inline Frame）是 HTML 中的一种元素，用于在网页中嵌入另一个 HTML 文档。iframe 可以用于在网页中显示外部内容，例如视频、地图、插件等。
iframe 的基本语法如下：
<iframe src="URL"></iframe>其中，src 属性指定要嵌入的 HTML 文档的 URL。例如，可以使用以下代码在网页中嵌入 YouTube 视频：
<iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>iframe 可以使用许多不同的属性来控制其行为和外观，例如宽度、高度、边框等，它是一种比较灵活的技术，可用于在网页中嵌入各种内容。
CSS样式
在html中可以嵌套css样式，CSS 可以通过以下方式添加到HTML中：
内联样式
内部样式表
外部引用
内联样式：在HTML元素中使用"style"属性
<div style="color: red; font-size: 20px;">This is a div element</div>内部样式表：使用 <style> 标签在 HTML 文档的 <head> 元素内添加 CSS 样式。
<head>
<style>
div {
color: red;
font-size: 20px;
}
</style>
</head>外部引用（推荐）：使用 <link> 标签在 HTML 文档的 <head> 元素内引用一个外部的 CSS 文件。
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>使用内联样式（使用 style 属性添加 CSS 样式）不利于维护和管理 CSS 代码，而且会使 HTML 代码变得臃肿，推荐使用 <style> 标签或 <link> 标签将 CSS 添加到 HTML 文档中。
JavaScript脚本
在html中可以嵌套JavaScript脚本，JavaScript可以通过以下方式添加到HTML中：
内联脚本
内部脚本
外部引用
内联脚本：使用 script 元素的 type 属性和 script 标签的 text 属性在 HTML 元素内部添加 JavaScript 代码。
<button onclick="alert('Hello World!')">Click me</button>内部脚本：使用 script 元素的 type 属性和 script 标签的 text 属性在 HTML 文档的 <head> 或 <body> 元素内添加 JavaScript 代码。
<script type="text/javascript">
alert('Hello World!');
</script>外部引用（推荐）：使用 script 元素的 type 属性和 script 标签的 src 属性在 HTML 文档的 <head> 或 <body> 元素内引用一个外部的 JavaScript 文件。
<script type="text/javascript" src="script.js"></script>外部脚本是推荐使用的方式，因为它可以把 JavaScript 代码放到单独的文件中，方便维护和管理。用户可以在多个 HTML 文档中使用同一个 JavaScript 文件，这样就可以轻松地统一网站的交互效果。
HTML5
HTML5 是一种最新的 HTML 标准，在设计、功能和性能方面有很大的提升。HTML5 中包含了许多新的元素和功能，例如视频播放、地图嵌入、离线存储等。HTML5 还支持跨平台的移动应用开发，使用 HTML5 可以创建跨平台的移动应用。
HTML5 的语法基本与 HTML4 相同，但是增加了许多新的元素和属性。HTML5 的元素分为两类：块级元素和内联元素。块级元素会独占一行，而内联元素则会和其他元素在同一行显示。
HTML5通常联合javascript使用，如果使用HTML5则需要学会javascript。HTML5 已经成为目前流行的 HTML 标准，被广泛使用。以下是HTML5中的一些新元素：
<article>元素：表示独立的、完整的内容，例如新闻文章、博客帖子或评论。<aside>元素：表示与页面主内容无关的辅助内容，例如侧边栏或广告。<audio>元素：用于在Web页面中播放音频文件。<canvas>元素：用于在Web页面中绘制图形和图像。<header>和<footer>元素：分别表示页面的顶部和底部。<nav>元素：表示导航链接的容器。<section>元素：表示文档或应用程序的一个部分，例如章节、页眉或页脚。<video>元素：用于在Web页面中播放视频文件。
以下是HTML5中的一些新属性：
autofocus属性：自动聚焦到表单字段。contenteditable属性：允许用户编辑元素内容。draggable属性：允许用户拖动元素。
下面开始介绍新元素和新属性
canvas
canvas可以在浏览器中通过JavaScript绘制2D图形。它允许开发人员创建动态图形，并可以使用JavaScript控制这些图形。所以在使用canvas时，需要先学会javascript。
要使用Canvas，首先需要在HTML文档中添加一个<canvas>元素。例如：
<canvas id="myCanvas" width="200" height="100"></canvas>然后使用JavaScript在Canvas元素上绘制图形。例如，以下代码将绘制一个红色的矩形：
// 获取Canvas元素
var canvas = document.getElementById("myCanvas");
// 获取Canvas的绘图上下文
var ctx = canvas.getContext("2d");
// 设置填充颜色
ctx.fillStyle = "red";
// 绘制矩形
ctx.fillRect(10, 10, 50, 50);改代码首先获取了Canvas元素，然后获取了Canvas的绘图上下文（通常称为"ctx"）。然后使用fillStyle属性设置填充颜色，并使用fillRect()方法绘制矩形。
拖放（Drag 和 Drop）
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，它允许用户使用鼠标或触摸屏在浏览器中拖动元素。这可以用于创建可视化界面，如拖放文件或排序列表项。
要使用HTML5拖放，首先需要添加拖动元素，并把draggable属性设置为 true。例如，以下代码创建了一个可拖动的图像：
<img src="image.jpg" draggable="true">然后使用JavaScript监听拖放事件。例如，以下代码监听了拖动开始和拖动结束事件：
document.addEventListener("dragstart", function(event) {
// 拖动开始时执行的代码
});
document.addEventListener("dragend", function(event) {
// 拖动结束时执行的代码
});还可以使用拖放目标元素。例如，以下代码创建了一个可接受拖动元素的目标：
<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>然后使用JavaScript监听拖放目标的拖放事件。例如，以下代码监听了拖放结束事件：
function drop(event) {
// 拖放结束时执行的代码
}地理定位（Geolocation）
HTML5中的地理定位允许网站访问用户的地理位置。这可以用于各种应用程序，如地图应用程序、车载导航系统或社交网络应用程序。
要使用HTML5地理定位，首先需要请求用户的地理位置。这可以使用navigator.geolocation对象的getCurrentPosition()方法完成。例如，以下代码请求用户的地理位置：
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);在这里，successCallback函数将在获取地理位置成功时调用，而errorCallback函数将在获取地理位置失败时调用。您可以在这些函数中执行特定于应用程序的代码，如显示地图或显示错误信息。
例如，以下代码使用获取的地理位置显示地图：
function successCallback(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var mapUrl = "https://maps.google.com?q=" + latitude + "," + longitude;
window.open(mapUrl, "_blank");
}
function errorCallback(error) {
console.log("Unable to retrieve your location");
}
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);视频（Video）
HTML5的视频标签可以在网页中嵌入视频。
要使用HTML5视频，首先需要添加一个<video>元素。例如，以下代码嵌入了一个视频：
<video src="video.mp4" controls></video>其中，src属性指定了视频文件的位置，而controls属性启用了视频控件（如播放按钮）。
可以使用JavaScript控制视频。例如，以下代码使用play()方法播放视频：
var video = document.getElementById("myVideo");
video.play();可以使用HTML5视频事件监听视频的状态。例如，以下代码监听视频播放结束事件：
var video = document.getElementById("myVideo");
video.addEventListener("ended", function() {
// 视频播放结束时执行的代码
});音频（Audio）
HTML5的音频标签可以在网页中嵌入音频。
要使用HTML5音频，首先需要添加一个<audio>元素。例如，以下代码嵌入了一个音频文件：
<audio src="audio.mp3" controls></audio>在其中，src属性指定音频文件的位置，而controls属性启用了音频控件（如播放按钮）。
可以使用JavaScript控制音频。例如，以下代码使用play()方法播放音频：
var audio = document.getElementById("myAudio");
audio.play();可以使用HTML5音频事件监听音频的状态。例如，以下代码监听音频播放结束事件：
var audio = document.getElementById("myAudio");
audio.addEventListener("ended", function() {
// 音频播放结束时执行的代码
});什么是CSS
CSS（层叠样式表）是一种用于控制网页外观的样式表语言。它使用样式规则来定义HTML元素的样式，例如字体、颜色和布局。
CSS样式规则由选择器和声明组成。选择器指定了要应用样式的HTML元素，而声明指定了要应用的样式。其可以包含多个声明，还可以使用伪类来定义某些特殊状态下HTML元素的样式。CSS样式规则还可以使用媒体查询来根据设备的特性调整样式。
总体来说，CSS具有以下特点：
丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
页面压缩
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。
第一个CSS
新建一个文件，命名为firstCSS.css，并添加如下代码：
body {
background-color:#d0e4fe;
}
h1 {
color:orange;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}保存即可，这就是一份css文件，需要使用该css文件，则在html中链接即可，具体看html上引入CSS样式的部分
CSS中的名词解释
CSS声明：由属性和值组成，以分号;结束。以下就是一个css声明
font-family:"Times New Roman";其中，font-family是属性，"Times New Roman"是值
CSS实例：以分号;结束，声明总以大括号{}括起来。以下就是一个css实例
p {
font-family:"Times New Roman";
font-size:20px;
}CSS注释
CSS注释是用于插入CSS代码中的注释文本的语法。CSS注释不会被浏览器显示，只是为了方便开发人员阅读和理解CSS代码。
其语法如下：
/* 这是个注释 */CSS选择器
如果要在HTML元素中设置CSS样式，就需要在元素中设置"id" 和 "class"选择器。
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。例子如下：
#para1
{
text-align:center;
color:red;
}class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点.号显示。例子如下：
.center_box{
text-align:center;
}比较推荐用class选择器，一是编程时方便，二是html中的id会用在其他地方
CSS常用属性
属性 | 作用 | 例子 |
|---|---|---|
background | 定义背景效果 |
|
text | 文本样式 |
|
font | 字体样式 |
|
border | 边框 |
|
margin | 外边距 |
|
padding | 内边距 |
|
height、width | 控制元素的高度和宽度 |
|
Display、Visibility | 设置一个元素应如何显示 |
|
Position | 定位 |
|
Overflow | 控制内容溢出元素框时显示的方式。 |
|
Float | 会使元素向左或向右移动，其周围的元素也会重新排列。 |
|
盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
伪类
CSS伪类是CSS中的一种特殊的选择器，用于选择特定的状态或类型的元素，其语法通常是在元素的名称后面跟一个冒号（:）和伪类的名称，例如：
a:hover {
/* 样式定义 */
}常用的CSS伪类有：
:active：表示当前被激活的元素。例如，当鼠标按下按钮时，按钮会被视为被激活。:hover：表示鼠标悬停在元素上
@
@是CSS中的一个关键字，用于定义特殊的规则。
常用的@规则包括：
@import：用于导入外部的样式表。例如：
@import url('style.css');@media：用于定义媒体查询，以便为不同的屏幕尺寸、分辨率等设备定义不同的样式。
@font-face：用于加载自定义字体。
@keyframes：用于定义动画。
使用@规则时，需要注意，每个@规则都有特定的语法和用法，需要遵循其规则才能正确使用。
CSS3
CSS3是CSS技术的最新版本，它比之前的版本（如CSS2）拥有更多的功能和更多的灵活性。 CSS3新增了许多有用的特性，包括响应式布局、动画、多列布局和边框图像。使用CSS3可以让网页看起来更加美观、现代化，同时还能提升网站的用户体验。
CSS3新增了许多有用的特性，其中包括：
响应式布局：可以让网页在不同的设备上自动适应不同的屏幕尺寸。
动画：可以使用CSS3创建网页动画，而无需使用JavaScript。
多列布局：可以使用CSS3创建多列布局，使网页更加美观。
边框图像：可以使用CSS3在边框周围添加图像。
新的字体样式：CSS3提供了新的字体样式，包括新的字体阴影和文本装饰效果。
颜色选择器：CSS3提供了新的颜色选择器，可以使用更简单的方式指定颜色。
选择器：CSS3新增了许多有用的选择器，可以使用更灵活的方式选择元素。
这些新特性使CSS3成为了一种非常强大的网页样式表语言，为开发人员提供了更多的灵活性和更多的设计选项。
边框
用 CSS3，你可以创建圆角边框，添加阴影框。
首先是圆角，在CSS3中border-radius属性被用于创建圆角，值为圆角的强度：
border-radius:25px;
border-radius: 15px 50px 30px 5px; /* 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。*/
border-radius: 15px 50px 30px; /* 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角*/
两个值 - border-radius: 15px 50px; /* 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角 */为添加阴影框，可以使用box-shadow属性：
box-shadow: 10px 10px 5px #888888;为使用图像创建一个边框，可以使用border-image属性：
border-image:url(border.png) 30 30 round;渐变效果
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 从元素的中心定义
线性渐变的顺序在默认情况下是从上到下，以下的例子是起点是红色，慢慢过渡到蓝色：
.b {
background-image: linear-gradient(red, blue);
}也可以从左到右：
.b {
background-image: linear-gradient(to right, red , blue);
}甚至可以从对角开始：
.b {
background-image: linear-gradient(to bottom right, red, blue);
}文本效果
使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。使用@font-face规则后，当页面要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。
定义@font-face并使用的例子如下：
@font-face
{
font-family: font;
src: url(sansation_bold.woff);
font-weight:bold; /*加粗*/
}
div
{
font-family:font;
}CSS3定义了新的文本效果，比如说设置文本阴影：
text-shadow: 5px 5px 5px #FF0000;过渡和动画
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：
指定要添加效果的CSS属性
指定效果的持续时间。
比如说改变某个盒子的宽度，并且持续3秒：
div
{
transition: width 3s;
}如果未指定的期限，transition将没有任何效果，因为默认值是0。
CSS3可以创建动画。要创建 CSS3 动画，就需要使用@keyframes规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
在创建动画后，就需要把它绑定到一个选择器，否则动画不会有任何效果。指定至少这两个CSS3的动画属性绑定向一个选择器：
规定动画的名称
规定动画的时长
以下是一个例子：
@keyframes ani
{
from {background: red;}
to {background: yellow;}
}
div
{
animation: ani 5s;
}@keyframes还可以设置动画的过程，比如当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
@keyframes ani
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}媒体查询
@media 即是媒体查询，它允许开发人员根据网页的屏幕尺寸、分辨率等信息，为不同的设备定义不同的样式。使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。这样，通过使用媒体查询，就可以为不同的设备定义不同的样式，实现响应式布局。
媒体查询可用于检测很多事情，例如：
viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏，竖屏) 。
分辨率
例如，要为宽度小于600像素的设备定义样式，可以使用以下代码：
@media (max-width: 600px) {
/* 样式定义 */
}除了按照屏幕尺寸、分辨率等信息来定义媒体查询条件之外，还可以根据设备的其他特性来定义条件。例如，可以使用以下条件：
orientation：按照设备的屏幕方向（横向或纵向）定义条件。
resolution：按照设备的分辨率定义条件。
aspect-ratio：按照设备的屏幕长宽比定义条件。
device-aspect-ratio：按照设备的物理屏幕长宽比定义条件。
例如，要为分辨率大于300dpi的设备定义样式，可以使用以下代码：
@media (min-resolution: 300dpi) {
/* 样式定义 */
}同时，还可以使用and、not和only等关键字来组合多个条件，以定义更复杂的媒体查询。例如，要为宽度小于600像素且设备方向为横向的设备定义样式，可以使用以下代码：
@media (max-width: 600px) and (orientation: landscape) {
/* 样式定义 */
}通过使用媒体查询，就可以为不同的设备定义不同的样式，实现响应式布局。