html5新增标签及兼容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>    </title>
<script>
document。createElement("header");
document.createElement("article");
document.createElement("aside");
document.createElement("section");
document.createElement("footer");
</script>
<style>
body{margin:0;}
header{height: 100px; background: #9F3; display: block;}
article{padding:10px; background: #CF6; overflow: hidden; zoom:1; position: relative; display: block;}
section{margin-left:210px; background:#F90; height:300px; width: 800px; position: absolute; left: 10px;top: 10px; display: block;}
aside{width:200px; height:300px; background: #F90; height:300px; display: block;}
footer{height:100px; background: #C6C; display: block;}
</style>
</head>
<body>
    <header>页面头部部分</header>
<article>
  <aside>侧边栏</aside>
  <section>内容区域</section>
</article>
<footer>内容部分</footer>
</body>
</html>

兼容ie 6 7 8

时间: 2024-08-08 22:09:11

html5新增标签及兼容的相关文章

html5新增标签progress

首先,请允许我在这里先表达一下对张鑫旭这位大牛的尊重之情,在学progress的时候,在他的网站上学到了很多我们会忽略的事情,也找到了自己的困惑的答案~~ 推荐给大家:http://www.zhangxinxu.com/wordpress/2013/02/html5-progress-element-style-control/comment-page-1/#comment-169478 参考网站:http://www.w3.org/TR/html5/forms.html#the-progres

CSS浏览器前缀,HTML5新增标签

1.浏览器样式前缀 为了让CSS3样式兼容,需要加上 例如:-ms- 兼容IE浏览器-moz 兼容Firefox-webkit- 兼容chrome和safaridiv{-ms-transform:rotate(30deg);...........} 2.自动添加浏览器前缀 目前的状态是,有些CSS3属性需要加前缀,有些不需要加,有些只需加部分,可以用插件,安装autoprefixer 3.HTML5新增标签 (1)<header> 页面头部.页眉(2)<nav>页面导航(3)<

html5新增标签与传统html的区别

一.文档声明以及编码声明的改变 html5之前的版本声明: 文档类型- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 文档编码- <meta http-equiv="Content-Type" content="text/ht

CSS3主要知识点复习总结+HTML5新增标签

1.显示属性,自身属性,文本属性 推荐样式编写顺序 1 显示属性 :display,list-style,position,float,clear [注意按照横着的顺序] 2 自身属性(合模型):width,height,margin,padding,border,background(第3点)     3 背景:background     4 行高:line-height     5 文本属性:color,font,text-decoration,text-align,vertical-al

第二篇、HTML5新增标签

<html> <head> <meta charset="UTF-8"> <title>html5新增的标签</title> </head> <body> <!--结构性标签 常用于新闻.文章等--> <article> <header> </header> <section> </section> <section>

HTML5新增标签总结和说明

HTML5出来这么久,都没有真正的理解和花时间去看,经常看到一些网页的里面包含很多陌生的标签元素,一直不清楚是什么功能.像<article>.<aside>. 其实这两个标签和<div>的功能一样仅仅是一个块级元素没有任何的样式和功能事件上的特点完全可以理解为div,.但是HTML5为什么要增加这些看似"毫无作用"标签呢.        我们知道经这么长时间的发展,HTML5的应用已经普及了.从使用的特点上来看,HTML5相对以前版本来看给人的感觉就

Html5新增标签的学习。

随笔,记录的比较随便. 今天新学习了9个标签. <audio> 简单的说就是一个音频标签,他的主要常用属性有src=""音频的路径 controls="controls" 控制参数,他就是可以让其在页面显示一个播放器的效果autoplay="autoplay"自动播放属性 loop="loop"循环次数 <video>同audio标签一样.是一个视频标签.主要常用的属性同上面一样 <datalis

html5新增标签

一.语义化标签 1.没有特殊样式盒模型干净的标签 <header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <footer></footer>页脚  页面的底部 或者 版块底部 <hgroup></hgroup> 页面上的一个标题组合 一个标题和一个子标题,或者标语的组合 <hgroup> <h1>妙味课堂</h1> <h2>带您进入富有人情味的IT培训&

html5新增标签与删除标签

新增标签 1.结构标签(块状元素)--有意义的div <article>     标记定义一篇文章 <header>     标记定义一个页面或一个区域的头部 <nav>         标记定义导航链接 <section> 标记定义一个区域 <aisde> 标记定义页面内容的侧边栏 <hgroup> 标记定义文件中一个区块的相关信息 <figure> 标记定义一组媒体内容以及他们的标题 <figcaption>