h5-语义化标签的兼容性问题

1.html代码

1 <header>头</header>
2 <nav>导航栏</nav>
3 <main>
4     <article>左</article>
5     <aside>右</aside>
6 </main>
7 <footer>底部</footer>

2.基本效果图:浏览器怎么改变大小,基本的排版都不会改变

3.css基本的排版,样式

 1     <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         header{
 7             width: 100%;
 8             height: 100px;
 9             background-color: red;
10         }
11         nav{
12             width: 100%;
13             height: 30px;
14             background-color: green;
15         }
16         main{
17             display: block;
18             width: 100%;
19             height: 500px;
20             background-color: chocolate;
21         }
22         main > article{
23             display: block;
24             width: 80%;
25             height: 100%;
26             background-color: darkblue;
27             float: left;
28         }
29         main > aside{
30             display: block;
31             width: 20%;
32             height: 100%;
33             background-color: firebrick;
34             float: right;
35         }
36         footer{
37             width: 100%;
38             height: 80px;
39             background-color: hotpink;
40         }
41     </style>

4.解决ie8以下版本的兼容性问题

 1 <!--<script>
 2     /**
 3      * 解决IE8及以下版本兼容问题
 4      * 手动创建语义化标签
 5      * 默认创建的都是行级元素
 6      * 需要使用设置为块级元素:  display: block;
 7      */
 8     document.createElement("header");
 9
10 </script>-->
11 <!--第二种方式 导入第三方插件-->
12 <!--<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>-->
13 <!--<script src="../js/html5shiv.min.js"></script>-->

原文地址:https://www.cnblogs.com/FengBrother/p/11369884.html

时间: 2024-11-09 09:38:16

h5-语义化标签的兼容性问题的相关文章

html5中语义化标签以及兼容性处理方法

1.html5中新增的语义化标签: artical footer header nav section aside 2.在IE8和IE8以下浏览器不支持以上新增的语义化标签 3.解决方案 方案1:在浏览器解析前动态创建标签元素,然后转成块级元素 例如: document.createdElement("header") 方案2:通过引入html5shiv.js插件动态创建元素 <!-- 小于等于 ie 8 才进行引包, 用于兼容 html5 语义化标签 --> <!-

HTML5---2.语义化标签的兼容性问题以及解决方案

1.原理:动态创建元素 例如:document.createElement("header") 注意:动态创建出来的标签是行内元素,需添加display:block /IE9:行级元素在设置宽度的时候是失效 IE8:完全不支持语义标签(不支持html5):在IE8中,它不认识语义标签,所以无法解析这些标签,也就意味着所写的样式无效./ <style> main{ /*将行级元素转换为块级元素*/ display: block; width: 100%; height: 50

h5语义化标签学习笔记

1.article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容,通常有自己的标题(一般放在一个header元素里面),有时还有自己的注脚,article元素可以相互嵌套: 2.section元素用于对网站或者应用程序中的页面的内容进行分块,通常有自己的标题,当一个容器有行内样式时,推荐使用div而不是section,通常不推荐没有标题的内容使用section

H5新特性&#183;语义化标签

所谓[语义化],便是[见名知意]! 在笔者基础阶段学习搭建页面结构的过程中,常常使用div划分页面结构,通过给div命名才能大概知晓每个模块的功能: 而H5语义化标签的出现与补充,解决了困扰笔者的这一问题:使得页面结构的搭建,不再复杂,每个版块的功能都清晰可见>>>(*^▽^*) 下面就让我们一起看看,新添加了哪些强大的语义化标签吧!!! [借鉴出处]http://caibaojian.com/html5/ele.html 笔者也亲自验证了一部分,如下图: ①[局部]time标签的使用,

HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理。

一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.time.mark.section.header.footer.hgroup.progress.figure.figcaption.nav.meter.output.details.summary.ruby和main   三.让IE5.5~9支持HTML5新标签 1. IE5.5~8下对于不支持的标签

H5新特性之语义化标签

二月底,疫情仍未过去,在家逆战学习. 说道H5新特性的语义化标签,就不得不先简单说一下它的发展史,兼容和一些语法问题. H5在经过多达近百项的修改,包括HTML和XHTML的标签,相关的API,Canvas等,性 能得到进一步提升. H5仅仅是新增添了一些内容并优化了它们,而不是全盘否定之前的旧的内容.支持Html5 的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari, Opera等以及一些国内浏览器. 对于H5语法变化不大,文件的扩展名是不变

H5新特性值语义化标签

H5新特性之语义化标签 下面是一些关于H5的语义化标签,来看一下: section         类似于div,section 更偏向划分区域 article          更偏向于 内容的展示 aside           (在一边的,在一旁的,侧边) header         表示内容的头部.网页的头部.头部区域 footer          表示网页的底部.内容的底部.底部区域 nav            导航连接.导航区域 figure          表示一块独立的内

html5新增的语义化标签

1.什么是语义化标签? 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如, 网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签. 文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等. 2.为啥使用语义化标签? 1. 更容易被搜索引擎收录. 2. 更容易让屏幕阅读器读出网页内容. 3. 能够更好的体现页面的主题 4.兼容性更好,支持更多的网络设备 3.html语义化标签 1):

浅谈html语义化标签,Html5新增语义化标签

Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如, 网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签. 文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等. 2.为啥使用语义

html5语义化标签使用规范

Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍性的信息如网站名称.logo或者导航栏nav. <header> <h1>html5语义化标签</h1> <nav> <h1>导航</h1> <ul> <li>章节标签</li> <li>标