前端基础篇2-html5和css3新特性

最新推荐文章于 2024-07-13 11:46:18 发布

咖啡壶子

最新推荐文章于 2024-07-13 11:46:18 发布

阅读量178

点赞数 2

分类专栏：前端从入门到精通文章标签： html5 css3 html

本文链接：https://blog.csdn.net/TroyeSivanlp/article/details/120079143

版权

前端从入门到精通专栏收录该内容

64 篇文章 21 订阅

订阅专栏

以下几篇是前端html，css基础的学习。

1.html，css基础	https://blog.csdn.net/TroyeSivanlp/article/details/119682179
2.html5和css3新特性	https://blog.csdn.net/TroyeSivanlp/article/details/120079143
3. css高级技巧	https://blog.csdn.net/TroyeSivanlp/article/details/120113411
4.移动web总结	https://blog.csdn.net/TroyeSivanlp/article/details/120229593
5.案例：品优购demo	https://blog.csdn.net/TroyeSivanlp/article/details/120079465

html5和css3新特性

- HTML5 的新特性
- CSS3 的新特性

HTML5 的新特性

HTML5 新增的语义化标签

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签
HTML5 新增的多媒体标签

①视频

<video src="文件地址" controls="controls"></video>

在这里插入图片描述
②音频

<audio src="文件地址" controls="controls"></audio>

在这里插入图片描述
3. HTML5 新增的 input 类型

 type="email"
 type="url"
 type="date"
 type="time"
 type="month"
 type="week"
 type="number"
 type="tel"
 type="search"
 type="color"

HTML5 新增的表单属性

requied="requied"  必填内容
placeholder="提示文本"  表单的提示信息
autofocus="autofocus"   自动聚焦
multiple="autofocus" 多选文件提交

CSS3 的新特性

属性选择器

E[attribute=value]	选择具有attribute属性的E元素
E[attribute=“value”]	选择具有attribute属性且属性值等于value的E元素
E[attribute^=“value”]	选择具有attribute属性且值以value开头的E元素
E[attribute$=“value”]	选择具有attribute属性且值以value结尾的E元素
E[attribute*=“value”]	选择具有attribute属性且值中含有value的E元素

 <style>
        /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
        /* input[value] {
            color:pink;
        } */
        /* 只选择 type =text 文本框的input 选取出来 */
        input[type=text] {
            color: pink;
        }
        /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
        div[class^=icon] {
            color: red;
        }
        section[class$=data] {
            color: blue;
        }
        div.icon1 {
            color: skyblue;
        }
        /* 类选择器和属性选择器 伪类选择器 权重都是 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>

结构伪类选择器

E:last-child	选择父元素的倒数第一个子元素E，相当于E:nth-last-child(1)
E:nth-child(n)	选择父元素的第n个子元素，n从1开始计算
E:nth-last-child(n)	选择父元素的倒数第n个子元素，n从1开始计算
E:first-of-type	选择父元素下同种标签的第一个元素，相当于E:nth-of-type(1)
last-of-type	选择父元素下同种标签的倒数第一个元素，相当于E:nth-last-of-type(1)
E:nth-of-type(n)	与:nth-child(n)作用类似，用作选择使用同种标签的第n个元素

    <style>
        /* 1. 选择ul里面的第一个孩子 小li */
        ul li:first-child {
            background-color: pink;
        }
        /* 2. 选择ul里面的最后一个孩子 小li */
        ul li:last-child {
            background-color: pink;
        }
         /* 3. 选择ul里面的第2个孩子 小li */
         ul li:nth-child(2) {
            background-color: skyblue;
        }
        ul li:nth-child(6) {
            background-color: skyblue;
        }
        ul li:nth-child(even) {
            background-color: #ccc;
        }

        /* 2.把所有的奇数 odd的孩子选出来 */
        ul li:nth-child(odd) {
            background-color: gray;
        }
        /* 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: pink;
        } 
        ol li:nth-child(-n+3) {
            background-color: pink;
        }
    </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>

伪元素选择器

：：before	在元素内部的前面插入内容
：：after	在元素内部的后面插入内容

<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>
</head>
<body>
    <div>
        是
    </div>

css3盒子模型

box-sizing	content-box 盒子大小为width+padding+border
box-sizing:boder-box	盒子大小为width

CSS3 calc 函数
width: calc(100% - 80px);
filter: 函数(); 例如： filter: blur(5px); blur模糊处理数值越大越模糊
CSS3 过渡（重点）

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

咖啡壶子

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端基础篇2-html5和css3新特性

html5和css3提高HTML5 的新特性CSS3 的新特性HTML5 的新特性HTML5 新增的语义化标签<header>：头部标签<nav>：导航标签<article>：内容标签<section>：定义文档某个区域<aside>：侧边栏标签<footer>：尾部标签HTML5 新增的多媒体标签①视频<video src="文件地址" controls="controls"></v
复制链接

扫一扫