【ACCESS精品源码栏目提醒】:网学会员,鉴于大家对ACCESS精品源码十分关注,论文会员在此为大家搜集整理了“网页设计标签 - 其它资料”一文,供大家参考学习!
一、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 中没有反应。
例如:lta hrefquothttp://www.css8.cn/quot accesskeyquotaquotgt按住 Alt 键,单击 A 键可以链接到样吧首页lt/agt4.内容语义属性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 元素。
lth2gt误用一:一个 dt 和多个 ddlt/h2gtltdlgt ltdtgt栏目标题lt/dtgt ltddgt项目 1lt/ddgt ltddgt项目 2lt/ddgt ltddgt项目 3lt/ddgt ltddgt项目 4lt/ddgtlt/dlgt误用二,缺失 dt 或 dd 元素。
也就是说把定义列表当作普通列表来使用。
lth2gt误用二:dt 或 dd 缺失lt/h2gtltdlgt ltddgt项目 1lt/ddgt ltddgt项目 2lt/ddgt ltddgt项目 3lt/ddgt ltddgt项目 4lt/ddgtlt/dlgt 四、数据表格的语义化结构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.认识表单的结构一个功能完整的表单块应该包含三部分结构:包含框、输入框和提交按钮。
例如,在上面示例代码的基础上,我们完善这个表单结构:ltform idquotform1quot namequotform1quot methodquotpostquot actionquotquotgt lt-- 表单包含框 --gtltinput typequottextquot namequottextfieldquot idquottextfieldquot /gt lt-- 输入框 --gt ltinputtypequotsubmitquot namequotbuttonquot idquotbuttonquot valuequot提交quot /gtlt-- 提交按钮 --gtlt/formgt2.认识表单元素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 表格标题组显示 七、附录 1. ltagt 4. ltbgsoundgt 在html文档中使用的创建链接的最基本的元 背 景 音 乐 如 :ltbgsound素,它可以用于创建源锚,也成为标记锚。
srcquotXXX.midquot ltagtlt/agt元素用于定义链接或目的锚,它的开 loopquot10quotgt始和结束标记不可以缺省 src:音乐的路径 name:此属性用于给目的锚命名以便其他的 loop:播放的次数链接指向该锚 5. ltbodygt、lt/bodygt href:此属性用于定义一个指向WEB资源的 ltbodygt至lt/bodygt称主体。
如:ltbodyURL textquot000000quot linkquot000000quot alink hreflang:此属性用于定义链接所指向的文 quot000000quot vlinkquot000000quot档的基准语言信息,仅当设置了href属性时此属 background quotXXX.gifquot性才有效 bgcolorquot000000quot leftmargin2 type:此属性用于定义a元素中文本的类型 topmargin2 bgpropertiesquotfixedquotgt rel:此属性用于定义由href属性所指定的文 text:设定文字颜色档的关系,它的值是由空格分开的链接类型列表 link:设定一般文字链接颜色 rev:此属性用于定义由href属性所指定的锚 alink:设定刚按下时文本链接颜色与当前文档的反向链接关系,它的值是由空格分 vlink : 设 定 链 接 后 的 颜 色 ( 被 按开的链接类型的列表 过) charset:此属性用于定义链接指向的文档的 background:设定背景图片,GIF或字符编码方式 JPG格式皆可。
可以是绝对路径或相对路 2. ltbasefontgt 径。
可 以 用 在 文 件 的 开 头 部 分 , 即 ltheadgt 与 bgcolor:设定背景颜色,当已设定lt/headgt之间的位置,将影响全文字句,是一个空 背景图片时会失去作用,除非图片有透明标记,用以改变字体显示的默认值 部分。
3. ltbasegt leftmargin:设定整份文件显示画面 定义文档的基准路径,它是一个空元素,只 的左方边沿空间半径为像素(只适用IE)有开始标记,没有结束标记。
可用属性包括href topmargin:设定整份文件显示画面和target 的上方边沿空间半径为像素(只适用IE) href:此属性用于定义文档的基准路径,它 bgproperties:固定背景图片,当卷的值是一个绝对的URL 动文字时图片不会跟随卷动(只适用IE) target : 可 用 值 _self 、 _top 、 _blank 、 6. ltcaptiongt_parent 为表格标识一个标题列,如在表格上 加上一没格线的打通列,当然也可置于下 方,通常用于存放该表格的标题,如: ltcaption alignquotcenterquot calignquottopquotgt align:表格内字、画的摆放位置, 可用left、center、right指定 valign : 表 格 内 字 、 画 的 摆 放 位 置 (垂直),可用top、middle、bottom指 定 7. Color 左右空间 字体颜色 vspace:设定图片边沿空白,是设定 8. ltembedgt 图片上下空间 Flash 代 码 , 如 : ltembed srcquotXXX.swfquot border:图片边框厚度widhtquot100quot heightquot100quotgtlt/embedgt align:调整图片旁边文字的位置, src:FLASH路径 可 选 择 left 、 right 、 top 、 middle 或 height:宽度 bottom,默认为bottom width:高度 alt:用以锚述该图形的文字 9. ltheadgt、lt/headgt lowsrc:设定先显示低解像图片,若 ltheadgt由ltheadgt至lt/headgt称为头部 所加入的是一张很大的图片,下载时间 10. lthtmlgt、lt/htmlgt 长,这张低解像图片会先被显示 lthtmlgt整份文件处于lthtmlgt与lt/htmlgt标记之 .