HTML5和CSS3新增内容

2021-08-05  本文已影响0人  前端_酒館

CSS3选择器有哪些？

属性选择器、伪类选择器、伪元素选择器。

CSS3新特性有哪些？

  1. 颜色：新增RGBA，HSLA模式
  2. 文本效果

text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。
text-outline 规定文本的轮廓。
text-overflow 规定当文本溢出包含元素时发生的事情。
text-shadow 向文本添加阴影。
text-wrap 规定文本的换行规则。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

  1. 边框：

圆角：border-radius
边框阴影： box-shadow
将图片规定为包围 div 元素的边框：border-image

  1. 盒子模型：box-sizing
  2. 背景：

background-size 设置背景图片的尺寸
background-origin 设置背景图片的原点
background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局

  1. 渐变：linear-gradient、radial-gradient
  2. 过渡：transition，可实现动画
  3. 在CSS3中唯一引入的伪元素是 ：selection.
  4. 媒体查询，多栏布局
  5. border-image
  6. 2D转换

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

  1. 3D转换

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

  1. 自定义动画

CSS3新增伪类有那些？

  1. p:first-of-type 指定父元素的第一个p元素
  2. p:last-of-type 指定父元素的最后一个p元素
  3. p:only-of-type 指定属于父元素的特定类型的唯一子元素的每个 p 元素
  4. p:only-child 规定属于其父元素的唯一子元素的每个 p 元素
  5. p:nth-child(2) 规定属于其父元素的第二个子元素的每个 p
  6. :enabled :disabled 控制表单控件的禁用状态
  7. :checked 控制单选框或复选框被选中状态

HTML5新特性

  1. 拖拽释放(Drag and drop) API
  2. 语义化更好的内容标签
  • 结构标签： header、nav、footer、aside、article、section
  • 新增标签： datalist（定义选项列表）、details（定义文档细节，通常与summary使用）、menu（定义列表/菜单）、address、progress（进度条，有两个值：value、max）、mark（标记）、time（时间）
  • 新增表单元素type： email、url、tel、number（min、max、step）、range（进度条）、color（颜色面板）、search、calendar、date、time、email
  • 属性： form、autocomplete、autofocus、method、action、multiple、pattern、placeholder、required、contenteditable、hidden、tableindex
  1. 音频、视频API(audio,video)
  2. 画布(Canvas) API
  3. 地理(Geolocation) API
  4. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
  5. sessionStorage 的数据在浏览器关闭后自动删除
  6. 新的技术webworker, websocket, Geolocation支持HTML5新标签：

处理html5新标签与浏览器兼容性问题：

（1）、使用document创建标签
（2）、a）使用html5shim：在<head>中调用以下代码：
        1.<!--[if lt IE 9]>
        2.<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        3.<![endif]-->
        
       b）使用kill IE6: 在</body>之前调用以下代码：
        1.<!--[if lte IE 6]>
        2.<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
        3.<![endif]-->
上一篇下一篇

猜你喜欢

热点阅读