HTML5新特性

最新推荐文章于 2024-09-09 17:56:00 发布

一颗没有尽头的心

最新推荐文章于 2024-09-09 17:56:00 发布

阅读量861

点赞数 22

分类专栏： HTML 文章标签： html5 前端 html

本文链接：https://blog.csdn.net/weixin_42376775/article/details/141723777

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.3 HTML5 新增的 input 类型

8.CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化

简单理解：CSS初始化是指重设浏览器的样式。(也称为CSS reset)
每个网页都必须首先进行CSS初始化。

1.HTML5 的新特性

html5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是IE9+以上版本浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
声明：
1.新特性增加了很多，但是我们专注于开发常用的新特性。

1.1 html5新增的语义标签

以前布局，我们基本用div来做。div对于搜索引擎来说，是没有语义的。
<header>:头部标签
<nav>:导航标签
<article>:内容标签
<section>:定义文档某个区域
<aside>:侧边栏标签
<footer>:尾部标签

注意：
1.这种语义化标准主要是针对搜索引擎的
2.这些新标签页面中可以使用多次
3.在IE9中，需要把这些元素转换位块级元素
4.其实，我们移动端更喜欢使用这些标签
5.HTML5 还增加了很多其他标签

1.2 HTML5新增的多媒体标签

新增的多媒体标签主要包含两个：
1. 音频：<audio>
2. 视频：<video>
使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。
HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。

1.视频 video

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

常见属性

1.2 html5新增的多媒体标签

HTML5在不使用插件的情况下，也可以原生的支持音频格式文件的播放，当然，支持的格式是有限的。

2.音频 audio

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

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

常用属性

注意：谷歌浏览器把音频和视频自动播放禁止了

3.多媒体标签总结

1.音频标签和视频标签使用方式基本一致
2.浏览器支持情况不同
3.谷歌浏览器把音频和视频自动播放禁止了
4.我们可以给视频标签添加muted属性来静态播放视频，音频不可以(可以通过javaScript解决)

1.3 HTML5 新增的 input 类型

1.4 html5新增的表单属性

可以通过一下设置方式修改placeholder里面的字体颜色：
input::placeholder{
    color:pink;
}

2.CSS3 的新特性

CSS3 新增选择器

css3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。
1.属性选择器
2.结构伪类选择器
3.伪元素选择器

2.2 属性选择器

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

注意：类选择器、属性选择器、伪类选择器，权重为10。

2.3结构伪类选择器

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

nth-child(n) : 选择某个父元素的一个或多个特定的子元素
1.n可以是数字，关键字和公式
2.n如果是数字，就是选择第n个子元素，里面数字从1开始...
3.n可以是关键字：even偶数，odd奇数
4.n可以是公式 ：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）

区别：
1.nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子，然后看看是否和e匹配。
2.nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E,然后在根据E找到第n个孩子

小结
1.结构伪类选择器一般用于选择父级里面的第几个孩子
2.nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配
3.nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E找到第n个孩子
4.关于 nth-child(n) 我们要知道n是从0开始计算的，要记住常用的公式
5，如果是无序列表，我们肯定用nth-child更多

2.4 伪元素选择器(重点)

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

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

p::before{
    poistion: absolute;
    right:20px;
    top:10px;
    content: '\e91e';
    font-size:20px;
}

1.额外标签法也称为隔离法，是W3C推荐的做法
2.父级添加overflow 属性
3.父级添加after伪元素
4.父级添加双伪元素

2.5 CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方法就发生了改变。
可以分成两种情况：
1. box-sizing:content-box 盒子大小为width + padding + border (以前默认的)
2.box-sizing:border-box 盒子大小为width
如果盒子模型我们改为lebox-sizing:border-box,那么padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)

2.6 CSS其他特性(了解)

1.图片变模糊
2.计算盒子宽度width:calc函数

CSS3滤镜filter:
filter CSS属性将模糊活颜色偏移等图形效果应用于元素。

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

CSS3 calc 函数：
calc() 此时CSS函数让你在声明CSS属性值时执行一些计算。
width:calc(100% - 80px);

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

2.7 CSS3过 (重点)

过渡(transition)是cSS3中具有颠覆性的特征之一，我们可以在不使用flash动画或javaScript的情况下，当元素从一种变换为另一种样式时为元素添加效果。
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持(ie9以下版本)但是不会影响页面布局。
我们现在经常和: hover 一起搭配使用。

transition: 要过渡的属性 话费时间 运动曲线 何时开始；
1.属性：想要变化的css属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all可以的。
2.话费时间：单位是秒 (必须写单位)比如0.5s
3.运动曲线：默认是 ease(可以省略)
4.何时开始：单位是秒 (必须写单位) 可以设置延迟触发时间 默认是0s (可以省略)

记住过渡的使用口诀：谁做过渡给谁加