书小宅之网页设计——用之有道

• 网页标题title：title定义的标题仅是在浏览器标题栏中显示的信息。title作为属性用来定义提示文本。

• 网页内容的标题hi：一般一个网页应该只有一个一级标题（主标题），也就是说网页内容应该只用依次h1元素。h2元素定义网页栏目的标题，h2元素作网页副标题时也应该只用一次。h3元素定义子栏目的标题。文档的标题层次一般在三层左右。

• 设计引用信息：
  q元素定义单行引用，如论文、博客中引用别人的话，引用的文本会被加上双引号；
  cite元素常引用短语或短句子，常用来引用某人说的话，引用的文本以斜体显示；
  blockquote元素用来引用一段或者多段的长篇信息。

• 设计强调信息：
  em元素：表示强调信息，斜体表示；
  strong元素：表示加强强调的信息，加粗。

• 设计信息缩写：
  使用缩写信息能够为浏览器、拼写检查程序、翻译系统一级搜索引擎分度提供有用的信息。

abbr元素：缩写词，如Defines是dfn；

<p>
	<span title="Abbreviation">
		<abbr title="Abbreviation">abbr</abbr>
	</span>
表示它所包含的文本是一个更长的单词或短语的缩写形式，浏览器会根据这个信息改变你对这些文本的显示方式，或者用其他文本代替。
</p>

acronym元素：首字母缩写;

<p>
<acronym title="Cascading Style Sheets">CSS</acronym>
层叠样式或级联样式表，定义如何显示HTML标签，用于控制网页外观布局和样式设计。
</p>

• 设计其他文本信息：

address元素：用来表示特定的语义信息，如地址、签名、作者和文档摘要等，并不仅仅指地理地址。

<address title="作者">书小宅</address>
<address title=“详细地址”>重庆</address>
<address title="文章摘要">语义辨析</address>

a元素：
两种用法：一种是用来作为超链接，二是用来作锚。
href属性设置超链接的目的地址(URL)；
target表示打开目标文档的方法，如_blank表示在新窗口中打开文档，_parent表示在父窗口中打开文档，_self表示在当前文档中打开文档，_top表示在顶层窗口中打开文档。
1、超链接：链接到某一目标网址。

	<a href="http://www.baidu.com">去百度搜索</a>

效果演示：去百度搜索
2、锚链接：定义锚点，实际上是一个定位标记，定位到网页某个具体的位置。

<a href="#btm">跳转到底部</a>
<div id=“box” style="height:2000px; border:solid 1px red;">撑开浏览器滚动条</div>
<span id="btm">底部锚点位置</span>

• 定义列表信息：
  • 有序列表输出的内容有前缀，是大写字母、小写字母、数字和罗马数字等；
  • 无序列表输出的内容有前缀，是实心圆、空心圆、实心正方形；
  • 自定义列表有缩进而没有前缀。

导航菜单是同质数据，适合使用列表数据。

有序列表和无序列表
先标识列表有序还是无序，再内嵌列表项目

• <ul>……</ul>：标识无序列表。
• <ol>……</ol> ：标识有序列表。
• <li>……</li> ：标识列表项目。

---

定义列表：
搜索引擎认为dt元素包含的是抽象、概括或简练的内容，对应的dd元素包含的是与dt内容相关联的具体、详细或生动说明。
误区：（1）一个dt之下包含多个dd；（2）缺失dt或dd元素。

• <dl>……</dl> ：标识定义列表，包括词条和解释两块内容。
• <dt>……</dt> ：标识词条。
• <dd>……</dd> ：标识解释。

• 设计表格：

每列数据属于不同的类型，每行数据（一条记录）表达一定的意思的多行多列数据使用表格。

table：数据表结构。
tr ：表格行。
td：表格数据单元格。

如果数据本身是纯专业、技术的数据，使用表格结构会更合适；
对于同类型的信息使用列表结构会更恰当。

• 表格分组：
  数据行分组：
  <thead>……</thead>：在数据表中定义头部区域
  <tbody>……</tbody>：在数据表中定义头部区域
  <tfoot>……</tfoot>：在数据表中定义脚步区域

<thead>
	<tr>
		<td rowspan="2">排名</td>
		<td colspan="3">人数</td>
		……
	</tr>
	
	<tr>
	</tr>
</thead>

<tbody>……</tbody>

解释：对于行，分成又不区域和主体区域两部分。头部有两行，每一个单元格占的行列数的大小由rowspan和colspan属性来控制。

数据列分组：
<col>……</col>：在数据表中定义列区域
<colgroup>……</colgroup>：在数据表中定义数据列组

<colgroup>
	<col span="3"/>
	<col span="4"/>
</colgroup>

解释：对于列，划分为两个区域，其中一个区域占3个单元格的宽度，另一个单元格占4个单元格的宽度。

• 设计表单：
  optgroup：定义下拉选项组，选择列表中相关选项的组合。
  isindex：定义简单的输入框。

所有表单元素都有两个基本属性：
1、name：定义表单对象的名称，后台服务器利用该属性值来读取其中的数据，属性可以根据对应表单对象包含的内容来确定。
2、id：定义了表单对象的id编码，前台客户端利用该属性控制该对象的动态表现。
一般为1、2设置相同的属性值。

<h1>表单的语义化结构</h1>
<form id="form1" method="post" action="">					<!--表单包含框-->
	<p>单行文本域：<input type="text" name="textfield" id="textfield"/></p>    <!--输入框-->
	<p>密码域：<input type="password" name="passwordfield" id="passwordfield"/></p> 
	<p>多行文本域：<textarea name="textareafield" id="textareafield"></textarea></p> 
	<p>复选框：复选框1<input name="checkbox1" type="checkbox" value=""/>
						复选框2<input name="checkbox2" type="checkbox" value=""/>
    </p> 
	<p>单选按钮：
		<input name="radio1" type="radio" value=""/>按钮1
		<input name="radio2" type="radio" value=""/>按钮2
    </p> 
	<p>下拉菜单：
		<select name="selectlist" size="2">      <!--select元素必须与option元素配合使用-->
			<option value="1">选项1</option>   <!--size小于选项数目会出现滚动条-->
			<option value="2">选项2</option>
			<option value="3">选项3</option>
		</select>
	</p> 
	<p> <input type="submit" name="button" id="button" value="提交"/> </p>    <!--提交按钮-->
</form>

form元素的核心属性：
1、enctype=：

• “application/x-www-form-urlencoded”：将表单中的数据编码为名-值（name-value）对的形式通过URL发送给服务器。
• “multipart/form-data”：将表单中的数据打包为独立的数据包，编码为一条消息，每个表单域对应消息中的一个部分，然后通过http方式发送到服务器。
• “text/plain”：将表单中的数据以纯文本的形式进行编码，不含任何控件（表单域的名称）或格式字符。

2、action属性用来设置表单提交数据的目标文件，该文件应该是包含在服务器端脚本的处理文件。
3、method=

• ”get“：从服务器上获取数据；
• “post”：向服务器传递数据。
  当表单中包含文件域时，form元素的method属性必须设置为"post",enctype属性必须设置为"multipart/form-data"，否则提交操作会失败。

表单分组：
fieldset：定义表单的字段域（或称字段集），集合表单的容器，默认显示边框效果。
legend：定义字段域的标题，默认位于左上角。
legend元素必须包含在fieldset元素内部，且紧邻fieldset元素。

绑定提示标签：
label：定义表单的控制标签。常使用for属性使其与表单域绑定在一起，形成关联。单击标签文本时输入焦点自动定位到对应的表单域。

<label for="username">用户名</label>
<input type="text" id="username" name="username"/>

敬请批评指正！