HTML5和css3部分新特性

最新推荐文章于 2022-11-20 21:18:32 发布

今天会下雨吗

最新推荐文章于 2022-11-20 21:18:32 发布

阅读量98

点赞数

分类专栏：面试文章标签： css html5

本文链接：https://blog.csdn.net/weixin_45663697/article/details/120481617

版权

面试专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.HTML5新特性

新特性都有兼容性问题，基本IE9+以上版本的浏览器才支持
针对以前的不足，增加了一些新的标签，新的表单，新的表单属性

1.1 新增语义化标签

- <header>：头部标签
- <nav>：导航标签
- <active>：内容标签
- <section>：定义文档某个区域
- <aside>：侧边栏标签
- <footer>：尾部标签

没有添加语义化标签前，我们需要写一个导航栏，侧边栏这些都是用div来实现的
这些没有语义的标签对搜索引擎并不友好

注意:

这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在IE9中，需要把这些元素转换为块级元素
移动端更喜欢使用这些标签

1.2 新增多媒体标签

1. 视频标签`<viedo>`

<video>元素支持三种视频格式：尽量使用mp4格式

语法

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

2. 音频`<audio>`

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

语法

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

<audio controls="controls">
	<source src="happy.mp3" type="audio/mpeg">
</audio>

1.3 新增input表单

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“date”	限制用户输入必须为日期类型
type="“time”	限制用户输入必须为时间类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type="“search”	搜索框
type="“month”	限制用户输入必须为月类型

<input type="search"/>

3.1 新增表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息,存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开,如autocomplete="on”，关闭autocomplete =“off”"需要放在表单内,同时加上name属性,同时成功提交
multiple	multiple	可以多选文件提交

2. CSS3新增特性

1. 属性选择器

类选择器，伪类选择器和属性选择器的权重都是10

属性选择器可以根据元素的特定属性来选择元素，这样就可以不用借助于类或者id选择器

<body>
    <input type="text" value="请输入用户名"/>
    <input type="password" />
    
    <div class="icon1"></div>
    <div class="icon2"></div>
    
    <div class="icon1-data"></div>
    <div class="icon2-data"></div>
</body>

根据特有属性选择元素

<style>
	input[value]{color:pink};
</style>

根据属性=值选择元素（重点）

<style>
	input[type=text]{color:bule};
</style>

E[att^=val]：匹配具有att属性且值以val开头的E元素
- 当多个元素都具有class属性，并且属性值开头都一样，那么我们就可以一下将这些元素都选中
```
<style>
    div[class^=icon]{color:red;}
</style>
```
E[att$=val]：匹配具有att属性且值以val结尾
```
<style>
	div[class$=data]
</style>
```

2. 结构伪类选择器

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

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

nth-child(n)

n如果是数字，就是选择第n个子元素,里面数字从1开始

n可以是关键字:even偶数,odd奇数

在table表单隔行变色里经常使用

<style>
	/*让表单奇数行颜色变为灰色*/
    tr td:nth-child(odd){background-color:gray;}
    
    /*让表单偶数行颜色变为绿色*/
    tr td:nth-child(even){background-color:green;}
</style>

n可以是公式∶常见的公式如下(如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)
- n表示公式时里面的写的东西一定是n
- 从0开始，可以一下选中所有的元素，比如，要给ul里的所有li添加某个样式
```
<style>
    ul li:nth-child{color: bule;}
</style>
```
公式取值
2n 偶数
2n+1 奇数
5n 5 10 15…
n+5 从第五个开始（包含第五个）到最后
-n+5 前五个（包含第五个）

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15…
n+5	从第五个开始（包含第五个）到最后
-n+5	前五个（包含第五个）

3. 伪元素选择器

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

选择符	简介
::before	在元素内容前面插入内容
::after	在元素内容后面插入内容

在css3中伪元素选择器语法
```
element::before{样式}
```
在css2中伪元素选择器语法（仅用来支持IE8），如果使用但冒号的话浏览器话把他解析为双冒号
```
element:before{样式}
```
- css3引入::before双冒号写法，是为了将伪类和伪元素区分开来

使用场景

给div添加黑色遮罩层

在内容后添加箭头符号
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fUefyXma-1632618630556)(C:\Users\xmydd\AppData\Roaming\Typora\typora-user-images\image-20210915154142116.png)]$

<style>
    .phone::before{
        content:"\E623";
    }
</style>

注意:

before和after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
语法: element:before{}
before和after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样,权重为1

4. css3盒子模型 - border-box

CSS3之前，我们给盒子添加padding、border，都会撑开盒子增加盒子的宽高
CSS3中可以通过 box-sizing来指定盒模型，有2个值: 即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
- box-sizing: content-box盒子大小为width + padding+ border(以前默认的)
- box-sizing: border-box盒子大小为width
如果盒子模型我们改为了box-sizing: border-box ，那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)

今天会下雨吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5和css3部分新特性

1.HTML5新特性新特性都有兼容性问题，基本IE9+以上版本的浏览器才支持针对以前的不足，增加了一些新的标签，新的表单，新的表单属性1.1 新增语义化标签- <header>：头部标签- <nav>：导航标签- <active>：内容标签- <section>：定义文档某个区域- <aside>：侧边栏标签- <footer>：尾部标签没有添加语义化标签前，我们需要写一个导航栏，侧边栏这些都是用div来实现
复制链接

扫一扫