html5网页布局,HTML网页布局

应用HTML5设计网页时，怎么样才能设计的比较完善？

三、在进行设计的时候不能使用绝对宽度

成都创新互联专注于企业全网营销推广、网站重做改版、新华网站定制设计、自适应品牌网站建设、H5网站设计、成都商城网站开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为新华等各大城市提供网站开发制作服务。

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说，CSS代码不能指定像素宽度：

width:xxx px;

只能指定百分比宽度：

width: xx%;

或者

width:auto;

四、相对大小的字体

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

body {

font: normal 100% Helvetica, Arial, sans-serif;

}

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

h1 {

font-size: 1.5em;

}

然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。

small {

font-size: 0.875em;

}

small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

html5里面新增的用于网页布局的标签有哪些

html5新增的一些语义话标签，可以使用比如头部可以使用header标签，导航nav，主体部分可以使用section，底部footer，中间文章article。

div，ul li标签都是使用比较频繁的标签，span，i,em可以对文字进行单独的描述，表示等。

article标签定义外部的内容，比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

canvas 标签定义图形，比如图表和其他图像，这个 HTML 元素是为了客户端矢量图形而设计的。

它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

标签定义元素的细节，用户可进行查看，或通过点击进行隐藏与 legend 一起使用，来制作 detail 的标题，该标题对用户是可见的，当在其上点击时可打开或关闭 detail。

这种HTML5布局是什么意思？

这个就是简单的html布局，里面有html 标签组成，你可以标签里面添加内容然后用浏览器打开，就能看到渲染的html 页面了。

HTML5如何利用rem实现自适应布局

分析设计图

假设设计图大小为1080px。这也就意味着，在开发时，需要兼容的最大分辨率为1080px，最小的为320px。

2. 调整视口

代码实例：

!DOCTYPE html

head

meta charset="UTF-8" /

title布局之路-移动端开发实例/title

meta name="viewport" content="width=device-width,user-scalable = no" /

link rel="stylesheet" type="text/css" href="css/reset.css" /

/head

body

div class="wrap"/div

/body

/html

代码解析：由于使用不同设备打开网页时，宽度均有所不同，所以不能讲视口设置为固定值，应当为width=device-width,即将视口设置为当前设备的宽度。

3. 确定设计图的最小字体

浏览器（部分）能够显示的最小字体未12px，当移动端页面宽度为320px时，要保证最小字体为12px，那么在1080px的设计图中，最小字体应当为42px。

代码实例：

style type="text/css"

html {

font-size: 42px;

}

/style

4. 按照设计图的像素进行开发

按照正常网页开发流程，进行网页开发即可。

5. 使用百分比和rem替换px

代码效果对比：

/*使用固定像素*/

.box {

float: left;

width: 658px;

font-size: 72px;

text-align: center;

line-height: 195px;

}

/*使用百分比和rem*/

.box {

float: left;

width: 60.93%;

font-size: 1.71rem;

text-align: center;

line-height: 4.64rem;

}

代码解析：

水平方向的值，将具体像素调整为百分比。百分比的计算是根据父级的内容区宽度进行计算的。

例如，父级宽度为1080px， 子级元素为197px，那么子元素转换为百分比为：197/1080*100%=18.24%。需要注意的是百分比根据父级计算，当标签结构级别不同时，计算公式中的“分母”也有所不同，在开发时这个地方很容易出现问题，请务必注意。

垂直方向的值，将具体像素调整为rem，与水平方向相比，垂直方向的计算就比较简单。例如，行高为195px，HTML标签当前的字体大小为42px，将行高转换为rem单位，即195/42= 4. 64rem。

为什么要用HTML5结构标签来布局网页

对于HTML5来讲，在网页结构上标签定义与使用更加语义化，让搜索引擎以及工程师更加迅速理解当前网页的整个重心所在！

列举常用HTML5结构组合

header

nav

section

article

figure

figcaption

aside

footer

一般首页结构，如图所示

当然也可以是下面的结构

其中section和article最为相似，而且和div标签貌似也有很大相似之处。

但看似相似，并不是真的相似，这些标签是为了布局而生的，自然有它们更精确的语义定位，或者说他们更将强调Html的语义。

DIV

这个标签一直是我们见得最多、用得最多的标签。

它本身无任何语义，用作布局以及样式化标签。

Section

与div相似，但它有更进一步的语义。

section用作一段有专题性的内容，一般在它里面会带有标题。  section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。

Article

article是一个特殊的section标签，它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。

div、section、article，语义是从无到有，逐渐增强的。

div无任何语义，仅仅用作样式化或者脚本化的标签，对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。

原则上来说，能使用article的时候，也是可以使用section的，但是实际上，假如使用article更合适，那么就不要使用section。

html5中如何实现网页图片的排版

可以使用Div+Css实现整个网页的布局，将图片放在img标签中，然后在css代码中设置float属性（left左浮动right右浮动）。就可以实现排版了。辛苦的打了这么多字，希望您能够采纳。

标题名称：html5网页布局,HTML网页布局
新闻来源：http://mswzjz.cn/article/dsegpcd.html