html5——语义标签
传统布局
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.header {
width: 1000px;
height: 120px;
background-color: pink;
margin: 0 auto;
} .nav {
width: 1000px;
height: 60px;
background-color: #daa520;
margin: 0 auto;
} .section {
width: 1000px;
height: 400px;
background-color: #ccc;
margin: 0 auto;
} .section .aside {
float: left;
height: 400px;
background-color: red;
width: 400px;
} .section .article {
float: right;
height: 400px;
background-color: green;
width: 600px;
} .footer {
width: 1000px;
height: 90px;
background-color: #333;
margin: 0 auto;
}
</style>
</head>
<body>
<!--网页经典布局-->
<!--头部-->
<div class="header"></div>
<!--导航-->
<div class="nav"></div>
<!--主体-->
<div class="section">
<div class="aside"></div>
<div class="article"></div>
</div>
<!-- 底部-->
<div class="footer"></div>
</body>
</html>
html5布局
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
header {
width: 1000px;
height: 120px;
background-color: pink;
margin: 0 auto;
} nav {
width: 1000px;
height: 60px;
background-color: #daa520;
margin: 0 auto;
} section {
width: 1000px;
height: 400px;
background-color: #ccc;
margin: 0 auto;
} section aside {
float: left;
height: 400px;
background-color: red;
width: 400px;
} section article {
float: right;
height: 400px;
background-color: green;
width: 600px;
} footer {
width: 1000px;
height: 90px;
background-color: #333;
margin: 0 auto;
}
</style> <!-- 注意:ie8以下的浏览器不支持h5标签-->
<!--解决办法: 引入html5shiv.js文件-->
<!--条件注释只有ie能够识别-->
<!--[if lte ie 8]>
<script src="html5shiv.min.js"></script>
<![endif]-->
<!--
l:less 更小
t:than 比
e:equal等于
g:great 更大
-->
</head>
<body>
<!-- 新增的h5有语义的标签 -->
<header>header</header>
<nav>nav</nav>
<section>
<aside>侧边栏</aside>
<article>文章</article>
</section>
<footer>底部</footer>
</body>
</html>
兼容问题
<!-- 注意:ie8以下的浏览器不支持h5标签-->
<!--解决办法: 引入html5shiv.js文件-->
<!-- 条件注释 只有ie能够识别-->
<!--[if lte ie 8]>
<script src="html5shiv.min.js"></script>
<![endif]-->
<!--
l:less 更小
t:than 比
e:equal等于
g:great 更大
-->
常用新语义标签
<nav> //表示导航
<header> //表示页眉
<footer> //表示页脚
<section> //表示区块
<article> //表示文章 如文章、评论、帖子、博客
<aside> //表示侧边栏 如文章的侧栏
<figure> //表示媒介内容分组 与 ul > li 做个比较
<mark> //表示标记 (带用“UI”,不怎么用)
<progress> // 表示进度 (带用“UI”,不怎么用)
<time> //表示日期
html5——语义标签的更多相关文章
- html5-7 html5语义标签和视频
html5-7 html5语义标签和视频 一.总结 一句话总结:设计网站的时候要兼顾早期浏览器的话,最新技术要缓着用,自己可以先尝试. 1.html5所有标签共有属性有哪四种? 1.id2.clas ...
- Html5 -- 语义标签兼容性处理
方法一:通过js处理 方法二:完美的处理方式 no.1 !--[if lte IE 8]> <script type="text/javascript" src=&qu ...
- HTML5语义标签的实践
<article> 定义一篇文章 论坛发帖 博客文章 一篇文章 <article> <h1>标题</h1> <p>内容</p> ...
- 使用HTML5语义标签时要注意的问题
header,nav,section,article,aside,figue,figcaption,footer以上这些标签(除figcaption标签外)都是块级标签,为了让这些标签及元素在所有的浏 ...
- html5语义标签
- html5语义化标签总结二
HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...
- 转html5语义化标签总结一
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- IE8兼容H5语义标签
//IE浏览器定义的特殊属性,通过hack方式判断IE版本来执行不同的代码,IE8以下浏览器自动创建html5语义标签,从而实现兼容<!--[if lte IE 8] <script sr ...
- html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
随机推荐
- [K/3Cloud]在插件中根据条件取消表单打开过程
新建一个类,继承自动态表单抽象插件类AbstractBillPlugIn,重写PreOpenForm. /// <summary> /// 销售订单 单据维护界面插件 /// </s ...
- BZOJ1452 count (树状数组)
一道比较水的二维树状数组,开100个即可,只有100种颜色还是比较EZ的. Program BZOJ1452; ; maxc=; ..maxn,..maxn,..maxc] of longint; f ...
- java虚拟机(二)--垃圾收集器与内存分配策略
1.判断对象是否存活的算法: 1.1.引用计数算法:给对象添加一个引用计数器,每当有一个地方引用他时,计数器+1,当引用失效时,计数器-1,任何时刻计数器为0的对象就是不可能再被引用的,但是他很难解决 ...
- Docker Command
1. #docker inspect id 这个命令给出和容器相关的所有信息(https://www.imooc.com/video/15730) 2. #docker searc ...
- 分析helo1项目中的 Web.xml
web.xml文件位于hello1 中target/WEB-INF/classes/javaeetutorial目录下. 这个web.xml文件包含Facelets应用程序所需的几个元素: 其中(1) ...
- 复习es6-解构赋值+字符串的扩展
1. 数组的解构赋值 从数组中获得变量的值,给对应的声明变量赋值,,有次序和对应位置赋值 解构赋值的时候右边必须可以遍历 解构赋值可以使用默认值 惰性求值,当赋值时候为undefined时候,默认是个 ...
- 安装 openCV 2.4.10
近期试验了一下 ubuntu 12.06 (x86) 安装.openCV 安装脚本 最好的文章是 https://help.ubuntu.com/community/OpenCV. 它提供一个脚本( ...
- 解析cocos2d-lua项目中的Hello World
创建完cocos2d-x的lua项目后.打开项目的Resources目录,找到hello.lua.cocos2d-x的lua项目的測试样例主要就是由这个脚本文件运行的. require "A ...
- LeetCode OJ 322. Coin Change DP求解
题目链接:https://leetcode.com/problems/coin-change/ 322. Coin Change My Submissions Question Total Accep ...
- LeetCode 804. Unique Morse Code Words (唯一摩尔斯密码词)
题目标签:String 题目给了我们 对应每一个 字母的 morse 密码,让我们从words 中 找出 有几个不同的 morse code 组合. 然后只要遍历 words,把每一个word 转换成 ...