网页设计标签

一、HTML元素的语义分类

1.结构语义元素

div 语义：Division（分隔）。在文档中定义一块区域，即包含框，IE认为它是一个容器

span 语义：Span（范围）。在文本行中定义一个区域，即包含框

ol 语义：Ordered List（排序列表）。根据一定的排序进行列表

ul 语义：Unordered List（不排序列表）。没有排序的列表

li 语义：List Item（列表项目）。每条列表项

dl 语义：Definition List（定义列表）。以定义的方式进行列表

dt 语义：Definition Term（定义术语）。定义列表中的词条

dd 语义：Definition Description（定义描述）。对定义的词条进行解释

del 语义：Deleted Text（删除的文本）。定义删除的文本

ins 语义：Inserted Text（插入的文本）。定义插入的文本

h1~.h6 语义：Header 1 to Header 6（标题1到标题6）。定义不同级别的标题

p 语义：Paragraph（段落）。定义段落结构

hr 语义：Horizontal Rule（水平尺）。定义水平线

2.内容语义元素

a 语义：Anchor（定义锚）。锚即定位的意思，换句话说就是超链接，即在多页间定位

abbr 语义：Abbreviation（缩写词）。定义缩写词

acronym 语义：Acronym（取首字母的缩写词）。定义取首字母的缩写词address 语义：Address（地址）。定义地址

dfn 语义：Defines a Definition Term（定义定义条目）

kbd 语义：Keyboard Text（键盘文本）。定义键盘键

samp 语义：Sample（示例）。定义样本

var 语义：Variable（变量）。定义变量

tt 语义：Teletype Text（打印机文本）。定义打印机字体

code 语义：Code Text（源代码）。定义计算机源代码

pre 语义：Preformatted Text（预定义格式文本）。定义预定义格式文本，保留源代码格式

blockquote 语义：Block Quotation（区块引用语）。定义大块内容引用

cite 语义：Citation（引用）。定义引文

q 语义：Quotation（引用语）。引用短语

strong 语义：Strong Text（加重文本）。定义重要文本

em 语义：Emphasized Text（加重文本）。定义文本为重要

3.修饰语义元素

b 语义：Bold Text（粗体文本）。定义粗体

i 语义：Italic Text（斜体文本）。定义斜体

big 语义：Big Text（大文本）。定义文本增大

small 语义：Small Text（小文本）。定义文本变小

sup 语义：Superscripted Text（上标文本）。定义文本上标

sub 语义：Subscripted Text（下标文本）。定义文本下标

bdo 语义：Direction of Text Display（文本显示方向）。定义文本显示方向

br 语义：Break（换行）。定义换行

center 语义：Centered Text（居中文本）。定义文本居中

font 语义：Font（字体）。定义文字的样式、大小和颜色

u 语义：Underlined Text（下划线文本）。定义文本下划线

s 语义：Strikethrough Text（删除文本线）。定义删除线

strike 语义：Strikethrough Text（删除文本线）。定义删除线

二、HTML属性的语义分类

1.核心语义属性

class 语义：Class（类）。定义类规则或样式规则

id 语义：IDentity（身份）。定义元素的唯一标识

style 语义：Style（样式）。定义元素的样式声明

但是下面这些元素不拥有核心语义属性：

html、head 文档和头部基本结构

title 网页标题

base 网页基准信息

meta 网页元信息

param 元素参数信息

script、style 网页的脚本和样式

2.语言语义属性

lang 语义：Language（语言）。定义元素的语言代码或编码

dir 语义：Direction（方向）。定义文本的方向，包括ltr和rtl取值，分别表示从左向右和从右向左

下面这些元素不拥有语言语义属性：

frameset、frame、iframe 网页框架结构

br 换行标识

hr 结构装饰线

base 网页基准信息

param 元素参数信息

script 网页的脚本

3.键盘语义属性

Accesskey 语义：Access Key（访问键）。定义访问某元素的键盘快捷键tabindex 语义：Tab Index（Tab键索引）。定义元素的Tab键索引编号

使用accesskey属性可以使用快捷键（Alt+字母）访问指定URL，但是浏览器支持不是很好，在IE中仅激活超链接，需要配合Enter键确定，而在FF中没有反应。例如：

按住Alt键，单击A键可以链接到样吧首页

4.内容语义属性

alt 语义：Alternate Text（替换文本）。定义元素的替换文本

title 语义：Title（标题）。定义元素的提示文本

longdesc 语义：Long Describe（长文描述）。定义元素包含内容的大段描述信息

cite 语义：Cite（引用）。定义元素包含内容的引用信息

datetime 语义：Date and Time（日期和时间）。定义元素包含内容的日期和时间

5.其他语义属性

rel 语义：Relationship（关联）。定义当前页面与其他页面的关系

rev 语义：Reverse Link（反向链接）。定义其他页面与当前页面之间的链接关系

提及rel属性，很多人把它当作target 的替代属性。实际上，它们是不同性质的属性，rel和rev属性相对应，它们的语义比较如下：

rel表示从源文档到目标文档的关系。

rev表示从目标文档到源文档的关系。

三、列表信息的语义结构

1.认识列表结构

ul 无序列表

ol 有序列表

li 列表项目

dl 定义列表

dt 定义列表标题

dd 定义列表说明

menu 菜单列表

dir 目录列表

2.使用普通列表结构

普通列表元素包括ul、ol和li。从语义角度来分析，实际上ul和ol没有什么区别，只不过是形式不同罢了，即项目符号的显示效果不同而已。如果使用CSS你完全把它们混用。

ul是Unordered List短语的缩写，可以翻译为不排序列表。从形式上看，也就是项目符号不是有序符号，如1、2、3等。ol是Ordered List短语的缩写，可以翻译为排序列表。li是List Item短语的缩写，表示列表项，该元素必须包含在ul、ol元素中。

3.使用定义列表结构

有序列表（ol和li）、无序列表（ul和li）的父子搭配结构不同，定义列表包含了3个元素：dl、dt和dd。这也为设计师构建复杂的信息结构提供了想像的空间。如果随意浏览一下国外的专业站点，你都会发现很多配合使用这三个元素的精巧结构。

dl是Definition List短语的缩写，直译为定义列表，相当于列表包含框；dt是Definition Term短语的缩写，直译为定义条目，相当于词典中被解释的词汇；dd是Definition Description短语的缩写，直译为定义描述，它相当于词典中解释内容。4.使用定义列表的误区

误用一，把定义列表看作是栏目的模板结构。也就是说，在定义列表中一个dt元素下面跟随这个多个dd元素。

误用一：一个dt和多个dd

栏目标题

项目1

项目2

项目3

项目4

误用二，缺失dt或dd元素。也就是说把定义列表当作普通列表来使用。

误用二：dt或dd缺失

项目1

项目2

项目3

项目4

四、数据表格的语义化结构

1.认识数据表的结构

table 语义：Table（表）

tr 语义：Table Row（表格行）

td 语义：Table Data Cell（表格数据单元）

2.使用表格元素

th 语义：Table Header（表头）。列标题元素

caption 语义：Table Caption（表格标题）。数据表格的标题元素

summary 语义：Table Summary（表格摘要）。table元素的属性，定义数据表格的摘要

3.数据分组

thead 语义：Table Header（表格头）。在数据表中定义头部区域tbody 语义：Table Body（表格主体）。在数据表中定义主体区域

tfoot 语义：Table Footer（表格脚）。在数据表中定义脚部区域

数据列分组

col 语义：Table Columns（表格列）。在数据表中定义列区域colgroup 语义：Groups of Table Columns（数据列组）。在数据表中定义数据列组

五、表单的语义化基本结构

1.认识表单的结构

一个功能完整的表单块应该包含三部分结构：包含框、输入框和提交按钮。例如，在上面示例代码的基础上，我们完善这个表单结构：

2.认识表单元素

form 语义：Form（形状）。定义表单

input 语义：Input Field（文本区域）。定义输入域

textarea 语义：Text Area（文本区域）。定义输入区域

select 语义：Selectable List（可选择的列表）。定义下拉菜单或列表框option 语义：Option（选项）。定义下拉选项或列表选项

button 语义：Push Button（发送按钮）。定义表单的发送按钮optgroup 语义：Option Group（选项组）。定义下拉选项组

label 语义：Label（标签）。定义表单的控制标签

fieldset 语义：Field Set（域组）。定义表单的字段域（或称字段集）

legend 语义：Legend（图例）。定义字段域的标题

isindex 语义：Is Index（索引）。定义简单的输入框

所有表单元素都包含两个基本的属性：

name：该属性定义了表单对象的控制句柄，后台服务器能够利用该属性值来读取其中的数据或者控制该对象。除了按钮之后，其他表单对象都必须设置name属性。设置name属性可以根据对应表单对象的包含的内容来确定。

id：该属性定义了表单对象的ID编码，前台客户端脚本能够利用该属性控制该对象的动态表现。一般可以为表单对象的name和id属性设置相同的属性值。

3.form元素

form是表单的包含框，任何其他表单域都必须包含其中。另外，form元素也可以说是表单数据的前端处理器，因为它负责数据的收集、打包和发送。掌握form元素的关键是要理解它所包含的几个核心属性：

enctype是Encase Type（包装类型）的简称，该属性将设置表单中用户输入的数据发送到服务器时，浏览器使用的编码类型。

action属性用来设置表单提交数据的目标文件。该文件一般可以是任意位置和任何类型的文件。

method属性是form元素的另一个重要属性，method直译为方法的意思，它表示处理表单数据的方法。method属性主要包括两种方法：get和post，在数据传输过程中分别对应HTTP协议中的GET和POST方法。

4.input元素

input直译为输入的意思，input元素可以定义多种形式的输入框，用来接收用户输入的数据。输入框的形式主要通过type属性来决定。

type=“text“，定义单行文本框。

ype=“password”，定义密码域。

type=“hidden”，定义隐藏域。

type=“checkbox”，定义复选框。

type=“radio”，定义单选按钮。

type=“file”，定义文件域。

type=“submit”，定义提交按钮。

type=“image”，定义图像按钮。

type=“button”，定义普通按钮。

5.textarea和select元素

textarea元素用来设置文本区域，也就是所谓的多行文本框。当需要用户输入大量数据时，使用textarea元素是最佳选择。

cols和rows分别设置文本区域的字符宽度和行数。wrap属性定义用户输入内容大于文本域宽度时的显示方式

select元素用来定义下拉菜单或列表框。select元素必须与option元素配合使用，使用option元素定义每个选项的信息，包括显示的值和要传递的值。

六、HTML元素的显示类型

1.块状元素

html、body、frameset、frame、noframes、iframe 网页、框架基本结构块form、fieldset、legend 表单结构块

div 布局结构块

p 段落结构块

h1、h2、h3、h4、h5、h6 标题结构块

ol、ul、dl、dt、dd、menu、dir 表结构块

col、colgroup 表格列结构块

center 居中结构块

pre 预定义结构块

address 引用结构块

blockquote 特定信息结构块

hr 结构装饰线

isindex 交互提示框

title 网页标题框

2.行内元素

span 行内包含框

a、area 超链接和映射包含框

img 图像包含框

abbr、acronym、b、bdo、big、cite、code、del、dfn、em、font、i、ins、kbd、q、s、samp、small、strike、strong、sub、sup、tt、u、var

格式化信息包含框

button、select、textarea、label 单对象包含框

applet、object 可执行的插件或对象包含框

caption 表格标题包含框

noscript 无脚本包含框3.其他元素

头部区域隐藏元素

head 头部包含框

base URL基础basefont 默认基础字体属性link 链接

meta 元信息

script 脚本

style 样式

行内块状元素

input 输入框optgroup 下拉项分组option 下拉项

列表项元素

li 列表项

结构内隐藏元素

map 图像映射包含框param 参数

br 换行

表格系列类型元素

table 表格框显示

tr 表格行显示

td 单元格显示

th 表格标题显示tbody 表格行组显示tfoot 表格脚注组显示thead 表格标题组显示

七、附录