请不要说我吹毛求疵~

现在比较关注网页的质量,不仅仅是显示的效果,还有结构、语义等等。当看到一个外表光鲜,或者内容有所用途的页面,会去看一下结构,但是每每当我把页面的样式表禁用之后,除了失望还是失望~~

这里仅当是记录页面,后续发现不断补充:

1、QQ文化夏至:http://im.qq.com/culture/xiazhi.shtml?ADUIN=0&ADSESSION=0&ADTAG=CLIENT.QQ.3439_LoginLogo.0

页面简洁,当我看到夏至小tips时,想粘贴下来一份,由于页面是用图片的,就去查看html代码,可惜当禁用样式表后,页面就剩下一个底部~怎一个丑陋了得。

2、网易应用:http://m.163.com/

手机应用/限时免费,现在这类站挺多的,大站也跟进了。受惠肯定是大众了。是好事,今天发现网易也有了,就进去看了一下。风格挺喜欢的,简洁大方。

先是看了一下焦点图部分,用的是yui插件,继续清除了样式之后,发现没有h1标签,指丢失样式后就看到站的标题了。接着又发现、什么“速度快”“热推荐”之类的介绍竟然都在一张图片上。去除样式后,这些东西也没有了。

个人觉得这些东西,应该保留着,利于搜索引擎优化。毕竟搜索引擎看不到图片的内容。

 

语义化命名笔记

命名笔记,就是看命名就知道大体是什么东西,要做什么。只做记录,不断完善..

collapsed 收缩

expanded 展开

tagSize 标签大小,例:tagSize-5

placeholder 向用户显示描述性说明或者提示信息,例文本框

breadcrumb 面包屑
traffic 交通
parking 停车

locator 定位器
router 路由器
permission 权限
controller 控制器
path 路径
conclusion 结论
Ignored 忽略
used 支持
Overridden 拒绝
future 未来

Beautiful Script Code 脚本代码之美

let’s keep promise 。 让我们信守承诺。

浅析HTML标签strong和em的区别

浅析HTML标签strong和em的区别,可以从三个层次上来谈。

首先看 HTML 4.01 中的说明:
EM: Indicates emphasis.
STRONG: Indicates stronger emphasis.

em 表示强调,strong 表示更强烈的强调。言简意赅,表明了 em 和 strong 的命名来历。并且在浏览器中,em 默认用斜体表示,strong 用粗体表示。这是第一个层次上的区别。
em is for local emphasis. You see? Local emphasis. If you would emphasize a word in speech, use em.
strong is for global highlighting. When somebody looks at your document, at a glance, certain words and phrases should jump out. These are the words and phrases that make up the gist of the content — the highlights.
em 用来局部强调,strong 则是全局强调。从视觉上考虑,em 的强调是有顺序的,阅读到某处时,才会注意到。strong 的强调则是一种随意无顺序的,看见某文时,立刻就凸显出来的关键词句。斜体和粗体刚好满足了这两种视觉效果,因此也就成了 em 和 strong 的默认样式。
感觉上面已经解释得很清楚了?我们再来看看第三个层次上的区别。

HTML5 草案 中做了详尽解释:
The em element represents stress emphasis of its contents. The placement of emphasis changes the meaning of the sentence.
The strong element represents strong importance for its contents. Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.
em 表示内容的着重点(stress emphasis),strong 表示内容的重要性(strong importance),strong 不会改变所在句子的语意,em 则会改变所在句子的语义。并且举了一个非常好的例子:

<p><em>Cats</em> are cute animals.</p>

强调猫,讨论的是哪种动物聪明可爱。

<p>Cats <em>are</em> cute animals.</p>

强调是,讨论的是猫是不是聪明可爱。

<p>Cats are <em>cute</em> animals.</p>

强调聪明可爱,讨论的是猫究竟是聪明可爱呢还是愚蠢讨厌。

<p><strong>Warning.</strong> This dungeon is dangerous.<strong>Avoid the ducks.</strong> Take any gold you find.<strong><strong>Do not take any of the diamonds</strong>,they are explosive and <strong>will destroy anything withinten meters.</strong></strong> You have been warned.</p>

strong 表示的是重要性上的强调,不会引起句子意思的变化。最后注意 em 和 strong 都可以有多重,比如可以用两个 strong 来表示内容很重要。
可以看出,第二个层次上所说的局部强调和全局强调是不够准确的。em 和 strong 区别的玄妙处,在 HTML5 草案里才得到淋漓尽致的阐释。推荐大家有时间的时候,仔细阅读 HTML5 草案。有很多元素的语义,都阐释得非常清楚,对于我们如何在最恰当的地方使用最恰当的标签,非常具有价值。
em 是句意强调,加与不加会引起语义变化。
strong 是重要性强调,和局部还是全局无关,局部强调用strong也可以,strong强调的是重要性,不会改变句意。

转自:52css

语义化你的HTML标签

作为一个前端开发人员,你要是没有听说过css,那你肯定是一个“out-man”。随着css的深入人心,结构与表现与行为的逐渐分离,HTML 语义化成了炙手可热的卖点。

语义化的HTML首先要强调HTML结构

一个网页就好像一幢房子,HTML结构就是钢筋混泥土的墙,一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头,也就称不上是房子了。CSS是装饰材 料,是油漆,是用来装饰房子的。CSS如果没有html结构那就什么也不是了,没有了实际使用价值。CSS完全依靠引用它的(X)HTML文档。如果你想 使CSS的能力发挥到极致,提供一个用既干净又有结构的HTML是非常必要的。

其实HTML中的标签都有他自身的含义,只是常常被忽视——就像表格一直充当着网页布局的角色。还好随着CSS 的重现江湖,表格也终于回到他的本质工作——列表数据。它会告诉我们说:“这行是一个标题;这几行组成了一个段落;这些文字是项目列表……”在做前端开发 的时候要记住:HTML告诉我们一块内容是什么(或其意义),而不是它长的什么样子。

写语义化的HTML结构其实很简单,首先掌握HTML中各个标签的语义,在看到内容的时候想想用什么标签能更好的描述它,是什么就用什么标签。

<Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标 题使用,并且依据重要性递减。<h1>是最高的等级。

P

段落标记,知道了 p 作为段落,你就不会再使用<br />来换行了,而且不需要<br /> 来区分段落与段落。p中的文字会自动换行,而且换行的效果优于<br />。段落与段落之间的空隙也可以利用CSS来控制,很容易而且清晰的区分出段落与段落。

<ul>、<ol>、<li>

<ul>无序列表,这个被大家广泛的使用,<ol>有序列表也挺常用。在web标准化过程中,<ul> 还被 更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持CSS的时候,导航链接仍然很好使,只是美观方面差了一点而已。

<dl>、<dt>、<dd>

dl就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。

<em>、< strong >

<em> 是用作强调的,strong是用作重点强调的。

<table>、<td>、<th>、< caption >、 summary

XHTML中的表格不再是用来布局。如果是为了标记列表的数据,就应该使用表格了。<th>为表格标题,属性summar为摘要(要想 提高搜索的排名这个绝对不应该少),<caption>标签为首部说明,<thead>标签为表格头 部,<tbody>标签为表格主体内容,<tfoot>标签为表格尾部。

<ins>, <del>

知道del,就不要再用<s>做删除线了,用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以 及删除的时间。ins是表示插入,也有这样的属性。

<abbr>、<acronym>

<abbr>标签是表示web页面上的简称,<acronym>标签为取首字母缩写。

alt属性和title属性

title属性用来为元素提供额外说明信息,但是并不是必须的。

alt属性为不能显示图像、窗体或applets的用户代理(UA),指定替换文字。替换文字的语言由lang属性指定。

让你语义化HTML结构的无数条理由:

1.去掉或样式丢失的时候能让页面呈现清晰的结构:
HTML 本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗;<strong>是加粗的, 不要误会这是HTML的表现,这些其实是HTML默认的CSS样式在起作用。所以去掉或样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性。

2.屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页

如果你使用的含语义的标记,屏幕阅读器会根据你的标签来判断网页的内容,而不是一个字母一个字母的拼写出来。

3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(因为这些设备对CSS的支 持较弱)。

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页。理想情况下,观看设备的任务是符合设备本身的条件来渲染网页。

4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。

搜索引擎的爬虫也是网站的“访客”,现在它们是极其宝贵的用户。没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问。

5.便于团队开发和维护

在团队中大家都遵循同一个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。

ol列表应用~

通常用新闻列表都用ul还实现了,忽略了ol,相比之下,ol在一些情况下面,语义更好一些。

最常用的可能有以下几种:

通过设置,list-style-type来实现。

1、数字列表

常见如:排行榜

<ol>

<li><li>

<ol>

一般前面都是小图背景修饰排名,在失去样式表的情况下,排列仍然一目小然。比ul要好。

2、字母索引

<ol>

<li><li>

<ol>

现在用的也比较多了,比如根据字母来索引小区名等。

通过设置,list-style-type:lower-alpha;来实现。

以下为几种可以设的值,在合适的情况下选用。

disc Default. Solid circles.
circle Outlined circles.
square Solid squares.
decimal 1, 2, 3, 4, and so on.
lower-roman i, ii, iii, iv, and so on.
upper-roman I, II, III, IV, and so on.
lower-alpha a, b, c, d, and so on.
upper-alpha A, B, C, D, and so on.