第二章 网页设计语言_Html

第2章HTML语言1HTML基础2基本结构标记3文本格式标记4超链接标记5图像标记6表格标记7格式标记8表单标记9使用字幕2.1HTML有关基本知识一、什么是html语言。HTML是超文本标记语言，它是一种用于编写网页的标记语言。几乎所有的网页都是由HTML或其它程序语言编写成的。二、html语言的特性。HTML语言具有与平台无关性，无论用户使用何种操作系统（WINDOWS、DOS、UNIX），只要有相应的浏览器程序，就可以运行HTML文档。三、html语言中的工作原理。HTML编程就是用各种各样的标记把在页面中要显示的内容组织起来，其中包含了许多标记和文本，浏览器可以理解这些标记，并把标记解译出来，显示出漂亮的Web页面。2.1.1标记基础HTML语言是由多个标记组成的，标记给浏览器提供了格式化Web文档的指令。一、基本的HTML语法1.在HTML语言中，所有的标记都必须用尖括号括起来。例如，HTML、HEAD、BODY等。2.大部分标记都是成对出现的，包括开始标记和结束标记，开始标记和结束标记定义了所影响的范围。3.结束标记与开始标记名称相同，但结束标记总是以一个斜线符号开头的。例如，HTML和/HTML，也有一些标记没有结束标记符号，例如换行标记BR就是这样。4.HTML标记不区分大小写。5.HTML文件可支持很多标记，不同的标记代表不同的含义。学习HTML语言上就是学习这些各种各样的标记。6.每种标记有不同的作用,当需要对网页的某处内容进行修改时，就把相应的标记放置在该处前面，这时浏览器就会知道要以何种方式显示网页的内容了。7.可以把标记放置在网页中的任意部位，但浏览器不会把这些标记本身显示出来，只是按照标记的要求对标记符之间的内容进行特殊显示。2.1.2标记符的属性大多数标记都包含有多个属性，通过这些属性可以对作用的内容进行更多的控制。在HTML语言中，所有属性都放置在开始标记的尖括号内。例如，使用Font标记设置文本格式时，可以使用Face属性来指定所用的字体，使用Size属性来指定所用的字号。请看下面的HTML代码：FontFace=“宋体”Size=“2”心想事成/Font使用标记时的一些注意事项：任何标记都用“”和“”所围住，如P标记名与“”号之间不能留有空白字符。对于某些标记，要加上属性，某些则不必，属性只可加于起始标记中。在开始标记的标记符前加上符号“/”便是其结束标记，不同的标记可以带有不同的属性，属性要和标记同时使用，其格式为：标记名属性名＝属性值属性名＝属性值…文本/标记名标记字母不分大小写，标记中的属性名和属性值也都不区分大小写。HTML标记可以嵌套使用，嵌套使用时注意不要发生交叉嵌套。BDIVALIGN=CENTERFONTCOLOR=BLUE动态网页/FONT/DIV/B有少数几个标记没有对应的结束标记。如img、hr。2.1.3在HTML文件中使用注释在HTML文件中提供了注释标记，注释由开始标记“!--”和结束标记“--”构成，这两个标记之间的文字被浏览器解释为注释，注释的内容不会在浏览器窗口中显示，它是给网页设计者看的，主要目的是增加代码的可读性。当浏览器遇见注释标记时，会忽略注释标记中的文字（可以是很多行文字），对添加了注释标记中的内容不作显示。2.2HTML文档的基本结构一、文档的开始与结束标记HTML.../HTML它是网页的开始和结束标记，其他所有标记都位于这两个标记之间。二、文档头部标记＜Head＞＜／Head＞它用来设定有关页面的一些信息，这些信息不是页面显示的主体内容，但有时对于浏览器解释标记是很有用的。三、主体标记＜Body＞＜／Body＞body标记符是告诉浏览器这里面的内容是网页的实际内容。对于一个最简单的网页来说，html和body这两个标记符是唯一必须使用的标记符，网页中的正文内容必须要放在这两个标记之间。body标记包含了文档的内容，文字、图像、动画、超链接以及其他HTML元素均位于该标记中。HTML文档的基本结构可以表示如下：HTMLHEADTITLE标题文字/TITLEHEADBODY文本、图像、动画、HTML指令等/BODY/HTML2.3文本格式标记2.3.1标题字体＜Hn＞＜／Hn＞标题标记用于设置文档中的标题，其中H1.../H1标记表示字体最大的标题，H6…/H6标记表示字体最小的标题。演示：Sample2_4.htm2.3.2字体控制标记一、设置字体、字号和颜色使用字体标记FONT/FONT来设置文本的字符格式，将文本置于FONT和/FONT标记之间，通过FACE、SIZE和COLOR属性来设置字体、字号和颜色。FACE属性指定一种字体,SIZE属性指定字体的大小，其取值可以从1到7，SIZE属性值越大，显示的字号就越大COLOR属性指定文本的颜色，可以用颜色名称表示，也可以用十六进制RGB格式表示。演示：Sample2_5.htm二、控制字体的特殊效果通过设置字符样式可以为某些字符设置特殊格式，如粗体、斜体、下划线、删除线、上标、下标等。常用的设置字符样式的标记如下：B.../B粗体I.../I斜体S.../S删除线SMALL.../SMALL小字体STRIKE.../STRIKE删除线SUP.../SUP上标SUB.../SUB下标U.../U下划线演示：Sample2_6.htm2.3.3分段与换行一、分段标记P分段标记定义了一个段落，使用该标记后续内容隔一行显示。若同时使用P和/P，则将段落包围起来，表示一个分段的块；若省略结束标记/P，可以将开始标记P放在段尾。分段标记的常用属性是ALIGN，用于设置段落的水平对齐方式。演示：Sample2_7.htm、Sample2_8.htm二、换行标记BR大多数情况下，段落标记P是分隔文本的最佳符号，但有时可能会希望内容另起一行，但在新行与上一行之间并不空出一行间距，在逻辑上还属于一段。在这种情况下，最好使用分行标志符BR。演示：Sample2_9.htm2.3.4使用列表格式一、创建有序列表有序列表使用OL和LI标记来创建，语法如下：OLLI列表项1……LI列表项n/OLOL标记有两个常用属性：Start和Type。Start属性用于数字序列的起始值，可以取整数值；Type属性用于设置数字序列样式，其取值可以是：1：表示阿拉伯数字1、2、3等，此为默认值。A：表示大写字母A、B、C等。演示：Sample2_11.htm二、创建无序列表使用UL和LI标记来创建，语法格式如下：ULLI列表项1……LI列表项n/ULUL标记的TYPE属性用于指定列表项前面显示的项目符号，其取值可以是：disc：使用实心圆作为项目符号（默认值）。circle：使用空心圆作为项目符号。square：使用方块作为项目符号。演示：Sample2_10.htm2.4超链接标记＜A＞＜／A＞超级链接的HTML标记是A/A，使用格式为：Ahref=URLtitle=提示标签target=目标窗口链接载体/A一、链接另一页面二、链接到一个图像文件：三、链接到一个需要下载的文件：四、当链接的目标文件是压缩文件、EXE或COM文件、可以实现选择下载或立即打开。演示：Sample2_12.htmahref=#onClick='vbscript:document.all.zg.style.display=block‘显示/a可以实现单击超链接使隐藏的对象显示2.5使用图像使用IMG标记在网页中插入一个图像。语句格式：Imgsrc=”图形文件名”alt=”提示文本”border=边框宽度Align=对齐方式width=宽度height=高度2.5.1在网页中插入图像演示：Sample2_13.htm、Sample2_14.htm2.5.2播放多媒体文件Img标记不仅用于在网页中插入图像，也可以用于播放多媒体文件（.avi）。若要在网页中播放多媒体文件，应在IMG标记中设置以下属性：DYNSRC：指定要播放的多媒体文件的URL。START：指定何时开始播放多媒体文件，其取值可以是fileopen或mouseover。2.6使用表格若要创建一个表格，可以使用以下HTML代码：TABLETRTD数据/TDTD数据/TD/TR……TRTD数据/TDTD数据/TD…TD数据/TD/TR/TABLE2.6.1TABLE标记创建表格时，可以通过标记的下列属性来对表格的格式进行设置：ALIGN：表格在页面的对齐方式，left、center或right。BACKGROUND：指定用作表格背景图片的URL地址。BGCOLOR：指定表格的背景颜色。BORDER：表格边框的宽度单位(像素)。则默认值为0。WIDTH：指定表格的宽度，以像素或百分比为单位。2.6.2设置表行的标记TR表格中的每一行是用TR标记来定义的，可以通过该标记的下列属性对指定行的格式进行设置：ALIGN：行中的水平对齐方式，值为left（默认值）、center或right。BGCOLOR：指定行的背景颜色。VALIGN：行中单元格的垂直对齐方式，该属性的取值可以是top（顶端对齐）、middle（居中对齐）、bottom（底端对齐）或baseline（基线对齐）。2.6.3设置单元格的标记TD通过TD标记的下列属性可以对指定单元格的格式进行设置：ALIGN:指定单元格内文本的水平对齐方式，取值为left（默认值）、center或right。BGCOLOR:指定单元格的背景颜色。COLSPAN:合并单元格时一个单元格跨越的列数。ROWSPAN:合并单元格时一个单元格跨越的行数。演示：Sample2_15.htm、Sample2_16.htm2.7设置格式标记格式标记用来设置页面中元素的位置，主要有Div标记和Center标记。2.7.1Div标记Div标记用来排版大块的HTML段落，在其中加入多种其它标记，实现对其中包含元素版面设置功能。2.7.2Center标记Center标记用来实现对网页中包含元素的版面居中设置功能。演示：Sample2_17.htm、Sample2_18.htmscriptlanguage=VBScriptsubhide()document.all.zg.style.display=none'隐藏块对象'endsubsubdisp()document.all.zg.style.display=block'显示块对象'endsub/scriptbodyformname=aaainputtype=buttonname=b1value=隐藏onclick=hide()inputtype=buttonname=b2value=显示onclick=disp()/formdivid=zgstyle=display:none;tablewidth=75%border=1trtd /tdtd /td/tr/table/div/body/html设置表格线的几种方法：1、使用CSS样式定义表格外框线，表行分别用奇偶行设置不同的颜色。2、设置表格的背景色，单元格间距设置为1，然后为表行设置白色。3、使用CSS样式设置不同的表线。方法一：tablewidth=“50%”border=“1”cellspacing=“0”style=“border-collapse:collapse”border-collapse边框合并属性（co