h5-13
1、HTML5新增标签
HTML5代码
<!-- 整个文档的头部或者某个区块的头部 通常可以用来包含logo 搜索框 标题--> <header>这里是头部区</header> <!--整个文档的底部或者某个区块的底部 如包含友情链接、版权等 --> <footer>这里是页脚区</footer> <!--导航(链接组) 如：主导航、页内导航、分页--> <nav> <a>首页</a> <a>关于我们</a> <a>联系我们</a> </nav> <!-- 独立完整的内容 如：文章（博文） 一条完整的评论、回复--> <article>这里是一个有完整含义的内容区</article> <!-- 文档中的区块、节 如：章节 通常包含一个标题 标签 --> <section> <h2>标题一</h2> <p>内容区域</p> </section> <section> <h2>标题二</h2> <p>内容区域</p> </section> <!--侧边栏 与文档或某个区块相关的附属信息 --> <aside>这里是侧边栏</aside> <!-- 可以为标题或者子标题进行分组，通常与h1-h6组合使用 --> <hgroup> <h1>主标题</h1> <h2>副标题</h2> </hgroup> <!-- 被主体内容所引用的相对独立完整的内容 例：文章页引用的图片、图表、代码块 --> <figure> <figcaption>figure的标题</figcaption> </figure> <!-- 标记 默认黄色背景 --> <p>今天天气<mark>晴朗</mark></p> <!-- 日期时间 --> <p>现在是上午<time>10:37</time></p>
2、标签改写
1 <style> 2 *{ 3 margin: 0; 4 padding: 0; 5 } 6 .wrap{ 7 overflow:hidden; 8 width: 520px; 9 background-color: #f1f1f1; 10 padding: 0 10px 10px; 11 font:18px/32px Atial; 12 color:#fff; 13 text-align:center; 14 /* height: 50px; */ 15 } 16 #header,#nav,#article,#sidebar,#footer,#bb{ 17 background-color: #595959; 18 -webkit-boder-radius:5px; 19 -moz-border-radius:5px; 20 border-radius:5px; 21 margin-top:8px; 22 } 23 .main:after{ 24 content:''; 25 display: block; 26 clear:both; 27 } 28 #article{ 29 float:left; 30 width: 317px; 31 height: 130px; 32 } 33 .section{ 34 height: 80px; 35 background-color: #3b3b3b; 36 } 37 #sidebar{ 38 float: right; 39 width: 195px; 40 height: 60px; 41 } 42 #bb{ 43 float:right; 44 width: 195px; 45 height: 60px; 46 } 47 </style>
<div class="wrap"> <div id="header">header</div> <div id="nav">nav</div> <div class="main"> <div id="article"> article <div class="section">section</div> </div> <div id="sidebar">aside</div> <div id="bb">bb</div> </div> <div id="footer">footer</div> </div>
1 <style> 2 .wrap{ 3 overflow: hidden; 4 width: 520px; 5 background: #f1f1f1; 6 padding: 0 10px 10px; 7 font: 18px/32px Arial; 8 color: #fff; 9 text-align: center; 10 } 11 #header, #nav, #article, #sidebar, #footer{ 12 background: #595959; 13 -webkit-border-radius: 5px; 14 -moz-border-radius: 5px; /*前缀作用：兼容处理 此处为火狐浏览器*/ 15 border-radius: 5px; /*圆角边框*/ 16 margin-top: 8px; 17 } 18 .main:after{ 19 content: ''; 20 display: block; 21 clear: both; 22 } 23 #article{ 24 float: left; 25 width: 317px; 26 height: 130px; 27 } 28 .section{ 29 height: 80px; 30 background: #3b3b3b; 31 margin: 0 8px; 32 } 33 #sidebar{ 34 float: right; 35 width: 195px; 36 height: 130px; 37 }
<div class="wrap"> <header id="header">header</header> <nav id="nav">nav</nav> <div class="main"> <article id="article"> article <section class="section">section</section> </article> <aside id="sidebar">aside</aside> </div> <footer id="footer">footer</footer> </div>
2、HTML5兼容
使用JavaScript新增元素的方法解决
使用谷歌提供的HTML5shiv.js解决兼容性问题
3、标签兼容处理
1 <script> 2 document.createElement("header"); 3 document.createElement("footer"); 4 </script> 5 <style> 6 /*创建元素后，默认内联显示*/ 7 header,nav,aside,article,footer,section{ 8 display:block; 9 } 10 .wrap{ 11 overflow: hidden; 12 width: 520px; 13 background: #f1f1f1; 14 padding: 0 10px 10px; 15 font: 18px/32px Arial; 16 color: #fff; 17 text-align: center; 18 } 19 #header, #nav, #article, #sidebar, #footer{ 20 background: #595959; 21 -webkit-border-radius: 5px; 22 -moz-border-radius: 5px; 23 border-radius: 5px; 24 margin-top: 8px; 25 } 26 .main:after{ 27 content: ''; 28 display: block; 29 clear: both; 30 } 31 #article{ 32 float: left; 33 width: 317px; 34 height: 130px; 35 } 36 .section{ 37 height: 80px; 38 background: #3b3b3b; 39 margin: 0 8px; 40 } 41 #sidebar{ 42 float: right; 43 width: 195px; 44 height: 130px; 45 } 46 </style>
<div class="wrap"> <header id="header">header</header> <nav id="nav">nav</nav> <div class="main"> <article id="article"> article <section class="section">section</section> </article> <aside id="sidebar">aside</aside> </div> <footer id="footer">footer</footer> </div>
通过开头引入的js文件识别header和footer
4、HTML5已移除的元素
5、新增的多媒体标签
<!-- audio 音频 ie9以下不支持 允许在audio插入内容，用于显示在不支持的浏览器 属性： src 要播放的音频的URL controls 显示播放控件 loop 循环播放 muted 静音 MP3\Ogg\Wav 格式 MIME-type 浏览器支持情况（最新） MP3 audio/mpeg IE9+、chrome、firefox、safari5+、opera10+ Ogg audio/ogg chrome、firefox、opera10+ Wav audio/wav chrome、firefox、safari5+、opera10+ audio允许使用source引入多个资源路径，默认播放浏览器可识别的第一个格式 source 媒介元素，可以链接不同的文件，浏览器使用第一个可识别的格式 --> <audio controls muted loop> <source src="videoAudio/biubiubiu.ogg" type="audio/ogg"> <source src="videoAudio/hanmai.mp3" type="audio/mpeg"> 您的浏览器不支持audio元素播放音频 </audio>
6、新增的其他标签
<!-- video 视频 ie9以下不支持 允许在video插入内容，用于显示在不支持的浏览器 属性： src 要播放的视频的URL controls 显示播放控件 loop 循环播放 muted 静音 height 播放器的高度 width 播放器的宽度 poster 预览图片 MP4 \WebM\ogg 格式 MIME-type 浏览器支持情况（最新） MP4 video/mp4 IE 、chrome、firefox、safari、opera25+ WebM video/webm chrome、firefox、opera Ogg video/ogg chrome、firefox、opera video允许使用source引入多个资源路径，默认播放浏览器可识别的第一个格式 source 媒介元素，可以链接不同的文件，浏览器使用第一个可识别的格式 --> <!--<video src="videoAudio/butterfly.ogg" width="400" height="400" controls="controls" loop="loop" poster="pic.png"></video>--> <video controls width="400" poster="pic.png"> <source src="videoAudio/butterfly.ogg" type="video/ogg"> <source src="videoAudio/movie.mp4" type="video/mp4"> 您的浏览器不支持video元素播放视频 </video>
7、HTML5新增的表单元素
url，Email，number，range，color。。。。。
<form action="#"> <!-- url输入域 提交时默认进行格式验证，输入不合法弹出提示且无法提交；移动端：.com 键盘变化--> <p>网址：<input type="url" name="userurl"/></p> <!--email域 提交时默认进行格式验证，输入不合法弹出提示且无法提交；移动端：@ 键盘变化 --> <p>email:<input type="email" name="usere"/></p> <p>搜索：<input type="search"/></p><!--搜索域--> <!--电话号码输入域 移动端：数字键盘变化 --> <p>电话：<input type="tel"/></p> <!--数值输入域 value 初始值 min最小值 max最大值 step步长（合法输入间隔） --> <p>数值：<input type="number" value="10" min="0" max="20" step="2"/></p> <!-- 一定范围内的数值输入域（滑块） --> <p>滑块：<input type="range" value="5" min="1" max="10" step="1"/></p> <p>取色器：<input type="color" /></p><!--取色器--> <input type="submit"> </form>
<form action="#"> <!--时间日期选择器--> <input type="date"/><br/><br/> <!-- 手动输入一个日期和时间--> <input type="datetime"/><br/><br/> <!--本地时间：选择年、月、日、 小时、分钟--> <input type="datetime-local"/><br/><br/> <!--选择年、月--> <input type="month"/><br/><br/> <!--选择 小时、分钟--> <input type="time"/><br/><br/> <!--选择年、周--> <input type="week"/><br/><br/> <!-- 选项列表--> <input id="myCar" list="cars"/> <datalist id="cars"> <option value="WEB"></option> <option value="ASD"></option> </datalist> </form>
<form action="#"> <!-- 自动完成 autocomplete="on" 开启 用户输入时显示选项列表 off 关闭 用户输入时不显示列表选项 --> <input type="text" name="usere" autocomplete="on"/> <input type="submit" value="提交"/> </form>
<form action="#"> <!-- autofocus 自动获取焦点（页面加载完成后，指定某个表单元素处于获取焦点状态） --> 用户名： <input type="text"/> 密码： <input type="text" autofocus> <input type="submit" value="提交"/> </form>
<!-- form 规定表单元素所归属的表单 form="form标签的id" --> <form action="#" id="form1"> <input type="text" name="username"/> </form> <input type="reset" form="form1">
<form action="#"> <input type="url" list="urlList" name="weblink"> <datalist id="urlList"> <option label="百度" value="http://www.baidu.com"></option> <option label="新浪" value="http://www.sina.com"></option> <option label="搜狐" value="http://www.sohu.com"></option> </datalist> </form>
<form action="#"> <!-- multiple 允许多个值，适用于： email file --> <input type="email" name="usere" multiple/> <input type="file" multiple/> <input type="submit"value="提交"> </form>
<form action="#"> <!-- pattern 模式验证（正则验证）， 提交时进行表单验证 pattern="[0-9]" //只允许输入0-9的数字 --> <input type="text" name="usere" pattern="[0-9]"/> <input type="submit" value="提交"> </form>
<form action="#"> <!-- required 不能为空，提交时进行表单验证，不能为空 --> Name: <input type="text" name="username" required/> <input type="submit" value="提交"> </form>
<form action="#"> <!-- max 属性规定输入域所允许的最大值。 min 属性规定输入域所允许的最小值。 step 属性为输入域规定合法的数字间隔 --> <input type="number" max="100" min="0" value="50"/> <!-- placeholder 输入提示占位符 --> <input type="text" placeholder="请您输入"> <input type="submit" value="提交"/> </form>
