第八讲HTML语言初步.ppt

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