HTML5和CSS3的新特性

css3新特性

1.选择器
2.背景和边框
3.文本效果
4.2D/3D转化---变形（transform），过渡（transtion）。动画（animation）

1.选择器

常规选择器:

:last-child       /*选择元素最后一个孩子*/
:first-child     /*选择元素第一个孩子 */
:nth-child(1)     /*按照第几个孩子给它设置样式  */
:nth-child(even)      /*按照偶数 */
:nth-child(odd)       /*按照奇数 */
:disabled            /*选择灭个禁用的dom元素*/
:checked            /*选择每个被选中的dom元素*/
:not(selector)      /*选择非selector元素的每个元素 */
::selection         /*选择被用户选取的元素部分  */

伪类和伪类元素：
根本区别在于它们是否创造了新的元素（抽象）
伪类：用于向某个选择器添加特殊的效果（没有创建新元素）

:last-child     /*选择元素最后一个孩子 */
:first-child   /*选择元素第一个孩子*/
:nth-child(1)     /*按照的几个孩子给它设置样式*
a:link {color:#FF0000}      /*未访问链接*/
a:visited   {color:#00FF00}     /*已访问的链接*/
a:hover  {color:#FF00FF}      /*鼠标移动到链接上*/
a:active {color:#0000FF}      /*选定的链接*/

伪元素：创建了html中不存在的元素，用于将特殊的效果添加到某些选择器

::before{}      /*选择器在被选元素的前面插入内容定义css，使用content属性来指定要插入的内容*/
::after{}       /*选择器在被选元素的后面插入内容和定义css，使用content属性来指定要插入的内容*/
:first-letter    /*选择该元素内容的首字母*/
:first-line        /*选择该元素的内容的首行*/
::selection        /*选择被用户选取的元素部分*/

2.背景和边框

背景：
background-size:规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
background-origin:规定背景图片的定位区域对于background-origin属性，有如下属性背景图片可以放置于content-box,padding-box或border-box区域。
边框：
border-radius:圆角
box-shadow/text-shadow:阴影
border-image:边框图片

3.文本效果

属性	描述
text-shadow	向文本添加阴影
text-justify	规定当text-align设置为"justify"时所使用的对齐方式
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色
text-outline	规定文本的轮廓
text-overflow	规定当文本溢出包含元素时发生的事情
text-wrap	规定文本的换行规则
word-break	规定非中日韩文本的换行规则
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行
text-decoration	文本修饰符：overline，line-through，underline分别是上划线，中划线，下划线

4.2D/3D转换

变形transform
变形有rotate旋转，scale缩放，translate位移，skew倾斜
过渡transition
过渡transition是一个复合属性，可以同时定义transition-property,transition-duration,transition-timing-function,transition0delay子属性值
动画animation
动画的使用，首先通过@(-webkit-)keyframes定义动画名称以及动画的行为，再通过animation属性设置动画特征相关值进行调用

H5新特性

1.h5新增特性：

1.语义化标签：header，footer，section，nav，aside，article。
2.增强型表单：input的多个type
新增表单属性：placehoder,required,min和max
3.音频视频：audio，video
4.canvas画布
5.地理位置
6.拖拽
7.本地存储
8.localStorage没有时间限制的数据存储；
9.sessionStorage,session的数据存储，当用户关闭浏览器窗口，数据就会被删除
10.新事件：onresize，ondrag，onscroll，onmousewheel，onerror，onplay，onpause
WebSocket：建立持久通信协议

2.语义化标签

标签	描述
header	定义了文档的头部区域
footer	定义了文档的尾部区域
nav	定义文档的导航
section	定义文档中的节（section，区段）
article	定义页面独立的内容区域
aside	定义页面的侧边栏的内容
dialog	定义对话框，比如提示框

表单类型增强

HTML5拥有多个新的表单input输入类型。这些新特性提供了更好的输入控制和验证

input的type	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC时间）
email	包含e-mail地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL地址的输入域
week	选择周和年

4.html5新增的表单属性

表单属性	描述
plachoder	简短的提示在用户输入值前会显示在输入框
required	是一个boolean属性。要求填写的输入域不能为空
pattern	描述一个正则表达式用于验证input元素的值
min和max	设置元素最小值和最大值
step	为输入域规定合法的数字间隔
height和width	用于image类型的input标签的图像高度和宽度
autofocus	是一个boolean属性。在页面加载时，域自动地获取焦点
multiple	是一个boolean属性。在规定input元素中可选择多个值

5.html5新事件

事件	描述
onresize	当调正窗口大小时触发
ondrag	当拖动元素时触发
onscroll	当滚动元素滚动元素的滚动条时触发
onmousewheel	当转动鼠标滚轮时触发
onerror	当错误发生时触发
onplay	当媒介数据要开始播放时触发
onpause	当媒介数据暂停时触发

参考资料：
https://blog.csdn.net/weixin_43638968/article/details/109194480

__EOF__

本文作者：HuangJiaZ
本文链接：https://www.cnblogs.com/HuangJiaZ/p/16669616.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！