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-语义化标签的兼容性问题的更多相关文章

  1. 笔记二:常用的h5语义化标签

    0.前言: 所谓语义化标签就是一种 我们仅通过标签名就能判断出该标签内容的语义的标签,见名知意. 总结这部分内容,主要是为了能从繁琐的div嵌套div中,改成带有h5标签码.这样更有利于读写代码. 人 ...

  2. H5的语义化标签(PS: 后续继续补充)

    头部信息 <header></header> 区块标签 <figure> <figcaption>123</figcaption> < ...

  3. H5中的语义化标签

    H5中的语义化标签也就是之前的id = “header”演变而来的 只不过之前是id 现在变成了标签而已 什么是语义化: 根据内容结构化(内容语义化) 选择合适的标签(代码语义化) 便于开发者阅读和写 ...

  4. H5新增特性之语义化标签

    H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...

  5. Html5语义化标签详解及其兼容性处理

    <header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...

  6. H5新特性之语义化标签

    一.为什么要增加新的语义化标签 在HTML 5出来之前,我们用div来表示章节,但是这些div都没有实际意义,这样的布局方式使我们的结构不够清晰,于是语义化标签应运而生. 二.何为语义化标签 顾名思义 ...

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

    Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

  8. H5 语义化、基本事件 浅析 (含file对象、drag拖拽等)

    1.语义化标签 帮助搜索引擎,盲人设备等程序,辨识网页内容信息,明确网页区域分布,不体现任何样式,但存在浏览器兼容性问题,如IE8下无<header>标签. ① H5基本语义标签: < ...

  9. HTML5 01. 布局、语义化标签、智能化表单、表单元素/标签/属性/事件、多媒体、类操作、自定义属性

    1.知识点 lang = “en”   所用语言是英文 文档结构更简洁 IE8一下不支持h5c3 书写更宽松 div没有语义 标签语义化:在合适的地方使用合适的标签 对seo优化友谊 网页经典布局 页 ...

  10. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

随机推荐

  1. POJ 2142:The Balance

    The Balance Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 4781   Accepted: 2092 Descr ...

  2. pixi的图片处理

    pixi的图片处理   var texture = PIXI.Texture.fromImage('sprite.png');var sprite = new PIXI.Sprite(texture) ...

  3. 【CS224n-2019学习笔记】Lecture 1: Introduction and Word Vectors

    附上斯坦福cs224n-2019链接:https://web.stanford.edu/class/archive/cs/cs224n/cs224n.1194/ 文章目录 1.课程简单介绍 1.1 本 ...

  4. C#中类的字段或属性不被序列化成JSON或XML

    将一个类序列化成JSON或XML时,如果某个字段或属性不想被序列化,则可以使用以下Attribute: 1.[Newtonsoft.Json.JsonIgnore]特性:使用Newtonsoft.Js ...

  5. 在spark udf中读取hdfs上的文件

    某些场景下,我们在写UDF实现业务逻辑时候,可能需要去读取某个文件. 我们可以将此文件上传个hdfs某个路径下,然后通过hdfs api读取该文件,但是需要注意: UDF中读取文件部分最好放在静态代码 ...

  6. 吴裕雄--天生自然C++语言学习笔记:C++ 运算符

    运算符是一种告诉编译器执行特定的数学或逻辑操作的符号.C++ 内置了丰富的运算符,并提供了以下类型的运算符: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 杂项运算符 算术运算符 下表显示 ...

  7. Node.js NPM 介绍

    章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json NPM ...

  8. Docker 容器(container)

    版权所有,未经许可,禁止转载 章节 Docker 介绍 Docker 和虚拟机的区别 Docker 安装 Docker Hub Docker 镜像(image) Docker 容器(container ...

  9. (六--一)scrapy框架简介和基础应用

    一 什么是scrapy框架 官方解释 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 其最初是为了 页面抓取 ( ...

  10. springboot - 映射 /error 到自定义且实现了ErrorController的Controller

    1.总览 2.代码 1).pom.xml <dependencies> <dependency> <groupId>org.springframework.boot ...