HTML5
一、什么是HTML5
1.1 HTML5 简介
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,作为新HTML语言,具有新的元素、属性和行为
XHTML可扩展超文本标记语言
是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求,基础班学习的是XHTML
HTML5
有更大的技术集,允许更多样化和强大的网站和应用程序
增加了新特性:语义特性,本地存储特性,设备兼容特性,链接特性,网页多媒体特性,三维、图形以及特效特性,性能与集成特性,css特性
1.2 广义的HTML5
广义的HTML5是HTML5本身+CSS+JavaScript
HTML5的一些特性仍让不被某些浏览器支持,但是他是一种发展趋势
二、HTML5新增语义化标签
- <header>:头部标签
- <nav>:导航标签
- <article>:内容标签
- <section>:块级标签
- <aside>:侧边栏标签
- <footer>:尾部标签
注意:以前经常使用的div标签是没有语义的,
- 这种语义化标准主要针对搜索引擎的
- 这些新标签也可以使用多次的
- 在IE9中,需要把这些元素转换为块级元素
- 其实我们移动端更喜欢使用这些标签
三、HTML5新增多媒体标签
音频:<audio>
视频:<video>
3.1<audio>音频标签
1.音频格式
2.使用方法
<audio src="./media/snow.mp3" controls autoplay></audio>
<!-- 因为不同浏览器支持不同的格式,所以我们采取的方案是这个音频准备多个文件 --> <audio controls> <source src="./media/snow.mp3" type="audio/mpeg" /> <source src="./media/snow.ogg" type="audio.mpeg" /> 您的浏览器不支持audio播放 </audio>
3.常见属性
谷歌浏览器禁用了autoplay属性
3.2 <video>视频标签
1.视频格式
2.语法格式
<video src="./media/video.mp4" controls="controls"></video>
3. 参数属性
4. 使用方法
<!-- <video src="./media/video.mp4" controls="controls"></video> --> <!-- 谷歌浏览器禁用了自动播放功能,如果想自动播放,需要添加 muted 属性 --> <video controls="controls" autoplay muted loop poster="./media/pig.jpg"> <source src="./media/video.mp4" type="video/mp4"> <source src="./media/video.ogg" type="video/ogg"> </video>
多媒体标签总结
- 音频标签与视频标签使用基本一致
- 多媒体标签在不同浏览器下情况不同,存在兼容性问题
- 谷歌浏览器把音频和视频标签的自动播放都禁止了
- 谷歌浏览器中视频添加 muted 标签可以自己播放
- 注意:重点记住使用方法以及自动播放即可,其他属性可以在使用时查找对应的手册
四、HTML5新增input表单、表单属性
这些HTML5 的表单大量应用于移动端,PC段不是很常用
<input type="email">
新增属性
placeholder和value属性的区别在于:placeholder的字体是灰色的,而且点击输入框可以直接定位到开始,而value属性字体是黑色的,点击框框里面的内容要手动清除
<form action=""> 用户名:<input type="text" name="username" autocomplete="on"> <input type="submit" value="提交"> </form>
相关推荐
一个客户要求给网站添加一个背景音乐,我用的是html5添加网页背景音乐的代码,在此记录一下以后有用。html5方法二:<videocontrols=""autoplay=""name="media&q
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...