-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
332 lines (244 loc) · 21 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Seventh.]]></title>
<link href="http://seventhZhao.github.com/atom.xml" rel="self"/>
<link href="http://seventhZhao.github.com/"/>
<updated>2013-04-17T22:07:44+08:00</updated>
<id>http://seventhZhao.github.com/</id>
<author>
<name><![CDATA[seventh.zhao]]></name>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[语义化你的标签]]></title>
<link href="http://seventhZhao.github.com/blog/2013/04/17/4-dot-17/"/>
<updated>2013-04-17T20:47:00+08:00</updated>
<id>http://seventhZhao.github.com/blog/2013/04/17/4-dot-17</id>
<content type="html"><![CDATA[<p>当讨论 Web 标准时，一些事情总是被提及，那就是结构和表现分离的重要性。刚开始的时候理解结构和表现的不同之处可能很困难，特别是如果你不习惯于思考文档的语义结构时。然而，理解这点是很重要的，因为，当结构和表现分离后，用 CSS 文档来控制表现就是很容易的一件事了。</p>
<p>结构 是由文档中的主体部分，再加上语义化、结构化的标记。</p>
<p>表现 是你赋予内容的一种样式。在大多数情况下，表现就是文档看起来的样子，但是它同样可以影响一个文档“听”起来的样子—-毕竟不是每个人使用的都是图像化的浏览器。</p>
<p>尽可能的把结构和表现相分离。理论上讲，你应该用一个 HTML 文档来保存内容与结构，用一个 CSS 文档来控制整个文档的表现。</p>
<p>如今表现与结构的分离在网上还不是很普遍。大多数网站上的HTML代码既缺少语义也缺少结构。</p>
<p>用表格布局</p>
<p>为了使表现和结构相分离，你必须用 CSS 来代替表格去控制一个文档的表现。当你习惯于用表格来布局的时候，这将使你感觉很奇怪很不适应，但是，这并不像它看上去的那么困难。你可以在网上找到许多可用的帮助，它的好处太多了，所以它确实值得您去花时间去转变一下思想，这点很重要。</p>
<p>相关文章:
<a href="http://www.hotdesign.com/seybold/">Why tables for layout is stupid</a>
在 Seybold 2003 上的一个演讲幻灯演示。
语义化的 HTML</p>
<p>分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素，比如用<code><span></code>来代替<code><h1></code>标记标题。</p>
<p>通过使用语义化的 HTML ，你将会使文档中的不同部分对于任何浏览器都变得有意义，无论浏览器是现今 PC 上的最新的图象化浏览器，还是不支持 CSS 的老浏览器，或者还是 Unix shell 中的文本浏览器。</p>
<p>标题</p>
<p>为了给标题做标记, 要用 <code><h1></code> 、 <code><h2></code> 、 <code><h3></code> 、 <code><h4></code> 、 <code><h5></code> 或者 <code><h6></code> ，这完全取决于标题的等级。 <code><h1></code> 是最高的等级。</p>
<p>例如:</p>
<pre><code><h1>文档标题</h1>
<h2>次级标题</h2>
</code></pre>
<h1>文档标题</h1>
<h2>次级标题</h2>
<p>段落</p>
<p>用<code><p></code>来标记段落。不要使用 <code><br /></code> 来生成段落间的空行。用 CSS 来控制段落间的空隙（Margins），这个空隙可以确保段落标记的正确无误。</p>
<p>例如:</p>
<pre><code><p>浪奔浪流，万里滔滔江水永不休，淘尽了世间事，混作滔滔一片潮流，是喜是愁，
浪里分不清欢笑悲忧，成功失败，浪里看不出有未有。爱你恨你问君知否，似大江一发不收，
转千湾转千滩，也未平复此中争斗，又有喜又有愁，就算分不清欢笑悲忧，仍愿翻百千浪，
在我心中起伏够。</p>
</code></pre>
<p>浪奔浪流，万里滔滔江水永不休，淘尽了世间事，混作滔滔一片潮流，是喜是愁，
浪里分不清欢笑悲忧，成功失败，浪里看不出有未有。爱你恨你问君知否，似大江一发不收，
转千湾转千滩，也未平复此中争斗，又有喜又有愁，就算分不清欢笑悲忧，仍愿翻百千浪，
在我心中起伏够。</p>
<p>列表</p>
<p>一些事物的罗列应使用列表来显示。在XHTML中有三种列表的方法：无序、有序和自定义。</p>
<p>无序列表, 就是我们所熟知的圆圈列表, 以 <code><ul></code>开始，以<code></ul></code>结束。每一个列表项都包含在<code><li></code>之中。</p>
<p>有序列表，以<code><ol></code>开始，以<code></ol></code>结束。</p>
<p>自定义列表有一些不同，可以用来标记一些列表项和描述，以<code><dl></code>开始，以<code></dl></code>结束。每一个被描述的项目，要包含在<code><dt></code>中，而描述的内容要包含在<code><dd></code>中。</p>
<p>例如:</p>
<pre><code><ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
</code></pre>
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<pre><code><ol>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ol>
</code></pre>
<ol>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ol>
<pre><code><dl>
<dt>上海滩</dt>
<dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。
当年在香港播出以后，产生了巨大的轰动效应。</dd>
<dt>周润发</dt>
<dd>和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。
风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。</dd>
</dl>
</code></pre>
<dl>
<dt>上海滩</dt>
<dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。
当年在香港播出以后，产生了巨大的轰动效应。</dd>
<dt>周润发</dt>
<dd>和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。
风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。</dd>
</dl>
<p>引用</p>
<p>用<code><q></code>来标记简短的单行引用。Web浏览器会自动识别在<code><q></code> 之间的内容。不幸的是，IE不能识别，并且有些时候，<code><q></code>会引起一些可访问性的问题。正因为如此，一些人建议尽量不要使用<code><q></code>,手动的插入引用标记。在一个包含适当的类的<code><span></code>中加入单行的引用内容，那么就可以用CSS来给引用设计样式了，但是这个没有语义上的意义。 您可以读读Mark Pilgrim写的The Q tag 关于处理<code><q></code>相关问题的看法。</p>
<p>对于那些一段或者好几段的长篇引用，就应当使用<code><blockquote></code>了。CSS可以用来定义引用的样式。注意，一段文章是不可以直接放在<code><blockquote></code>中的，引用的内容还必须包含在一个元素中，通常是<code><p></code>。</p>
<p>属性cite既可以与<code><q></code>一起用，也可以与<code><blockquote></code>一起用，用来提供引用内容的来源地址。需要注意的是，如果你使用<code><span></code>来代替<code><q></code>标记引用内容,那么你就不能使用cite属性了。</p>
<p>例如:</p>
<pre><code><p>我的座佑名<q cite="http://www.x5.com.cn/">别人的高标准，是我的基本要求。</q>.</p>
</code></pre>
<p>我的座佑名<q cite="http://www.x5.com.cn/">别人的高标准，是我的基本要求。</q>.</p>
<pre><code><p>我的座佑名<span class="quote">&#8220;别人的高标准，是我的基本要求。
&#8221;</span>.</p>
</code></pre>
<p>我的座佑名<span class="quote">“别人的高标准，是我的基本要求。”</span>.</p>
<pre><code><blockquote cite="http://www.w3cn.org/">
<p>&#8220;我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，
我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"，
为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的，
每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，
例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；
针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。
这是一种恶性循环，是一种巨大的浪费。&#8221;</p>
</blockquote>
</code></pre>
<p>“我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的”浏览器大战”，为了兼容 Netscape 和 IE ，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。”</p>
<p>强调</p>
<p><code><em></code> 是用作强调的，<code><strong></code>是用作重点强调的。 大部分浏览器用斜体显示强调的内容，用粗体来显示重点强调的内容，然而，这是没有必要的，如果是为了确定强调内容的显示方式，最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时，就不要使用强调了。</p>
<p>例如:</p>
<pre><code><p><em>强调</em> 的文本通常用斜体显示，
然而， <strong>特别强调</strong> 的文本通常以粗体显示。</p>
</code></pre>
<p><em>强调</em> 的文本通常用斜体显示，
然而， <strong>特别强调</strong> 的文本通常以粗体显示。</p>
<p>强调的文本通常用斜体显示, 然而，特别强调的文本通常以粗体显示。</p>
<p>表格</p>
<p>XHTML 中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。为了使数据表格有更强的访问性，了解和使用各种构造表格的组件就很重要了。比如表格标题 （<code><th></code>）、摘要（summary 属性）和首部说明 （ <code><caption></code>标签）。</p>
<p>例如:</p>
<pre><code><table class="举例" summary="1999年到2003年，列表显示中国的平均人口增长率。">
<caption>中国的年均人口的增长, 1999–2003</caption>
<thead>
<tr>
<td>&#160;</td>
<th scope="col">1999</th>
<th scope="col">2000</th>
<th scope="col">2001</th>
<th scope="col">2002</th>
<th scope="col">2003</th>
</tr>
</thead>
<tbody>
<tr>
<th>人口</th>
<td scope="row">8 861 426</td>
<td scope="row">8 882 792</td>
<td scope="row">8 909 128</td>
<td scope="row">8 940 788</td>
<td scope="row">8 975 670</td>
</tr>
<tr>
<th>增长</th>
<td scope="row">7 104</td>
<td scope="row">21 366</td>
<td scope="row">26 368</td>
<td scope="row">31 884</td>
<td scope="row">34 882</td>
</tr>
</tbody>
</table>
</code></pre>
<p>文章摘自：<a href="http://www.456bereastreet.com/lab/developing_with_web_standards/zh/#structure">用Web标准进行开发</a>
上面是上次面试后专门查找的一些内容，网络上面说到的语义化一般都知识专门强调一些比较常用的元素的语义。如果想更深更全面的了解语义化，还是得从W3C的文档说明上面着手。
下面是一些html5常用标签的说明：
<code>header</code>：标记头部区域的内容，可用于整个页面或页面中的一块区域，单个页面中可重出现。
<code>footer</code>：标记脚步区域的内容，可用于整个页面或页面中的一块区域。
<code>section</code>：Web页面中的一块区域
<code>article</code>：独立的文章内容
<code>aside</code>：相关内容或者引文
<code>nav</code>：导航类辅助内容</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[HTML结构]]></title>
<link href="http://seventhZhao.github.com/blog/2013/03/30/3-dot-30/"/>
<updated>2013-03-30T19:55:00+08:00</updated>
<id>http://seventhZhao.github.com/blog/2013/03/30/3-dot-30</id>
<content type="html"><![CDATA[<p>最近复习HTML的基础，重新较全面的了解了HTML的结构。</p>
<p>HTML结构：</p>
<p>不同标签有不同的表现和语义功能。在最近复习的一本书（<a href="http://book.douban.com/subject/3158926/" title="豆瓣图书链接" >cssDesignPatterns</a>）中,作者按元素的功能和性质讲标签划分为四个大类：</p>
<h2>结构化块状元素：</h2>
<blockquote><p>结构化块状元素的目的是把文档结构化，方便浏览器解析出一个更好的文档视图，搜索引擎才能识别出重要的关键词，文档处理工具才能应用某些技术（如XSLT）来提取内容和转换结构，JavaScript才能更准确的获取结构进行修改。</p></blockquote>
<p>结构化元素拥有结构化的含义，却没有什么语义上的内涵，结构化元素是让浏览器和查看代码的人员了解html是如何组织的。<br/>
主要的结构化块状元素：<code>ol</code> <code>ul</code> <code>dl</code> <code>table</code> ；<br/>
支持结构化的元素：<code>li</code> <code>dt</code> <code>dd</code> <code>caption</code> <code>thead</code> <code>tfoot</code> <code>tbody</code> <code>colgroup</code> <code>col</code>。</p>
<h2>终端块状元素：</h2>
<p>终端块状元素是文档结构的终结元素，即终端块状元素中不应该有表示结构的元素。终端块状元素是文档块状结构的终端节点。主要的终端块状元素：<code>h*</code> <code>p</code> <code>blockquote</code> <code>dt</code> <code>address</code> <code>caption</code>。
终端块状元素是内容的主要容器，内容主要是指内联元素和内容。</p>
<h2>多目标块状元素：</h2>
<p>多目标块状元素兼具上面两种元素的功能，可以自由的扩展文档的结构。
HTML提供了7中元素：<code>div</code> <code>li</code> <code>dd</code> <code>td</code> <code>th</code> <code>form</code>。
比如说：当一个列表项作为终端的时候，其中的内容就成为某个列表中的一项。当列表包含了一个结构化块状元素（表格或者另一个列表）时，它从结构上就作为一个大的嵌套结构中的小节点。</p>
<p>多目标块状元素既可以包含块状元素也可以包含内容，但是不能同时包含两者。文本与内联元素的组合才构成了内容。块状元素不应该作为内联元素和文本的兄弟元素。作者将之称为<em>混合内容</em>。应当把内容放在块状元素中——而不是放在他们之间。因为当浏览器遇到混合内容的时候，它会给内容套上一个匿名容器。这是因为当块状元素是按顺序排列的，而其中穿插内容的时候，浏览器不能通识解析两者。而且我们不能对这个匿名块状元素赋予样式。</p>
<h2>内联元素：</h2>
<p>HTML提供了内联元素用于识别文本的含义、控制文本排列的顺序、向文档插入额外的内容。内联元素是文档最底级的标签，HTML中有许多语义化的标签，提供了一些默认的样式。如：<code>code</code> 会被解析为等宽字体，还有<code>em</code> <code>strong</code>元素会对内容进行强调。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[haslayout]]></title>
<link href="http://seventhZhao.github.com/blog/2013/03/26/haslayout/"/>
<updated>2013-03-26T15:35:00+08:00</updated>
<id>http://seventhZhao.github.com/blog/2013/03/26/haslayout</id>
<content type="html"><![CDATA[<p>IE/Win的表现与其他浏览器不同的原因之一是，显示引擎使用一个称为布局(layout)的内部概念。haslayout 是WindowsInternet Explorer渲染引擎的一个内部组成部分。
在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的hasLayout 属性值为true时，我们说这个元素有一个布局（layout）。
如果某个HTML元素拥有 haslayout 属性，那么这个元素的 haslayout 的值一定只有 true，haslayout 为只读属性一旦被触发，就不可逆转。（除非移除或者重置触发元素halayout的某个属性）通过 IE Developer Toolbar可以查看 IE 下 HTML 元素是否拥有haslayout，在 IE Developer Toolbar 下，拥有 haslayout的元素，通常显示为”haslayout = -1”。
下列元素应该是默认具有 layout 的：</p>
<pre><code>* <html>, <body>
* <table>, <tr>, <th>, <td>
* <img>
* <hr>
* <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
* <iframe>, <embed>, <object>, <applet>
* <marquee>
</code></pre>
<p>具有”layout” 的元素如果同时 display: inline ，那么它的行为就和标准中所说的 inline-block很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在IE/Win中内联元素可以包含块级元素而少出问题，因为在别的浏览器中display:inline 就是内联，不像 IE/Win一旦内联元素拥有 layout 还会变成 inline-block。当网页在IE中有异常表现时，可以尝试激发 haslayout来看看是不是问题所在。常用的方法是给某元素 css 设定zoom:1 。使用 zoom:1是因为大多数情况下，它能在不影响现有环境的条件下激发元素的haslayout。而一旦问题消失，那基本上就可以判断是 haslayout的原因。然后就可以通过设定相应的css属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性，其次再考虑其他属性。
对 IE6 及更早版本来说，常用的方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1% (height:1%;)。需要注意的是，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。或者使用 IE 的条件注释。</p>
<p>对 IE7 来说，最好的方法时设置元素的最小高度为 0 (min-height:0;)。</p>
<p>haslayout 问题引起的常见bug：</p>
<pre><code>IE6及更低版本的双空白边浮动bug 修复: display:inline
IE5-6/win的3像素偏移bug 修复: _height:1%
IE6的躲躲猫(peek-a-boo)bug 修复: _height:1%
</code></pre>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[comment test]]></title>
<link href="http://seventhZhao.github.com/blog/2013/03/26/comment-test/"/>
<updated>2013-03-26T14:35:00+08:00</updated>
<id>http://seventhZhao.github.com/blog/2013/03/26/comment-test</id>
<content type="html"><![CDATA[<p>testing!</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[first blog in pages]]></title>
<link href="http://seventhZhao.github.com/blog/2013/03/25/first-blog-in-pages/"/>
<updated>2013-03-25T22:40:00+08:00</updated>
<id>http://seventhZhao.github.com/blog/2013/03/25/first-blog-in-pages</id>
<content type="html"><![CDATA[<div class="content">
3.25晚，github:page初尝试。打算用做技术博客。以上。
—-seventh
</div>
]]></content>
</entry>
</feed>