前端16天--IFC、BFC、H5新特性、选择器、伪类元素、扩展盒模型、圆角、盒子阴影等--2021/4/21

最新推荐文章于 2023-06-27 21:27:16 发布

张登辉的奇妙旅程

最新推荐文章于 2023-06-27 21:27:16 发布

阅读量237

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/A444477/article/details/115934168

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

前端16天–IFC、BFC、H5新特性–2021/4/21

HTML5是HTML标准的最新演进版本：

1、是一个新的HTML语言版本包含了新的元素、属性和行为。
2、同时包含了一系列可以被用来让web站点和应用更加多样化的、功能更强大的技术。（API）
之前学的是HTML4.01（Xhtml1.0）2014.10.29，HTML5诞生

XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

**HTML5新版本特性**
1、淘汰过时的或冗余的属性

2、Indexed DB本地存储功能

3、脱离Flash 和Silverlight直接在浏览器中显示图形或动画

4、一个HTML5文档到另一个文档间的拖放功能

5、提供外部应用和浏览器内部数据之间的开放接口

H5兼容性：

chrome://flags
caniuse.com 查看各个标签能否咋各个浏览器中使用
移动端可以放心使用（blick）
html5test.com

语法

DTD：文档类型定义

定义标准模式解析。

字符集：

语法：
单标签可以不用书写关闭符号
标签的type属性可以不写（style、script可以不用写类型）
标签的属性值可以不用双引号包裹（不要用
标签可以使用大写字母

语义化标签：

div：section、article、nav、header、footer、aside
figure、figcaption、time、mark、details、summary

表单元素(之后讲正则校验）

<form action="/demo" id="demo">
        <!-- button和input都在表单里面，可以直接提交 -->
        <input type="hidden" name="color" value="red">
        <!-- <button>提交</button> -->

        <input type="text" name="" id="" placeholder="请输入用户名">
        <!-- placeholder -->

        <input type="text" autofocus>
        <!-- 自动获取焦点 -->
        
        <input type="text" required>
        <!-- required -->

        <input type="text" list="color">
        <!-- 智能感应 -->
        <datalist id="color">
            <!-- 有value标签之间的数值就会失效 -->
            <option value="red">red</option>
            <option value="pink"></option>
            <option value="green"></option>
            <option value="orange"></option>
            <option>yellowgreen</option>
            <option>yellow</option>
            <option>gold</option>
        </datalist>

    </form>
    <!-- 将标签定义在form标签外面，通过form属性id完成对表单的绑定 -->
    <button form="demo">提交</button>

输入框类型

<form action="/demo" id="demo">
        <!-- button和input都在表单里面，可以直接提交 -->
        <input type="hidden" name="color" value="red">
        <!-- <button>提交</button> -->

        <input type="text" name="" id="" placeholder="请输入用户名">
        <!-- placeholder -->

        <input type="text" autofocus>
        <!-- 自动获取焦点 -->
        
        <input type="text" required>
        <!-- required -->

        <input type="text" list="color">
        <!-- 智能感应 -->
        <datalist id="color">
            <!-- 有value标签之间的数值就会失效 -->
            <option value="red">red</option>
            <option value="pink"></option>
            <option value="green"></option>
            <option value="orange"></option>
            <option>yellowgreen</option>
            <option>yellow</option>
            <option>gold</option>
        </datalist>

    </form>
    <!-- 将标签定义在form标签外面，通过form属性id完成对表单的绑定 -->
    <button form="demo">提交</button>
    
    <form action="/demo1" id="didi">
        <input type="search">
        <input type="tel">
        <input type="url">
        <input type="number">
        <input type="email">
        <input type="range" min="0" max="100" value="10" name="range">
        <input type="week">
        <input type="color">
        <input type="date">
        <button form="didi">提交</button>
    </form>

多媒体

<!-- 嵌入某页面 -->
    <iframe src="" frameborder="0"></iframe>
    <!-- html4.1通过flash引入视频 -->
    <iframe src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=a44ba10f7842358505428b276f441b5b&tvId=8193823322789400&accessToken=2.ef9c39d6c7f1d5b44768e38e5243157d&appKey=8c634248790d4343bcae1f66129c1010&appId=1368&height=100%&width=100%" frameborder="0" allowfullscreen="true" width="100%" height="100%" ></iframe>
    <!-- H5直接用video 不再使用flash -->
    <!-- 自动播放已经不支持、设置muted静音自动播放 -->
    <!-- 支持mp4、webM、Ogg格式视频 ，编码方式也有要求-->
    <video src="../../pic/WIN_20210421_10_45_19_Pro.mp4" autoplay controls loop muted>
        <!-- 备选视频 -->
        <source src="">
        <source src="">
    </video>

音频同

css3前缀、色彩和透明度

H5新特性rgba（color，color，color，1-0.5），子元素不会变透明，其他元素不会被覆盖。

<style>
        body {
            height: 2000px;
        }
        .top {
            height: 100px;
        }
        .pre {
            width: 800px;
            height: 100px;
            background: rgba(255, 255, 100, 1);
            position: fixed;
        }
        .demo {
            height: 300px;
            width: 300px;
            background-color: blue;
            opacity: 0.5;
            /* background: rgba(102,1,200,0.2); */
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="pre">123</div>
    </div>
    <div class="demo">456</div>
</body>

在这里插入图片描述

css3属性、儿子、儿子类型、关系类型选择器

在这里插入图片描述

/* 儿子选择器 */
        /* 加了div，p就不是第一个了所以不会被选中 */
        p:first-child {
            background-color: pink;
        }
        h3:first-child {
            background-color: pink;
        }
        .item:first-child {
            background-color: gold;
        }
        .item:nth-child(2) {
            background-color: green;
        }
        .item:nth-child(3) {
            background-color: yellowgreen;
        }
        .item:nth-child(4) {
            background-color: black;
        }
        
        .item:nth-child(odd) {
            /* 奇数 */
            background-color: yellowgreen;
        }
        .item:nth-child(even) {
            /* 偶数 */
            background-color: black;
        }
        .item:nth-child(3n+1) {
            /* 偶数 */
            background-color: red;
        }
        .item:nth-last-child(1) {
            /* 偶数 */
            background-color: red;
        }
        /* 总结：冒号后面为整个父元素的第几个子元素，
            如果该子元素是冒号前面的类型或者标签则渲染属性 */

/* 儿子类型选择器 */
        /* 在冒号前面这个标签类型一样的所有标签中挑选第冒号后面个 */
        p:first-of-type {
            background-color: orange;
        }
        /* 多组同时寻找 ，每个父容器中寻找一次*/
        p:last-of-type {
            background-color: red;
        }

关系节点选择器

.container p{
            /* background-color: pink; */
        }
        /* 只选择儿子选择器 */
        .container > p {
            /* background-color: pink; */
        }
        /* 选择下一个亲兄弟 ，中间有其他的不行*/
        .demo + p{
            /* background-color: pink; */
        }
        /* 选择所有亲兄弟 */
        .demo ~ p {
            background-color: pink;
        }

伪类

link表示链接在正常情况下（即页面刚加载完成时）显示的颜色。

visited表示链接被点击后显示的颜色。

hover表示鼠标悬停时显示的颜色。

focus表示元素获得光标焦点时使用的颜色，主要用于文本框输入文字时使用（鼠标松开时显示的颜色）。

active表示当所指元素处于激活状态（鼠标在元素上按下还没有松开）时所显示的颜色。
在这里插入图片描述

伪元素

css2中以：开头，css3中以：：开头（兼容IE678建单冒号）
在原有元素之前之后插入伪元素：
content必填
content/display/clear等
在这里插入图片描述

扩展盒模型

div {
            width: 400px;
            height: 400px;
            background-color: pink;
            padding: 50px;
            border: 50px dashed green;
            margin: 50px;
            float: left;
        }
        /* 默认标准盒模型，外扩 */
        /* 设为内减盒模型 */
        .box2 {
            box-sizing: border-box;
            /* border-box / 默认content-box */
            /* 设置了之后宽高就为border外面那一圈的大小 */
        }

圆角

#demo {
            height: 100px;
            width: 300px;
            background-color: greenyellow;
            border-top-left-radius: 10px;
            border-bottom-right-radius: 20px;
            /* 右上角 */
            border-start-end-radius: 50px ;
            /* 左下角 */
            border-end-start-radius: 50px ;
        }

复合写法：
在这里插入图片描述

盒子阴影

在这里插入图片描述
box-shadow：30px,30px,10px,green,outset,40px,50px,10px,red,inset…

圆角作业：

P116

张登辉的奇妙旅程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端16天--IFC、BFC、H5新特性、选择器、伪类元素、扩展盒模型、圆角、盒子阴影等--2021/4/21

前端16天–IFC、BFC、H5新特性–2021/4/21HTML5是HTML标准的最新演进版本：1、是一个新的HTML语言版本包含了新的元素、属性和行为。2、同时包含了一系列可以被用来让web站点和应用更加多样化的、功能更强大的技术。（API）之前学的是HTML4.01（Xhtml1.0）2014.10.29，HTML5诞生XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。H5兼容性：chrome://flagsc
复制链接

扫一扫