H5C3新特性总结(一)

一.H5新增了布局标签

1.新增了布局的属性

新增的属性:

             header:头部区域
                      nav: 导航区域
             main: 主体区域
                      section:小区域
                      aside:边栏
                      article:正文
             footer: 页尾区域

以上标签其实就是div,只不过比div更加具备语义化,是H5中专门用来表示网页布局结构的标签
是HTML5的规范出来以后才有的,那么就意味着会有兼容性问题,IE8和之前的浏览器不支持

2.上面谈到的兼容性结节方案:其实很简单,判断浏览器是否小于或等于ie8,引入插件(插件名叫html5shiv.js),就行了,操作如下:

    

    <style>
        header{
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    style>

    

二.H5里的自定义属性

1.含义:标签本身不带的属性,你写在标签里就叫自定义属性.
2.h5里规范自定义属性要:data-属性名.
3.怎么JS取值?
取值:只要是自定义属性,那么都可以在JS里通过 元素.dataset[属性名]取到.
4.注意点:

    注意:
        属性名不用加data-了,它会自动去掉
        如果data-后面还有-,会去掉-,并把-后面的首字母大写,但是data-后面的首字母不会大写
        简单来说:就是从第二个-后面开始的每个首字母大写
        遵循的是驼峰命名法
<body>
    <div id="box" data-shengao="185cm" data-tizhong="45kg" data-user-login-name="andy">div>
body>
html>

<script>
   
    //只要你是按H5要求的形式写的自定义属性,那么你可以通过元素.dataset方便的取到每个自定义属性
    console.log(box.dataset);//取到全部自定义属性
    console.log(box.dataset.shengao);//取到185cm
    console.log(box.dataset['shengao']);//取到185cm
    console.log(box.dataset['userLoginName']);//andy  
script>

三.transition属性

 transition:让元素变化的时候有动画效果(过渡效果) */
        参数1:参与过渡的属性,一般写all,代表所有属性都参与过渡,也可以写其他的,写什么就代表什么属性参与过渡
        参数2:过渡的持续时间,记得要加单位s代表多少秒
        参数3:代表延迟几秒执行(延迟时间)
        参数4:运动曲线 linear匀速  steps(n):分n个步骤
        transition加在hover里代表只有悬停时才有过渡效果,写在默认样式里代表悬停和移出恢复时都有过渡效果
        transition: all 2s .5s linear;

        过渡其实是一个复合属性,由多个属性连写的
        transition-property: 参与过渡的属性,写all之类的
        transition-duration: 过渡的持续时间
        transition-delay: 过渡的延迟时间
         transition-timing-function: 运动曲线

四.classList属性
JS里新增了一个专门操作类的属性叫classList

    能够让我们添加一个类、删除一个类、切换一个类没那么麻烦了

    classList是一个伪数组,它可以获取到所有的类,每个类都是一个数组的一个元素
    从取值的角度就比以前className要方便


        add:添加一个类
        remove:删除一个类
        toggle:切换一个类:原来没有这个类就加上,原来有这个类就去掉
        contains:判断是否有某个类,如果有返回true,如果没有返回false

五.box-sizing属性

box-sizing是设置边框是内聚还是外扩,border-box就是内聚,content-box就是外扩,这也是默认值.

六.伪类选择器

    :hover:悬停样式
    :link:未点击时的样式
    :active:点击时的样式
    :visited:访问后的样式

    这是a标签的四种状态样式,但是上面这四个伪类,一般都是给a用的,只有hover所有元素都用

    伪类选择器前面一点有一个冒号

    :xxx-child:必须保证在父元素中是第几个子元素

        :first-child:找到第一个子元素,它在父元素中也必须是第一个子元素
        :last-child:找到最后一个子元素,它在父元素中也必须是最后一个子元素
        :nth-child:找到某个子元素
                nth-child里可以写任意数字,就代表找到第几个
                也可以写n:代表找到所有
                还可以写n+m:代表找到从m开始以及后面所有 例:n+3 从3开始
                还可以写mn: 代表m的倍数   3n 代表3的倍数
                还可以写even:代表偶数
                还可以写odd:代表奇数

七.box-shadow盒子阴影属性

     盒子阴影
            参数1:水平偏移位置
            参数2:垂直偏移位置
            参数3:模糊度,值越大越模糊
            参数4:阴影的宽度,哪怕宽度为0其实阴影也有宽度,只不过是跟盒子一样宽,这个宽度其实是设置阴影四周再加多少宽度
            参数5:阴影的颜色
            参数6:是否为内阴影,加一个inset就是内阴影,不加就是外阴影 inset也可以加在最前面,建议加最后

            多个阴影之间,用逗号隔开,先写的阴影,层级最高

八.text-shadow文字阴影属性

            参数1:水平偏移
            参数2:垂直偏移
            参数3:模糊度
            参数4:阴影颜色
            它的阴影大小是跟文字一样大的!不可以改阴影大小,除非改文字大小

九.background属性详解

            参数1:背景图片的路径,路径包不包引号都无所谓
            参数2:是否平铺,默认是repeat代表水平和垂直都平铺
                        no-repeat:代表不平铺,常用
                        repeat-x:水平方向平铺
                        repeat-y:垂直方向平铺
            参数3:背景图片偏移位置
                        它需要写两个,第一个代表水平对齐,第二个代表垂直对齐
                        水平对齐:left,right,center
                        垂直对齐:top,bottom,center

                        如果希望水平和垂直都居中,可以只写一个center

                        除了写这几个单词外,还可以写偏移的像素位置
                        水平写负代表向左,写正代表向右
                        垂直写负代表向上,写正代表向下

                        除了写像素外,还可以写百分比,用的少
                        写正百分比代表向左和向上,给负代表向右和向下
                        写百分比跟像素的方向是相反的

            参数4:指定图片的大小,它一定要写在参数3的后面,而且要加一个/
                    可以给具体的像素,也可以给盒子的百分比,第一个代表宽,第二个代表高

                    还有特殊的两个值:
                                cover:它一定会让图片覆盖整个盒子,图片可能会超出
                                contain:它一定会让盒子包含住图片,图片不会超出
                    图片一定不会变形,都是按比例缩放

            参数5:背景颜色:注意,如果是多张背景图片,那么颜色一定要写在最后

            如果多张背景图片,用逗号隔开,另外,最先写的背景图片层级最高,越后面写的层级越低

十.linear-gradient属性

       把渐变色不是当背景颜色,而是当背景图片,所以要给background属性
            参数1:渐变的方向
                    to right: 从左到右
                    to top: 从下到上
                    to bottom: 从上到下
                    to left: 从右到左

                    to right top: 从左下到右上
                    to right bottom: 从左上到右下
                    to left top: 从右下到左上
                    to left bottom: 从右上到左下

                    除了可以写上面的方向,也可以传入角度,0deg是从下面开始
                    越大,就越顺时针旋转方向

            参数2:第一个颜色 可以写一个百分比,意思是代表在哪个位置结束
            参数3:第二个颜色 写可以写一个百分比,代表在哪个位置开始
            如果要指定第二个颜色在哪结束,那么就需要再写一个这样的颜色,然后写一个百分比就代表它在哪个位置结束了,至少2个颜色,最多有n个颜色.

你可能感兴趣的:(七.H5C3新特性)