网页设计HTML 元素属性.doc

资源描述

HTML元素与属性列表 A List of HTML Elements & Attributes 《网页设计基础》课程资源摘要这份材料列举了《网页设计基础》这门课程前8次课介绍过的所有HTML元素与属性。其实，我们学习HTML元素就是学习两个东西：元素名和属性对。你需要知道有哪些元素名，它们的作用分别是什么，每种元素有哪些主要属性，每个属性的作用是什么，这些属性的属性值是如何进行设置的。这份材料对这些问题都进行了较为详细的回答。对于每个元素来说，材料从元素名、中文名称、英文全称、DW名称、类别、上级元素、示例和描述等几个方面进行了相应的说明。其中，英文全称是为了让大家更好地记忆元素名；为了方便以后在Dreamweaver中使用这些元素，材料提供了元素在DW中的可能名称；类别用于区分元素属于区块元素还是内联元素，对于空元素也会在其中进行标示；通常情况下，元素应该包含在其上级元素的开始和结束标签之内。对于未介绍属性的元素，材料在介绍元素的时候直接给出可能的示例；对于介绍过主要属性的元素，其属性单独列表，并对其作用以及可能的属性值进行了详细的说明，示例也是结合具体的属性设置才给出的。对于这份列表，我的建议是：打印出来，仔细阅读，将给出的所有示例亲手输入到记事本中，并保存网页，在浏览器中查看结果。事实上，这些内容是相对比较简单的，但要花时间去练习，希望在对这些元素及属性进行练习之后，你会有“原来是这样”的感觉。由于内容较多，整理的时间较长，校对次数有限，其中难免出现错误，任何问题或建议，请直接告知我或发邮件至cumtzzp@。目录《网页设计基础》课程资源 1 目录 2 html 1 head 1 title 1 body 1 meta 2 meta元素的主要属性 2 b 2 i 3 tt 3 strong 3 em 3 code 4 kbd 4 sub 4 sup 4 u 5 s 5 br 5 font 6 font元素的主要属性 6 a 6 a元素的主要属性 7 img 8 img元素的主要属性 8 p 9 blockquote 9 address 9 hn 9 hr 10 hr元素的主要属性 10 pre 11 li 11 ul 11 ul元素的主要属性 12 ol 12 ol元素的主要属性 12 dt 13 dd 13 dl 13 td 14 td元素的主要属性 14 th 16 tr 16 tr元素的主要属性 17 caption 18 caption元素的主要属性 18 thead 18 tbody 19 tfoot 19 table 19 table元素的主要属性 19 input 21 input元素的主要属性 22 input type="text" 22 input type="text"元素的主要属性 22 input type="radio" 24 input type="radio"元素的主要属性 24 input type="button" 25 input type="button"元素的主要属性 25 option 25 option元素的主要属性 25 select 26 select元素的主要属性 26 textarea 26 textarea元素的主要属性 27 form 27 form元素的主要属性 27 frame 28 frame元素的主要属性 28 frameset 28 frameset元素的主要属性 29 noframes 29 html 元素名 html 中文名称英文全称 Hyper-Text Markup Language DW名称 DW中自动生成类别顶级元素上级元素根元素，无上级元素描述 HTML文档根元素。一个最简合法的HTML文档以标签<html>开始，以标签</html>结束。示例示例参见body元素后的“最简合法HTML文档”。 head 元素名 head 中文名称文档头英文全称 DW名称 DW中自动生成类别顶级元素上级元素 html 描述设置文档头信息，包含用于设置文档显示标题的title元素、浏览器需要的设置信息、样式定义（或.css文件的引用）以及Javascript脚本（或.js文件的引用）。最简合法HTML文档必须包含该元素。示例示例参见body元素后的“最简合法HTML文档”。 title 元素名 title 中文名称标题英文全称 DW名称 DW中自动生成类别标题元素上级元素 head 描述用于设置HTML文档在浏览器中显示的标题。最简合法HTML文档必须包含该元素。示例示例参见body元素后的“最简合法HTML文档”。 body 元素名 body 中文名称主体英文全称 DW名称 DW中自动生成类别顶级元素上级元素 html 描述 HTML文档在浏览器中显示时的可见部分，包含所有其它的最终会显示在浏览器中的元素，被包含的元素主要分为区块元素（block）和内联（inline）元素两种。示例最简合法HTML文档—— <html> <head> <title>测试文档</title> </head> <body> <!—文档内容 --> </body> </html> meta 元素名 meta 中文名称英文全称 DW名称 Meta 类别顶级元素；空元素上级元素 head 描述对HTML文档信息的设置。 meta元素的主要属性属性名属性说明及属性值取值范围示例 http-eqiuv http-equivalent的缩写。该属性用于指定HTTP头信息。该属性的设置需要和content结合在一起使用，直接记住下一个单元各种所列举的示例即可。 ① 设置文档类型以及字符集： <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> ② 设置文档在n秒后刷新到地址为yoururl的页面： <meta http-equiv="Refresh" content="n;url=yourl"> name 与content属性一起设置HTML文档需要的相关信息，如文档的关键词、描述、作者等。 ③ 对制作该网页的工具进行说明： <meta name="Generator" content="Dreamweaver 8"> ④ 指定文档的关键词为“体育, 篮球”： <meta name="KeyWords" content="体育, 篮球"> ⑤ 设置网页或网站的描述性文字： <meta name="Description" content="描述文本"> ⑥ 指出该网页或网站的作者为：“张三”： <meta name="Author" content="张三"> ⑦ 指定是否允许网络爬虫/蜘蛛/机器人进行爬网： <meta name="Robots" content= "all | none"> content 用于指定由属性http-equiv或name指定的参数的参数值。见http-eqiuv和name属性示例。备注 ①对于meta元素，只要知道上面示例中的几种关于文档的设置就可以了； ②meta元素应该放在<head>和</head>之间。 b 元素名 b 中文名称粗体英文全称 bold DW名称粗体类别内联元素上级元素描述将包含在其开始和结束标签中的文本显示为粗体。示例 <b>要显示为粗体的文本</b> 备注 ①不推荐在网页中使用该元素，将字体设置为黑体时使用strong元素。 ②对于内联元素来说，其上级元素可以是顶级元素或区块元素，甚至在内联元素之间也可以进行嵌套，下同。 i 元素名 i 中文名称斜体英文全称 italic DW名称斜体类别内联元素上级元素描述将包含在其开始和结束标签中的文本显示为斜体。示例 <i>要显示为斜体的文本</i> 备注不推荐在网页中使用该元素，将字体设置为斜体时使用em元素。 tt 元素名 tt 中文名称电传打字体英文全称 Tele-Type DW名称打字型类别内联元素上级元素描述将包含在其开始和结束标签中的文本显示为电传打字体。示例 <tt>要显示为电传打字体的文本</tt> strong 元素名 strong 中文名称加强英文全称 DW名称加强加强 | 粗体类别内联元素上级元素描述将包含在其开始和结束标签中的文本显示为粗体，用于加强语气。示例 <strong>要加强语气的文本</strong> em 元素名 em 中文名称强调英文全称 emphasized DW名称强调强调 | 斜体类别内联元素上级元素描述将包含在其开始和结束标签中的文本显示为斜体，用于着重强调该文本。示例 <em>要加强语气的文本</em> code 元素名 code 中文名称代码英文全称 DW名称代码类别内联元素上级元素描述将包含在其开始和结束标签中的文本显示为代码（特殊英文字体显示）。示例 <code>var strCode = "This is a test code. ";</code> kbd 元素名 kbd 中文名称键盘英文全称 keyboard DW名称键盘类别内联元素上级元素描述将包含在其开始和结束标签中的文本以等宽字体显示（特殊英文字体）。示例 <kbd>keyboard</kbd> sub 元素名 sub 中文名称下标英文全称 subscript DW名称类别内联元素上级元素描述将包含在其开始和结束标签中的文本显示为下标，如A1中的1。示例 A = A<sub>1</sub> + A<sub>2</sub> + A<sub>3</sub> 备注 DW对上标和下标的支持不好，建议直接切换到代码视图手工输入该元素。 sup 元素名 sup 中文名称上标英文全称 superscript DW名称类别内联元素上级元素描述将包含在其开始和结束标签中的文本显示为上标，如A2中的2。示例 E = MC<sup>2<./sup> 备注 DW对上标和下标的支持不好，建议直接切换到代码视图手工输入该元素。 u 元素名 u 中文名称下划线英文全称 underline DW名称下划线类别内联元素上级元素描述为包含在其开始和结束标签中的文本添加下划线，如文本。示例 <u>要添加下划线的文本</u> s 元素名 s 中文名称删除线英文全称 strikethrough DW名称删除线类别内联元素上级元素描述为包含在其开始和结束标签中的文本添加删除线，如文本。示例 <s>要添加删除线的文本</s> br 元素名 br 中文名称软换行英文全称 break line DW名称换行符类别内联元素；空元素上级元素示例第1行文本 <br> 第2行文本 <br> 第3行文本 <br> 第4行文本描述向网页中插入一个软换行，相当于在Word中按住Shift + Enter键插入一个段落内换行。 font 元素名 font 中文名称字体英文全称 DW名称类别内联元素上级元素描述通过向网页中添加该元素，并对其属性进行设置，可以指定文本的颜色、大小和字体（如宋体、隶书、幼圆）。 font元素的主要属性属性名属性说明及属性值取值范围示例 color 该属性用于指定文本要显示的颜色，取值是一个Web颜色值。Web颜色值可以使用两种方法表示：①代表颜色的英文，如red代表红色；②代表RGB三个方向上的分量的六位十六进制数，如#FF0000同样代表红色。设置文本显示为红色： <font color="red">要显示为红色的文本</font> <font color="#FF0000">要显示为红色的文本</font> size 该属性用于指定文本的大小，取值范围是[-6, -1] ∪ [1, 7] ∪ [+1, +6]。 <font size="3"></font> face 该属性用于指定文本以何种字体（宋体、隶书、幼圆等）显示，其属性值是系统中可能存在的字体的名称。 <font face="宋体">使用宋体显示的文本</font> <font face="华文彩云, 宋体">首选使用字体“华文彩云”显示文本，若系统中该字体不存在，则使用“宋体”显示文本。</font> 备注多个属性同时设置可以使得文本同时具有多种样式，如<font size="4" color="#00F" face="幼圆">文本</font>在浏览器中显示时是一个4号的蓝色幼圆字体的文本。 a 元素名 a 中文名称超级链接英文全称 anchor DW名称超级链接类别内联元素上级元素描述使用该元素向网页中插入一个超级链接。 a元素的主要属性属性名属性说明及属性值取值范围示例 href href是Hypertext Reference的缩写，即在超文本引用其它文件。该属性的取值是一个URL，即要引用的文件的地址。 ① 插入一个到百度的链接： <a href="">百度</a> ② 插入到相同文件夹中的一个.xls文件的链接： <a href="excelfile.xls">同目录下的一个Excel文件</a> ③ 插入到FTP站点上一个文件的链接： <a href="ftp:// ④ 插入一个电子邮件链接： <a href="mailto:cumtzzp@">我的Email</a> ⑤ 插入一个到命名锚链的链接： <a href="filename.htm/#anchorname">命名锚链</a> target 用于指定要打开的链接到的文件的窗口位置。常用的属性值有_blank和_self，分别用于在新窗口和自身窗口中打开文件，不设置该属性则在自身窗口打开文件。对于框架网页来说，还可以通过指定该属性为frame元素的name属性值来在指定框架中打开文件。 ⑥ 在新窗口中打开new.htm： <a href="new.htm" target="_blank">new.htm</a> ⑦ 在自身窗口打开new.htm： <a href="new.htm" target="_self">new.htm</a> <a href="new.htm">new.htm</a> ⑧ 在name属性为new的框架中打开new.htm： <a href="new.htm" target="new">new.htm</a> name name属性在HTML中一般用于指定元素的名称，如果对元素a指定该属性，则元素a被称为“命名锚链”（a即anchor，是锚链的意思），通常我们也称其为“书签”。在网页中插入命名锚链的目的是为了单击链接后快速达到文档的某个特定位置，而不需要拖动滚动条定为该位置的内容，方便用户的操作。其属性值是由设计人员定义的能够概括特定位置内容的简洁易记的字符串。在文档book.htm中插入一个命名锚链： <a name="chapter3">第三章</a> 在文档book.htm插入一个直接到达第三章的链接： <a href="#chapter3">跳转到“第三章”</a> 插入一个直接到达第三章的链接： <a href="book.htm#chapter3">跳转到书的“第三章”</a> 备注超级链接<a href="#">回到页首</a>可以直接跳转到一个文档的最前面，即滚动条的位置在最上方。 img 元素名 img 中文名称图片英文全称 image DW名称图像类别内联元素；空元素上级元素描述使用该元素向网页中插入一幅图片。 img元素的主要属性属性名属性说明及属性值取值范围示例 src src是source的缩写，即要插入图片的来源路径。该属性的取值是一个到指定图片的URL，即要插入的图片的路径。网页中允许插入的图片格式有JPG、GIF和PNG，对应的文件扩展名为.jpg或.jpeg、.gif和.png。 ① 插入同一文件夹下的一个JPG图片： <img src="jpgfile1.jpg"> ② 插入名为images子文件夹下的图片jpgfile2.jpg： <img src="images/jpgfile2.jpg"> ③ 插入名为上级文件夹下的图片jpgfile3.jpg： <img src=".../jpgfile3.jpg"> ④ 插入一个GIF图片： <img src="giffile.gif"> ⑤ 插入一个PNG图片： <img src="pngfile.png"> width & height 这两个属性分别用于指定图片插入网页后使用的宽度和高度，如果不指定这两个属性，图片将以自身大小显示在网页中。两个属性的属性值都是一个长度：以像素(px)为单位的整数值。 ⑥ 不改变图片大小插入图片jpgfile.jpg <img src="jpgfile.jpg"> ⑦ 假设jpgfile.jpg原大小为400px×300px，以一半大小插入该图片： <img src="jpgfile.jpg" width="200" height="150"> alt alternative text的缩写，即“替换文本”，该属性用于指定当图片无法显示时提示用户图片内容的替换文本。其属性值是一个由设计人员指定的可以描述图片内容的字符串。 <img src="boat.gif" alt="小船"> p 元素名 p 中文名称段落英文全称 paragraph DW名称段落类别区块元素上级元素示例 <p>段落1</p><p>段落2</p><p>段落3</p> 描述将包含在其开始和结束标签中的文本组织为一个段落。p是最典型的区块元素。 blockquote 元素名 blockquote 中文名称区块引用英文全称 DW名称块引用类别区块元素上级元素示例 <blockquote>引用的文本</blockquote> 孔子说过：<blockquote>学而不思则罔，思而不学则殆。</blockquote> 描述以区块的形式在网页中添加来自于其它出处的文本，如引用别人说过的话。与之对应的是一个我们没讲过的元素q（quote），该元素为内联引用元素。 address 元素名 address 中文名称地址英文全称 DW名称类别区块元素上级元素示例 <address>徐州市泉山区中国矿业大学</address> <address>cumtzzp@</address> 描述用于在网页中表示包含在其开始和结束标签中的文本是一个地址或电子邮件地址。 hn 元素名 hn 中文名称 n级标题英文全称 heading n DW名称标题 n 类别区块元素上级元素示例 <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6> 描述 hn不是一个元素，而是六个元素，即n=1, 2, 3, 4, 5, 6。这六个元素用于在网页中插入六个不同级别的标题。 hr 元素名 hr 中文名称水平线英文全称 horizontal line DW名称水平线类别区块元素；空元素上级元素描述使用该元素可以在网页中插入一条水平线。 hr元素的主要属性属性名属性说明及属性值取值范围示例 width 指定水平线的宽度，不设置该元素时水平线的宽度会自动充满其上级容器。属性值是以像素(px)为单位的整数值或是一个百分比数：前者为水平线指定绝对宽度，后者是一个相对宽度，实际宽度为水平线上级容器宽度乘以百分比。 ① 插入一条水平线： <hr> ② 插入一条宽度为200px的水平线： <hr width="200"> ③ 插入一条宽度为200px的水平线： <hr width="20%"> align 水平线的对齐设置。可能的属性值有：left | center | right，分别将水平线设置为居左、居中、居右显示。不设置该属性，则水平线居左显示。该属性应该和width属性结合使用，否则效果不明显。 ④ 插入一条居中的水平线： <hr width="200" align="center"> color 指定水平线显示时使用的颜色，其属性值是一个Web颜色值（参见font元素的color属性）。 ⑤ 插入一条红色的水平线： <hr color="red"> size 用于指定水平线的大小，其实是用于指定水平线显示的高度。取值范围是1~100之间的整数值。当该属性值大于100时，水平线以size=100时的样式显示。 ⑥ 插入一条高度为5的水平线 <hr size="5"> noshade 这是一个布尔属性，如果为hr元素指定了该属性，则水平线将不显示阴影。该属性应该和size属性结合使用，否则效果不明显。 ⑦ 插入一条不显示阴影的水平线 <hr size="5" noshade> <hr size="5" noshade="noshade"> pre 元素名 pre 中文名称预格式化文本英文全称 preformatted DW名称已编排格式 | 预格式化的类别区块元素上级元素示例 <pre> 北西东南 </pre> 描述通常情况下，HTML源码中的多个空格、制表符和回车符（分别由按键Space、Tab和Enter产生）在HTML文档最终在浏览器中显示时都会被收缩成为一个空格；而包含在pre元素开始和结束标签中的多个空格、制表符和回车符不会被收缩，而是原封不动地显示到浏览器中。 li 元素名 li 中文名称列表项英文全称 list item DW名称列表项类别区块元素上级元素 ul | ol 示例 li元素需要放置在ul或ol元素的开始和结束标签之内，而不单独出现，参见ul和ol的示例。描述 HTML列表用于逐行显示信息，而逐行显示的每条信息均被称为列表项，使用li元素进行标记。通常情况下，该元素需要放置在ul或ol元素的开始和结束标签之内，而不单独出现，即应该首先创建列表，然后在列表中插入li元素，参见元素ul和元素ol。 ul 元素名 ul 中文名称无序列表英文全称 unordered list DW名称项目列表类别区块元素上级元素描述无序列表中逐行显示的信息之间没有主次关系，即各个列表项之间没有先后之分，每个列表项前均带有一个特定符号，如●、○或■。ul元素的开始和结束标签之间包含的是使用li元素定义的列表项，参见元素li。 ul元素的主要属性属性名属性说明及属性值取值范围示例 type 用于指定无序列表每个列表项前面的符号的类型。不设置该属性时，列表项目符号为●。可能的取值是disc | circle | square，分别对应的项目符号是●、○和■。 ① 插入一个无序列表： <ul> <li>项目1</li> <li>项目2</li> </ul> ② 插入一个无序列表，并设置项目符号为■： <ul type="square"> <li>项目1</li> <li>项目2</li> </ul> ol 元素名 ol 中文名称有序列表英文全称 ordered list DW名称编号列表类别区块元素上级元素描述有序列表中逐行显示的信息之间存在主次关系，即各个列表项之间存在先后之分，每个列表项前均带有一个特定的数字序号。ol元素的开始和结束标签之间包含的是使用li元素定义的列表项，参见元素li。 ol元素的主要属性属性名属性说明及属性值取值范围示例 type 用于指定有序列表每个列表项前面的序号的类型。不设置该属性时，列表项目序号为阿拉伯数字。可能的取值是1 | A | a | I | i，对应的项目序号样式分别是阿拉伯数字、大写英文字母、小写英文字母、大写罗马数字和小写罗马数字。 ① 插入一个有序列表： <ol> <li>项目1</li> <li>项目2</li> </ol> ② 插入一个有序列表，并设置项目符号为小写罗马数字： <ol type="i"> <li>项目1</li> <li>项目2</li> </ol> dt 元素名 dt 中文名称描述术语英文全称 definition term DW名称定义术语类别区块元素上级元素 dl 示例参见dl元素示例。描述描述列表不同于无序列表和有序列表，它不是关于项目的列表，而是关于术语及其解释的列表，dt元素用于在描述列表中对术语进行标记，即包含在dt元素开始和结束标签之间的内容是一个待解释的术语。dt元素需要放置在元素dl的开始和结束标签之间，参加元素dl。 dd 元素名 dd 中文名称术语描述英文全称 definition description DW名称定义说明类别区块元素上级元素 dl 示例参见dl元素示例。描述 dd元素开始和结束标签之间的文本是对dt元素中标记的术语的解释或描述性文字，该元素需要放置在dl元素的开始和结束标签之间，参见元素dl。 dl 元素名 dl 中文名称描述列表英文全称 definition list DW名称定义列表类别区块元素上级元素示例 <dl> <dt>XML</dt> <dd>eXtensible Markup Language</dd> </dl> 描述 dl元素用于创建描述列表，它是元素dt和元素dd的容器，即dt元素和dd元素应该包含在dl元素的开始和结束标签之间。参见元素dt和元素dd。 td 元素名 td 中文名称单元格英文全称 table data DW名称单元格类别上级元素 tr 描述 table元素用于在网页中插入一个二维表结构的数据，如成绩单。td元素用于表示表格的单元格，单元格即行与列交叉形成的最小数据单元。td元素是一个容器，在其开始和结束标签之间可以出现任意非顶级元素的HTML元素，例如简单内联元素、图片、超级链接、段落、甚至是表格等。td元素不单独出现，其上级元素是tr，即td元素应该出现在tr元素的开始和结束标签之间。 td元素的主要属性属性名属性说明及属性值取值范围示例 align 用于指定单元格中的内容的水平对齐方式。不设置该属性时，单元格中的内容居左显示。需要记住的取值范围有left | center | right，分别对应单元格中的内容居左、居中、居右显示。 <table width="800" border="1"> <tr> <td align="center">内容1</td> <td align="left">内容2</td> <td align="right">内容3</td> <td>内容4</td> </tr> </table> valign 用于指定单元格中的内容的竖直对齐方式。不设置该属性时，单元格中的内容在竖直方向上居中显示。需要记住的取值范围有top | middle | bottom，分别对应单元格中的内容在竖直方向上靠近单元格顶部、居中、靠近单元格底部显示。需要注意的是该属性应当在设置了td元素的height属性或该td元素的上级tr元素的height属性为一较大值时才能看出效果。 <table width="400" border="1"> <tr> <td valign="bottom" height="200">内容1</td> <td valign="top">内容2</td> <td valign="middle">内容3</td> <td>内容4</td> </tr> </table> width & height 这两个属性分别用于指定单元格的宽度和高度。其属性值可以是一个以像素为单位的整数值或是一个百分比。通常情况下，我们只需要为表格的第一行中的单元格设置width属性，为第一列的单元格设置height属性，以下各行（或列）中的单元格的宽度和高度会随之确定。 <table width="400" border="1"> <tr> <td width="300" height="200">内容1</td> <td>内容2</td> </tr> <tr> <td height="100">内容3</td> <td>内容4</td> </tr> </table> background 该属性用于为单元格指定背景图片。当单元格覆盖的面积比图片大时，浏览器会自动平铺图片作为单元格的背景，反之则会从上到下、从左到右截取图片作为单元格的背景。其属性值是一个URL，即单元格要使用的背景图片的路径。 <table width="200" border="1"> <tr> <td background="bg.gif">内容1</td> <td>内容2</td> </tr> </table> bgcolor 该属性用于为单元格指定背景颜色。其属性值是一个Web颜色值，如red、#FF0000。 <table width="200" border="1"> <tr> <td bgcolor="#FF0000">内容1</td> <td>内容2</td> </tr> </table> bordercolor 该属性用于指定单元格的边框颜色。其属性值是一个Web颜色值，如red、#FF0000。显然，表格应该有边框，此属性的设置才能看出效果。 <table width="200" border="1"> <tr> <td>内容1</td> <td bordercolor="red">内容2</td> </tr> </table> nowrap 布尔属性，如果设置了该属性，则单元格中的文本不会自动换行，而是撑大单元格。不设置该属性，当单元格中的文本长度大于单元格宽度时，会自动换行。 <table width="50" border="1"> <tr>

展开阅读全文