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

HTML5和CSS3总结

news 2026/2/10 15:42:33

HTML5

HTML5是最新的HTML标准，它的主要目标是提供所有内容而不需要任何像flash，silverlight等的额外插件，这些内容来自动画、视频、富GUI等。HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（WHATWG）之间合作输出的。几乎所有的浏览器Safari、Chrome、Firefox、Opera、IE都支持HTML5。

HTML5没有使用SGML或者XHTML，它是一个全新的东西，因此不需要参考DTD。仅需放置<! DOCTYPE html>的文档类型代码告诉浏览器识别这是HTML5文档。如果不放入<! DOCTYPE html> ，浏览器将不能识别它是HTML5文档，同时HTML5的标签将不能正常工作。

DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

如果不写，浏览器将无法识别HTML文件，并且HTML 5标签将无法正常工作。

文档声明

<!DOCTYPE html>

元素

新增文档结构标签（块级元素）

新增内联（行内）元素

新增input类型

email、url、number、tel、range、search、color、date、month等。

创建画布语法

<datalist> 标签

如果我们想要用户自由输入的同时又有一些建议选项，可以使用<datalist>。

<datalist> 标签定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

使用 input 元素的 list 属性来绑定 datalist。

</datalist>

CSS3

1. 圆角边框

border-radius：1-4 length 1%/1-4 length 1%

/*水平半径/垂直半径*/

四个值的顺序：自左上角开始，顺时针方向。

2. 边框阴影

box-shadow: h-shadow(必需) v-shadow(必需) blur spread color inset;

3. 2D转换

（1）translate()方法：平移

（2）rotate()方法：旋转

（3）scale()方法：缩放

4. 3D转换

（1）translateZ()方法：延Z轴移动

（2）rotateX()、rotateY()、rotateZ()方法：分别绕X、Y、Z轴旋转

（3）perspective()方法：定义3D转换的透视视图

5. CSS3的选择器

1）E:last-child 匹配父元素的最后一个子元素E。

2）E:nth-child(n)匹配父元素的第n个子元素E。

3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

6. @keyframes规则

用于创建动画。

CSS3实现动画主要有3种方式：

第一种是：transition 实现渐变动画

第二种是：transform 转变动画

第三种是：animation 实现自定义动画

7. @Font-face 特性

可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

8. 多列布局（multi-column layout）

CSS3 的多列布局有很多属性，例如：

column-count
div元素的文本分成三列。

column-gap
在div元素的文本分成三列，并指定一个30像素的列之间的差距。

column-rule
指定列之间的规则：宽度，样式和颜色。

在规定的多列布局容器内的元素，要使用display：inline-block属性，否则会出现脱节和错乱。