五、HTML5和CSS3提高_描述html5和css3相比前一版本的主要改进。-CSDN博客

本文链接：https://blog.csdn.net/Zzh1110/article/details/123456237

这篇博客详细介绍了HTML5的新特性，包括语义化标签、多媒体标签、input属性和表单属性，并探讨了CSS3的新特性，如属性选择器、结构伪类选择器、伪元素选择器、2D和3D转换以及动画效果。内容深入浅出，有助于提升HTML5和CSS3的使用技巧。

摘要由CSDN通过智能技术生成

1.HTML5的新特性：

（1）HTML5的新增特性主要针对于以前的不足，增加了一些新的标签、表单和表单属性。
       这些新特性有兼容性问题，基本上IE9+以上版本的浏览器才支持。

   （2）HTML5新增的语义化标签：


（3）HTML5新增的多媒体标签：

       视频：<video>，尽量使用mp4格式。
           属性：autoplay，自动播放（谷歌浏览器需要muted来解决自动播放问题）。
           muted：静音播放。
           controls：向用户显示播放插件。
           loop：循环播放。
           poster：加载等待播放的图片。
       音频：<audio>，尽量使用mp3格式。
           音标标签和视频标签使用方式基本一致。

   （4）HTML5新增的input属性：

       重点掌握tel、number、search。

   （5）HTML5新增的表单属性：

2.CSS3的新特性：

（1）新增属性选择器：

类选择器、属性选择器和伪类选择器权重都是10。

    <style>
        /* 1.必须是input并且同时具有value属性 */
        /* input[value] {
            color: skyblue;
        } */

        /* 2.只选择type=text文本框的input选取出来 */   
        input[type=text] {
            color: yellow;
        }
        
        /* 3.选择首先是div然后具有class属性，并且属性值必须是icon开头的这些元素 */        
        div[class^=icon] {
            color: red;
        }
        
        section[class$=data] {
            color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 1.利用属性选择器就可以不用借助于类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="text"> -->

    <!-- 2.属性选择器还可以选择属性=值的某些元素 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">

    <!-- 3.属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>

    <!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">哥斯拉</section>
    <section class="icon2-data">皮卡丘</section>
    <section class="icon3-ico">杰尼龟</section>
</body>

（2）结构伪类选择器：选择第n个元素。

前三种用法：

        /* 1.选择ul里面的第一个孩子 小li */        
        ul li:first-child {
            background-color: skyblue;