利用label标签和CSS美化文件上传表单(不兼容IE6)

最近着实很忙,匆忙间有一个月没更新博客了。
文件上传类型表单<input type=”file” />是一个让很多前端开发者纠结过的表单类型,因为它是一个无法单纯用CSS给它定义兼容的样式。上周的工作中有个批量上传图片的页面,又遇到了这个问题,于是,今天把我的解决方案奉献给大家:利用label标签与CSS共同打造一个样式可控的并兼容IE6之外主流浏览器的上传表单。
实现思路通俗易懂:点此查看样例
利用LABEL与CSS美化文件上传表单
首先,我们要新增一个与file相册大小的button按钮,然后利用label为初始的file类型表单定义标注(关于label的解释与用法,此处不详解,不了解的请自行查阅HTML手册)。如此一来,一个可以触发选择文件表单的按钮就出来了。接下来,相信很多人都知道怎么做了。
有了一个可以触发file表单的按钮,只要通过绝对定位将file表单从文档流中拖出,然后用z-index属性将它的层级提升到比button按钮高,同时将file表单的透明度置为0,这样一来,file表单就正好覆盖在button按钮上了,并且可触发选择文件表单。此处有一点需要说明,FireFox中是无法通过width来设定宽度值的,所以需要用input的size值来设定file表单宽度值。
最后,附上样例中的成型代码:
HTML代码:

CSS代码:

.btns{position:relative}
.btns input{width:120px;height:30px}
.btns .btn_file_molding{position:absolute;left:0;top:0;z-index:1;border:0 none;filter:alpha(opacity=0);opacity:0}/*file的z-index要大于button*/

几个注意的细节:
1.file表单与button按钮的高宽一定要相同;
2.因各浏览器对file表单的表现不一致,其边框一定要隐藏掉,以免出现各浏览器不兼容问题;
3.firefox中直接通过样式定义width是无效的,需要用size设置file宽度;
4.IE6可用JS为button绑定file表单的点击事件,此处不详述。

另,本文提供的是一种主体思路,你可以在此思路上做进一步的美化扩展,比如加背景图片文字样式等等。

HTML 5的革新:结构之美

前言
HTML 5如同一场革命,正在Web2.0后时代轰轰烈烈的进行着。
HTML 5是什么,无须我在这里赘述了。对于HTML 5的革新,按我的理解,可以总结为语义明确的标签体系、化繁为简的富媒体支持、神奇的本地数据存储技术、不需要插件的富动画(canvas)、强大的API支持。总之,HTML 5让人机交互,人网交互变得更加舒适,贴合用户。以往对富媒体应用与本存储的支持乏力也不再是浏览器的切肤之痛。将Web从内容平台推向标准化的应用平台,并一统各在平台阵营的标准,才是HTML 5革命的初衷。
本文,我就抛砖引玉,阐述HTML 5的革新之一:语义更明确简洁的结构。
从”头”说起
一个标准的XHTML头部代码应该是这样:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>

你能记住吗?你会去死记硬背吗?当然不会!我们只需要机械的复制粘贴即可。
再看看一个标准的HTML 5头部是如何的:

<!doctype html>
<meta charset=gb2312>

孰繁孰简,就不用我说了。是的,HTML 5的头部可以如此简单,可以轻易的记住!并且,可以忽略大小写,引号以及最后一个尖括号前的反斜线。
为什么可以如此松散?其实,如果把XHTML当成text/html发送,浏览器一样可以很好的解析,浏览器并不在乎代码的语法。所以,HTML 5是形而上的,它可能会破坏原有的一些标准,但仍可在浏览器中很好的表现。
当然,为了团队协助与后续维护的方便,我们还是应该统一一种你喜欢的风格的写法,比如:

<!doctype html>
<html>
<head>
<meta charset="gb2312" />
...
</head>
<body>
...
</body>
</html>

另外,HTML 5虽然目前并不为所有浏览器所支持,但这个能省去100多字节(对于日PV百万级以上的站点,能省下不少的流量哦)的头部已可以完美的兼容了。如果你对浏览器解析模式有研究的话,你应该知道,页面在没有定义doctype的情况下会触发怪异模式,而只要定义了<!doctype html>浏览器就可以在标准模式下解析页面,而不需要指定某个类型的DTD。
新的语义化标签体系
语义化编码是一个合格前端Developer必备的技能,但随着网页的日渐丰富化,仅仅用原有的xhtml标签去语义化显然已经力不从心。上帝说:”要有光!”便有了光。于是,HTML 5提供了一系列新的标签及相应属性,以反应现代网站典型语义。实践出真理。还是写一个例子吧:

<div id="header">
	<div class="hgroup">
		<h1>网站标题</h1>
		<h1>网站副标题</h1>
	</div>
	<div id="nav">
		<ul>
			<li>HTML 5</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
	</div>
</div>
<!--//header end-->
<div id="left">
	<div class="article">
		<p>这是一篇讲述HTML 5新结构标签的文章。</p>
	</div>
	<div class="article">
		<p>这还是一篇讲述HTML 5新结构标签的文章。</p>
	</div>
</div>
<!--//left end-->
<div id="aside">
	<h1>作者简介</h1>
	<p>Mr.Think,专注Web前端技术的凡夫俗子。</p>
</div>
<!--//side end-->
<div id="footer">
页面的底部
</div>
<!--//footer end-->

上面是一个简单的博客页面部分HTML,由头部、文章展示区、右侧栏、底部组成。编码整洁,也符合XHTML的语义化,即便是在HTML 5中也可以很好的表现。但是对浏览器来说,这就是一段没有区分开权重的代码,而不是一个让机器也能读懂语义的标签来定义相应的区块。比如,标准浏览器(比如Firefox、Chroome甚至新版的IE)都有一个快捷键可以带引客户直接跳转到页面的导航,但问题是所有的区块都是用DIV定义,并且DIV的ID值是同开发者定的,所以,浏览器并不知道哪个应该是导航链接所在区块。HTML 5新标签的出现,正好弥补了这一缺憾。那么,上面的代码,换成HTML 5就可以这样写:

<header>
	<hgroup>
		<h1>网站标题</h1>
		<h1>网站副标题</h1>
	</hgroup>
	<nav>
		<ul>
			<li>HTML 5</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
	</nav>
</header>
<div id="left">
	<article>
		<p>这是一篇讲述HTML 5新结构标签的文章。</p>
	</article>
	<article>
		<p>这还是一篇讲述HTML 5新结构标签的文章。</p>
	</article>
</div>
<aside>
	<h1>作者简介</h1>
	<p>Mr.Think,专注Web前端技术的凡夫俗子。</p>
</aside>
<footer>
	网页底部
</footer>

原来,HTML的页面结构可以如此之美,不用注释也能一目了然。对于浏览器,找到对应的区块也不再会茫然无措。
如何用HTML 5新标签结构化元素
通过上面的示例,我们了解到HTML 5的新标签对结构化的革新,但切换到实际使用中,该如何恰当的使用它们呢?我想这也是很多HTML 5学习者想问一个问题。如同XHTML语义化一样,HTML 5语义化标签的使用也应该遵循:每个标签都有它特定的意义,而语义化,就是让我们在适当的位置用适当的标签,以更好的让人和机器(机器可理解为浏览器可理解为搜索引擎)都一目了然。比如header标签一般是页面的第一个区块元素(header标签也可用于类型的头部元素中,比如文章区块的标题),包含的了页面的主题信息;nav标签一般用于包裹导航信息;footer一般用来包裹页面底部信息;等等。
下面是我参考HTML 5手册列出的结构类常用新标签的语义解释及使用指引:
<header>标签
手册释义:定义 section 或 document 的页眉。
使用指引:一般用来包含页面头部,也可用于其他区域头部,比如article头部:

<header>
	<hgroup>
		<h1>网站标题</h1>
		<h1>网站副标题</h1>
	</hgroup>
</header>

<hgroup>标签
手册释义:用于对网页或区段(section)的标题进行组合。
使用指引:用于标题类的组合,比如文章的标题与副标题:

<hgroup>
	<h1>这是一篇介绍HTML 5结构标签的文章</h1>
	<h2>HTML 5的革新</h2>
</hgroup>

<nav>标签
手册释义:定义导航链接的部分。
使用指引:用于定义页面的导航部分:

<nav>
	<ul>
		<li>HTML 5</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
</nav>

<aside>标签
定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
使用指引:用于成节的内容,会在文档流中开始一个新的节,一般用于与文章内容相关的边栏:

<aside>
	<h1>作者简介</h1>
	<p>Mr.Think,专注Web前端技术的凡夫俗子。</p>
</aside>

<section>标签
手册释义:定义文档中的节(section)。比如章节、页眉、页脚或文档中的其他部分。
使用指引:用于成节的内容,会在文档流中开始一个新的节:

<section>
	<h1>section是什么?</h1>
	<h2>一个新的章节</h2>
	<article>
		<h2>关于section</h1>
		<p>section的介绍</p>
		...
	</article>
</section>

<footer>标签
手册释义:定义 section 或 document 的页脚。典型地,它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
使用指引:一般用来包裹整个页面通用底部,也可用于其他区域底部,比如article底部:

<footer>
	COPYRIGHT@Mr.Think
</footer>

<article>标签
手册释义:定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文
本。亦或是来自其他外部源内容。
使用指引:顾名思义,一般用于文章区块:

<article>
	<header>
		<hgroup>
			<h1>这是一篇介绍HTML 5结构标签的文章</h1>
			<h2>HTML 5的革新</h2>
		</hgroup>
		<time datetime="2011-03-20">2011.03.20</time>
	</header>
	<p>文章内容详情</p>
</article>

<figure>标签
手册释义:用于对元素进行组合。
使用指引:多用于图片与图片描述组合:

<figure>
	<img src="img.gif" alt="figure标签"  title="figure标签" />
	<figcaption>这儿是图片的描述信息</figcaption>
</figure>

<menu>标签
手册释义:定义菜单列表。当希望列出表单控件时使用该标签。
使用指引:使用于菜单类区块,用来定义菜单列表或菜单选项:

<menu>
	<li>HTML 5</li>
	<li>CSS</li>
	<li>JavaScript</li>
</menu>

HTML 5的其他新标签,就不此一一解释了,请自行查询一下手册。
其实,这些东西,如同XHTML的div、h1、inpu等标签一样,只要平时多加实践,运用自如也是轻而易举的。
关于兼容性
如果你是一个喜欢研究关注前端的人,你应该知道淘宝的页面结构中已大量用到了HTML 5新标签。所以,我想说的是只要敢于尝试,兼容性不是问题,兼容的方法,网上有很多(本文是讲结构的,哈~)。

后话
任何一门新技术,都需要一个适应的过程。如果你准备好了做一名优秀的Web前端开发人员,那你就得不断的尝试并接受最新的前端技术。
孙文曾说,欲经文明之幸福,不得不经文明之痛苦。人类的革命如此,HTML 5的革命亦是如此。IE的日渐没落,让各大浏览器厂商以一次进入了战国时代,群雄逐鹿。而对于开发者,我们只奢求各大浏览器厂商尽可能的遵循同一个标准,而不是群雄逐鹿后的四分五裂。因为,高效完美的呈现给各类用户同样的应用才是我们的终极目标。

如此,本文从页面的doctype说起,到用HTML 5新标签搭建语义化更明确的页面的结构,再解释了一番与页面结构相关的新标签。相信大家对HTML 5的结构性新标签有了一个新的认知,如果你有兴趣,那就打开你的IDE,写上一段由HTML 5新标签搭建的代码,然后用CSS去描绘你的宏伟蓝图吧!

HTML5之表单详解

请在新版标准浏览器(Chrome/Opera/Firefox/Safari…)中浏览本文中的样例,否则你看到的只是一个个空白的表单! ⊙﹏⊙‖∣

HTML5
时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术革新,我们都必须第一时间去了解它学习它,比如Web世界里这簇美艳的花朵—HTML5.虽然HTML5发布之初,许多人(包括我)都觉得普及它还很遥远,但自发布以来,许多企业级网站对它的尝试应用(比如<!doctype html>应用,比如canvas的应用),使HTML5的迈出了一大步,随之而来IE9的发布,无疑又让我们看到了HTML5离我们不再遥远.
学习HTML5半年有余了,虽然对它的离线存储以及canvas等革新性技术还是一知半解,但我还是希望我现在所学到的能帮助更多的前端人学习这门毋庸置疑是新趋势的技术.本文我将详细介绍一下HTML5中对表单功能的更新.
阅读本文前建议在Opera最新版中打开样例演示页查看样例演示
一、表单结构更自由
XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来.
比如:

...

二、多样的输入类型(大部分新类型目前并不为所有标准浏览器支持,请参见样例演示中的提示)
email输入类型


此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.
url输入类型


上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://.
日期时间相关输入类型(这些个很牛X的)





这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样.
number输入类型(这些个很牛X的)


这个不用多解释了,要求输入一个数字字符,若未输入则会抛出一个错误.
range输入类型


此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.
search输入类型


此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标.
tel输入类型


此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.
color输入类型


此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中.
三、新增的表单属性
placeholder属性


这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持.
require/pattern属性




表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.上面两种写法都对,这个很有用.并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.
autofocus属性


默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().
list属性



	

该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.
max/min/step属性


限制值的输入范围,以及值的输入渐进程度,比如可在number设定输入最大值最小值,或者在range中设定拖动阶梯.
autocomplete属性


此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.

路漫漫其修远兮,吾将上下而求索.前端之路,学无止尽.痛并快乐着. ╰( ̄▽ ̄)╮

CSS技巧: 模块化编码

写在文章之前: 本文仅限于CSS研究, 其实用性(过多的类名组合及原子类会导致后期维护非常难)有待商讨. 有许多同行朋友对本文的思想持反对意见, 包括我自己对本文的思想也一直是仅限于自己研究学习, 未曾真正的用于过商业项目中. 过于模块化有风险, 使用请慎重!

原生JS因jQuery的”write less,do more”变得极简, HTML因语义化编码变得简明, 那么, 有没有一种方式让CSS也更加的高效精致呢? 当然有, 那便是模块化编码.
CSS的模块化,我们可以理解成(抑或本身就是)OOP思想, 重用性、灵活性、可扩展性便是它终极的目标, “类”便是它的核心, OOP的多用组合少用继承一样是它的基本原则. CSS模块化是一个新颖高效的CSS编码方式, 若有接触过YUI CSS的朋友肯定对这种方式有所了解.
如何CSS模块化, 我想这才是大家真正关心的. 我所理解的CSS模块化, 应该从两大块去区分.
第一大块, 从整站全局模块化. 这一点大家并不陌生, 时常用到的reset css便是模块化的一部分, 全局通用的字体样式, 链接样式, 以及通用头部底部及主体容器等等这些我们已经熟知, 另外诸如定义文字排版(如.f12{font-size:12px})、定位(如.tl{text-align:left})、长度高度(如.w10{width:10px})、边距(如.m10{margin:10px})等页面中会常用到的样式,这一类,我们称之为CSS通用原子类(哈,与类扯上关系了,那就权当成类吧).通用原子类有两个特点: 通用性和原子性, 任何页面都可以随意使用它们, 且他们只表现最基础的样式, 一个通用原子类只设置一个样式,不可再分. 关于整站全局模块化不再详述, 本文后面我会贴出阿当的《Web前端开发修炼之道》一书中常用通用原子类样式.
第二大块, 是从视觉效果上模块化, 在视觉上样式和功能相对独立稳定的部分即可视为模块. 拆分这些模块, 应该尽量遵循一个原则: 模块与模块之间尽量不要包含相同的部分, 若有相同部分就再拆出来独立成一个模块.
下图是我画的一个简易的页面视觉图:
CSS模块化视觉样例
看到上图, 菜鸟的CSS编码一般是为1~4定义四个类名,为他们写各自的样式; 明智一点的写法是为1~4定义四个类名, 用.a .b .c .d{…}方式定义共同样式, 然后再为各自定义不同部分的样式; 但是, 还有一种完美的方式, 那便是模块化. 下面我就以上图为例做个简单的模块化分析.
第一步, 分析整个视觉共用部分. 可以看出,1~4中,标题背景,标题文字,内容文字这三个部分的样式都是相同的, 所以, 我们可以为这个四个区块定义一个类名, 将共同的样式写给这个类名:

...
<div class="box">
	<h2>倒霉松鼠再出山</h2>
	<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box">
	<h2>倒霉松鼠再出山</h2>
	<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<h2>倒霉松鼠再出山</h2> <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p> </div> <div class="box"> <h2>倒霉松鼠再出山</h2> <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p> </div> ...

第二步, 分析出不同部分, 并权衡高效使用. 可以看出, 不同部分, 主要是内容背景色和区块宽度两部分. 先说背景色, 背景色有三种, 淡黄(1个), 白色(2个), 灰色(1个), 遵从”模块与模块之间尽量不要包含相同的部分, 若有相同部分就再拆出来独立成一个模块”的原则, 我们要把2个白底的样式提出来, 另两个单独定义, 而根据CSS优先原则, 我们可以把白底默认定义到第一步中的box样式中, 另两种背景色可做重定义处理. 再来看看宽度与定位, 2,4宽度等同且都右浮动, 所以, 我们可以把这部分提出来模块化, 而浮动一般可以直接调用通用原子类, 所以, 我们仅仅需要定义一个宽度样式中(若这个宽度在通用原子类中也有就更好了). 如此以来, HTML可以这样写:

...
<div class="box bg_y">
	<h2>倒霉松鼠再出山</h2>
	<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box fr right_w">
	<h2>倒霉松鼠再出山</h2>
	<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box">
	<h2>倒霉松鼠再出山</h2>
	<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box fr right_w bg_g">
	<h2>倒霉松鼠再出山</h2>
	<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
...

或许, 这样的结构对HTML页面来说, 会显的有些臃肿, 但CSS文件因为重用性的提高而大大的减小了.
CSS模块化是一个比较实用但也需要去领悟的思想, 实际使用中也需要全面的分析, 过多的模块也会导致维护性的降低, 如同OOP编程一样, 我们也要考虑”公有属性”与”私有属性”.
本文通过一个简单的例子解析了CSS模块化的基本思想, 更多关于CSS模块化的知识, 可以看YUI CSS或者其他网络上的资源.
do write, less more…CSS也可以做到.
附: 阿当《Web前端开发修炼之道》一书中分享的通用原子类:

/*文字排版*/
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.f16{font-size:16px}
.f20{font-size:20px}
.fb{font-weight:bold}
.fn{font-weight:normal}
.t2{text-indent:2em}
.lh150{line-height:150%}
.lh180{line-height:180%}
.lh200{line-height:200%}
.unl{text-decoration:underline;}
.no_unl{text-decoration:none;}
/*定位*/
.tl{text-align:left}
.tc{text-align:center}
.tr{text-align:right}
.bc{margin-left:auto;margin-right:auto;}
.fl{float:left;display:inline}
.fr{float:right;display:inline}
.cb{clear:both}
.cl{clear:left}
.cr{clear:right}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}
.vm{vertical-align:middle}
.pr{position:relative}
.pa{position:absolute}
.abs-right{position:absolute;right:0}
.zoom{zoom:1}
.hidden{visibility:hidden}
.none{display:none}
/*长度高度*/
.w10{width:10px}
.w20{width:20px}
.w30{width:30px}
.w40{width:40px}
.w50{width:50px}
.w60{width:60px}
.w70{width:70px}
.w80{width:80px}
.w90{width:90px}
.w100{width:100px}
.w200{width:200px}
.w250{width:250px}
.w300{width:300px}
.w400{width:400px}
.w500{width:500px}
.w600{width:600px}
.w700{width:700px}
.w800{width:800px}
.w{width:100%}
.h50{height:50px}
.h80{height:80px}
.h100{height:100px}
.h200{height:200px}
.h{height:100%}
/*边距*/
.m10{margin:10px}
.m15{margin:15px}
.m30{margin:30px}
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt50{margin-top:50px}
.mt100{margin-top:100px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb50{margin-bottom:50px}
.mb100{margin-bottom:100px}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml50{margin-left:50px}
.ml100{margin-left:100px}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr15{margin-right:15px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr50{margin-right:50px}
.mr100{margin-right:100px}
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt50{padding-top:50px}
.pb5{padding-bottom:5px}
.pb10{padding-bottom:10px}
.pb15{padding-bottom:15px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pb50{padding-bottom:50px}
.pb100{padding-bottom:100px}
.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl15{padding-left:15px}
.pl20{padding-left:20px}
.pl30{padding-left:30px}
.pl50{padding-left:50px}
.pl100{padding-left:100px}
.pr5{padding-right:5px}
.pr10{padding-right:10px}
.pr15{padding-right:15px}
.pr20{padding-right:20px}
.pr30{padding-right:30px}
.pr50{padding-right:50px}
.pr100{padding-right:100px}

HTML技巧: 语义化你的代码

最近在读阿当的《Web前端开发修炼之道》, 其中有不少东西值得前端路上的朋友学习. 结合自己日常编码的一些经验, 我将陆陆续续将一些从书中学到的以及自己总结的一些前端方面的技巧分享给大家.

HTML语义化, 似乎是一个老生常谈的问题. Google一下,也有大把关于语义化的文章. 为什么要语义化标签? 我是这样认为的:HTML的每个标签都有它特定的意义,而语义化,就是让我们在适当的位置用适当的标签, 以更好的让人和机器(机器可理解为浏览器可理解为搜索引擎)都一目了然. 如果我的解释不够明了, 请Google.

如何在合适的位置使用合适的标签?
这是一个简单的理解逻辑. 比如, h1~h6标签是用于标题类的; ul是用于无序列表的; ol是用于有充列表的; dl是用于定义列表的; em,strong标签是用来强调的…说白了, HTML标签的每个英文释义决定了它的语义(本文后面, 我会放一份常用HTML标签的英文释义对照表供参考).
什么是让人和机器都能一目了然?
检查HTML页面是否语义化最好的方法, 便是去掉页面的CSS链接, 看网页结构是否井然有序, 页面是否仍然有很好的可读性. 为什么可以这么说? 大家都知道浏览器都有默认的样式(推荐使用Chrome的Web Developer Tools for Chrome插件, 或者Firefox的Web Developer插件), 比如h1~h6, 会有加粗/字号依次减小、上下边距的默认样式, ul、ol、dl都有默认的项目符号, strong默认有加粗的样式…所以, 同样的页面, 语义化良好的HTML可以在页面CSS去掉的情况下依然有良好的表现.
还有一点, 好的语义化编码, 对搜索引擎有更好的友好性. 搜索蜘蛛是不认识你的CSS的, 但它能识别HTML标签.
下面是一个简单的例子:
未语义化语义化后的效果差异






通过上面的简单的示例和没有任何CSS定义情况下的效果图, 该明白了两者的区别了吧. 如果你在学习HTML5, 它的header、footer、sidebar、article等元素都是新增的语义化标签.
HTML编码语义化是迈向高质量前端开发的一步. 即更好的遵循Web标准, 也能让你页面在去掉样式后依然井然有序. 关于语义化更多更详细的介绍, 可以自行Google或阅读阿当的《Web前端开发修炼之道》第三章.
附: 标签语义中英文对照表(删除线为html5不支持的标签)

标签名 英文全拼 中文翻译
a anchor
abbr abbreviation 缩写词
acronym acronym 取首字母的缩写词
address address 地址
b bold 粗体
big big 变大
blockquote block quotation 区块引用于
br break 换行
caption caption 标题
center center 居中
dd definition description 定义描述
del delete 删除
div division 分隔
dl definition list 定义列表
dt definition term 定义术语
em emphasized 加重
fieldset fieldset 域集
font font 字体
h1~h6 header1~header6 标题1~标题6
hr horizontal rule 水平尺
i italic 斜体
ins inserted 插入
legend legend 图标
li list item 列表项目
ol ordered list 排序列表
p paragraph 段落
pre preformatted 预定义格式
s strikethrough 删除线
small small 变小
span span 范围
strong strong 加重
sub subscripted 下表
sup superscripted 上标
u underlined 下划线
ul unordered list 不排序列表
var variable 变量

渔夫科技