HTML5和CSS3提高

最新推荐文章于 2021-02-02 23:30:51 发布

small_rain_

最新推荐文章于 2021-02-02 23:30:51 发布

阅读量271

点赞数

分类专栏：前端的进步文章标签： css

本文链接：https://blog.csdn.net/small_rain_/article/details/108109235

版权

前端的进步专栏收录该内容

59 篇文章 0 订阅

订阅专栏

1.HTML5的新特性

增加了一些新的标签、新的表单和新的表单属性等

1）HTML5新增的语义化标签

<hearder>头部标签

<nav>导航标签

<article>内容标签

<section>定义文档某个区域

<aside>侧边栏标签

<footer>尾部标签

注意：

1.这种语义化标准主要针对搜索引擎的
2.这些新标签页面可以使用多次
3.在IE9中，需要把这些元素转为块级元素
4.其实，我们移动端更喜欢使用这些标签
5.HTML5还增加了很多其他标签，我们后面再慢慢学

2）HTML5新增的多媒体标签

音频：<audio> 支持三种格式：MP3、Wav、Ogg

视频：<video> 支持三种格式：MP4、WebM、Ogg

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件

<style>
        video {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- autoplay:视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
    muted:静音播放
    controls:向用户显示播放控件
    loop:播放完是否继续播放该视频,循环播放
    preload:auto(预先加载视频) none(不该加载该视频)  如果有autoplay就忽略该属性
    poster:加载等待的画面图片
    controls="controls"
     -->
    <video src="media/5f51a274a73db915a9623ccdfd35f678.mp4" autoplay="autoplay" muted="muted" loop="loop"
        poster="media/mi9.jpg"></video>
</body>

<body>
    <!-- 
    autoplay:音频就绪后马上播放
    controls:向用户显示控件
    loop:音频结重新播放
    src:要播放音频的url
    谷歌浏览器把音频和视频自动播放禁止了
 -->
    <audio src="media/pai.mp3" autoplay="autoplay" controls="controls"></audio>
</body>

3）HTML5新增的input类型

 <!-- 我们验证的时候必须添加form表单域 -->
    <form action="">
        <ul>
            <li>邮箱:<input type="email" /></li>
            <li>网址:<input type="url" /></li>
            <li>日期:<input type="date" /></li>
            <li>日期:<input type="time" /></li>
            <li>数量:<input type="number" /></li>
            <li>手机号码:<input type="tel" /></li>
            <li>搜索:<input type="search" /></li>
            <li>颜色:<input type="color" /></li>
            <!-- 当我们点击提交按钮就可以验证表单了 -->
            <li><input type="submit" value="提交" /></li>
        </ul>
    </form>

4)HTML5新增的表单属性

<style>
        input::placeholder {
            color: slateblue;
        }
    </style>
</head>

<body>
    <!-- 
    required:表示不能为空,必填
    placeholder:提示信息,存在默认值将不显示
    autofocus:自动聚焦,页面加载完成自动聚焦到指定表单
    autocomplete:当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出字段中填写的选项
                需要放在表单内,同时加上name属性,同时提交成功
    multiple:可以多选文件提交
 -->
    <form action="">
        <input type="search" name="sear" id="" required="required" placeholder="xiaoyu" autofocus="autofocus"
            autocomplete="off">
        <input type="file" name="" id="" multiple="multiple">
        <input type="submit" value="提交">
    </form>
</body>

2.CSS3的新特性

1）现状：

新增的CSS3特性有兼容性问题，ie9+才支持
移动端支持优于PC端
不断改进
应用相对广泛
现阶段主要学习：新增选择器和盒子模型以及其他特性

2）新增选择器

属性选择器

注意：类选择器、属性选择器、伪类选择器，权重为10

<style>
        /* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */
        /* input[value] {
            color: slateblue;
        } */
        /* 只选择type=text 文本框的input 选取出来 */
        input[type=text] {
            color: slateblue;
        }

        /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
        div[class^=icon] {
            color: blueviolet;
        }

        /* 必须是data结尾的 */
        section[class$=data] {
            color: blue;
        }

        .icon1 {
            color: cornflowerblue;
        }

        /* 类选择器和属性选择器 伪类选择器 权重都是10 */
    </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>
    <div>我是打酱油的</div>

    <!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">那我是谁</section>

</body>

结构伪类选择器

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

        /* 2.选择ul里面的最后一个孩子 小li */
        ul li:last-child {
            background-color: skyblue;
        }

        /* 2.选择ul里面的第二个孩子 小li */
        ul li:nth-child(2) {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>

nth-child(n)选择某个父类元素的一个或者多个特定的子元素

n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面数字从1开始...
n可以是关键字：even偶数，odd奇数
n可以是公式：常见的公式如下（如果n是公式，则从第0个元素或者超出了元素的个数会被忽略）

<style>
        /* 1.把所有的偶数的孩子选出来 */
        ul li:nth-child(even) {
            background-color: blueviolet;
        }

        /* 2.把所有的奇数的孩子选出来 */
        ul li:nth-child(odd) {
            background-color: skyblue;
        }

        /* 3.nth-child（n） 从0开始 每次加1 往后计算 这里必须是n 不能是其他的字母 选择了所有的孩子*/
        /* ol li:nth-child(n) {
            background-color: pink;
        } */

        /* 4.nth-child（2n） 选择了所有的偶数孩子 等价于even*/
        /* ol li:nth-child(2n) {
            background-color: pink;
        }

        ol li:nth-child(2n+1) {
            background-color: skyblue;
        } */
        /* ol li:nth-child(n+3) {
            background-color: skyblue;
        } */
        ol li:nth-child(-n+5) {
            background-color: skyblue;
        }
    </style>

<style>
        ul li:first-of-type {
            background-color: skyblue;
        }

        ul li:last-of-type {
            background-color: slateblue;
        }

        ul li:nth-of-type(even) {
            background-color: pink;
        }

        /* nth-child 会把所有的盒子都排列序号
        执行的时候先看 ：nth-child（1） 之后回去看 前面的div */
        section div:nth-child(1) {
            background-color: rebeccapurple;
        }

        /* nth-of-type 会把指定元素的盒子都排列序号
        执行的时候先看 ：div指定元素 之后回去看 nth-of-type(1) 第几个孩子 */
        section div:nth-of-type(1) {
            background-color: royalblue;
        }
    </style>

区别：

nth-child对父元素里面所有的孩子排序选择（序号固定）先找到第几个孩子，然后看看是否和E匹配

nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

总结

结构伪类选择器一般用于选择父类里面的第几个孩子

nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第几个孩子，然后看看是否和E匹配

nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

关于nth-child（n）我们要知道n是从0开始计算的，要记住常用的公式

如果是无序选择器，我们肯定用nth-child更多

类选择器、属性选择器、伪类选择器，权重为10

伪元素选择器（重点）

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

伪元素基本使用：

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* div::before  权重是2 */
        div::before {
            /* 这个 content 是必须要写的 */
            display: inline-block;
            content: '我';
            width: 30px;
            height: 40px;
            background-color: purple;
        }

        div::after {
            content: '小猪佩奇';
        }
    </style>

伪元素选择器和标签选择器一样，权重为1

伪元素选择器使用场景1：伪元素字体图标

<style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?ho57u4');
            src: url('fonts/icomoon.eot?ho57u4#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?ho57u4') format('truetype'),
                url('fonts/icomoon.woff?ho57u4') format('woff'),
                url('fonts/icomoon.svg?ho57u4#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid rebeccapurple;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ''; */
            content: '\ea43';
            color: red;
            font-size: 18px;
        }
    </style>

伪元素选择器使用场景2：仿土豆效果

伪元素选择器使用场景3：伪元素消除浮动

1.额外标签法，也称为隔墙法，是W3C推荐的做法

2.父级添加overflow属性

3.父级添加after伪元素

4.父级添加双伪元素

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值：即指定为content-box、border-box，这样我们计算盒子大小的方式就发生改变

可以分成两种情况：

1.box-sizing：content-box盒子大小为width+padding+boder(以前默认)

2.box-sizing:border-box盒子大小为width

如果盒子模型我们改为了box-sizing：border-box，那padding和border就不会撑大盒子了（前提是padding和boder不会超过width宽度）

CSS3其他特性

1.图片变模糊

CSS3滤镜filter：

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

<style>
        img {
            /* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
            filter: blur(5px);
        }

        img:hover {
            filter: blur(0);
        }
    </style>

2.计算盒子宽度width：calc函数

cacl()此CSS函数让你在声明CSS属性时执行一些计算

width:calc(100%-8px);

括号里面可以使用+-*/来计算

CSS3还增加了一些动画 2D 3D等新特性

CSS3过渡（重点）

过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以不使用Flash动画或JavaScript的情况下，当元素从一种样式变换成另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另一种状态

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局

我们现在经常和:hover 一起搭配使用。

transition:要过渡的属性花费时间运动曲线何时开始（记住过渡使用口诀：谁做过渡给谁加）

<style>
        div {
            width: 200px;
            height: 100px;
            background-color: slateblue;
            /* transition: 变化属性  花费时间 运动曲线 何时开始;  后面两个属性可以不写*/
            /* 如果想要写多个属性，利用逗号进行分割 */
            /* transition: width 1s ease 1s, height 1s ease 1s; */
            /* 如果想要多个属性都变化，属性可以写all就可以了 */
            /* 谁做过渡给谁加 */
            transition: all 1s;
        }

        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>

进度条案例

<style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }

        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 谁做过渡给谁加 */
            transition: all 1s;
        }

        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>