html5结构标签,html5的标签

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新增的标签有哪些？

新增的结构标签：

1、header元素

表示页面中一个内容区块或真个页面的标题。

2、hgroup元素

表示对真个页面或页面中的一个内容区块的标题进行组合。

3、article元素 

表示页面中一块与上下文不相关的独立内容。比如一篇文章。

4、aside元素

表示article元素内容之外的、与article元素内容相关的辅助信息。

5、footer元素

表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。

HTML5新规则：

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求（比如 Flash），更优秀的错误处理，更多取代脚本的标记，HTML5 应该独立于设备开发进程应对公众透明 ;

HTML5 新特性：

新的特殊内容元素，比如 article、footer等，新的表单控件，比如 calendar、date、time、email、url、search；用于媒介回放的 video 和 audio 元素；用于绘画的 canvas 元素 

对本地离线存储的更好的支持。

html5中的结构性标签怎么使用

方法/步骤

1

首先，header,nav,article,section,aside,footer这些html5的标签本质上和div没有任何区别，他们的实质性作用就是让你的html代码有语义。也就是说，仅仅在html使用它们并不会显示出他们语义中包含的意思。还需要针对每一个标签编写相应的css。接下来，我将以下图为例，写一个样例

2

先写出它的大概框架。注意了，因为article section之类的仅仅是语义上的区别，其实怎么写都行。

3

然后添加一些内容，让页面显得饱满些，随便加一些就行，内容不重要。

4

直接在页面打开，它看上去是这样的。

5

接下来就是用css来让它看上去健康些，先定义header 和 nav以及body。效果如图

body

{

margin: 0 auto;

width: 900px;

background: #fff;

font: 100%/1.4 helvetica, arial, sans-serif;

}

header

{

background: #ccc;

padding: 20px;

}

header h1 { margin: 0; }

nav

{

float: left;

width: 900px;

background: #333;

}

nav ul

{

margin: 0;

padding: 0;

}

nav ul li

{

list-style-type: none;

display: inline;

}

nav li a

{

display: block;

float: left;

padding: 5px 10px;

color: #fff;

text-decoration: none;

border-right: 1px solid #fff;

}

6

下面是对article 和 footer的定义，完成这些之后就能看到一个还不错的页面了

article

{

clear: left;

float: left;

width: 560px;

padding: 20px 0;

margin: 0 0 0 30px;

display: inline;

}

article h2 { margin: 0; }

aside

{

float: right;

width: 240px;

padding: 20px 0;

margin: 0 20px 0 0;

display: inline;

}

aside h3 { margin: 0; }

footer

{

clear: both;

background: #ccc;

text-align: right;

padding: 20px;

height: 1%;

}

html5 一共多少标签

结构标签：(块状元素) 有意义的div

article 标记定义一篇文章

header 标记定义一个页面或一个区域的头部

nav 标记定义导航链接

section 标记定义一个区域

aside 标记定义页面内容部分的侧边栏

hgroup 标记定义文件中一个区块的相关信息

figure 标记定义一组媒体内容以及它们的标题

figcaption 标签定义 figure 元素的标题。

footer 标记定义一个页面或一个区域的底部

dialog 标记定义一个对话框(会话框)类似微信

多媒体交互标签

video 标记定义一个视频

audio 标记定义音频内容

source 标记定义媒体资源

canvas 标记定义图片

embed 标记定义外部的可交互的内容或插件 比如flash

Web应用标签

menu命令列表

menuitemmenu命令列表标签 FF（嵌入系统）

command menu标记定义一个命令按钮

meter状态标签(实时状态显示:气压、气温)C、O

progress状态标签 (任务过程:安装、加载) C、F、O

datalist 为input标记定义一个下拉列表,配合option F、O

details 标记定义一个元素的详细内容 ，配合dt、dd C

注释标签

ruby 标记定义 注释或音标

rp 告诉那些不支持 Ruby元素的浏览器如何去显示

rt 标记定义对ruby的注释内容文本

其他标签

keygen 标记定义表单里一个生成的键值(加密信息传送)O、F

mark 标记定义有标记的文本 (黄色选中状态)

output 标记定义一些输出类型,计算表单结果配合oninput事

删除的HTML标签

纯表现的元素：

basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：

frame，frameset，noframes；

产生混淆的元素：

acronym ，applet，isindex，dir

重新定义的HTML标签

b 代表内联文本，通常是粗体，没有传递表示重要的意思

i 代表内联文本，通常是斜体，没有传递表示重要的意思

dd 可以同details与figure一同使用，定义包含文本，dialog也可用

dt 可以同details与figure一同使用，汇总细节，dialog也可用

hr 表示主题结束，而不是水平线，虽然显示相同

menu 重新定义用户界面的菜单，配合commond或者menuitem使用

small 表示小字体，例如打印注释或者法律条款

strong 表示重要性而不是强调符号

HTML5 是下一代的 HTML。

html5新增的标签有什么？

新增的结构标签：

1、header元素

表示页面中一个区块或真个页面的标题。

2、内hgroup元素

表示对真个页面或页面中的容一个内容区块的标题进行组合。

3、article元素

表示页面中一块与上下文不相关的独立内容。比如一篇文章。

4、aside元素

表示article元素内容之外的、与article元素内容相关的辅助信息。

5、footer元素

表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。

HTML5新规则：

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求（比如 Flash），更优秀的错误处理，更多取代脚本的标记，HTML5 应该独立于设备开发进程应对公众透明 ;

HTML5 新特性：

新的特殊内容元素，比如 article、footer等，新的表单控件，比如 calendar、date、time、email、url、search；用于媒介回放的 video 和 audio 元素；用于绘画的 canvas 元素

对本地离线存储的更好的支持。