码迷,mamicode.com
首页 > Web开发 > 详细

html5新增标签

时间:2015-09-12 22:19:13      阅读:326      评论:0      收藏:0      [点我收藏+]

标签:

一、语义化标签

1.没有特殊样式盒模型干净的标签

<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 &copy 妙味趣学</figcaption> </figure>

2.有样式的标签

<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>

3.媒体标签

<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属性

  1. Autoplay: 用来设定视频是否在页面加载后自动播放。
  2. Src: 为视频指定文件链接或下载路径,当浏览器不支持<video>标签或发生某种播放错误时,可以提供给用户进行下载。
  3. Autobuffer: 用来设定视频是否自动缓冲;如果设定,那么页面加载之后,视频会自动下载缓冲,当用户点击播放按钮后,至少已经有一部分视频可以直接观看而无需等待了。
  4. Poster: 用来为视频设置一个“相框默认图片”性质的背景图片;当视频无法正常加载播放时可以向用户呈现。
  5. Controls: 用来设置是否为视频添加控制条,例如“播放”、“暂停”等;控制条的外观可以自定义。
  6. Loop: 用来设置视频是否循环播放。
  7. Width , Height: 用来控制视频的宽度与高度。

 

<audio>音频

<audio src="elvis.ogg" controls autobuffer></audio>

<audio>元素标签的一些常用属性:

  1. src:音频文件路径。
  2. autobuffer:设置是否在页面加载时自动缓冲音频。
  3. autoplay:设置音频是否自动播放。
  4. loop:设置音频是否要循环播放。
  5. controls:设置是否显示播放控制面板。

二、IE兼容

在低版本的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插件

 

html5新增标签

标签:

原文地址:http://www.cnblogs.com/xinup/p/4803701.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!