1.无序列表ul>li
从字面意思去理解,既然是“无序”的,就说明列表项中的信息重要性是一致的。
比较常见的是门户站点的新闻列表。
2.与无序列表对应的列表是有序列表,ol>li
有序列表排名分先后顺序的。常见的是各种排行榜,比如music排行榜。
3.定义列表dl>dt+dd
定义列表看着好理解,但是容易被滥用。一个标题dt,然后dd对此进行展开描述。
详见链接:http://bbs.blueidea.com/forum.php?mod=viewthread&tid=3030640
4.表格 table,caption,thead,tbody,tfoot,tr,td
表格标签没什么好说的,参照:http://www.w3school.com.cn/html/html_tables.asp
对于表格和列表,需要说明下两者之间的差异。因为css的强大无所不在,所以,使用列表也可以模拟表格效果。
但模拟终归模拟,从语义的角度来看,提供一个良构才是正确的开端。
那么,表格和列表的差异在哪里?
很简单:表格是用来产生数据列,而列表只是用来产生数据级。
都两列以上了,你还使用列表,脑门儿让门夹了么?
来看看一些比较二的页面,脑子绝对让门儿夹了:
http://www.9sky.com/top/,歌曲排行都是无序列表啊,都三列了。
5.h标题的使用
这绝对是个有意思的话题。因为有一个普遍的观点,从SEO的角度去考虑,一个页面只能有一个H1。
新手在网上看这类东西绝对是坑爹啊。
那么,如何正确使用h1,h2,h3,h4,h5,h6呢?
有没有想过,为毛没有h7呢?
好,我们先看看一般的正确使用h标题的示例,代码如下:
<div class="music_mod"> <h1>音乐</h1> <div> <h2>音乐分类</h2> </div> <p>内容</p> </div> <div class="junshi_mod"> <h1>军事</h1> <p>内容</p> </div> <div class="entertainment_mod"> <h1>娱乐</h1> <div> <h2>音乐分类</h2> <ul> <li> <h3>流行</h3> <p>流行前线</p> </li> <li> <h3>古典</h3> <p>古典曲目</p> </li> </ul> </div> <p>内容</p> </div>
同级使用同级标题,音乐,军事,娱乐模块属于同一级别,故这三个模块内部的标题是从h1开始的。
而在模块的内部,比如娱乐部分,h1和div属于同级,但是div内部的标题就和h1不属于同级了,所以只能用h2。同理,ul中的h只能用h3。
这是正常的人对标题的理解。毛病也不大,但是思考不够深入。我们再扩展下思路,让这样的语义结构崩溃掉。
假如,对于音乐模块,我还需要这么做:
<div class="music_mod"> <h1>音乐顶级</h1> <div> <h1>音乐</h1> <div> <h2>音乐分类</h2> </div> <p>内容</p> </div> </div>
我又想在
<div> <h1>音乐</h1> <div> <h2>音乐分类</h2> </div> <p>内容</p> </div>
外套一层,怎么办?h1都用啦,岂不是要哭啦?
当然举例不太恰当,但并不排除有此可能。比如树状图。
解决这样的问题很简单,就是标题不分级别,全部使用h1。
<div class="music_mod"> <h1>音乐</h1> <div> <h1>音乐分类</h1> </div> <p>内容</p> </div> <div class="music_mod"> <h1>军事</h1> <p>内容</p> </div> <div class="music_mod"> <h1>娱乐</h1> <div> <h1>音乐分类</h1> <ul> <li> <h1>流行</h1> <p>流行前线</p> </li> <li> <h1>古典</h1> <p>古典曲目</p> </li> </ul> </div> <p>内容</p> </div>
霸气到哭。你再也不用管层级关系了,可以随心所欲地使用标题,你唯一需要担心的是,裸奔时候,页面奇丑无比。
但是,在我看来,这只能说是渲染机制不够好。文档渲染机制在标题上,应当根据文档的层级嵌套关系进行标题级别的渲染。
当然,我的这些示例只是对爆牙齿前辈的对h标题理解的一个补充。详见此文[深入结构:理解h系列的不合理。]
以上的示例似乎在说明h2,h3,h4,h5,h6的存在就是基本没用了,是吗?
好了,我们还需要考虑另外一种情况。用以证明h2,h3,h4,h5,h6的存在是合理的。
<h1>Let’s call it a draw(ing surface)</h1> <h2>Diving in</h2> <h2>Simple shapes</h2> <h2>Canvas coordinates</h2> <h3>Canvas coordinates diagram</h3> <h2>Paths</h2>
html5中引入了hgroup标签,用以对标题组进行分组。
我们再更改下对于h系列标题的渲染想法:同级h标题渲染根据标签来进行渲染,否则进行层级渲染。(yy一把)
5.表单标签。表单标签包含了form,label ,input,button,textarea,select,option等比较常见的标签。
详见:http://www.w3school.com.cn/html/html_forms.asp
需要注意的:
表单在input[type="text"]的情况下,回车会默认提交表单。
- 表单按钮通常需要指明按钮类型,type为submit或者button都得明确。
- 提交类型的按钮,id和name不能定义为submit。详见:http://huansinho.iteye.com/blog/869815
- 保存之类的跳转就用a标签,不必要使用按钮。
6.html5中的新增语义标签。
需要你们去关注下article和section的区别。其他基本没啥。
另外需要注意的是html标签的嵌套规则,这个可以查看一个经典的图示: