一、HTML5 的新特性

1.新增语义化标签

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是 **IE9+ 以上版本的浏览器**才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

注意：只需要关注开发常用的新特性即可。

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的
<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>

发展到了HTML5后，新增了一些语义化标签，这样的话更加有利于浏览器的搜索引擎搜索，也方便了网站的seo（Search Engine Optimization，搜索引擎优化），下面就是新增的一些语义化标签

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

2.新增视频标签

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

1. 视频<video>支持格式--3种

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

2.视频<video>语法 ：

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

3. 视频<video>——常见属性

3.新增音频标签

1. 音频<audio>支持格式--3种

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

2. 音频<audio>语法

语法： 
<audio src="文件地址" controls="controls"></audio>
 < audio controls="controls" ><source src="happy.mp3" type="audio/mpeg" ><source src="happy.ogg" type="audio/ogg" >您的浏览器暂不支持 <audio> 标签。</ audio>

3. 音频<audio> 常见属性

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

4. 多媒体标签总结

  • 音频标签和视频标签使用方式基本一致
  • 浏览器支持情况不同
  • 谷歌浏览器把音频和视频自动播放禁止了
  • 我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）
  • 视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

4.新增input表单--常用的3个

  • 重点记住： number tel search 这三个

5.新增表单属性--常用的2个

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

二、CSS3 的新特性

1.CSS3新增属性选择器

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

1.1CSS3新增属性选择器（上）

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

中括号某个属性，以等于号是某个值，以尖括号开头，以钱收尾，以星号表示任意的。
注意：类选择器、属性选择器、伪类选择器，权重为 10。

1.2.CSS3新增属性选择器（下） 

2.CSS3新增结构伪类选择器---选择第n个元素

结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素。
注意：类选择器、属性选择器、伪类选择器，权重为 10。
nth-child（n）
选择某个父元素的一个或多个特定的子元素（重点）
  • n 可以是数字，关键字和公式
  • n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始…
  • n 可以是关键字：even 偶数，odd 奇数
  • n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )

2.1.CSS3新增nth-child选择器(上）

2.2.CSS3新增nth-child选择器(下）

之前的参数是n，现在的参数是2n，也就是偶数了。还有5n了。

2.3.nth-child和nth-of-type的区别

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

2.4.小结 ：

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

3.伪元素选择器（重点）

1.CSS3新增伪元素选择器使用场景和由来

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
注意：
  • before 和 after 创建一个元素，但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
  • 语法： element::before {}
  • before 和 after 必须有 content 属性
  • before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样，权重为 1

2.CSS3新增伪元素选择器基本使用

3.伪元素选择器使用场景1：伪元素字体图标

阿里的先link，然后在元素中fon-family，最后在content中吧&#x转换为\就行了。

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

4.伪元素选择器使用场景2：仿土豆效果

鼠标放上去会看到黑色半透明的效果。

5.伪元素选择器使用场景3：伪元素清除浮动--4种方法

1. 额外标签法也称为隔墙法，是 W3C 推荐的做法。
2. 父级添加 overflow 属性
3. 父级添加after伪元素
4. 父级添加双伪元素
后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。
1. 额外标签法也称为隔墙法，是 W3C 推荐的做法。
注意：
要求这个新的空标签必须是块级元素。
2. 父级添加 overflow 属性
3. 父级添加after伪元素
后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。 
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden;
}
4. 父级添加双伪元素 
 .clearfix:before,.clearfix:after {content:"";display:table;
}.clearfix:after {clear:both; }

二、CSS3 的新特性

1.CSS3盒子模型border--不会撑大盒子

CSS3中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box，border-box ，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

  1. box-sizing：content-box 盒子大小为 width + padding + border （以前默认的）
  2. box-sizing: border-box 盒子大小为 width

如果盒子模型我们改为了 box-sizing： border-box ，那padding 和 border就不会撑大盒子了（前提 padding 和 border 不会超过 width 宽度）

2.CSS3 其他特性（了解）

1. 图片变模糊

CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
css3滤镜filter使用，也就是filter属性后面接一个blur（）函数。 
 filter: 函数(); 例如： filter: blur(5px); blur模糊处理 数值越大越模糊

2. 计算盒子宽度 width: calc 函数

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

width: calc(100% - 80px);
括号里面可以使用 + - * / 来进行计算。
CSS3 还增加了一些 动画 2D 3D 等新特性，我们后续会继续学习。

3.CSS3 过渡（重点）

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或
JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：
是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本）
但是不会影响
页面布局。
我们现在经常和 :hover 一起 搭配使用。
语法： 
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
1.属性 ：
想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都
变化过渡， 写一个all 就可以。
2. 花费时间：
单位是 秒（必须写单位） 比如 0.5s
3. 运动曲线：
默认是 ease （可以省略）
4.何时开始 ：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
注意：前面2个属性是必须要写的。

1.CSS3过渡练习---进度条案例

4.广义的HTML5（了解）

1. 广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。
2. 这个集合有时称为 HTML5 和朋友，通常缩写为 HTML5 。
3. 虽然 HTML5 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势。
4. HTML5 MDN 介绍：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

h5和css3新特性相关推荐

  1. H5和CSS3新特性总结

    说到H5C3会不会觉得东西好多啊,今天就整理了一份总结性的内容: CSS3选择器有哪些? 答:属性选择器.伪类选择器.伪元素选择器. CSS3新特性有哪些? 答:1.颜色:新增RGBA,HSLA模式 ...

  2. h5新标签和css3新特性

    h5新标签和css3新特性 一.h5布局元素 二.css3新增样式 1.边框圆角 2.阴影 3.形变:旋转.缩放.位移 4.transform-origin 属性 三.过渡效果 四.动画效果 1. k ...

  3. H5和C3新特性(完整版)

    css3新特性 选择器 背景和边框 文本效果 2D/3D 转换 - 变形(transform).过渡(transtion).动画(animation) 1.选择器 :last-child /* 选择元 ...

  4. HTML5和CSS3新特性(完整版)

    css3新特性 选择器 背景和边框 文本效果 2D/3D 转换 - 变形(transform).过渡(transtion).动画(animation) 1.选择器 :last-child /* 选择元 ...

  5. Html5、CSS3新特性

    h5的新特性? 1.新增一些语义化标签  <article> <section> <aside><header> <footer><n ...

  6. CSS3新特性——新增选择器，2D/3D转换，动画

    CSS3新特性--新增选择器,2D/3D转换,动画 欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页 ...

  7. web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性

    盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...

  8. Html5与CSS3新特性

    H5新特性 新增的语义化标签 <header> : 头部标签 <nav> : 导航标签 <article> : 内容标签 <main> : 主体标签 & ...

  9. 前端面试题 | HTML5新特性有哪些？CSS3新特性有哪些？

    H5新特性 拖拽释放(Drag and drop)API 语义化更好的内容标签(header,nav,footer,aside,article,section) 音频.视频API(audio,vide ...

最新文章

  1. (伪)datagridview里面id的自增长
  2. ORA-04030: 在尝试分配...字节(...)时进程内存不足的原因分析解决方法
  3. 成功解决return tf.nn.softmax(x, axis=axis) TypeError: softmax() got an unexpected keyword argument 'axis
  4. JZOJ 5638. 【NOI2018模拟4.8】IIIDX
  5. Java_案例实例2.约瑟夫环问题
  6. secureCRT修改鼠标颜色
  7. 在Xcode6中搭建Python开发环境
  8. ORM中的Model与DDD中的DomainModel
  9. svn php改客户端密码_记录VisualSVNServer配置在线密码修改功能
  10. 初学者注意：你需要明白编程的意义所在，否则是学不好编程的！
  11. Linux bash符号及含义,Linux下用bash命令执行名称中带有(符号的目录注意事项
  12. 六安市事业单位计算机基础知识,最全的事业单位考试计算机基础知识试题[1] 2...
  13. SQL——后台分页（C#，mysql）
  14. python有道云笔记_Python自动同步有道云笔记到Hexo
  15. 应用于高速计数器的编码器基础知识介绍
  16. js原型、原型链、原型链继承详解
  17. antv g2字体阴影_antv g2 notes
  18. A State-of-the-Art Survey on Deep Learning Theory and Architectures论文翻译分析
  19. Mendix学习（2021年7月28日）
  20. 一个淘宝店主真实的开店经历

热门文章

  1. DB2 修改表字段长度
  2. 自定义开发苹果手机显示汽车小组件
  3. Win32API实现的欢乐小程序
  4. 游戏手机排行榜2023 游戏手机哪款最好用
  5. 计算机的诊断策略服务怎么打开6,win7诊断策略服务已被禁用的最佳解决方法
  6. Oracle给锁定用户解锁
  7. mac键盘乱码按哪三个键_大家应该知道的十大macOS键盘快捷键
  8. Hicharts引入及水印去除
  9. iOS 设计圆形头像
  10. Android自定义view摇杆,Android自定义View实现游戏摇杆键盘的方法示例