pink老师HTML5+CSS3学习笔记 | DAY17

目录

html5新特性

①新增语义化标签

②新增多媒体标签

③新增input标签

④新增表单属性

---

html5新特性

这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持；

①新增语义化标签

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

注意：

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

移动端更喜欢使用这些标签；

例如：

/* css */
* {
	padding: 0;
	margin: 0;
}

body {
	width: 1200px;
	margin: 0 auto;
	font-size: 24px;
	color: #fff;
}

header {
	width: 100%;
	height: 100px;
	line-height: 100px;
	text-align: center;
	background-color: seagreen;
}

nav {
	width: 100%;
	height: 100px;
	margin-top: 10px;
	line-height: 100px;
	text-align: center;
	background-color: seagreen;
}

article {
	float: left;
	width: 595px;
	height: 300px;
	margin-top: 10px;
	line-height: 150px;
	text-align: center;
	background-color: seagreen;
}

section {
	width: 50%;
	height: 100px;
	margin: 0px auto;
	line-height: 100px;
	text-align: center;
	background-color: teal;
}

aside {
	float: left;
	width: 595px;
	height: 300px;
	margin-top: 10px;
	margin-left: 10px;
	line-height: 150px;
	text-align: center;
	background-color: seagreen;
}

div {
	width: 1200px;
	height: 310px;
}

footer {
	width: 100%;
	height: 100px;
	margin-top: 10px;
	line-height: 100px;
	text-align: center;
	background-color: seagreen;
}

<!-- html -->
<header>header</header>
<nav>nav</nav>
<div>
	<article>
		article
		<section>section</section>
	</article>
	<aside>aside</aside>
</div>
<footer>footer</footer>

②新增多媒体标签

• 音频 : <audio>
• 视频 : <video>

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash 和其他浏览器插件;

<audio>

当前<audio>元素支持三种音频格式:mp3、wav、ogg;

其中ie只支持MP3，safari不支持ogg；（尽量使用mp3格式）；

常见属性：

属性	值	描述
autoplay	autoplay	音频自动播放
controls	controls	显示播放控件
loop	loop	循环播放
src	src	播放音频的url

语法

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

照顾多浏览器或低版本写法：

<audio controls="controls">
	<source src="happy.mp3" type="audio/mpeg">
	<source src="happy.ogg" type="audio/ogg">
	您的浏览器暂不支持 <audio> 标签
</audio>

<video>

当前<video>元素支持三种视频格式:mp4、webm、ogg;其中ie、safari只支持mp4；（尽量使用mp4格式）；

常见属性：

属性	值	描述
autoplay	autoplay	自动播放
controls	controls	显示播放控件
width	像素	设置播放器宽度
height	像素	设置播放器高度
loop	loop	循环插放
preload	auto(预先加载视频) none(不预先加载视频)	是否预加载视频 如果设置了autoplay，则忽略该属性
src	url	视频url地址
poster	Imgurl	为播放视频时的画面图片
muted	muted	静音播放

语法：

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

照顾多浏览器或低版本写法：

<video controls="controls">
	<source src="happy.mp4" type="audio/mp4">
	<source src="happy.ogg" type="audio/ogg">
	您的浏览器暂不支持 <video> 标签
</video>

总结

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

③新增input标签

常见属性：

属性值	描述
type="email"	必须输入email类型
type="url"	必须输入url类型
type="date"	必须输入日期类型
type="time"	必须输入时间类型
type="month"	必须输入月类型
type="week"	必须输入周类型
type="number"	必须输入数字类型
type="tel"	必须输入手机号码
type="search"	搜索框
type="color"	颜色选择表单

④新增表单属性

常见属性：
 

属性	值	描述
required	required	必须属性；内容不能为空
placeholder	文本	表单的提示信息；默认值：不显示
autofocus	autofocus	自动聚焦到指定表单
autocomplete	off、on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项； 需要放在表单内，同时加上 name 展性，同时成功提交； 默认值：on
multiple	multiple	可以多选文件提交

可以通过以下设置方式修改placeholder里面的宇体颜色：

input::placeholder {
	color: pink;
}