HTML5
2020-10-29 本文已影响0人
amanohina
HTML5简介
- 万维网的核心语言，HTML第五次修改，取代HTML4与XHTML的新一代版本
新变化
- HTML5的设计目的是为了在移动设备上支持多媒体
- 新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形、特效特性，性能与集成特性，CSS3特性
- 废弃一些元素和属性比如font，center等等
HTML5的优势和劣势
优势
1.提高可用性和改进用户体验
2.更好的语义化标签
3.带来更多的多媒体元素（音视频）
4.替代flash和silverlight
5.对于SEO搜索引擎相当的友好
6.将被大量应用于移动应用程序和游戏
7.可移植性好
劣势
1.此标准没能很好的被PC端浏览器所支持
2.IE9以下的浏览器几乎都不兼容
前景
- 移动开发优先
- 游戏开发
广义与狭义的HTML5
- 广义上来说：HTML5=HTML5本身+CSS3+JavaScript技术
- 狭义上来说：HTML的第五个版本
HTML5新增语义化标签
标签语义化
- 以前制作网页布局，基本都用div来做。div就是一个普通的块级标签，对于SEO来说是没有意义的
新增的语义化标签
- <header>：头部标签
- <nav>：导航标签
- <main>：主体标签
- <article>：独立的内容标签
- <section>：区段标签
- <aside>：侧边栏标签
- <footer>：尾部标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
header,nav,article,aside,main,footer {
display: block;
}
header {
width: 1000px;
height: 100px;
margin: 0 auto;
background-color: yellowgreen;
}
nav {
width: 1000px;
height: 50px;
margin: 10px auto 0;
background-color: yellowgreen;
}
main {
width: 1000px;
height: 400px;
margin: 10px auto 0;
background-color: yellowgreen;
}
main aside {
float: left;
width: 150px;
height: 300px;
margin-right: 10px;
background-color: pink;
}
main article {
float: left;
width: 840px;
height: 400px;
background-color: pink;
}
footer {
width: 1000px;
height: 80px;
margin: 10px auto 0;
background-color: yellowgreen;
}
</style>
</head>
<body>
<header>头部</header>
<nav>导航</nav>
<main>
<aside>侧边栏</aside>
<article>主体内容</article>
</main>
<footer>底部</footer>
</body>
</html>
语义化标签给出的效果
注意事项
- 这种语义化标准主要针对搜索引擎的
- 这些新标签页面中可以使用多次的
-
在IE9中，我们需要把这些元素转换为块级元素
不转换为块级元素会出现加载问题
- 移动端更需要使用这些标签
- 更多其他标签：
HTML5新增多媒体标签
多媒体标签
- 音频：<audio>
- 视频：<video>
替代落后的flash和其他的浏览器插件
<audio>音频标签
- 不使用插件的情况下也是可以播放原生的音频格式文件的，但是支持格式是有限的
格式 MIME-type IE9 Firefox3.5 opera10.5 chrome3.0 Safari3.0 Ogg audio/ogg √ √ √ MP3 audio/mpeg √ √ √ Wav audio/wav √ √ √
<audio>音频标签语法格式
<audio src="文件url" controls="controls"></audio>
兼容写法
<audio controls="controls">
<source src="happy.mp3" type="audio/mpeg">
<source src="happy.ogg" type="audio/ogg">
您的浏览器不支持audio播放音频标签
</audio>
<audio>音频标签常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 出现该属性，音频在就绪了之后自动播放 |
| controls | controls | 出现该属性，向用户显示控件，进度条，播放键，音量等 |
| loop | loop | 出现该属性，结束之后重新播放，循环 |
| preload | preload | 出现该属性，音频在页面加载时进行加载，预备播放，如果设置了autoplay属性则忽略此属性 |
| src | url | 要播放的音频的url |
<video>视频标签
- 不使用插件的情况下也是可以播放原生的视频格式文件的，但是支持格式是有限的
格式 MIME-type IE9 Firefox3.5 opera10.5 chrome3.0 Safari3.0 Ogg video/ogg × 3.5+ 10.5+ 5.0+ × MP4 video/mp4 9.0+ × × 5.0+ 3.0+ WebM video/webm × 4.0+ 10.6+ 6.0+ ×
<video>音频标签语法格式
<video src="文件url" controls="controls"></video>
兼容写法
<video controls="controls"，width="300px">
<source src="happy.mp4" type="video/mp4">
<source src="happy.ogg" type="video/ogg">
您的浏览器不支持video播放视频标签
</video>
<video>视频标签常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放(chrome需要添加muted解决自动播放问题) |
| controls | controls | 向用户显示控件，进度条，播放键，音量等 |
| loop | loop | 循环播放 |
| preload | auto（预先加载）none（不应加载） | 预备播放，如果设置了autoplay属性则忽略此属性 |
| src | url | 要播放的音频的url |
| width | pixels（像素） | 播放器宽度 |
| height | pixels（像素） | 播放器高度 |
| poster | Imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
总结
- 音频视频标签使用是基本一致的
- 浏览器支持情况不同
- 视频可以添加muted静音播放，但是音频不可以
- 视频标签是重点，经常设置自动播放，循环，设置大小属性，不使用controls控件
HTML新增表单标签
输入标签
复习一下已学标签类型
已学表单标签类型
H5新增表单类型
<datalist>标签
- <datalist>标签规定了<input>元素可能的选项列表
- <datalist>元素包含了一组<option>元素，表示预定义可选择值，在<input>元素输入过程中，会自动响应<option>元素的值
- 绑定的<input>标签必须设置list属性，属性值等于<datalist>标签的id属性值
城市：<input type="text" list="list01">
<!-- 预定义一些选项 -->
<datalist id="list01">
<option value="广州">gz</option>
<option value="深圳">sz</option>
<option value="北京">bj</option>
<option value="上海">
</datalist>
表单属性
新增表单属性
新增表单属性
