标签:
<header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部
<footer></footer>页脚 页面的底部 或者 版块底部
<hgroup></hgroup> 页面上的一个标题组合 一个标题和一个子标题,或者标语的组合 <hgroup> <h1>妙味课堂</h1> <h2>带您进入富有人情味的IT培训</h2> </hgroup>
<nav></nav> 导航 (包含链接的的一个列表) 格式多样 可以包含各种标签
<nav> <a href=“#”>链接</a><a href=“#”>链接</a> </nav> <nav> <p><a href=“#”>妙味课堂</a></p> <p><a href=“#”>妙味课堂</a></p> </nav> <nav> <h2>妙味精品课程</h2> <ul> <li><a href=“#”>javascript</a></li> </ul> </nav>
<section> <section> 页面上的版块 用于划分页面上的不同区域,或者划分文章里不同的节 section元素不是一般的容器元素,所以如果一个元素需要定义相应的style或者script脚本的话,那推荐使用div元素,section的使用条件是确保这个元素的内容能够明确地展示在文档的大纲里
<article></ article > 用来在页面中表示一套结构完整且独立的内容部分
<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分
<figure> < figure > 用于对元素进行组合。一般用于图片或视频
<figcaption> <figcaption> figure的子元素 用于对figure的内容 进行说明
<figure> <img src=“miaov.png”/>(注意没有alt) <figcaption> 妙味课堂 photo © 妙味趣学</figcaption> </figure>
<time></time>用来表现时间或日期
<datalist></datalist>选项列表。与 input 元素配合使用,来定义 input 可能的值。双击input时出现下拉框 选择
<input type="text" list="valList"> <datalist id="valList"> <option value="javascript">javascript</option> <option value="html">html</option> <option value="css">css</option> </datalist>
<details></details>用于描述文档或文档某个部分的细节 该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容 Open 属性默认展开
< summary></summary> details 元素的标题
<details> <summary>妙味课堂</summary> <p>国内将知名的IT培训机构</p> </details>
<dialog></dialog>定义一段对话
<dialog> <dt>老师</dt> <dd>2+2 等于?</dd> <dt>学生</dt> <dd>4</dd> <dt>老师</dt> <dd>答对了!</dd> </dialog>
<address></address> 定义文章 或页面作者的详细联系信息
<mark></mark> 需要标记的词或句子
<keygen>给表单添加一个公钥
<progress><progress>定义进度条 span用于progress不能显示时显示76%
<progress max="100" value="76"> <span>76</span>% </progress>
<video> 视屏
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer> <p> Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead. </p> </video>
video属性
<audio>音频
<audio src="elvis.ogg" controls autobuffer></audio>
<audio>元素标签的一些常用属性:
controls:设置是否显示播放控制面板。
在低版本的ie下header等标签不兼容,以下是解决方法。不过仅能解决header footer 等没有特殊样式的仅划分页面区域的标签。
1.原生js
通过js 创建元素 不过创建的元素没有任何特性 需要添加dispaly:block使元素为块级元素<!doctype html>
<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>video</title> <style> header,article{ border:1px solid black;
//块级元素 display: block; } </style> </head> <body> <header> nihao </header> <article> hi </article> <script>
//创建元素
document.createElement(‘header‘); document.createElement(‘article‘); </script> </body> </html>
2.插件
引入html5shiv.js插件
标签:
原文地址:http://www.cnblogs.com/xinup/p/4803701.html