linux开发html,HTML 布局描述

导读

HTML 是用来描述网页的一种语言。HTML 不是一种编程语言，而是一种标记语言 (markup language),标记语言是一套标记标签 (markup tag),HTML 使用标记标签来描述网页。

使用

元素的 HTML 布局

注释：

元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了四个

元素来创建多列布局：

实例

City Gallery

London

Paris

Tokyo

London

London is the capital city of England. It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia,

its history going back to its founding by the Romans, who named it Londinium.

Copyright W3School.com.cn

CSS：

#header {

background-color:black;

color:white;

text-align:center;

padding:5px;

}

#nav {

line-height:30px;

background-color:#eeeeee;

height:300px;

width:100px;

float:left;

padding:5px;

}

#section {

width:350px;

float:left;

padding:10px;

}

#footer {

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

}

使用 HTML5 的网站布局

HTML5 提供的新语义元素定义了网页的不同部分：

HTML5 语义元素

header

定义文档或节的页眉

nav

定义导航链接的容器

section

定义文档中的节

article

定义独立的自包含文章

aside

定义内容之外的内容(比如侧栏)

footer

定义文档或节的页脚

details

定义额外的细节

summary

定义 details 元素的标题

这个例子使用 ，, ,以及 来创建多列布局：

实例

City Gallery

London

Paris

Tokyo

London

London is the capital city of England. It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia,

its history going back to its founding by the Romans, who named it Londinium.

Copyright W3School.com.cn

CSS

header {

background-color:black;

color:white;

text-align:center;

padding:5px;

}

nav {

line-height:30px;

background-color:#eeeeee;

height:300px;

width:100px;

float:left;

padding:5px;

}

section {

width:350px;

float:left;

padding:10px;

}

footer {

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

}

使用表格的 HTML 布局

注释：

使用

实例

	The table element was not designed to be a layout tool.

CSS

table.lamp {

width:100%;

border:1px solid #d4d4d4;

}

table.lamp th, td {

padding:10px;

}

table.lamp td {

width:40px;

}