h5-语义化标签的兼容性问题
1.html代码
<header>头</header>
<nav>导航栏</nav>
<main>
<article>左</article>
<aside>右</aside>
</main>
<footer>底部</footer>
2.基本效果图:浏览器怎么改变大小,基本的排版都不会改变
3.css基本的排版,样式
<style>
*{
margin:;
padding:;
}
header{
width: 100%;
height: 100px;
background-color: red;
}
nav{
width: 100%;
height: 30px;
background-color: green;
}
main{
display: block;
width: 100%;
height: 500px;
background-color: chocolate;
}
main > article{
display: block;
width: 80%;
height: 100%;
background-color: darkblue;
float: left;
}
main > aside{
display: block;
width: 20%;
height: 100%;
background-color: firebrick;
float: right;
}
footer{
width: 100%;
height: 80px;
background-color: hotpink;
}
</style>
4.解决ie8以下版本的兼容性问题
<!--<script>
/**
* 解决IE8及以下版本兼容问题
* 手动创建语义化标签
* 默认创建的都是行级元素
* 需要使用设置为块级元素: display: block;
*/
document.createElement("header"); </script>-->
<!--第二种方式 导入第三方插件-->
<!--<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>-->
<!--<script src="../js/html5shiv.min.js"></script>-->
h5-语义化标签的兼容性问题的更多相关文章
- 笔记二:常用的h5语义化标签
0.前言: 所谓语义化标签就是一种 我们仅通过标签名就能判断出该标签内容的语义的标签,见名知意. 总结这部分内容,主要是为了能从繁琐的div嵌套div中,改成带有h5标签码.这样更有利于读写代码. 人 ...
- H5的语义化标签(PS: 后续继续补充)
头部信息 <header></header> 区块标签 <figure> <figcaption>123</figcaption> < ...
- H5中的语义化标签
H5中的语义化标签也就是之前的id = “header”演变而来的 只不过之前是id 现在变成了标签而已 什么是语义化: 根据内容结构化(内容语义化) 选择合适的标签(代码语义化) 便于开发者阅读和写 ...
- H5新增特性之语义化标签
H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...
- Html5语义化标签详解及其兼容性处理
<header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...
- H5新特性之语义化标签
一.为什么要增加新的语义化标签 在HTML 5出来之前,我们用div来表示章节,但是这些div都没有实际意义,这样的布局方式使我们的结构不够清晰,于是语义化标签应运而生. 二.何为语义化标签 顾名思义 ...
- 浅谈html语义化标签,Html5新增语义化标签
Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...
- H5 语义化、基本事件 浅析 (含file对象、drag拖拽等)
1.语义化标签 帮助搜索引擎,盲人设备等程序,辨识网页内容信息,明确网页区域分布,不体现任何样式,但存在浏览器兼容性问题,如IE8下无<header>标签. ① H5基本语义标签: < ...
- HTML5 01. 布局、语义化标签、智能化表单、表单元素/标签/属性/事件、多媒体、类操作、自定义属性
1.知识点 lang = “en” 所用语言是英文 文档结构更简洁 IE8一下不支持h5c3 书写更宽松 div没有语义 标签语义化:在合适的地方使用合适的标签 对seo优化友谊 网页经典布局 页 ...
- html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
随机推荐
- POJ 2142:The Balance
The Balance Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 4781 Accepted: 2092 Descr ...
- pixi的图片处理
pixi的图片处理 var texture = PIXI.Texture.fromImage('sprite.png');var sprite = new PIXI.Sprite(texture) ...
- 【CS224n-2019学习笔记】Lecture 1: Introduction and Word Vectors
附上斯坦福cs224n-2019链接:https://web.stanford.edu/class/archive/cs/cs224n/cs224n.1194/ 文章目录 1.课程简单介绍 1.1 本 ...
- C#中类的字段或属性不被序列化成JSON或XML
将一个类序列化成JSON或XML时,如果某个字段或属性不想被序列化,则可以使用以下Attribute: 1.[Newtonsoft.Json.JsonIgnore]特性:使用Newtonsoft.Js ...
- 在spark udf中读取hdfs上的文件
某些场景下,我们在写UDF实现业务逻辑时候,可能需要去读取某个文件. 我们可以将此文件上传个hdfs某个路径下,然后通过hdfs api读取该文件,但是需要注意: UDF中读取文件部分最好放在静态代码 ...
- 吴裕雄--天生自然C++语言学习笔记:C++ 运算符
运算符是一种告诉编译器执行特定的数学或逻辑操作的符号.C++ 内置了丰富的运算符,并提供了以下类型的运算符: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 杂项运算符 算术运算符 下表显示 ...
- Node.js NPM 介绍
章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json NPM ...
- Docker 容器(container)
版权所有,未经许可,禁止转载 章节 Docker 介绍 Docker 和虚拟机的区别 Docker 安装 Docker Hub Docker 镜像(image) Docker 容器(container ...
- (六--一)scrapy框架简介和基础应用
一 什么是scrapy框架 官方解释 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 其最初是为了 页面抓取 ( ...
- springboot - 映射 /error 到自定义且实现了ErrorController的Controller
1.总览 2.代码 1).pom.xml <dependencies> <dependency> <groupId>org.springframework.boot ...