html5 布局 main 和section

HTML5的新标签-整体布局

过去:<div class="header"> <div class="hgroup"> <h1>....</h1> <h2>....</h2> </div> <div class="nav"> <ul> <li>....</li> <li>....</li> <li>....&l

在Html5之前,统一采用的是Div+css的方式进行布局,但是却和开发人员的命名方式,喜好有关.在新的Html5中,布局却显得更加人性化,更易理解了.如增加了Header,Footer,Section,Aside标签,很容易一眼就知道对应的功能是什么.布局效果如下: 涉及的元素,说明如下:HTML5 提供的新语义元素定义了网页的不同部分: HTML5 语义元素 header 定义文档或节的页眉 nav 定义导航链接的容器 section 定义文档中的节 article 定义独立的自包含文章 a

HTML5 布局标签

HTML5是HTML标准的下一个版本.越来越多的程序员开始HTML5来构建网站,相对HTML4,HTML5新增的带有语义化的标签可以代替div进行页面布局(与html5.js结合起来时可以放心使用 ),语义化标签有相对应的结构,这样我们就不用一层嵌套一层的使用div啦.抛开IE浏览器兼容性这个最大的阻碍,前端工程师应该跟随HTML5时代的召唤熟悉HTML5布局标签,并在将来的开发中灵活和适当的运用. 下面介绍下几个最常用的元素: 1.<header>,<footer> 代表页面的头

HTML5布局

完整示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5布局</title> <style type="text/css"> header, section, footer, aside, nav, article, figure, figcaption{ di

html5--2.4新的布局元素(3)-section

html5--2.4新的布局元素(3)-section 学习要点了解section元素的语义和用法通过实例理解section元素的用法 article元素和section元素的区别和共同点 article元素(标签) 用于定义一个独立的内容区块,比如一篇文章,一篇博客,一个帖子,论坛的一段用户评论,一篇新闻消息等. article元素内可以嵌套其他元素,它可以有自己的头.尾.主体等内容.使用时要特别注意内容的独立性,一般对于独立完整的内容才使用article元素,如果只是一段内容的话应该使用

解决HTML5布局，兼容IE问题

当我们使用h5的新标签,header,footer,aside,section,article...时,会遇到低版本IE不兼容问题,如下图: 解决方案:引入如下JS代码,即可 (这里我就直接放源码了,大家可自行拷贝成JS文件即可使用) /*! HTML5 Shiv v3.6.1 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */ ;(function(window, document) { /*jshint evil:true */

简单的html5布局

<!DOCTYPE html><html><meta charset="utf-8"><head><style>html,body{height:auto;}#main{width:1024px;margin:0 auto;height:auto}header{width:100%;height:120px;border:1px solid #ccc;margin:5px auto}nav{width:100%;height:

HTML5的article和section的区别

内容区块是指将HTML页面按逻辑分割后的单位.对于页面网站来说,导航菜单.文章正文.文章的评论等每一个部分都可称为内容区块. article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.它可以是一篇博客或报刊中的文章.一篇论坛帖子.一段用户评论或独立的插件,或其他任何独立的内容.除了内容部分,一个article元素通常有它自己的标题(一般放在一个header元素里面),有时还有自己的脚注.<article> <h

Html5 布局经验分享-第1集

移动端的布局与pc端的布局相比移动端的布局就简单的多,兼容性不必考虑那么多,css3各种特性基本上是可以放肆的写:(个人看法) 本人做移动web 布局一段时间了,把这其中遇到的一些问题总结下来,均是个人看法,各位大牛多多拍砖..... 1.布局肯定使用的是自适应布局,前提是将body的width height 设置成100%: 2.准备好通用的reset.css,移除浏览器的默认样式,使用自定义默认样式,让各个浏览器统一基础样式: 3.准备好head内meta的各个标记,因为这个是必不可少的,

html5：article与section元素

article元素 aiticle元素代表文档.页面或应用程序中独立的.完整的.可以肚子被外部引用的内容.它可以使一片博客或报刊中的文章.帖子. 一个article元素通常有它自己的标题,通常放在header元素里面,有时还有他的脚注. Section元素 section元素用于对网站或应用程序中页面上的内容进行分块.一个section元素通常有内容及其标题组成.但section元素并非一个普通的容器元素:当一个容器需要被直接定义样式或通

一张图知道HTML5布局（图）

HTML5布局篇

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> </title> <link rel="stylesheet" type="text/css" href="index.css"/> </head> <body> <a name="

HTML5基本布局

HTML4布局 HTML5布局基本的HTML5文档的模式为: <!DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>HTML5 Demo</title> <body> <header><h1></h1><h2></h2></

html5新标签布局应用指南

html5中为了便于设计者的网站布局新添加了一些标签,本文主要讲解这些标签的实际应用方法. 大多数前端的朋友在设计网站时主要应用<div>标签构造盒子进行布局,这是种非常高效的方法,可以将整体的布局分拆成为各个部分的布局.在html5中我们可以省去更多的时间对盒子的属性进行设置.下面两图是对传统方法与HTML5布局方法的对比,可以看出,两种方法都能实现我们的设计思想. <header>,<footer>:header常用于网站头部的制作,footer常用于网站尾部

移动设备HTML5页面布局

在HTML5标准添加的新元素中,用于常见页面结构的包括header footer footer nav aside aside article section hgroup . 下面简单介绍一下这个元素: 1.header header>元素定义文档的页面组合,通常是一些引导和导航信息,标签内通常包含 secti- on的头部信息,如h1~h6 或 hgroup等. <header> <h1>HTML5布局学习</h1> <P>勤学苦练</p

创建HTML5/CSS3单页Web布局

1. [图片] 第1步:PhotoShop 2. [代码]第2步:index.html <!DOCTYPE html><html class="cufon-active cufon-ready" lang="en"><head><meta http-equiv="content-type" content="text/html; ch

html5中section元素详解

html5中section元素详解一.总结一句话总结: section元素用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section元素和 div元素的区别是什么? div强调在形式上的独立性,section强调的是内容上的独立性,注意它的语义. section可以看做 <div id="section"></div> 2.article元素和section元素的区别是什么? article元

Html5 学习笔记【PC固定布局】实战3 热门旅游展示区

最终效果图: html 代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>项目实战 PC端固定布局</title> <link rel="stylesheet" href="css/style.css"> </head> <

Html5 学习笔记【PC固定布局】实战2 导航栏搜索区域

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>项目实战 PC端固定布局</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!--

Html5 学习笔记【PC固定布局】实战1 导航栏

导航栏html文件: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>项目实战 PC端固定布局</title> <link rel="stylesheet" href="css/style.css"> </head> <body&

HTML5 语义元素(一)页面结构

本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.<footer>.<header>.<main>.<nav>.<section>等元素. 目录 1. 语义元素介绍 1.1 何为语义元素 1.2 特点 2. 原先界面布局 3. 页面结构语意元素 3.1 说明 3.2 详细介绍 3.3 示例图 4. 旧版浏