菜单 搜索
首页 前端知识 HTML5、CSS新特性

HTML5、CSS新特性

2024-03-10 11:03:42 前端知识 前端哥 100 897 我要收藏

文章目录

  • 1、HTML5新特性
    • 语义化标签
    • 多媒体标签
      • 视频标签- video
        • 兼容写法
        • video 常用属性
      • 音频标签- audio
        • 基本使用
        • 兼容写法
        • audio 常用属性
    • 新增的表单元素
  • 2.CSS3新特性
    • CSS3 新增选择器
      • 属性选择器
      • 结构伪类选择器
        • E:first-child
        • E:nth-child(n)
        • E:nth-child 与 E:nth-of-type 的区别
        • 小结
      • 伪元素选择器
        • 应用场景一： 字体图标
        • 应用场景二： 仿土豆效果
        • 应用场景三： 清除浮动
    • 盒子模型
    • 其他特性（了解）
      • 图标变模糊 -- CSS3滤镜filter
      • 计算盒子宽度 -- calc 函数
    • CSS3 过渡（重要）
        • 过渡练习
    • 3.广义H5说法 （了解）
      • 狭隘H5
      • 广义H5

1、HTML5新特性

这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持

语义化标签

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的

<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>

在这里插入图片描述

多媒体标签

视频标签- video

当前 元素支持三种视频格式： 尽量使用 mp4格式

使用语法：

 <video src="media/mi.mp4"></video>
兼容写法

由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

<video  controls="controls"  width="300">
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的浏览器暂不支持 <video> 标签播放视频
</ video >

上面这种写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

video 常用属性

属性很多，有一些属性需要大家重点掌握：

  • autoplay 自动播放
    • 注意： 在google浏览器上面，默认禁止了自动播放，如果想要自动播放的效果，需要设置 muted属性
  • width 宽度
  • height 高度
  • loop 循环播放
  • src 播放源
  • muted 静音播放

示例代码：

<video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg"></video>

音频标签- audio

基本使用

当前 元素支持三种视频格式： 尽量使用 mp3格式

使用语法：

<audio src="media/music.mp3"></audio>
兼容写法

由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

< audio controls="controls"  >
    <source src="happy.mp3" type="audio/mpeg" >
    <source src="happy.ogg" type="audio/ogg" >
    您的浏览器暂不支持 <audio> 标签。
</ audio>

上面这种写法，浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

audio 常用属性

示例代码：

<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>

新增的表单元素

<!-- 我们验证的时候必须添加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>

常见输入类型

text password radio checkbox button file hidden submit reset image

新的输入类型

类型很多，我们现阶段重点记忆三个： number tel search
在这里插入图片描述

2.CSS3新特性

CSS3 新增选择器

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

  • 属性选择器
  • 结构伪类选择器
  • 伪元素选择器

属性选择器

属性选择器，按照字面意思，都是根据标签中的属性来选择元素

在这里插入图片描述

示例代码：

 /* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {
    color: pink;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {
    color: red;
}
/* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */
section[class$=data] {
    color: blue;
}
  • **注意：**类选择器、属性选择器、伪类选择器，权重为 10。

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素

E:first-child

匹配父元素的第一个子元素E

 <style>
    ul li:first-child{
      background-color: red;
    }
  </style>
  <ul>
    <li>列表项一</li>
    <li>列表项二</li>
  </ul>

E:last-child 则是选择到了最后一个li标签

E:nth-child(n)

在这里插入图片描述

常用的结构伪类选择器是： nth-child(n) {...}
在这里插入图片描述

E:nth-child 与 E:nth-of-type 的区别
<style>
    ul li:nth-child(2){
      /* 字体变成红色 */
        color: red;
    }  									//都不变色
    ul li:nth-of-type(2){
      /* 背景变成绿色 */
      background-color: green;
    }													
  </style>
  <ul>
    <li>列表项一</li>
    <p>乱来的p标签</p>
    <li>列表项二</li>					//变绿色
    <li>列表项三</li>
    <li>列表项四</li>
  </ul>
  • E:nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
  • E:nth-of-type(n)对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
小结

在这里插入图片描述

伪元素选择器

在这里插入图片描述
在这里插入图片描述

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    /* div::before 权重是2 */
    div::before {
        /* 这个content是必须要写的 */
        content: '我';
    }
    div::after {
        content: 'liubian';
    }
</style>
<body>
    <div>
        是
    </div>
</body>
应用场景一： 字体图标

在实际工作中，字体图标基本上都是用伪元素来实现的，好处在于我们不需要在结构中额外去定义字体图标的标签，通过content属性来设置字体图标的 编码
在这里插入图片描述

    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?1lv3na');
            src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?1lv3na') format('truetype'),
                url('fonts/icomoon.woff?1lv3na') format('woff'),
                url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ''; */
            content: '\e91e';
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
应用场景二： 仿土豆效果

在这里插入图片描述

<head>
    ...
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .tudou::before {
            content: '';
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        /* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
        .tudou:hover::before {
            /* 而是显示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
</body>
应用场景三： 清除浮动

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化

盒子模型

在这里插入图片描述

其他特性（了解）

图标变模糊 – CSS3滤镜filter

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

filter:   函数(); -->  例如： filter: blur(5px);  -->  blur模糊处理  数值越大越模糊

计算盒子宽度 – calc 函数

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

width: calc(100% - 80px);

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

CSS3 过渡（重要）

在这里插入图片描述

语法：

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

过渡练习

在这里插入图片描述

<head>
    ...
    <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 .7s;
        }
        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

3.广义H5说法 （了解）

狭隘H5

指的是h5标签。。。

广义H5

在这里插入图片描述

  • HTML5 MDN 介绍：
    https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML
转载请注明出处或者链接地址：https://www.qianduange.cn//article/3540.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

jQuery之宽高

2024-04-05 09:04:19

零基础篇-python高级-06-JQuery

2024-04-05 09:04:19

web前端开发网络课程，jquery入口函数的特点

2024-04-05 09:04:13

DAY10_SpringBoot—SpringMVC重定向和转发&RestFul风格&JSON格式&SSM框架整合&Ajax-JQuery

2024-04-05 09:04:10

jQuery中动态操作元素（新增，移除，判断一个元素是否有子元素）的方法

2024-04-05 09:04:10

jquery利用ajax请求数据渲染二级菜单

2024-04-05 09:04:01

详解：当鼠标放上echarts图形时，显示数据、名称，或者自定义tooltip弹窗

2024-04-05 09:04:59

绘制echarts地图（小圆点，发射线）

2024-04-05 09:04:58

解决echarts 饼图和图例之间的距离问题

2024-04-05 09:04:56

echarts 同时显示柱状图 折线图 (提示框显示百分号%和千分位分隔符）

2024-04-05 09:04:55

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
6

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
7

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
8

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
9

jQuery事件处理

2024-03-12 01:03:32999
10

HTML5实现下拉列表的标签有哪些

2024-03-11 10:03:35999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！