HTML5和CSS3新特性

发布于 2021-10-12  9,365 次阅读


1、HTML5新标签和属性

1.1 兼容性前缀与语义化

兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的。

内核 兼容性前缀 浏览器
Gecko -moz- Firefox
Webkit -webkit- Chrome、Safari
Presto -o- Opera
Trident -ms- IE

语义化:根据页面的结构,选择合适的标签,这就是语义化。如标题使用h1-h6

1.2 新增的标签

浏览器要求,最新的浏览器 ie9:包含ie9 ie8以下都不支持,包括ie8。

1.2.1 音频标签

  • 音频标签属性:
属性 说明
src 加载音频的路径
controls 控制音频的显示
loop 定当音频/视频结束后将重新开始播放
muted 音频处于静音状态
  • 音频标签支持音频的格式:
格式 MIME-type 最新的浏览器支持情况
Ogg audio/ogg Chrome、Firefox、Opera10+
MP3 audio/mpeg Chrome、Firefox、Opera10+、IE9+、Safari5+
Wav audio/wav chrome、Firefox、Opera10+、Safari5+
  • 使用方式:
    <!-- 格式1: -->
    <audio src="1.ogg" controls loop muted></audio>
    <!-- 注意: 属性直接用空格隔开 属性1 属性2 属性3 -->
    <!-- 格式2: -->
    <audio src="1.mp3" controls="controls" loop="loop" muted="muted"></audio>
    <!-- 属性=“属性值” : controls="controls" loop="loop" muted="muted" -->
    <!-- 格式3: -->
    <audio controls loop muted>
    <source src="1.wav" type="audio/wav" />
    </audio>
    <!-- 格式4: -->
    <audio controls="controls">
    <source src="1.mp3" type="audio/mpeg" />
    <source src="1.ogg" type="audio/ogg" />
    <source src="1.wav" type="audio/wav" />
    </audio>

    -注意:

    • 可以加载多个音频.浏览器默认读取第一个音频。如果第一个音频有错误,浏览器会默认读取第二个音频.
    • 媒介元素里面属性:
      src属性: src="加载音频的地址"
      type="音频的类型[MIME-type]" 音频的类型最好根据src加载的音频给音频的类型

1.2.2 视频标签

  • 视频标签属性:
属性 说明
src 加载视频的路径
controls 控制视频的显示
loop 定当音频/视频结束后将重新开始播放
muted 视频处于静音状态
  • 视频标签支持音频的格式:
格式 MIME-type 最新的浏览器支持情况
Ogg video/ogg Chrome、Firefox、Opera
MP4 video/mpeg Chrome、Firefox、Opera25+、IE9+、Safari
WebM video/wav chrome、Firefox、Opera
  • 视频标签使用方式:
    <!-- 格式1: -->
    <video src="1.mp4" controls loop muted></video>
    <!-- 属性与属性直接用空格隔开 -->
    格式2:
    属性:
    src="加载视频路径" 相对路径 绝对路径
    controls:查看视频
    loop属性:规定当音频/视频结束后将重新开始播放
    muted属性:音频处于静音状态
    width="值" 设置视频的宽度
    height="值" 设置视频的高度
    poster="图片路径"
    poster属性 预览图片 视频封面
    <video src="1.webm" controls="controls" loop="loop" muted="muted" width="400" height="400"></video>
    <!-- 格式3:-->
    <video controls loop muted width="500" height="500" poster="./images/1.jpg">
    <source src="1.webm" type="video/webm" />
    </video>
    <!-- 注意:属性 可以混合一起使用,多个属性值直接用空格隔开 -->
    <source src="属性值" type="属性值" />
    <!-- src="视频路径" type="视频的类型" -->
    <!-- 格式4:-->
    <video controls="controls" loop="loop" poster="./images/1.jpg">
    <source src="1.webm" type="video/webm" />
    <source src="1.mp4" type="video/mp4">
    </video>
    <!-- 视频有多个视频:
    浏览器默认读取第一个视频.如果第一个视频有问题或者路径加载不出来。默认读取第二个视频。-->

1.2.3 input表单元素

type 说明
text 文本元素
url 对文本框里面的地址进行验证,输入错误的地址,会有文本框有红色的提示;当你提交按钮时,输入错误的地址.会有一个友情提示.且你的内容不会进行提交;url地址要完整并正确,才能把数据提交过去;手机端识别后缀为.com ,在pc端识别.cn .com .top
search 用于搜索域
email 对输入框进行一个验证.输入框里面输入错误,鼠标移开,在外面进行点击,默认提示会有文本框有红色的提示;输入框里面email内容输入错误,当你提交表单时,会友情提示。且表单里面内容不会进行提交;输入框里面email内容输入正确,表单可以把数据进行提交
tel 用于输入电话号码的文本域
number 用于数字的文本域;没有默认值value,步长step,最小值min,最大值max
range 用于包含一定范围内数字值的输入域,默认开始值value,step步长值
color 用于选取颜色

1.2.4 input日期表单元素

type 说明
date 获取日期 年/月 /日 , yyyy:年 mm:月 dd:日
datatime 手动输入一个日期和时间
time 用于选择一个时间 低版本的浏览器不兼容
week 用于选择周和年 低版本的浏览器不兼容
datetime-local 用于选择日期和时间
month 用于选择一个年份+月份
<!-- 
list:自定义一个值  选择下拉框  必须要和 <datalist id="classlist">中id="值一起使用(id里面的值最好和文本框里面的list值一致)"和js组合一起使用.
属性:<option value="给选择值">
 -->
<form action="#" method="get">
    <input type="date" />
    手动输入一个日期和时间:<input type="datetime" />
    选择时间:<input type="time" />
    选择周和年:<input type="week" />
    选择日期和时间:<input type="datetime-local" />
    选择一个月份:<input type="month" />
    <input id="myCar" list="classlist" />
    <datalist id="classlist">
        <option value="WEB"></option>
        <option value="ASD"></option>
    </datalist>
</form>

1.2.5 input表单元素属性

属性值 说明
placeholder 友情提示,鼠标聚焦 会清除文本框里面内容。当即有value属性值也有placeholder属性值时,默认读取的是value属性的值.
required 文本域 验证
number max="最大值" min="最小值" step="间隔的值" :数字之间间隔的值 (根据偶数)
autocomplete 开启(on),关闭(off) 选择 (根据你的name值)
autofocus 文本框给到属性值,默认会聚焦到文本框
  • 控件归属于表单:
    1 表单的控件id名一定是唯一
    2 控件归属于那个表单,那么控件里面属性form=“表单的id[一致]”

    <form action="#" method="get" id="form">
     <input type="text" name="usernam"/>
    </form>
    <input type="reset" form="form"/>
  • 文本框下拉选择:

    <input type="url" name="weblist" list="res" id="">
    <datalist id="res">
    <option label="百度" value="http://baidu.com"></option>
    <option label="淘宝" value="http://taobao.com"></option>
    </datalist>

    注意:
    1:id值不能重复 ,
    2:文本框里面的list的值要和datalist里面的id属性值一致
    3:label="值" 如果有label值,默认选中框里面读取label值.选择了label值文本框里面会赋值value的值

1.2.6 html5新增属性

新增的标签有(双标签):

标签 内容 描述
header 页眉 头部标签 可以用来包含 标题 搜索框 logo
footer 页脚 尾部标签 可以用来包含 底部的友情链接 版权
nav 导航 可以用来设置导航 或者 分页 默认的样式横排
article 文档中独立的内容 可以是完整的评论或者留言
section 页面内容章节 一般情况下里面子属性会是h1-h6标题
aside 侧边栏 侧边栏与文档或某个区块相关的附属信息
hgroup 标题组 对标题或者子标题进行分组
figure figure的标题 figure的标题
mark 标记 默认有一个背景颜色为黄色
time 时间 时间

2、css3新特性

2.1 新增的属性选择器

在此之前,我们常用的选择器是:class选择器,id选择器
属性选择器,按照字面意思,都是根据标签中的属性来选择元素
css3新增的属性选择器:

选择器 例子 说明
^ div[class^="box"] 要类名为box开头的都进行控制
$ div[class$="aaa"] 以元素aaa结尾的都进行控制
* div[class*="o"] 元素只要包含了o都进行控制

除此之外,在input标签里面还有这样的选择器:

input[type=text] {
    color: #000000;
} // 表示对文本标签进行控制

2.2 新增的结构伪类选择器

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

2.2.1 选择器和描述

选择器 描述
div:first-child 选择父元素的第一个子元素
div:last-child 选择父元素的最后一个子元素
div:nth-child(n) 选择父元素的第n个子元素
div:nth-child(odd) 选择父元素的奇数个子元素
div:nth-child(even) 选择父元素的偶数个子元素

选择器这里的n可以用数学公式表示,如div:nth-child(2n)表示匹配父元素下的偶数位子元素。

2.2.2 div:nth-child 与 div:nth-of-type 的区别

先看下面的代码:

<body>
    <ul class="list">
        <li>1</li>
        <p>2</p>
        <li>3</li>
        <p>4</p>
        <li>5</li>
        <p>6</p>
    </ul>
</body>
<style>
    .list p:nth-child(2){
        background-color: red;
    }
    .list p:nth-of-type(2){
        background-color: blue;
    }
</style>

可以看到如下结果:

p:nth-child(2)是先从父元素中选取一个p元素,并且是父元素的第二个元素,若不是则选择失败;p:nth-of-type(2)直接选取父元素下第2个p元素。

2.2.3 伪元素选择器

利用css直接创建某个元素,而不用标签进行创建。
举个例子:

<style>
    .apple{
        padding: 20px 10px;
        background: coral;
    }
    .apple::before{
        content: "?";
    }
    .apple::after{
        content: "看起来很好吃的样子!";
    }
</style>
<body>
    <div class="apple">这是一个苹果!</div>
</body>

效果如下:

  • div::before表示在div前添加元素
    div::after表示在div后添加元素
    都属于行内元素,权重是1

2.2.4 盒子模型

box-sizing属性值 描述
content-box 盒子大小为 width + 2padding + 2border
border-box 盒子大小为 width

一个div宽高为100px,content-box的盒子内容宽高为100px;border-box的盒子包含border的宽高为100px,实际内容宽高要小于100px

2.2.5 转换效果transform

属性值 描述
rotate 旋转
skew 倾斜
位移 translate
缩放 scale

2.2.6 其它特性

  • 弹性盒
  • 个性化字体 @font-face{}
  • 媒体查询 @media (max-width: 480px){}
  • 动画 @keyframes animation01{}
  • 过度 transition
  • 颜色透明度 rgba
  • 圆角 border-radius
  • 渐变 background:linear-gradient()
  • 阴影 box-shadow
  • 倒影 box-reflect
  • 文字溢出 text-overflow:ellipsis
  • 等等

活的像诗一样