H5、CSS3新增

HTML5新增

语法

    文件类型：.html   /   .htm

    DOCTYPE声明：不区分大小

    可以省略标记的元素        

        不允许写结束标记的元素：br  /  hr  /  img  /  input  /  link引入文件  /  meta设置  /  embed多媒体标签

        可以省略结束标记的元素：li  /  dt  /  dd  /  p  /  option下拉列表选项  /  thead表头  /  tbody表体  /  tfoot表尾  /  colgroup表格列分组  /  tr  /  td  /  th表头

        可以省略全部标记的元素：html  /  head  /  body  /  tbody  /  colgroup

    引号：属性值可以使用双引号，也可以使用单引号

增加的内容

    语义化标签：header头部  /  footer页脚  /  section内容  /  main主体  /  nav导航  /  article独立内容  /  aside辅助信息  /  figure独立内容流

    音频和视频：

        audio音频

            属性：src路径  \  contrlos控件  \  loop循环次数--给就是无限循环-不给就是一次   \  autoplay自动播放-谷歌不生效   \   muted静音

        video视频

            属性：src路径  \  contrlos控件  \  loop循环次数--给就是无限循环-不给就是一次   \  autoplay自动播放  \  muted静音  \  poster视频下载/加载时显示的图片

            谷歌浏览器-静音和自动播放同时使用会冲突，火狐浏览器可以

        embed多媒体标签

    表单功能

    画图功能：canvas  /  svg

    存储功能：离线存储  /  本地存储

    各种API：可以直接使用的方法函数

 CSS3新增

特点：向后兼容

层级选择器

    子级选择器

            获取父级  获取子级 { }

    直属子级选择器

            获取父级 > 获取子级 { }

    相邻兄弟选择器

            选择器+兄弟选择器{ }---条件：兄弟选择器的元素在子级选择器的元素紧挨着

    通用兄弟选择器

            选择器~兄弟选择器{ } ---条件：获取选择器后面所有的兄弟选择器

属性选择器

    选择器{属性}---指定属性名

    选择器{属性="属性值"}---指定属性名和属性值

    选择器{属性~="属性值"}---指定属性名和其中一个属性值

    选择器{属性^="属性值"}---指定属性名和属性值开头

    选择器{属性$="属性值"}---指定属性名和属性值结束

    选择器{属性*="属性值"}---指定属性名和包含属性值

    选择器{属性|="属性值"}---指定属性名和属性值或属性值-开头

伪类选择器

    动态伪类选择器（顺序不能改变）

        未访问：link

        已访问：visited

        滑进/悬停：hover

        鼠标按下/按住：active

    结构伪类选择器

        first-child：子级的第一个元素

        last-child：子级的最后一个元素

        nth-child：匹配索引内容元素   ；   索引内容--数字某一个、odd奇数/even偶数、公式类型

        only-child：仅有一个子级元素

        first-of-type同类型子级的第一个元素

        last-of-type同类型子级的最后一个元素

        nth-of-type 同类型匹配索引内容元素 

        only-of-type 同类型仅有一个子级元素

            区别：

                child：只是选择子元素

                of-child：选择同类型的子元素

        

        root：根元素/根目录--在HTML文件中，只有一个根元素/根目录，就是HTML标签

        empty：空元素-没有任何子元素（包括文本）的元素

    否定伪类选择器

        not( )：否定伪类选择器

    ui元素状态选择器

        enabled：可用状态的元素--针对正常输入框

        disabled：不可用状态的元素--针对正常输入框

        focus：焦点元素样式--针对正常输入框

        checked：选中状态的元素--针对单选多选

        selection：选中/高亮状态的部分--针对文本

    目标伪类选择器

        target

伪元素选择器

    配合content属性使用

        after末尾位置添加内容

        before开头位置添加内容

    first-letter设置首字符

    first-line设置第一行字符