《第八讲HTML语言初步》由会员分享，可在线阅读，更多相关《第八讲HTML语言初步（84页珍藏版）》请在金锄头文库上搜索。
1、第第 八讲八讲 HTML语言初步语言初步北北 京京 邮邮 电电 大大 学学徐惠民徐惠民HTML初步初步HTML的优点的优点：HTML文件比较小，便于在网络上传输；文件比较小，便于在网络上传输；HTML文档独立于计算机操作平台；文档独立于计算机操作平台；原则上，建立原则上，建立HTML文档不需要任何特殊的文档不需要任何特殊的软件，只需一般的文本编辑器即可；软件，只需一般的文本编辑器即可；HTML标记语言，非常便于学习。标记语言，非常便于学习。HTML初步初步HTML支支 持持 通通 过过 CGI（ Common Gateway Interface即即通通用用网网关关接接口口）方方式式与与用用户户
2、和和外外部部程程序序进进行行交交互互。CGI是是一一种种在在网网络络服服务务器器上上运运行行的的程程序序，用用来来处处理理用用户户从从Wib表表单单上上输输入入的的请请求求，查查询询数数据据库库上上的的信信息息，向向用用户户提提交交动动态态的的结结果果。理理论论上上，CGI程程序序可可以以用用任任何何一一种种语语言言编编写写，但但大大多多数数程程序序员员用用C/C+和和Perl语言编写语言编写CGI程序。程序。HTML初步初步HTML还还支支持持Java编编程程，程程序序员员只只要要将将编编号号的的Java程程序序按按一一定定的的要要求求嵌嵌入入到到HTML文文档档中中，就就可可以以完完成成许
3、许多多灵灵活活的的工作，如工作，如Home Page种的动画演示。种的动画演示。HTML还还支支持持Javascript编编程程，程程序序员员可可以以将将Javascript语语句句嵌嵌入入到到HTML文文档档中中，完成更多的交互操作。完成更多的交互操作。HTML初步初步HTML的局限性的局限性：直接用文本编辑时，不是所见即所得；直接用文本编辑时，不是所见即所得；不同浏览器对同一个不同浏览器对同一个HTML文档可能得到不文档可能得到不同的显示效果；同的显示效果；已定义的标记往往不能满足多方面的需要。已定义的标记往往不能满足多方面的需要。HTML初步初步HTML文件的基本构成：文件的基本构成：由
4、文件的内容和标记组成；由文件的内容和标记组成；标记基本上是成对出现，结束标记带有标记基本上是成对出现，结束标记带有“/”符：符： 文件的内容文件的内容 标记不区分大小写字符，大小写字符效果相标记不区分大小写字符，大小写字符效果相同同HTML初步初步HTML文档基本格式文档基本格式 , , , , , HTML 文件的正文写在这里文件的正文写在这里. . HTML初步初步HTML文档必须以标记文档必须以标记HTML开始和结束。开始和结束。HTML文档划分为两个部分：文档划分为两个部分：HEAD和和BODY；在在HEAD部分部分TITLE（标题）是必须的，将出标题）是必须的，将出现在浏览器的标题栏
5、，也将出现在现在浏览器的标题栏，也将出现在“收藏夹收藏夹”中，应该慎重选取；中，应该慎重选取；其他参数简介如下：其他参数简介如下：HTML初步初步 标题，出现在浏览器的标题、收藏夹。标题，出现在浏览器的标题、收藏夹。一般必须要有。如一般必须要有。如 北京邮电大学北京邮电大学主页主页默认默认URL，指定文档的基本，指定文档的基本URL，使得，使得具体具体URL的书写可以简化的书写可以简化(只写相对地址只写相对地址即可即可)。如。如 HTML初步初步指定一些不能被其他指定一些不能被其他HTML标记指定的属性。标记指定的属性。 CONTENT：指定属性的值指定属性的值HTTP-EQUIV：HTTP等
6、价的元素等价的元素NAME：命名属性命名属性如：如：HTML初步初步还经常用来指定文档所用的字符集：还经常用来指定文档所用的字符集：#= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr,gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5 如：如：HTML初步初步The META element is used within the HEAD element
7、 to embed document meta-information not defined by other HTML elements. Such information can be extracted by servers/clients. If the NAME attribute is not present it should be assumed to be equal to the value of HTTP-EQUIV. Interpretation of the HTTP response header is browser dependent. HTML初步初步例例1
8、 最简单的最简单的HTML文件文件： 电信工程学院主页电信工程学院主页 电信工程学院是北京邮电大学最大的电信工程学院是北京邮电大学最大的关于文字和段落的标记关于文字和段落的标记关于文字和段落的标记：关于文字和段落的标记：分段标记分段标记HTML不识别回车符，分段时要加分段标记；不识别回车符，分段时要加分段标记；分行标记分行标记 分段标记会自动加一个空行，用分行标记可分段标记会自动加一个空行，用分行标记可以避免。以避免。P和和BR不是成对出现。不是成对出现。关于文字和段落的标记关于文字和段落的标记例例2：不加标记的段落将连续显示：不加标记的段落将连续显示电信工程学院是北京邮电大学最大的学院。电信
9、工程学院是北京邮电大学最大的学院。它包括它包括7个教学和科研中心。个教学和科研中心。共有教职工约共有教职工约150人。人。关于文字和段落的标记关于文字和段落的标记例例3：加上：加上标记的段落将分段并显示空行标记的段落将分段并显示空行电信工程学院是北京邮电大学最大的学院。电信工程学院是北京邮电大学最大的学院。它包括它包括7个教学和科研中心。个教学和科研中心。共有教职工约共有教职工约150人。人。关于文字和段落的标记关于文字和段落的标记例例4：加上：加上标记的段落将分段并不加标记的段落将分段并不加空行空行电信工程学院是北京邮电大学最大的学院。电信工程学院是北京邮电大学最大的学院。它包括它包括7个教
10、学和科研中心。个教学和科研中心。共有教职工约共有教职工约150人。人。关于文字和段落的标记关于文字和段落的标记HTML文档一般也不识别多个空格。文档一般也不识别多个空格。原样显示标记原样显示标记使用使用PRE标记就可以识别回车和多个空格；标记就可以识别回车和多个空格；标题和子标题标记标题和子标题标记共分共分6级标题：级标题：H1H6；H1的字体最大；的字体最大；H6最小，最小，标记本身就有标记本身就有标记的功能，标记的功能，即可以换行，并添加空行即可以换行，并添加空行。关于文字和段落的标记关于文字和段落的标记例例5：不使用：不使用标记，不显示多个空格标记，不显示多个空格 Heres some
11、ditty Specially done to lay it out all Formatted and pretty.Unfortunately, that is all This junk really means Because I admit I couldnt scrawl Poetry for beans.例例6：使用：使用标记，既有空格，也有换行标记，既有空格，也有换行 Heres some ditty Specially done to lay it out all Formatted and pretty.Unfortunately, that is all This jun
12、k really means Because I admit I couldnt scrawl Poetry for beans.关于文字和段落的标记关于文字和段落的标记例例7：标题标记的效果：标题标记的效果今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！关于文字和段落的标记关于文字和段落的标记字体大小标记字体大小标记 . #=1, 2, 3, 4, 5, 6, 7 or +#, -#标记没有标记没有标记的功能；标记的功能；可以在原有字体大小的基础上增加（可以在原有字体大小的
13、基础上增加（+）或）或减少（减少（-）；）； #=1, 2, 3, 4, 5, 6, 7设置文档的基本字体大小，此时使用（设置文档的基本字体大小，此时使用（+）、）、（-），都将以基本字体大小为准。），都将以基本字体大小为准。关于文字和段落的标记关于文字和段落的标记例例8：字体大小标记的效果：字体大小标记的效果今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！关于文字和段落的标记关于文字和段落的标记例例9：字体大小标记和标题标记的比较：字体大小标记和
14、标题标记的比较今天天气真好！今天天气真好！天气真好！天气真好！今天天气真好！今天天气真好！天气真好！天气真好！今天天气真好！今天天气真好！天气真好！天气真好！今天天气真好！今天天气真好！天气真好！天气真好！今天天气真好！今天天气真好！天气真好！天气真好！今天天气真好！今天天气真好！天气真好！天气真好！今天天气真好！今天天气真好！关于文字和段落的标记关于文字和段落的标记例例10：Basefont的效果的效果今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真
15、好！关于文字和段落的标记关于文字和段落的标记指定指定“字体大小字体大小”的标记和的标记和“指定字体指定字体”的标记的组合使用的标记的组合使用 今天今天 天气天气 真好！真好！今天今天 天气 真好！ 关于文字和段落的标记关于文字和段落的标记客户端字体客户端字体(Font Face) . #=客户端可获得的字体客户端可获得的字体如：如： Hellow World! 结果：结果：Hellow World! 关于文字和段落的标记关于文字和段落的标记文字的分区文字的分区(Division)显示显示 可以在左、中右三个区域显示：可以在左、中右三个区域显示： . Please show me your sm
16、ile. 结果：结果：Please show me your smile. 关于文字和段落的标记关于文字和段落的标记Please show me your smile. Please show me your smile. Please show me your smile. Please show me your smile. 关于文字和段落的标记关于文字和段落的标记物理字体物理字体粗体：粗体：斜体：斜体：下划线：下划线：等宽体：等宽体：上标：上标：下标：下标：删除线：删除线：关于文字和段落的标记关于文字和段落的标记例例11：物理字体效果：物理字体效果粗体：粗体：今天天气真好！今天天气真好！
17、斜体：斜体：今天天气真好！今天天气真好！下划线：下划线：今天天气真好！今天天气真好！等宽体：等宽体：今天天气真好！今天天气真好！上标：上标：A今天天气真好！今天天气真好！下标：下标：A今天天气真好！今天天气真好！删除：删除：今天天气真好！今天天气真好！关于文字和段落的标记关于文字和段落的标记字体颜色标记字体颜色标记 . #=rrggbb 16 进制数码，或者是下列预定义进制数码，或者是下列预定义色彩：色彩：Black, Olive(橄榄橄榄), Teal, Red, Blue, Maroon(栗色栗色), Navy, Gray, Lime(翠绿翠绿), Fuchsia(紫红紫红), White
18、, Green, Purple(紫色紫色), Silver, Yellow, Aqua(蓝绿蓝绿) 例例12：字体颜色效果：字体颜色效果Black, Olive,Teal, Red, Blue,Maroon, Navy,Gray, Lime, Fuchsia, White,Green, Purple,Silver, Yellow,Aqua关于文字和段落的标记关于文字和段落的标记字符实体字符实体(Entities) &#; #=字符实体名称字符实体名称 或者或者 ascii 值值例如例如& < " 关于文字和段落的标记关于文字和段落的标记文字的对齐文字的对齐(Alignm
19、ent) . . #=left, center, right. 文字的分区文字的分区(Division)对齐对齐 . #=left, center, right列表（列表（LIST）列表列表 无序列表无序列表 .如：如： Today Tommorow 结果：结果： Today Tommorow 列表（列表（LIST）定制列表元素定制列表元素 定制表中的标记定制表中的标记 #=disk, circle, square列表（列表（LIST）有序列表有序列表 .如：如： Today Tommorow 效果：效果： 1. Today 2. Tommorow 列表（列表（LIST）定制有序列表表中的序号
20、定制有序列表表中的序号 #=A, a, I, i, 1A：大写字母大写字母a：小写字母小写字母I：罗马字母罗马字母I：小写罗马字母小写罗马字母1：数字：数字列表（列表（LIST）定制有序列表表中的序号的起始值定制有序列表表中的序号的起始值 #=numberONE-ONEONE-TWO TWO-ONE TWO-TWO列表（列表（LIST）定义列表定义列表(Definition lists) .如：如： Today Today is yesterday. Tomorrow Tomorrow is today. Today Today will be yesterday. Tomorrow Tomo
21、rrow will be today. HTML的链接的链接用用HTML建立链接：建立链接：链接的种类：链接的种类：链接到任何一个链接到任何一个web页面；页面；通过不同的规程链接到不同的站点，即通过通过不同的规程链接到不同的站点，即通过URL来进行链接；来进行链接；链接到本机中的一个文件；链接到本机中的一个文件；链接到同一个文件的不同部分；链接到同一个文件的不同部分；链接到不同文件的指定部分。链接到不同文件的指定部分。HTML的链接的链接用用HTML建立链接：建立链接：基本的格式：基本的格式： 显示的文字显示的文字 如：如： 北京邮电大学北京邮电大学 计算机技术中心计算机技术中心 HTML的
22、链接的链接用用HTML建立链接：建立链接：锚接（锚接（archer）：）：链接到文件中某个位置；链接到文件中某个位置；必须在要链接的地方设一个标记：必须在要链接的地方设一个标记：这个标记不需要配对；这个标记不需要配对；在同一个文件用以下格式进行链接：在同一个文件用以下格式进行链接：不同文件中用吐血格式进行链接不同文件中用吐血格式进行链接 HTML的链接的链接用用HTML建立链接建立链接：注意绝对路径和相对路径的差别注意绝对路径和相对路径的差别对外部对外部web的文件一般采用绝对路径；的文件一般采用绝对路径；对本身主页所链接的本地文件，可采用相对对本身主页所链接的本地文件，可采用相对路径，只要保
23、持这些文件的相对存放位置不路径，只要保持这些文件的相对存放位置不变，就不容易出现断链的情况。变，就不容易出现断链的情况。用页面编辑器一般产生绝对路径，如用页面编辑器一般产生绝对路径，如file:/C|/Program Files/HTMLFiles/readme.htmlHTML的链接的链接文件若使用绝对路径，则文件复制后，必须文件若使用绝对路径，则文件复制后，必须保持路径不变；保持路径不变；使用相对路径，就较少出现断链的现象；使用相对路径，就较少出现断链的现象；若所有文件都在一个目录中，则可以简单地若所有文件都在一个目录中，则可以简单地用文件名进行链接，如：用文件名进行链接，如：Part02
24、若将此文件复制到若将此文件复制到A:win目录，则可解释为：目录，则可解释为：file:/A|/Win/part02.html若将此文件复制到若将此文件复制到C:My Document目录，目录，则又解释为：则又解释为：file:/C|/My Document/part02.htmlHTML的链接的链接若被链接文件直接在当前目录的子目录下，如若被链接文件直接在当前目录的子目录下，如folder01，则可写为：则可写为：Part02但不要写为：但不要写为：Part02可以写为：可以写为：Part02HTML的链接的链接开一个新的开一个新的(浏览器浏览器)窗口窗口 (Target Window)
25、. 如：如：开一个新窗口开一个新窗口! 表格表格表格的基本语法表格的基本语法. - 定义表格定义表格 - 定义表行定义表行 - 定义表头定义表头 - 定义表元定义表元(表格的具体数据表格的具体数据)表格表格带边框的表格：带边框的表格： FoodDrinkSweetABC 表格表格不带边框的表格：不带边框的表格： FoodDrinkSweetABC Food Drink Sweet A B C 表格表格跨多列的表元跨多列的表元 Morning MenuFood Drink SweetABC表格表格跨多行的表元跨多行的表元 Morning Menu Food ADrink BSweet C表格表格
26、边框尺寸设置：边框尺寸设置： FoodDrinkSweetABC 表格表格表格尺寸设置：表格尺寸设置： FoodDrinkSweetABC 表格表格表元间隙设置：表元间隙设置： FoodDrinkSweetABC 表格表格表格内文字的对齐表格内文字的对齐/布局布局 #=left, center, right FoodDrinkSweet A B C 表格表格垂直位置上的对齐垂直位置上的对齐 #=top, middle, bottom, baseline 表格表格 FoodDrink SweetOther A B C D表格表格表格在页面中的对齐表格在页面中的对齐/布局布局(Floating T
27、able) 表格表格左对齐左对齐FoodDrinkSweetABCMy favorites.cookies, chocolates, and more.表格表格表格的色彩表格的色彩表元的背景色彩和背景图象表元的背景色彩和背景图象 表格表格Food Drink SweetAB表单（表单（Form）表单的基本语法表单的基本语法:. . *=GET, POST 表单（表单（Form）表单中提供给用户的输入形式表单中提供给用户的输入形式*=text, password, checkbox, radio, image, hidden, submit, reset*=Symbolic Name for C
28、GI script 表单（表单（Form）文字输入和密码输入文字输入和密码输入您的姓名您的姓名: 您的主页的网址您的主页的网址: 密码密码: 表单（表单（Form）可设置文本框的长度可设置文本框的长度如：如：表单（表单（Form）复选框复选框(Checkbox) 和和 单选框单选框(RadioButton) Banana Apple Orange表单（表单（Form） Banana Apple Orange表单（表单（Form）列表框列表框(Selectable Menu) 基本语法基本语法 . 表单（表单（Form）列表框示例：列表框示例： Banana Apple Orange页面标记页面
29、标记背景色彩和文字色彩背景色彩和文字色彩bgcolor - 背景色彩背景色彩 text - 非可链接文字的色彩非可链接文字的色彩 link - 可链接文字的色彩可链接文字的色彩 alink - 正被点击的可链接文字的色彩正被点击的可链接文字的色彩 vlink - 已经点击已经点击(访问访问)过的可链接文字的色彩过的可链接文字的色彩 #=rrggbb背景图象背景图象 图象标记图象标记水平线水平线 ALIGN ：对齐方式，可为对齐方式，可为left、center、和和right。NOSHADE：无阴影无阴影 。SIZE ：高度，以象素（高度，以象素（ pixels）为单位。为单位。WIDTH：宽度
30、，以象素或窗口宽度的百分宽度，以象素或窗口宽度的百分比表示。比表示。图象标记图象标记链入图象的基本语法链入图象的基本语法 #=图象的图象的 URLalt=#：在浏览器尚未完全读入图象时，在图在浏览器尚未完全读入图象时，在图象位置显示的文字。象位置显示的文字。如：如： 图象标记图象标记图象和文字的对齐图象和文字的对齐 #=top, middle, bottom 如：如： top middle bottom图象标记图象标记图象在页面中的对齐图象在页面中的对齐/布局布局(Floating Image) 文字文字 如：如： My Face! It is always smiling. Hahaha.图
31、象标记图象标记通过图象插入超级链接通过图象插入超级链接 注意是在超级链接的标记中嵌套图形的标记，而不注意是在超级链接的标记中嵌套图形的标记，而不是相反。是相反。通过网页编辑器一般产生的都是绝对路径，可根据通过网页编辑器一般产生的都是绝对路径，可根据需要进行修改。需要进行修改。多窗口页面多窗口页面(Frames)基本语法基本语法 . . 在在 标记后的文字将只出现在标记后的文字将只出现在不支持不支持 FRAMES 的浏览器中。的浏览器中。多窗口页面多窗口页面(Frames)HTML . 多窗口页面多窗口页面(Frames)各窗口的尺寸设置各窗口的尺寸设置 纵向排列多个窗口：纵向排列多个窗口： 多窗口页面多窗口页面(Frames)横向排列多个窗口：横向排列多个窗口： 多窗口页面多窗口页面(Frames)COLS & ROWS纵横排列多个窗口：纵横排列多个窗口： 多窗口页面多窗口页面(Frames)各窗口间相互操作各窗口间相互操作(Frame Target) 窗口标识窗口标识(Frame Name) 多窗口页面多窗口页面(Frames)Frame 的外观的外观(Appearance) 各窗口边框的设置各窗口边框的设置 #=yes, no / 1, 0
