HTML5 学习笔记
一.什么是HTML5
万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,具有新的元素,属性和行为。
相比旧版本HTML5具有更大的技术集 允许更多样化和强大的we哪个站和应用程序
增加了 语义特性 本地存储特性 设备兼容特性 链接特性 网页多媒体特性 三维 图形一级特效特性 性能与集成特性 css3特性
1.1新增的语义标签
HTML中的div和span等一些标签 对搜索引擎来说 是没有语义的，就是一个普通标签。
<header>:头部标签 浏览器知道这个表示头部 以前<div class = "header">没有语义
<nav>:导航标签 以前 <div class = "nav">
<article>:内容标签
<section>:块级标签 同 <div>但是多了语义
<aside>:侧边栏标签 以前 <div class = "aside">
<footer>:尾部标签 以前 <div class = "footer">
注意:在IE9中要把这些标签变成display:block 块级元素 因为在IE9中被当成了行内元素 主要是针对移动端 PC端比较少用 因为兼容性差
代码示例:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML5新增语义标签</title> <style> header, nav, section, footer { /* display: block;兼容IE9 */ display: block; height: 120px; background-color: pink; margin: 10px; } </style> </head> <body> <header> 头部标签 </header> <nav> 导航标签 </nav> <section> 块级标签 和div 差不多 但是在浏览器中有了语义 可以和div相互包裹 </section> <footer> 尾部标签 </footer> </body> </html>
1.2 新增的多媒体语义
audio 示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>多媒体标签</title> <style> </style> </head> <body> <!-- 音频 --> <!-- controls:controls 如果出现则向用户展示控制控件 比如播放按钮 --> <!-- autoplay:autolay 如果出现该属性 则音频就绪后马上播放 --> <!-- loop : loop 如果出现该属性 则音频播放结束后 会重新播放--> <!-- 谷歌和火狐把自动播放给禁用了 不支持autoplay IE9可以 加了muted就可以自动播放(静音播放)--> <!-- src 音频文件地址 --> <audio src="../media/snow.mp3" controls="controls" autoplay="autolay" loop="loop" muted="muted"></audio> <!-- 因为不同的浏览器 支持的格式不同 解决方案是:准备多个格式的音频浏览区 --> <audio controls="controls"> <source src="../media/snow.mp3" type="audio/mpeg"> <source src="../media/snow.ogg" type="audio/ogg"> <!-- 如果还不支持 --> 您的浏览器版本过低 不支持 </audio> <!-- --> <!-- <video src=""></video> --> </body> </html>
video 示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>视频标签</title> <style> video { width: 200px; } </style> </head> <body> <!-- video 属性 --> <!-- autoplay:autoplay 视频自动播放 --> <!-- controls:controls 显示播放控件 --> <!-- width 设置播放器宽度 --> <!-- height 设置播放器高度 --> <!-- loop:loop 循环播放 --> <!-- preload:preload 是否等加载完再播放 如果有了autoplay 就自动忽略此属性--> <!-- src 视频文件地址 --> <!-- poster:imageurl:加载等待的画面图片 如果不自动播放 会显示图片 点击播放图片消失--> <!-- muted:muted 静音播放 --> <!-- 同样的谷歌和火狐禁掉了自动播放功能 但是如果添加了静音属性 就可以 --> <video src="../media/video.mp4" controls="controls" autoplay="autoplay" muted="muted" loop="loop" poster="../img/pig.jpg"></video> <!-- 照顾兼容性 --> <video> <source src="../media/video.mp4" type="video/mp4" /> <source src="../media/video.ogg" type="video/ogg" /> <!-- 如果还不支持 --> 浏览器版本过低 不支持播放 </video> </body> </html>
音频的格式支持情况
视频的支持情况
1.3 新增的input 表单
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 5px; padding: 0; } li { list-style: none; } </style> </head> <body> <!-- 新增的类型 --> <!-- type = "eamail" 限制用户输入email类型 --> <!-- type = "url" 限制用户输入必须为URL类型--> <!-- type ="date" 限制用户输入的必须为日期类型--> <!-- type = "time" 限制用户输入的必须为时间类型 --> <!-- type = "week" 限制用户输入的必须为周类型 --> <!-- type = "month" 限制用户输入的必须为月类型 --> <!-- type = "number" 限制用户输入的必须为数字类型 --> <!-- type = "tel" 限制用户输入的必须为手机号码--> <!-- type = "search" 搜索框 --> <!-- type = "color" 生成一个颜色选择表单 --> <form action=""> <ul> <li> <input type="email" /> <input type="submit"> </li> <li> <input type="url"> <input type="submit"> </li> <li> <input type="date"> </li> <li> <input type="time"> </li> <li> <input type="number" /> </li> <li> 手机号码 <input type="tel"> </li> <li> 搜索框:<input type="search"> </li> <li> <input type="color" /> </li> </ul> </form> </body> </html>
1.4新增的表单属性
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>新增表单属性</title> </head> <body> <!-- required:required 表单拥有该属性表示其内容不能为空 必填 --> <!-- placeholder:提示文本 表单的提示信息 存在默认值将不显示--> <!-- autofocus:autofocus 自动聚焦属性 页面加载完成后自动聚焦到指定表单 --> <!-- autocomplete：off/on 当用户在字段开始键入时 浏览器基于之前键入过的值，应该显示出在字段中填写的选项 默认已经打开 如autocomplete:on 关闭 autocomplete:off 需要放在表单内同时加上name属性 同时提交成功 --> <!-- multiple:multiple 可以多选文件提交 --> <form action=""> <!-- 内功不能为空 提交时会提示 --> 用户名: <input type="text" required="required" placeholder="请填写用户名"> <br> <!-- 光标定位到密码框 --> 密码: <input type="text" autofocus="autofocus"> <br> <!-- 提示输入 如果你上次输入过一个值 再次输入有相同前缀的内容是 会提示上次输入的内容 前提是 输入过的值已经提交过一次 --> 确认: <input type="text" name="uername" autocomplete="on"> <br> <input type="submit" value="提交"> </form> <form action=""> <!-- 不加multiple 一次只能选择一个文件 添加multiple可以选择多个文件 --> 上传头像: <input type="file" multiple="multiple" /> </form> </body> </html>
