欢迎来到 jackNEss'窝窝
I like simple mind

谈谈文章页中的语义化

2011年11月11日

谈谈文章页中的语义化

本文章适用于未了解过语义化标签 or 想了解语义化标签在文章页中具体应用 的各位童鞋。

本文章内容目录:

使用 <h1> 到 <h6> 构建一篇层级鲜明的文章

由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。

六个不同的 HTML 标题

<h1>俺是口爱的标题 h1</h1>
<h2>俺是口爱的标题 h2</h2>
<h3>俺是口爱的标题 h3</h3>
<h4>俺是口爱的标题 h4</h4>
<h5>俺是口爱的标题 h5</h5>
<h6>俺是口爱的标题 h6</h6>
<h6>俺是口爱的标题 h6</h6>	

活用语义化标签:<p>

就 html而言,抛开 语义化神马的,一篇文章的录入,我们有2种代码编写方法:

传统写法:

<div>
	我是第一自然段,本个第一段落讲述的内容就是本自然段需要进行认认真真、详详细细要陈述的内容<br />
	我是第二自然段,本个第二段落讲述的内容就是本自然段需要进行认认真真、详详细细要陈述的内容<br />
	我是第三自然段,本个第三段落讲述的内容就是本自然段需要进行认认真真、详详细细要陈述的内容<br />
	我是第四自然段,本个第四段落讲述的内容就是本自然段需要进行认认真真、详详细细要陈述的内容<br />
	我是第五自然段,本个第五段落讲述的内容就是本自然段需要进行认认真真、详详细细要陈述的内容<br />
</div>

由于 <div> 标签不带有语义化,属于无语义化标签之一,常用于定义各种模板的基础布局,对于 seo来说,一篇搜索引擎喜欢的文章离不开良好的语义化与层级关系,所以在文章里,并不适合使用 <div>标签进行写作 or 录入。

建议写法

<!-- html document -->
<p>我是第一自然段,本个第一段落讲述的内容就是本自然段需要进行认认真真、详详细细要陈述的内容</p>
<p>我是第二自然段,本个第二段落讲述的内容就是本自然段需要进行认认真真、详详细细要陈述的内容</p>
<p>我是第三自然段,本个第三段落讲述的内容就是本自然段需要进行认认真真、详详细细要陈述的内容</p>
<p>我是第四自然段,本个第四段落讲述的内容就是本自然段需要进行认认真真、详详细细要陈述的内容</p>
<p>我是第五自然段,本个第五段落讲述的内容就是本自然段需要进行认认真真、详详细细要陈述的内容</p>

<p>标签语义化意思是 段落,适用于一篇文章的每一个段落之中,使得文章更具语义化,并且不需要<br/>来区分段落与段落。<p></p>中的文字会自动换行,而且换行的效果优于<br/>。

段落中空2格的录入方法

我们在录入文章的时候,在中文文档来说,一般习惯文章每段开头空2格,但是对于 html来说, 2个空格 &nbsp; 表示的是 2个英文字长的空格,并不是2个中文长度的空格,就 utf-8编码而言, 4个 &nbsp; 等于 一个中文字符长度,but 就 gb2312编码而言, 2个 &nbsp; 等于 一个中文字符长度,所以在不同编码格式底下需要打的空格就会有所不同。

例如这种:

—————例子—————

  我是第一自然段,本个第一段落讲述的内容就是本自然段需要进行认认真真、详详细细要陈述的内容,认认真真、详详细细要陈述的内容,认认真真、详详细细要陈述的内容,认认真真、详详细细要陈述的内容,认认真真、详详细细要陈述的内容,认认真真、详详细细要陈述的内容。

—————例子—————

在utf-8编码下文章空2格写法:

<!-- html document charset="utf-8" -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;我是第一自然段,本个第一段落讲述的内容就是本自然段需要进行认认真真、详详细细要陈述的内容</p>

在gb2312编码下文章空2格写法:

<!-- html document charset="gb2312" -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;我是第一自然段,本个第一段落讲述的内容就是本自然段需要进行认认真真、详详细细要陈述的内容</p>

解决方法

我们可以通过设置输入法中全角半角的地方,将之设置为全角,然后在需要空2格的地方敲2下空格,这样输入的空格就具有2个中文字长了,从而就可以确保在不同编码格式底下都能够保证空2格。

<!-- html document charset="gb2312" -->
<p>  我是第一自然段,本个第一段落讲述的内容就是本自然段需要进行认认真真、详详细细要陈述的内容</p>

插入图 <img > 书写规范

一篇出彩的文章少不了出色的配图,下面说说使用插入图 <img> 标签要注意的一些问题。

插入图 <img> 的代码规范

图片标签 <img> 为自闭合标签,正确写法应该是 < img />,并且根据w3c规范,每个 img 标签都必须有一个 alt属性:

<!-- html document -->
<img src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="xx.jpg" width="100" height="100" alt="俺是xx图片的文字描述" />

文章中插入图 <img> 的建议尺寸

为了保持通用性和方便转载,我们应该让插入图适用于各个平台,在这里,文章中插入图的建议宽度为:525px,一般文章中的插入图应该保证不大于这个建议尺寸。

制作上图下文的方法

文章中,图文混排是十分常见的一种排版做法,在这里简单介绍一下 上图下文的代码实现方法:

一般这种的排列我们的代码应该这样编写:

<!-- html document -->
<p align="center"><img src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="xx.jpg" alt="我是xx的文字描述"/><br/>我是xx的文字信息</p>

ul,ol,li 使用方法

ul,li ——无序列表,一般数据罗列,层级阐述等模块,li与li之间权重级别应该相等。

—————例子—————

  • 1.1 壹点壹章节标题
  • 1.2 壹点贰章节标题
  • 1.3 壹点叁章节标题

—————例子—————

上面列表的写法是:(在不设置ul、li样式的情况下)

<!-- html document -->
<p>文字目录</p>
<ul>
	<li>1.1 壹点壹章节标题</li>
	<li>1.2 壹点贰章节标题</li>
	<li>1.3 壹点叁章节标题</li>
</ul>

ol,li ——有序列表,一般数据罗列,层级阐述等模块,li与li之间权重级别应该相等。并且自带序号,无需手工录入。

—————例子—————

  1. 壹点壹章节标题
  2. 壹点贰章节标题
  3. 壹点叁章节标题

—————例子—————

上面带序号列表的写法是:(在不设置ol、li样式的情况下)

<!-- html document -->
<p>文字目录</p>
<ol>
	<li>壹点壹章节标题</li>
	<li>壹点贰章节标题</li>
	<li>壹点叁章节标题</li>
</ol>

table 使用方法

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

下面是一个标准的html表格代码:

<table>
	<thead>
		<tr>
			<th>标题</th>
			<th>标题</th>
			<th>标题</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
	</tbody>
</table>	

文章中常用字体效果写法

斜体 <em>

定义斜体 我们可以使用 <i> 或者 <em>,不过由于后者具有语义化,所以建议使用 <em> 来定义文字斜体。

—————例子—————

俺是可爱的斜体

—————例子—————

<!-- html document -->
<em>俺是可爱的斜体</em>

粗体 <strong>

定义粗体 我们可以使用 <b> 或者 <strong>,不过由于后者具有语义化,所以建议使用 <strong> 来定义文字粗体。

—————例子—————

俺是老实的粗体

—————例子—————

<!-- html document -->
<strong>俺是老实的粗体</strong>

删除线 <s>

删除线一般用于当文章发布过后,我们发现有部分内容阐述错误,需要订正的时候,我们应该时候删除线,然后把正确的内容从后面补上,当然,也适用于折扣,原价是xx元,现只需要xx元的场合。

—————例子—————

俺是公正的删除线

—————例子—————

<!-- html document -->
<s>俺是公正的删除线</s>

上标文本 <sup>

包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中字符高度的一半来显示,但是与当前文本流中文字的字体和字号都是一样的。

—————例子—————

abcd 123

—————例子—————

<!-- html document -->	
abcd <sup>123</sup>	

下标文本 lt;sub>

包含在 <sub> 标签和其结束标签 </sub> 中的内容将会以当前文本流中字符高度的一半来显示,但是与当前文本流中文字的字体和字号都是一样的。

—————例子—————

abcd 123

—————例子—————

<!-- html document -->	
abcd <sub>123</sub>	
分类HTML + CSS
标签
阅读 3,550
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS