导图社区 Web前端基础Day12
这是一个关于Web前端基础Day12的思维导图,介绍了H5新增表单元素及属性、 新增的多媒体元素、H5新增的语义元素等。
编辑于2024-05-01 00:05:59Day10
H5新增的语义元素
section:网页的区段或文章中的章节
语法:<section></section>
作用:定义文档中的节(页面中内容的区段、文章中的章节)。一个section元素通常由内容及标题组成。
典型应用:文章中的章节、 选项卡式对话框中的各个选项卡式页面
注意:样式上的分区用div,结构 上的分区用section
article:独立的结构
语法:<article></article>
作用:元素表示文档、页面、应用或网站中的独立结构,可以成为可独立分配的或可复用的结构。
典型应用:论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目
注意: 每个article通常包括标题(h1 - h6元素)作为article元素的子元素。 当article元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的article元素可嵌套在代表博客文章的article元素中。可能包含一个或多个section。
nav:导航链接部分
语法:<nav></nav>
作用:定义导航链接的部分
典型应用:主导航、侧边栏导航、页内导航、菜单、面包屑导航、分页、目录和索引等
aside:侧边栏(附属信息部分)
语法:<aside></aside>
语义:定义当前页面或文章的附属信息部分
典型应用:侧边栏、标注框、广告等
header:头部
语法:<header></header>
语义:定义整个文档或文档中一个节段的的头部(页眉)。 作为文档的头部通常搜索表单、相关的logo、站点的名称以及水平菜单(如果有的话)等。 作为一个节段的头部,通常包含了节段的标题和作者名字等。
典型应用:整个页面的头部、文章页的包含标题部分的头部。
footer:底部
语法:<footer></footer>
作用:定义文档或节的页脚。 作为文档的页脚通常会包含版权信息和法律声明以及一些其他链接。 作为节段的页脚,可能包含了节段的发布数据、许可声明等。
典型应用:网页中的版权信息,相关阅读链接
article, section, aside, and nav 可以拥有它们自己的footer!
兼容问题
问题概述 IE8浏览器中还没有添加对HTML5新标签的支持,当在页面中使用HTML5新标签时,新标签被当作错误 处理(IE浏览器中演示解析结果)。
解决方案
方法1
通过document.createElement(tagName)方法即可让浏览器识别新标签,浏览器支持新标签后,还可以为新标签添加CSS样式。
<!--[if lt IE 9]> <script> document.createElement("header"); document.createElement("footer"); </script> <![endif]-->
由于创建出来的元素是内联元素,所以需要转换成块级,宽度和高度才能生效。
header,footer,nav,article,section,aside{ display: block;}
方法2
使用封装好的插件html5shiv.js解决。 html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。
<!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]-->
说明 条件注释作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它 可以使用本地文件也可以使用外部资源库 Google 资源库:(不稳定)http://html5shiv.googlecode.com/svn/trunk/html5.js 百度静态资源库:(国内推荐使用)http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js
代码
1、h5兼容处理 h5新增的结构化标签在ie8-以下就不能正常识别 处理方案: (1)通过js新增元素的方式进行兼容处理 注意:通过js创建的元素默认是行级元素的效果,不支持宽高的 (2)通过谷歌提供的插件html5shiv.js来进行兼容处理
--> <!-- <header></header> --> <div id="wrap"></div> <!-- 写js代码时,需要script标签 --> <script> // js代码 // 1、创建元素 var header = document.createElement('header'); // 2、将创建出来的header标签添加到wrap盒子中去 // 获取元素 var wrap = document.getElementById('wrap'); // 追加 wrap.appendChild(header); // 创建footer标签,添加到wrap盒子中去 var footer = document.createElement('footer'); wrap.appendChild(footer); </script>
通过插件处理兼容问题 <!-- <script src="./html5shiv.js"></script> --> <!--[if lte ie 8]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]-->
css条件hack <!--如果大于ie6的浏览器让h3标签显示一个红色的文字颜色--> <!--[if gt ie 6]> <style> h3 {color:red;} </style> <![endif]--> </head> <body> <!-- 标准浏览器会当作注释进行处理,只有ie浏览器机器特定的版本才能看到css hack --> <!-- 只有在ie8中才能看到p标签中的这句话 --> <!-- 条件hack中 lt 小于 lte 小于等于 gt 大于 gte 大于等于 ! 非 --> <!--[if ie 8]> <p>今天是6月15日</p> <![endif]--> <!-- 小于ie9都出现这个a标签 --> <!--[if lt ie 9]> <a href="#">a标签</a> <![endif]--> <!-- 除了ie8以外的其他ie浏览器都可以看到这个div标签 --> <!--[if ! ie 8]> <div>div</div> <![endif]--> <h3>标题</h3>
H5新增表单元素及属性
精简
H5新增的input类型
search搜索域 <input type="search">
作用:搜索域,比如站点搜索或 Google 搜索
tel电话号码输入域 <input type="tel">
url域 作用: URL地址的输入域 <input type="url">
email域 作用:包含 e-mail地址的输入域 <input type="email">
说明 在提交表单时,会自动验证 email 域的值 移动端:改变触摸屏键盘来配合它(添加 @ 和 .com 选项)
number数值输入域 <input type="number">
相关属性 通过以下属性设定对所接受的数字的限定: max:定义允许的最大值 min:定义允许的最小值 step:定义合法的数字间隔 value:定义默认值
range一定范围内的数值输入域 <input type="range">
作用:用于包含一定范围内数字值的输入域,显示为滑动条
通过以下属性设定对所接受的数字的限定 max:定义允许的最大值 min:定义允许的最小值 step:定义合法的数字间隔 value:定义默认值
color颜色输入域 作用:颜色输入域,用于选取颜色
date日期 (年月日) <input type="date">
time时间 <input type="time">
datetime-local本地时间 <input type="datetime-local">
H5 新增表单属性
placeholder:输入提示 <input type="text" placeholder="请输入手机号码">
min、max 和 step 属性 作用:适用于range和 number类型 max 属性规定输入域所允许的最大值 min 属性规定输入域所允许的最小值 step 属性为输入域规定合法的数字间隔
<input type="number" value="4" min="2" max="10" step="2">
autofocus:自动获得焦点
autocomplete:自动完成(自动补全) 取值:off--关闭 on--开启
required:必填项
pattern:用于验证 input 域的模式
<input type="text" name="testname2" pattern="[0-9]"> <input type="submit" value="提交">
multiple:选择多个值 用于:email域 file域
form:规定输入域所属的表单
子主form 属性必须引用所属表单的 id 引用一个以上的表单,请使用空格分隔的列表 题
<form action="#" id="form1"> <input type="text" name="username"/> </form> <input type="reset" form="form1">
新增的多媒体元素
video:视频标签
语法: <video src="video/movie.mp4"> 您的浏览器已out,不支持欣赏小音乐 </video>
属性 src="" 音频资源地址 controls 显示播放、暂停控件 loop 循环播放 muted 静音 autoplay 自动播放 width="500" height="1000" 宽高只指定一个,另一个按原比例等比缩放,(播放控件的大小) poster = " 视频封面"
audio:音频标签--同上基本一致
、属性 src="" 音频资源地址 controls 显示播放、暂停控件 loop 循环播放 muted 静音 autoplay 自动播放
source标签
<video controls loop autoplay> <source src="audio/butterfly.ogg" type="audio/ogg"> <source src="audio/movie.mp4" type="audio/mpeg"> <source src="audio/PPAP.webm" type=" audio/wav"> 您的浏览器已out,不支持欣赏小音乐 </video>
标签说明: 允许使用source标签 引入多个音频资源 浏览器会播放第一个可识别的格式