&head&标签的子标签
&title&标签：设置标题，设置完成后可以显示到IE窗口的标题上
&style&标签：引入css文件
&script&标签：引入javascript文件
&meta http-equiv=“content-type” content=“text/charset=gb2312”&
&meta http-equiv=“refresh” content=“5;url=”&
&meta name=&keywords& content=“&& &&
&meta name=&description& content=“ &&
&meta http-equiv=&expires& content=&0&&
&meta http-equiv=&pragma& content=&no-cache&&
body中常用标签：
bgcolor指背景颜色
background指背景图片
size—长度
width—宽度
color—颜色，color为 16 进制 RGB 数字，或者是下列预定义色彩,blue/yellow/red……
超级链接-&a&
target—目标窗口，使用target属性，你可以定义从什么地方打开链接地址。
.与文件同一目录..该文件的上一级目录
标题字体-&h1~6&
可以取&#,3,4,5,6
标题显示为黑体字
这些标记自动插入一个空行，不必用 &p& 标记再加空行
数字越小字体越大
换行：&br&和&p&:&p&中间插入一个空行，而&hr&不会插入空行
字体设置&font&
&& size—1,2,3,4,5,6,7
color—字体颜色， color为 16 进制 RGB 数字，或者是下列预定义色彩,blue/yellow/red……
文字布局：
&div&…&/div& &span&…&/span&
文字的分区显示2个div之间会自动换行
&ul&&li&…&/ul&
无序号列表
&ol&&li&…&/ol&
有序号列表
&pre&…&pre&
保留原始格式
图片-&img&:
src--图片路径，最好使用相对路径
alt--当鼠标放到图片上显示出提示信息
width—图片宽度，如果不指定按原始宽度
height—图片高度，如果不指定按原始高度
表单-&form&
提交给服务器的那个程序来处理（如：把表单中的数据保存到数据库中）
method，可以取值get或post
get—发送数据的大小有限制（256byte），表单中的数据显示在url后面，如：user.html?userid=zhangsan&username=张三
post—发送数据的大小没有限制，而且不会现在在url后面
&input type=&& name=&&&
type可以取值
? text/password/checkbox/radio/select/textarea/submit/reset/button/image/hidden
name输入域的名字
&&&& 文字输入-text
&&& &&&&&&&&&id—唯一标识
name—名称
value—值
size—长度
maxlength—最大长度
密码输入-password:
&&&&&& id—唯一标识
name—名称
value—值
size—长度
maxlength—最大长度
复选框-checkbox：
id—唯一标识
name—名称，多个时名称相同
value—值
checked—选中的checkbox
&&&&&&&&& 单选框-radio：
id—唯一标识
name—名称，多个时名称相同
value—值
checked—选中的radio
&&&&&&&&& 列表框-select：
id—唯一标识
name--名称
size--列表框的长度
multiple—可以实现多选的列表框
&option&,可以有option
value—列表框中的值
&&&&&&&&&&&&&& selected—指定哪一项被选中
&&&&&&&&& 文本区域-textarea：
id—唯一标识
name--名称
&&&&&&&&& 按钮-button:
button—点击按钮可以提交数据，一般适合于表单中多个button
submit—点击按钮将该form中的信息提交
reset—点击按钮将该form中的信息重置
image—可以点击图片提交
&&&&&&&&& 隐藏表单-hidden:
&&&&&&&&&& &隐含域其实和正常的输入域一样，只是不会将数据显示到页面上，因为放到&&&&
&&&&&&&&&&& 隐含域中的数据，没有必要让用户看，因为这些数据大部分是控制数据
&&&&&&&& 表格-table
&&&&&&&& border--表格边框尺寸
&&&&&&&& width—表格宽度，可以用百分比，可以用数值
&&&&&&&& align—对齐方式,left/right/center
&&&&&&&& &tr&--行
&&&&&&&& &td&--列
&&&&&&&& colspan—跨多列
&&&&&&&& 框架-frame:
&&&&&&&&&&&& 窗口中正常情况下只能显示一个网页，采用帧可以将窗口分隔出多个窗口，&&&&&&&&&&&&&&&&&&&&&& 每个窗口对应一个html文件
&&&&&&&& &head&&title&Frame&/title&&/head&
&&&&&&&& &!--注意不能有body标签--&
&&&&&&&& &!--
&&&&&&&& &body&
&&&&&&&& &--&
&&&&&&&&&&&&&&&&&& &frameset cols=&18%, *&&
&&&&&&&&&&&& cols表示列，如果多列采用逗号间隔，百分比表示列的宽度，星号表示剩余宽度，如果是行可以采用rows,用法同cols,如以下为两列：一列帧大小为18%,另一列帧大小为屏幕的剩余部分
&&&&&&&&&&&&&&&&&&&&&&&&&&& &frame name=&left& src=&21_1.html& &
&&&&&&&&&&&&&&&&&&&&& src为每帧对应的文件名称
&&&&&&&&&&&&&&&&&&&&&&&&&&& &frame name=&right& src=&21_2.html&&
&&&&&&&&&&&&&&&&&& &/frameset&
&&&&&&&& &!--&&
&&&&&&&& &/body&
&&&&&&&& --&
HTML中target属性的4个内定名称:
_blank，表示新开启一个浏览器窗口
_self，此属性为默认属性，在当前窗口显示
&&&&& _parent，表示在当前窗口的直接父帧窗口（直接上一级窗口）显示
&&&&& _top,在最顶层窗口显示
target属性值可以直接赋值帧的名称
隐含帧&iframe&:
&隐含帧使用的标签为&iframe&，隐含帧不需要放到&frameset&标签中，使用隐含帧，可以实现网页局部数据的显示的滚动和局部数据刷新
&sup&…&/sup&
&sub&…&/sub&
空格
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：298187次
积分：4137
积分：4137
排名：第3633名
原创：58篇
转载：429篇
评论：16条
(3)(1)(1)(2)(3)(5)(1)(2)(11)(11)(34)(20)(19)(6)(2)(6)(4)(13)(8)(33)(82)(33)(29)(51)(6)(6)(5)(90)视频: 20.HTML常用标签
分享给好友
20.HTML常用标签
下载至电脑
用或微信扫一扫，在手机上继续观看
分享给站外好友
把视频贴到Blog或BBS
flash地址:
<input type="text" class="form_input form_input_s" id="link3" value=''>
<input id="link4" type="text" class="form_input form_input_s" value=''>
更多在线互动网页设计、网站建设、网页美工课程及相关资料下载请加QQ群：（为课网校）
万万表情系列（VIP会员专享）
节目制作经营许可证京字670号
京公网安备号
药品服务许可证(京)-经营-当前访客身份：游客 [
当前位置：
基本结构标签: &HTML&,表示该文件为HTML文件 &HEAD&,包含文件的标题,使用的脚本,样式定义等 &TITLE&---&/TITLE&,包含文件的标题,标题出现在浏览器标题栏中 &/HEAD&,&HEAD&的结束标志 &BODY&,放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示. &/BODY&,&BODY&的结束标志 &/HTML&,&HTML&的结束标志
其它主要标签,以下所有标志用在&BODY&&/BODY&中: &A,HREF=&…&&&/A&,链接标志,&…&为链接的文件地址 &IMG,SRC=&…&&,显示图片标志,&…&为图片的地址 &BR&,换行标志 &P&,分段标志 &B&&/B&,采用黑体字 &I&&/I&,采用斜体字 &HR&,水平画线 &TABLE&&/TABLE&,定义表格,HTML中重要的标志 &TR&&/TR&,定义表格的行,用在&TABLE&&/TABLE&中 &TD&&/TD&,定义表格的单元格,用在&TR&&/TR&中 &FONT&&/FONT&,字体样式标志
属性: 属性是用来修饰标志的,属性放在开始标志内. 例:属性bgcolor=&BLACK&表示背景色为黑色. 引用属性的例子: &BODY,bgcolor=&BLACK&&&/BODY&表示页面背景色为黑色; &TABLE,bgcolor=&BLACK&&&/TABLE&表示表格背景色为黑色.
常用属性: 对齐属性,范围属性: ALIGN=LEFT,左对齐(缺省值),WIDTH=象素值或百分比,对象宽度. ALIGN=CENTER,居中,HEIGHT=象素值或百分比,对象高度. ALIGN=RIGHT,右对齐. 色彩属性: COLOR=#RRGGBB,前景色,参考色彩对照表. BGCOLOR=#RRGGBB,背景色.
&center&表示绝对居中.
&table&&/table&表格标识的开始和结束. 属性: cellpadding=数值单位是像素,定义表元内距 cellspacing=数值单位是像素,定义表元间距 border=数值单位是像素,定义表格边框宽度 width=数值单位是像素或窗口百分比,定义表格宽度 background=图片链接地址,定义表格背景图 &tr&&/tr&表格中一个表格行的开始和结束; &td&&/td&表格中行内一个单元格的开始和结束 属性: Colspan=&&,单元格跨越多列; Rowspan=&&,单元格跨越多行; Width=&&;定义表格宽度 Height=&&;定义表格高度 Align=&&;对齐方式 Valign=&&; Border=&&,边框宽度; Bgcolor=&&,背景色; Bordercolor=&&,边框颜色; Bordercolorlight=&&,边框明亮面的颜色; Bordercolordark=&&,边框暗淡面的颜色; Cellpadding=&&,内容与边框的距离(默认为2); Cellspacing=&&,单元格间的距离(默认为2);
&br&强制换行 &font&&/font&文本标识的开始和结束 属性: face=字体 color=颜色 &b&&/b&加粗文字标识的开始和结束 属性: style=font-size:40,用样式表方式控制字体大小,这里是40点 &div&&/div&,分区标识的开始和结束 属性: align=|center|left|right|水平对齐方式 &marquee&&/marquee&动态标识的开始和结束,如标识内放置贴图格式则可实现图片滚动 属性: scrollamount=1~60,滚动速度 direction=|left|right|up|down|,滚动方向 scrolldelay=滚动延时,单位:毫秒 &P&段落标识, &空格符, &img&贴图标识 属性: src=../../图片链接地址,贴图标识必备属性 style=filter:Alpha(opacity=100,style=2); filter:样式表滤镜; Alpha:透明滤镜, opacity:不透明度100(0~100); style:样式2(0~3), rules=&none&不显示内框& &embed,src=&…&&多媒体文件标识 属性: SRC=&../../FILENAME&, 设定音乐文件的路径,文件类型除了可以播放..mp3;.wav等音频,还可播放.swf和.mov等视频. AUTOSTART=TRUE/FALSE, 是否要音乐文件传送完就自动播放,TRUE是要,FALSE是不要,默认为FALSE LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止. STARTIME=&分:秒&, 设定乐曲的开始播放时间,如20秒后播放写为STARTIME=00:20 VOLUME=0-100, 设定音量的大小.如果没设定的话,就用系统的音量. WIDTH,HEIGHT, 设定控制面板的大小,都设为0可隐藏播放器 HIDDEN=TRUE, 隐藏控制面板 CONTROLS=CONSOLE/SMALLCONSOLE, 设定控制面板的样子, &bgsound,src=&…&&,背景音乐标识,只能用于.wav和.mp3格式. 属性: LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止.
表单标签: &form&&/form&表格标识的开始和结束,表单的内容都放在这里. 下边的标签放在表单内: &select&下拉选择框 &option&&/option& &/select& 属性: Multiple,多选 &pre &&/pre&,大量文字输入的编辑块 属性: Cols=&&,行; Rows=&&,列; &input,type=&text&&,文本框 &input,type=&password&&,密码框 &input,type=&submit&&,提交按扭 &input,type=&checkbox&&,复选框 &input,type=&radio&&,单选框 &input,type=&reset&&,重置按扭 &input,type=&image&&,图片按扭 &input,type=&hidden&&,隐藏域 &input,type=&button&&,按扭 &input,type=&file&&,浏览文件 公共属性: Name=&&; Value=&& Size=&&
框架标签: &FRAMESET&...&/FRAMESET&,定义框架. &FRAME&,放在框架标签内,定义每个框架的内容. 属性: Cols=&& Rows=&& Frameborder=&& Framespacing=&& src=&& Scrolling=&&,滚动条(No,Yes); Noresize,框加大小不可变; Marginhight=&&,高度空余空间; Marginwidth=&&,宽度空余空间; Target=&&,目标框架.
其他标签: &bgsound&,背景音乐; Src=&& Loop=&&,循环次数; &embed&,媒体播放块; Src=&& Loop=&&,循环次数; &marquee&&/marquee&,滚动部分; 属性: Bgcolor=&& Behavior,设置或获取文本如何在字幕中滚动. Direction=&&,滚动方向; Height=&& Width=&& Loop=&&,环次数; scrollAmount=&&,设置或获取介于每个字幕绘制序列之间的文本滚动像素数. scrollDelay=&&,设置或获取字幕滚动的速度. scrollHeight=&&,获取对象的滚动高度; scrollLeft=&&,设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离. scrollTop=&&,设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离. trueSpeed=&&,设置或获取字幕的位置是否使用scrollDelay和scrollAmount属性计算,已过的实际时间来自于时钟计时.
&!--...--&,注释标记,在&&!--&与&--&&之间的内容将不在浏览器中显示.
基本标签: &html&&/html&,创建一个HTML文档; &head&&/head&,设置文档标题和其它在网页中不显示的信息; &title&&/title&,设置文档的标题; &h1&&/h1&,最大的标题; &pre&&/pre&,预先格式化文本; &u&&/u&,下划线 &b&&/b&,黑体字; &i&&/i&,斜体字; &tt&&/tt&,打字机风格的字体; &cite&&/cite&,引用,通常是斜体; &em&&/em&,强调文本(通常是斜体加黑体); &strong&&/strong&,加重文本(通常是斜体加黑体); &font,size=&&,color=&&&&/font&,设置字体大小从1到7,颜色使用名字或RGB的十六进制值; &BASEFONT&&/BASEFONT&,基准字体标记; &big&&/big&,字体加大; &SMALL&&/SMALL&,字体缩小; &STRIKE&&/STRIKE&,加删除线; &CODE&&/CODE&,程式码; &KBD&&/KBD&,键盘字; &SAMP&&/SAMP&,范例; &VAR&&/VAR&,变量; &BLOCKQUOTE&&/BLOCKQUOTE&,向右缩排; &DFN&&/DFN&,述语定义; &ADDRESS&&/ADDRESS&,地址标记; &sup&&/SUP&,上标字; &SUB&&/SUB&,下标字; &xmp&...&/xmp&固定宽度字体(在文件中空白、换行、定位功能有效) &plaintext&...&/plaintext&固定宽度字体(不执行标记符号); &listing&...&/listing&,固定宽度小字体; &font,color=00ff00&...&/font&字体颜色; &font,size=1&...&/font&最小字体; &font,style,='font-size:100,px'&...&/font&无限增大.
&p&&/p&,创建一个段落; &p,align=&&&,将段落按左、中、右对齐; &br&,换行,插入一个回车换行符; &blockquote&&/blockquote&,从两边缩进文本;
&dl&&/dl&,列表标签,定义列表; &dt&,定义列表标题; &dd&,定义列表内容; 例: &dl& &dt&标题1&/dt& &dd&内容11&/dd& &dd&内容12&/dd& &dt&标题2&/dt& &dd&内容21&/dd& &dd&内容22&/dd& &/dl&
&ol&&/ol&,列表标签,定义一个标有数字的列表;
&ul&&/ul&,列表标签,定义一个标有圆点的列表; &li&,放在每个列表项之前; 放在&ol&&/ol&之间则每个列表项加上一个数字,放在&ul&&/ul&之间则每个列表项加上一个圆点;
&div,align=&&&&/div&,分区标签,用来排版大块HTML段落,也用于格式化表; &MENU&,选项清单; &DIR&,目录清单; &nobr&&/nobr&,强行不换行; &hr,size='9',width='80%',color='ff0000'&水平线(设定宽度); &center&&/center&,水平居中.
链接标签: &a,href=&URL&&&/a&,创建超文本链接; &a,href=&mailtEMAIL&& &/a&,创建自动发送电子邮件的链接; &a,name=&name&&&/a&,创建位于文档内部的书签; &a,href=&#name&&&/a&,创建指向位于文档内部书签的链接; &BASE&,文档中不能被该站点辨识的其它所有链接源的URL; &LINK&,定义一个链接和源之间的相互关系;
链接标签注解: target=&...&,决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top); rel=&...&,发送链接的类型; rev=&...&,保存链接的类型; accesskey=&...&,指定该元素的热键; shape=&...&,允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly); coord=&...&,使用像素或者长度百分比来定义形状的尺寸; tabindex=&...&,使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点).
表格标签: &table&&/table&,创建一个表格; &tr&&/tr&,表格中的每一行; &td&&/td&,表格中一行中的每一个格子; &th&&/th&,设置表格头:通常是黑体居中文字; &table,cellspacing=&&&,设置表格格子之间空间的大小; &table,border=&&&,设置边框的宽度; &table,cellpadding=&&&,设置表格格子边框与其内部内容之间空间的大小; &table,width=&&&,设置表格的宽度.用绝对像素值或总宽度的百分比; &table,align=&&&,设置表格格子的水平对齐方式(left,center,right,justify); &tr,align=&&&,设置表格格子的水平对齐方式(left,center,right,justify); &tr,valign=&&&,设置表格格子的垂直对齐方式(baseline,bottom,middle,top); &td,colspan=&&&,设置一个表格格子跨占的列数(缺省值为1); &td,rowspan=&&&,设置一个表格格子跨占的行数(缺省值为1); &td,nowrap&,禁止表格格子内的内容自动断行; &CAPTION&&/CAPTION&,表格的标题; &COLGROUP&&/COLGROUP&,定义多个列为一组列; &TABLE&&/TABLE&,创建一个表格; &THEAD&&/THEAD&,定义表格的页眉; &COL&,定义一个列组中的列，以便对它们能够同时设置有关属性; &TBODY&&/TBODY&,定义一个表格的实体; &TFOOT&&/TFOOT&,定义一个表格的页脚;
表单标签: &form&&/form&,创建表单; action=&...&,接收数据的服务器的URL; method=&...&,HTTP的方法(get,,post),其中get是被反对使用的; enctype=&...&,指定MIME(Internet媒体类型); onsubmit=&...&,当提交表单时发生的内部事件; noreset=&...&,在重新设置表单时发生的内部事件; target=&...&,决定把内容显示在什么地方(_blank,_parent,_self,_top) &select,multiple,name=&name&,size=&&&&/select&,创建滚动菜单,size设置在需要滚动前可以看到的表单项数目; &option&,设置每个表单项的内容; &select,name=&name&&&/select&,创建下拉菜单; &pre ,name=&name&,cols=40,rows=8&&/pre&,创建一个文本框区域,列的数目设置宽度,行的数目设置高度; &input,type=&checkbox&,name=&name&&,创建一个复选框,文字在标签后面; &input,type=&radio&,name=&name&,value=&&&,创建一个单选框,文字在标志后面; &input,type=text,name=&foo&,size=20&,创建一个单行文本输入区域,size设置以字符串的宽度; &input,type=&submit&,value=&name&&,创建提交(submit)按钮; &input,type=&image&,border=0,name=&name&,src=&name.gif&&,创建一个使用图象的提交(submit)按钮; &input,type=&reset&&,创建重置(reset)按钮; &BUTTON&&/BUTTON&,创建一个按钮; disabled=&...&,把按钮的状态设置为不能; name=&...&,按钮的控制名,value=&...&,按钮的值; type=&...&,按钮的类型(button,,submit,,reset); &FIELDSET&&/FIELDSET&,把相互关联的控件组合成一组; &ISINDEX&,提示用户输入; &LABEL&&/LABEL&,为一个控件提供标签; &LEGEND&&/LEGEND&,为FIELDSET元素指定一标题; &SELECT&&/SELECT&,为用户做选择创建各个选项; &TEXTAREA&&/TEXTAREA&,创建一个允许用户多行输入的区域.
表单标签注解: type=&...&,用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,hidden,image,button); name=&...&,控件的控制名(要求是除了submit和reset之外的任何名字); value=&...&,控件的初始值; checked=&...&,把一个单选钮设置为选中的状态; disabled=&...&,把控件的状态设置为不能使用; readonly=&...&,只对输入密码的文本框使用; size=&...&,表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度,它是用来指定字符的数目; src=&...&,一个图像控件的URL; maxlength=&...&,指定可以输入的最多的字符数目; alt=&...&,另外一种文本描述; usemap=&...&,到客户端图形镜像的URL; align=&...&,被反对.控制对齐方式(left,,center,,right,,justify); tabindex=&...&,通过定义的tabindex值确定在不同元素之间获得焦点的顺序; onfocus=&...&,当元素获得焦点时发生的事件; onblur=&...&,当元素失去焦点时发生的事件; onselect=&...&,当元素被选中时发生的事件; onchang=&...&,当元素状态被改变时发生的事件; accept=&...&,允许上载的文件类型.
帧标签(框架标签): &frameset&&/frameset&,放在一个帧文档的&body&标签之前,也可以嵌在其他帧文档中; &frameset,rows=&value,value&&,定义一个帧内的行数,可用像素值或高度百分比; &frameset,cols=&value,value&&,定义一个帧内的列数,可用像素值或宽度百分比; &frame&,定义一个帧内的单一窗或窗区域; &noframes&&/noframes&,定义在不支持帧的浏览器中显示什么提示; &frame,src=&URL&&,规定帧内显示的HTML文档; &frame,name=&name&&,命名帧或区域以便别的帧可以指向它; &frame,marginwidth=&&&,定义帧左右边缘的空白大小,必须大于等于1; &frame,marginheight=&&&,定义帧上下边缘的空白大小,必须大于等于1; &frame,scrolling=&&&,设置帧是否有滚动栏,其值可以是&yes&,&no&,或&auto&; &frame,noresize&,禁止用户调整一个帧的大小; &IFRAME&&/IFRAME&,创建一个内联的帧; scr=&...&,定义在帧中显示的内容的来源; frameborder=&...&,定义帧之间的边界(0或1); align=&...&,被反对,控制对齐方式(left,,center,,right,,justify); height=&...&,帧的高度,width=&...&帧的宽度; &marquee&...&/marquee&,普通卷动; &marquee,behavior=slide&...&/marquee&,滑动; &marquee,behavior=scroll&...&/marquee&,预设卷动; &marquee,behavior=alternate&...&/marquee&,来回卷动; &marquee,direction=down&...&/marquee&,向下卷动; &marquee,direction=up&...&/marquee&,向上卷动; &marquee,direction=right&&/marquee&,向右卷动; &marquee,direction='left'&&/marquee&,向左卷动; &marquee,loop=2&...&/marquee&,卷动次数; &marquee,width=180&...&/marquee&,设定宽度; &marquee,height=30&...&/marquee&,设定高度; &marquee,bgcolor=FF0000&...&/marquee&,设定背景颜色; &marquee,scrollamount=30&...&/marquee&,设定卷动距离; &marquee,scrolldelay=300&...&/marquee&,设定卷动时间; &img,src=&&&,插入图片,参数有:width=&宽&,alt=&说明文字&,height=&高&,boder=&边框&.
文档整体属性标签: &body,bgcolor=&&&,设置背景颜色.使用名字或RGB的十六进制值; &body,background=&&&,设置背景图片; &body,bgsound=&&&,设置背景音乐; &body,bgproperties=&fixed&&,固定背景图片(IE适用); &body,text=&&&,设置文本颜色.使用名字或RGB的十六进制值; &body,link=&&&,设置链接颜色.使用名,字或RGB的十六进制值; &body,vlink=&&&,设置已使用的链接的颜色.使用名字或RGB的十六进制值; &body,alink=&&&,设置正在被击中的链接的颜色.使用名字或RGB的十六进制值; &body,topmargin=&&&,设置页面的上边距; &body,leftmargin=&&&,设置页面的左边距.
转载声明： 本文转自
原文链接：
共有0个评论
更多开发者职位上
有什么技术问题吗？
长平狐的其他问题
类似的话题HTML5中新标签和常用标签详解
做移动端有一段时间，今天有同事问了我 article 和 section 标签的使用，模模糊糊的解释了下，他似懂非懂，有点小尴尬。忽然间觉得自己有必要再翻翻书籍，重温下 html5 的新元素
今天先介绍下 html5 新增的结构元素，有的经常使用到，有的用不上，虽然说它们的出现是更促进页面更有语义，更好的 seo，但其实当页面禁用样式后，它们的展现跟 div 是没撒差别，有同学可能会说，既然一样，又不影响页面的最终展现，不管是 article 还是 section 能用就好了。如果考虑实际项目的针对用户，我也是这么认为的，但作为一个重构仔，我们还是得专业点，再考虑到无障碍这块，那么 html5 标签的作用就更明显了。于是复习下内容并记录在博客上，顺便分享给大家，也方便自己以后查找。
HTML5 新增结构元素分为主体结构元素和非主体结构元素
1.主体结构元素包括 article、section、nav、aside、time2.非主体结构元素包括 header、hgroup、footer、address一、主体结构元素articlearticle 标签，从语义化上看为文档、页面，其用法如下：
通常是一篇文章、一个页面、一个独立完整的内容模块一般会带个标题，并放在 header 标签中article 元素可以互相嵌套使用频率极高，强调独立性，多注意下与 header 标签的使用。
代码如下:&article&
&h1&是我标签&/h1&
&p&我是段落&/p&
&div&我的内容&/div&
&/article&&/article&sectionsection 标签，从语义化上看为部分，其用法如下：
用于页面内容的独立分块，往往是文章的一段通常由内容和标题组成，没有标题的内容不推荐使用 section使用频率低，强调分段分块。
注：《HTML5与CSS3权威指南》这本书中说明：一个容器需要被定义样式或者脚本定义行为时，推荐用div而非section，不要将section用作设置样式的容器。
代码如下:&section&
&h1&水果&/h1&
&h2&苹果&/h2&
&div&苹果是撒？&/div&
&/article&
&h2&桔子&/h2&
&div&桔子是撒？&/div&
&/article& &/section&&!-- article可以看成是一种特殊种类的section元素,它比section更强调独立性 --&&article&
&h1&中国人物&/h1&
&p&三国、两晋、南北朝&/p&
&h2&三国&/h3&
&p&猛将猛将猛将猛将&/p&
&/section&
&h2&两晋&/h3&
&p&猛将猛将猛将猛将&/p&
&/section&&/article&navnav 标签，从语义化上看为导航，其用法如下：
通常作为页面导航的链接组侧边栏导航使用频率高。
代码如下:&nav&
&li&&a href=""&菜单1&/a&&/li&
&li&&a href=""&菜单2&/a&&/li&
&li&&a href=""&菜单3&/a&&/li&
&/ul&&/nav&asideaside 标签，从语义化上看为在旁边、侧边，其用法如下：
在 article 标签中使用时，作为主要内容的附属信息部分，如有关的参考资料、名词解释等。在 article 标签外使用时，作为页面或者站点全局的附属信息部分，如侧边栏、博客的友情链接部分、广告区域等。使用频率低。
代码如下:&!-- 在article标签外使用时 --&&article&
&h1&马云是谁&/h1&
&p&马云，男，日出生于浙江省杭州市，中国著名企业家，阿里巴巴集团、淘宝网、支付宝创始人..........&/p&
&h1&参考资料&/h1&
&p&百度网、维基百科...&/p&
&/aside&&/article&&/p&
&p&&!-- 在article标签内使用时 --&&aside&
&li&&a href=""&老赵的博客&/a&&/li&
&li&&a href=""&鬼哥的博客&/a&&/li&
&li&&a href=""&彪叔的博客&/a&&/li&
&/nav&&/aside&timetime 标签，从语义化上看为时间，其用法如下：
代表 24 小时中的某个时刻或某个日期表示时刻时允许带时间差可定义很多格式的日期和时间使用频率低。代码如下:&time datetime=""&日&/time&&!-- datetime属性中日期与时间之间要用&T& 文字分隔，&T&表示时间 --&&time datetime="T20:00"&日20:00&/time&&!-- 时间加上&Z&表示给机器编码时使用UTC标准时间 --&&time datetime="T20:00Z"&日20:00&/time&二、非主体结构元素headerheader 标签，从语义化上看为文档的页眉，其用法如下：
一种具有引导和导航作用的结构元素通常放置在整个页面或者页面内的一个内容区块的标题一个网页内并没有限制 header 标签的个数使用频率极高，比较容易理解。
代码如下:&header&
&h1&我是大头&/h1&&/header&&article&
&h1&我是脖子&/h1&
&p&我是身体&/p&&/article&hgrouphgroup 标签，从语义化上看为标题组，其用法如下：
作为 header 标签的子元素一个内容模块中包括了主标题和至少一个子标题才使用 hgroup通常会将 h1~h6 元素进行分组使用频率高。
代码如下:&article&
&h1&我是刘备&/h1&
&h2&我是关羽&/h2&
&h3&我是张飞&/h3&
&/hgrounp&
&p&吕布惊呆了&/p&&/article&footerfooter 标签，从语义化上看为文档的脚注，其用法如下：
一个内容块区的脚注通常内容为联系信息、相关阅读、版权信息等使用频率高，比较容易理解。
代码如下:&article&
&p&吕布惊呆了&/p&
&li&关于三国&/li&
&li&地图信息&/li&
&li&游戏攻略&/li&
&/footer&&/article&addressaddress 标签，从语义化上看为地址，其用法如下：
用于文档中呈现的联系信息通常内容为作者、网站链接、电子邮箱、地址、电话号码等使用频率低。代码如下:&address&
&a href=""&作者：张三丰&/a&
&a href=""&地址：武当山&/a&
&a href=""&联系方式：1247&/a&&/address&
希望本文对大家在 html5 结构标签上的运用有一定的指导，如果发现内容有错误的地方，欢迎大家指正~}