HTML5
HTML5
的概念与定义HTML5
定义了 HTML
标准的最新版本,是对 HTML
的第五次重大修改,号称下一代的 HTML
HTML
语言,定义了新的标签、特性和属性HTML5
、CSS3
、javascript
, 这也是广义上的 HTML5
HTML5
拓展了哪些内容2D
、3D
CSS3
特性HTML5
的现状
绝对多数新的属性,都已经被浏览器所支持,最新版本的浏览器已经开始陆续支持最新的特性,
总的来说:HTML5
已经是大势所趋
HTML5
新增标签header
— 头部标签nav
— 导航标签article
— 内容标签section
— 块级标签aside
— 侧边栏标签footer
— 尾部标签
- 语义化标签主要针对搜索引擎
- 新标签可以使用一次或者多次
- 在 `IE9` 浏览器中,需要把语义化标签都转换为块级元素
- 语义化标签,在移动端支持比较友好,
- 另外,`HTML5` 新增的了很多的语义化标签,随着课程深入,还会学习到其他的
audio
video
audio
标签说明5、audio 代码演示
<body>
<!-- 注意:在 chrome 浏览器中已经禁用了 autoplay 属性 -->
<!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
<!--
因为不同浏览器支持不同的格式,所以我们采取的方案是这个音频准备多个文件
-->
<audio controls>
<source src="./media/snow.mp3" type="audio/mpeg" />
</audio>
</body>
CSS3
属性选择器(上)CSS3
属性选择器(下)nth-child
参数详解even
偶数、odd
奇数
<style>
/* 偶数 */
ul li:nth-child(even) {
background-color: aquamarine;
}
/* 奇数 */
ul li:nth-child(odd) {
background-color: blueviolet;
}
/*n 是公式,从 0 开始计算 */
ul li:nth-child(n) {
background-color: lightcoral;
}
/* 偶数 */
ul li:nth-child(2n) {
background-color: lightskyblue;
}
/* 奇数 */
ul li:nth-child(2n + 1) {
background-color: lightsalmon;
}
/* 选择第 0 5 10 15, 应该怎么选 */
ul li:nth-child(5n) {
background-color: orangered;
}
/* n + 5 就是从第5个开始往后选择 */
ul li:nth-child(n + 5) {
background-color: peru;
}
/* -n + 5 前五个 */
ul li:nth-child(-n + 5) {
background-color: tan;
}
</style>
nth-child
和 nt-of-type
的区别<style>
div :nth-child(1) {
background-color: lightblue;
}
div :nth-child(2) {
background-color: lightpink;
}
div span:nth-of-type(2) {
background-color: lightseagreen;
}
div span:nth-of-type(3) {
background-color: #fff;
}
</style>
nth-child
选择父元素里面的第几个子元素,不管是第几个类型nt-of-type
选择指定类型的元素2D
转换之 translate
2D
转换2D
转换是改变标签在二维平面上的位置和形状
translate
rotate
scale
translate
语法transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
2D
的移动主要是指 水平、垂直方向上的移动translate
最大的优点就是不影响其他元素的位置translate
中的100%单位,是相对于本身的宽度和高度来进行计算的div {
background-color: lightseagreen;
width: 200px;
height: 100px;
/* 平移 */
/* 水平垂直移动 100px */
/* transform: translate(100px, 100px); */
/* 水平移动 100px */
/* transform: translate(100px, 0) */
/* 垂直移动 100px */
/* transform: translate(0, 100px) */
/* 水平移动 100px */
/* transform: translateX(100px); */
/* 垂直移动 100px */
transform: translateY(100px)
}
2D 转换 rotate
2D
旋转指的是让元素在二维平面内顺时针或者逆时针旋转rotate
语法
/* 单位是:deg */
transform: rotate(度数)
rotate
里面跟度数,单位是 deg
img:hover {
transform: rotate(360deg)
}