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

1.原理:动态创建元素
例如:document.createElement(“header”)
注意:动态创建出来的标签是行内元素,需添加display:block
/IE9:行级元素在设置宽度的时候是失效
IE8:完全不支持语义标签(不支持html5):在IE8中,它不认识语义标签,所以无法解析这些标签,也就意味着所写的样式无效。
/

<style>
    main{
            /*将行级元素转换为块级元素*/
            display: block;
            width: 100%;
            height: 500px;
            background-color: #ccc;
        }
        main > article{
            width: 80%;
            height: 100%;
            background-color: purple;
            float: left;
        }
        main > aside{
            width: 20%;
            height: 100%;
            background-color: pink;
            float: right;
        }
</style>

2.应用
在实际开发当中,可以引入html5shiv.js 插件

html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素。

原文地址:https://www.cnblogs.com/Tobenew/p/10506643.html

时间: 2024-11-01 17:32:19

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

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

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

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

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

HTML5之语义化标签

在HTML5之前采用HTML+CSS文档结构写法: ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航.页眉.页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航.内容区域) class选择器说明 class类选择器——可以应用于页面任意多个元素,非常适合标识内容类型或其他相似的条目. 代码: <body> <div id="header">...</div> <div id="nav">...

HTML5常用语义化标签&amp;表单类型&amp;表单属性

HTML5语义化标签 1.<article>表示包含一个文档.页面.应用程序或网站中的一段独立的内容,也就是说,它能够独立地被发布或重新使用.可适用的地方有:一篇博客.一个论坛帖子.一篇新闻报道.一个用户评论... 2.<header>一般被放置在页面的顶部,或者页面中某个区块元素的顶部,包含整个页面或某个区块的标题.简介等信息. 一个文档中可以包含多个header标签header标签不一定只能显示在页面的上方,它的内容决定该地方是否需要使用header标签可以为body.arti

html5新增语义化标签

注意:body.section.nav 需要h1-h6. div.header则不需要. 1):<article> 显示一个独立的文章内容. 例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等.artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系. 例如,一个博客文章,可以用article显示,然后一 些评论可以以article的形式嵌入其中. <article> <h1>文章标题</h1> 这是一篇文章

我的启蒙--HTML5 第一章 语义化标签

HTML5 1.HTML5:万维网的核心语言,HTML规范的第五次重大修改.现在大部分网站的主流编译语言.学好HTML5是每一个前端的基础课,当然她也很简单 2.HTML5新增语义化标签(虽然很少用到,但是还是要说一下) (1)<laomaoshi>老猫师:恩,你没看错HTML5可以自己定义标签,而且属于行内标签</laomaoshi> (2)其他的我就不一一列举了比如 导航栏常用的nav  时间常用的time (3)但是新增的表单标签,我们还是要熟悉下 就是这样的新标签,还有很多

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下对于不支持的标签

HTML5语义化标签

一.什么是语义化标签?1.那么什么叫做语义化呢?说的通俗点就是:就是给div起个外号,比如,网页上的文章的标题就可以叫他标题,网页上的各个文章,就可以叫他文章. 2.为啥使用语义化标签?(1). 更容易被搜索引擎收录.(2). 更容易让屏幕阅读器读出网页内容.(3). 能够更好的体现页面的主题.(4).兼容性更好,支持更多的网络设备.二.常见语义化标签 头部--header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍性的信息如网站名称.logo或者导航栏

html5新增的语义化标签

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