html5页面作品,HTML5页面布局基础

区块标签和分组标签通常在文档中充当容器和包含块等角色HTML中负责页面总体布局的文档结构都应由区块元素来定义这些新增标签主要是为替代div标签。这些新增的区块标签和div最大的区别就是其标签名带有语义

代表浏览器的所有可视区域。body标签比较特殊，该标签同时也是区块标签。在大部分浏览器中，body标签有默认的宽度，即

代表body中的主要内容区域。一个文档中只能有一个main标签，并且其父标签必须是body标签

语义为文章，可用来定义独立的文档、页面、应用甚至是站点。判断是否应该使用article标准是其内的内容是否可以单独发布或重用

语义为章节也就是article的一部分，可用来定义区块或章节。要定义的内容是否需要出现在文档的提纲(目录)中是判断是否应该使用section的标准

section的一个重要特性是：被包含在section标签中的H1至H6标签，都会自动降一级。也就是原来是H1的，都变成H2显示。section本身是article内的一部分，如果article和section都有h1标签，那么section中的h1就只能是整个文件(article)中的h2

navigate，语义为导航。定义导航区块，该标签里主要放置页面上相对重要的导航链接区块

语义为旁边，用来定义和主内容有关的内容，aside标签定义的内容和主内容是相互独立的，但有相关性

语义为头部和尾部，分别用来表示头部和尾部。两者所定义的内容都不会在大纲中表现出来

header和footer一般都是放在article或者body的直接子元素中，也可以和aside、nav、section相关联

语义为标题组合，用于组合标题，一般是主标题和副标题。hgroup标签本身也是属于语义上的考虑

语义为地址信息，元素用来表示和它最近的父级article或者body里内容相关产的联系信息。一般出现在footer标签内。和hgroup一样，address也是语义级的标签，也就是说该标签没有展示上的作用

本身不是区块标签，只是区块标签中常用的标题标签。因为常与区块标签一起使用，所以放在这里

h1-h6本身是有默认样式的，也就是说这6个标签并不是纯粹的语义级标签。用的时候一般要先设定自定义的展示效果

在HTML5之前，以上新增的标签任务全部由div标签来承担。由于div标签本身没有语义，所以其对搜索引擎不友好。

需要强调的是在HTML5中，div标签依然会被使用，但一般不再用做页面级的布局

所有的区块标签都有相同或相似的的特征

所有的区块标签都没有除 display:block 之外的默认样式，除非被其子元素撑开或定义高的值，否则区块标签没有高度，这些区宽标签的宽度是继承的其父元素中的宽度，大部分情况下默认是width:100%。(div标签也一样)所有的区块标签都是“块级”的。但这种块级特性并不是区块标签的本质特性，而是通过浏览器中预定义的CSS中的设置上的。这样的设置可以修改

块级是其前、后都不能再有其他标签的标签。

行级是其前、后都可以有其他标签的的标签。行级标签中以下四个属性无效：margin-top、margin-bottom、padding-top、padding-bottom。另外height属性也无效

行内块级标签，具有行级标签的特性，但本身是一个块级标签。行内块标签中margin-top、margin-bottom、padding-top、padding-bottom属性有效

块级标签的宽度默认为最大宽度(width:100%)，块级标签将填充所有能够填充的宽度。也可以直接使用百分数单位进行设置块级标签的高度则不能直接使用百分数单位，就算设置为100%时，高度也不会增加

块级标签的高度特性本质上是从html或body标签中继承的。所以想实现高度的百分数分配，需要首先对html标签和body进行相应的设置在宽度和高度的设置建议使用vw、vh单位替代百分数单位

分组标签的作用是在区块标签的内部进行更细致的小区块的划分。

p标签，定义段落，该标签的一般拥有默认样式，段落的上、下各有一个空行。

p标签不能包含其他块级标签，尤其是div。这种特征和p标签的语义有关。

hr标签，html5中定义其为不同主题内容间的分隔符。注意：区块之间不需要使用hr进行分隔。

pre标签，表示已经排版的内容。默认样式为white-space:pre

blockquote标签，表示引用其他来源的内容，该标签中的文本会向左缩进。其中cite标签表示来源url。

ol-li标签组合，有序列表

ul-li标签组合，无序列表

dl-dt-dd标签组合，定义列表

figure标签，html5中的新增，定义插图、图表、照片或代码列表等

figcaption标签，html5中的新增，figure的标题

figure和figcaption标签是纯语义级标签。

div标签，由于没有语义也没有默认样式，所以在HTML5中区块布局不能在使用div了。大部分情况下，较小的区块内可以使用div。

type属性：1/A/a/I/i

html5中新加入了两个属性：

start属性，属性值只能是整数，表示这个列表从多少开始。

reversed属性，布尔属性，表示倒排。目前只有chrome支持。

在实际应用中，往往去掉列表之前的实心圆或其他标记。

ol默认样式

li默认样式

注意：

1，list-item属性值会生成一个块级盒子(序号或圆点)和一个行内元素(li中的文本)。

2，li标签的数字或实心圆默认样式为行内框左外显示，即；如果ol或ul的左内边距为0，则数字或实心圆会在边框之外，此时要设置，这设置数字或实心圆会和文字拼接在一起。

ul标签的的属性

type属性：取值disc(实心圆，默认)；square实心方；circle空心圆。注意：该属性在html5中已经被废弃。

html5中的li标签中的属性

value属性，属性值只能是整数，表示该li是列表的第N个。无论ol还ul中的li都可以包含该属性。

ul默认样式，和ol几乎一样，只有一个属性不同。

ul-li与ol-li的共同的特征：

1，ul与ol具有共同的默认样式，list-style-type属性除外。

ul-li与ol-li的不同之处：

ul是无序，前缀是黑色的圆点；ol是有序，前缀是数值。ol标签中可以包含start属性和reversed属性；ul没有。

dl、dt、大标签默认都是块级标签。

list-style-type

值 说明 语法示例

none 无标记符号 list-style-type:none;

disc 实心圆，默认类型 list-style-type:disc;

circle 空心圆 list-style-type:circle;

square 实心正方形 list-style-type:square;

decimal 数字 list-style-type:decimal

list-style-image 使用图片来替换列表项的标记，设置该属性后，list-style-type属性将失效。

url(…)

list-style-position 设置在何处放置列表项标记

inside 项目标记放置在文本以内，文本根据标记对齐(占用li的宽度)

outside 默认值，保持标记位于文本左侧，文本不根据标记对齐(不占用li的宽度)

list-style是以上属性的缩写，起顺序为list-style-type、list-style-position、list-style-image，当然也可以只写list-style-type。大部分下这其实是列表样式的主要写法。