HTML讲义.ppt

1、HTML基础,清华大学计算机与信息管理中心,讲师：高洪波,上课要求,上课不要迟到早退，特殊情况提前请假 上课将手机调成静音或者振动 上课禁止睡觉，看电影，玩游戏，上网，QQ等 教室电脑严禁挪动，私自设置密码,对同学们的建议,记笔记，加注释，写总结 不要完全依赖于书 建立有效的学习方法 如果学习上出现问题，欢迎大家随时与我交流 联系方式： QQ:1325064233（留言的方式） 手机短信）,课前说明,内容：HTML 目标：掌握手写HTML实现一般难度的Web页面的能力（如网站注册表单），为JSP学习打基础。坚持手写HTML，可视化设计只是一种自学的手段。/dreamw

2、are,editplus,记事本 参考书：HTML/CSS/JavaScript标准教程电子工业出版社,WEB浏览器,浏览器就是接收浏览者的操作（打开一个网址、点击一个链接、点击一个按钮），然后帮助浏览者去Web服务器请求网页内容(HTML格式返回)，然后展现成人眼能够看得懂的可视化页面的软件。 IE=浏览器？IE是浏览器的一种，还有FireFox、Opera、Chrome等，注意遨游（Maxthon）、世界之窗、搜狗浏览器、360浏览器等并不是一种独立于IE的浏览器，其内核还是IE的内核，只不过换了一个外壳而已，所以用遨游的不能嘲笑用IE的，否则就露怯了。 WWW （World Wide W

3、eb）中的信息资源主要由一篇篇的Web文档，或称Web页为基本元素构成 而HTML 对 Web 页的内容、格式及 Web 页中的超级链接进行描述,WEB浏览器,Web 浏览器的作用就在于读取 Web 站点上的 HTML 文档，再对文档中的HTML标记逐行进行解释，最后在用户的电脑上显示相应的 Web 页面 浏览器具有缓存功能： 缓存其实就是指在本地使用的计算机中开辟一个内存区，同时也开辟一个硬盘区作为数据传输的缓冲区，然后用这个缓冲区来暂时保存用户以前访问过的信息 当用户在浏览器中设置一定量的磁盘缓存后，浏览器上网工作时会把从网上读出的网页、图像以及其它数据存放在磁盘缓存之中，并建立相应的文档

4、索引。在浏览器以后的工作中，将首先检查磁盘缓冲区中是否存在相应的数据，如果有，则直接从本地磁盘上读出，不再从网上下载,WEB浏览器,缓存按照信息存放的位置可以分成内存缓存和硬盘缓存 内存缓存是用于暂时存储本次上网所调用的数据资料，从Internet上传来的每一个网页信息，在内存缓存中都相应地给予保存一个备份。“后退”和“前进”按钮实际上是将以前的页面从内存缓存中调出来并显示在用户的浏览器窗口中,WEB浏览器,硬盘缓存是用于保存用户前几次上网时所调用的信息资料，用户从“历史”按钮中调出来的内容其实就是保存在硬盘缓存中的 通常情况下，浏览器默认的内存缓存数值为600 ，硬盘缓存数值为5M 浏览器的

5、“刷新”功能将重新提交当前页面的URL（统一资源定位器）请求给WEB服务器,HTML简介,HTML：HyperText Markup Language 超文本标记语言 超文本 (文字+图片+音视+链接) 标记语言 (浏览器根据标记来显示内容) 来自于SGML(标准通用标记语言) 专门用于在Web上传递信息 用HTML语言编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。在 UNIX 系统中，HTML文档的后缀为“.html”，而在 DOS/WINDOWS 系统中则为“.htm/html” 编写HTML工具：Dreamweaver, Frontpage

6、, EditPlus,UltraEdit,记事本等,HTML元素与标记,编写HTML时，我们需要用元素来定义文档的结构、显示外观、与其它文档的链接等。HEAD、BODY、P、UL等都是元素 当我们真的要将这些元素插入到文本中去时，需要用尖括号（“”）将它们括起来。这样，我们得到了、。现在，它们已经不再称为元素，而被叫做标记（tag） HTML规则是由W3C（万维网组织）制定的，最新版本是HTML5 (HTML4.01),HTML元素与标记,HTML中的元素通常由3部分组成： 开始标记：由尖括号括起来的元素，如： 、 内容： 结束标记：在元素名前加上一个“/”（斜杠）符号，并由尖括号括起来，如：

7、 、 绝大多数元素都有开始标记和结束标记 当浏览器看到一个开始标记时，它就会知道随后的文本类型都是由开始标记所定义的类型决定的，直到它找到一个结束标记,HTML元素与标记,大多数元素都有内容，这些内容包含在开始标记和结束标记之间。但有些元素没有任何内容，如BR，它产生一个换行动作 有些元素的结束标记是可选的（或没有结束标记）。例如，LI和P，分别表示列表项目元素和段落元素 元素是大小写不敏感的，建议使用小写，或都你所在公司的规定,HTML元素与标记,所有元素都具有一些属性。属性都有值，属性值总是包括在双引号，单引号，但单双要配对或不引之中。属性一般小写。如：xml align=“center”

8、/水平对齐 width=”33%” 有些属性的值来自于W3C设置标准时创建的值的列表。例如，valign属性的值有top、middle、bottom 有些属性用数字来代表它们的值。数字可以是百分比数字 有些属性的值是颜色。可以用颜色名称（只有16种）或者颜色的16进制值,HTML元素与标记,颜色都是由红、绿、兰3种颜色按比例组成的。在颜色的16进制表示法中，前两位数字表示红色的数量，其后的两位数字表示绿色，最后两位表示兰色/RGB-RED GREEN BLUE 9F0000 表示纯红色/0-9,10,11,12,13,14,15，A,B,0-9，11，A-F 16 00FF00 0000FF

9、FFFFFF 表示白色 000000 表示黑色 RED BLUE GREEN YELLOW 当你使用16进制表示颜色时，你必须在这个16进制数前加一个“”号 十进制：0-9 10,5+5=10,实体（Entities）,实体：就是那些你想显示出来，但键盘上又没有的字符，或者是哪些对HTML有特殊意义的字符（比如、 表示版权符号,常用实体,HTML注释,语法： 浏览器会完全忽略掉注释中的内容 作用：1、加入注释便于修改与维护HTML语言 2、便于读HTML文件 3、在文件开始处加入作者信息,元素嵌套,定义：在某个元素之内使用另外一个元素 元素嵌套的一个重要规则是：你必须在结束外层元素之前结束内层

10、元素。例如，下面这个HTML是无效的： 你好吗？我很好 有效格式应该是： 你好吗？我很好 ,HTML语法形式,标记(元素)的3种语法形式： 内容 例如： 文字 例如： 例如： ,HTML基本结构, 我的第一个网页 Hello World! ,HTML 网页,头部部分,主体部分,网页标题,网页内容，可以是文本、图像等,HTML全局架构标签,/用来标识html文档的开始与结束 /用来描述HTML页面，是不会在浏览器窗口显示 /显示在浏览器标题栏的内容 /显示在浏览器窗口的内容,BODY元素有很多属性，可以利用这些属性来定制文档的外观。如背景色、文本颜色、链接颜色等等 在HTML 4中，这些外观显示

11、效果都是在样式表（CSS）中设置的： 可以减少标记的数量 使文档的零乱程度降到最低,示例： 其中，色彩值 “#rrggbb” 例如： Text,link,alink,vlink,leftmargin,topmargin=20px等,标题字体标记,语法： size bold 其中：#=1、2、3、4、5、6 说明： 按标题级别用黑体字显示标题内容 自动插入空行 ：字体最大 ：字体最小 其实就是某个字号和粗体的组合；,字体设置标记,语法： 说明： size：1 2 3 4 5 6 7 或者+、-。例如： color：可以使用预定义的名字red、blue、black等或16进制数 face: 表示字

12、体,段落标记和换行标记,段落标记语法： 将开始和结束标记之间的内容作为一个单独的段落 有align属性，左、中、右;left/center/right 换行标记语法： 使该标记之后的内容从新的一行开始,水平分隔线标记,只有开始标记，没有内容，没有结束标记 语法 size: 高度 align: 对齐方式，可以取left或right noshade: 无阴影效果 color: 颜色 示例： ,其它文本段落格式, 页面水平方向上居中对齐 /加粗、斜体、下划线、删除线 /下标、上标 /打印字风格字体、引用（斜）、加强（斜、粗）、加重（黑、粗） /文本、图形进行移动，有behavior:slide/sc

13、roll/alternate; direction:up/down/left/right,对齐属性align,该属性在许多标记中都有，如： 取值：left right center,文本段落格式实例,实例演示,列表标签,列表标签： ：上层项目 ：下层项目 例子：,数字编号列表标记,语法：/order list 创建一个用数字进行编号的列表 列表的内容是LI元素 列表内容标记语法： 创建一行列表项目 示例： 定期存款 活期存款 定活两便存款 ,带加重号列表标记,语法：/unorder list 创建一个带有加重号的列表 列表的内容是LI元素 示例： 定期存款 活期存款 定活两便存款 ,列表实例,

14、实例演示 HTML hypertext markup L 成对出现，单标签： 属性=“属性值” ；双引号，单引号，不用引号，单双要成对，空格，有些属性是没有属性值，noshade -hr HTML中对大小不敏感，但要统一 CONTENT CONTENT , 文本段落格式： 列表： ul ol li ,锚点标签-,为了建立一个能在HTML文档内部进行跳转的链接，我们需要使用A元素的name属性，建立一个锚点，即定位标记 语法： 当你在HTML文档中的某个地方写了该标记之后，就在该位置定义了一个名字为AnchorName的锚。说白了，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文档的这

15、个位置 使用跳转到AnchorName就可以定位到网页中的” AnchorName”这个位置；(在同一个网页中不同的段落之间进行跳转)同样可能用（直接定位到另一个网页中的某一标记位）,链接标签-,为了建立HTML文档之间跳转的链接，我们需要使用A元素的href属性 语法：文字(或图片) 当鼠标点击“文字(或图片)”时，根据“url ”内容的不同，将会发生下面3种情况之一： href=“新文档名”：打开一个新的HTML文档 href=“新文档名#point”：打开一个新的HTML文档并跳转到锚点point处显示。 point是在新文档中已经定义好的锚点 href=“#point”：跳转到本文档的

16、锚点point处显示。 point是在本文档中已经定义好的锚点 .与.的区别，分别指向网页本身和网页所在的目录 文本，会启动outlook进行邮件发送。 注：使用定位标记时一定在href值的开始加入#标记名。,target四个属性值的区别,_blank:在一个新开的空白窗口中打开链接，此窗口匿名。 _parent：在父级窗口中打开链接 _self:在自身页面中打开链接 _top:在整个浏览器的最顶端(前端)打开链接,图片标记,只有开始标记，无内容及结束标记 语法： 属性说明： src： 图片路径，一般使用相对路径 alt： 图片无法显示时显示的文字 border： 边框的厚度 align： =

17、 left right middle,图文混排时用于和图片的对齐 width,height分别指宽度与高度 网上下载一个chm,图像地图,图像地图是什么？ 把一幅图像分成多个区域，每个区域指向不同的URL地址。譬如，将一幅中国地图的图像按省市划分成若干区域，这些区域被称为热点，单击热点区域，就可以链接到与相应省市有关的页面，这就是图像地图。 例子网站：,图像地图,怎样产生图像地图 首先，在图像上定义热点区域的形状、位置坐标、及指向的URL地址等信息，这个过程叫图像热点映射。图像热点映射需要使用标签对其进行说明，其中name属性为图像热点映射指定一个名称。 图像热点映射中的各个区域用标签说明，

18、标签的格式为：。Href部分也可以用nohref替换，表示在该区域单击鼠标无效。标签还可以有一个target属性，用来指明浏览器在哪个窗口中显示href属性所指向的网页资源；（热点区域可以重叠，以先设定的为准 定义好图像热点映射后，接着在图像标签中增加usemap属性，usemap属性指定该图像被用作图像地图，其设置值为：“#”+图像热点映射名称，例如：,图像地图实例,实例演示,块元素,HTML中的元素分为两大类：块元素和内联元素。块元素可以包含其它块元素和内联元素，而内联元素只能包含其它内联元素。块元素与网页的结构有很大关系，而内联元素更多地起强调作用 常用的块元素有HTML、BODY、P、

19、BR、H1H6、DIV、SPAN等,内联元素,内联元素：是文档中插入到块元素中的那部分元素。内联元素使你能够在块元素内对文本的格式进行特别控制 所有内联元素都有以下共性： 都有开始和结束标记 都可以把其它内联元素作为其内容的一部分 都可以用SPAN元素进行分组，并使用样式表定义分组的格式,常用内联元素,Html元素标签 W Html.chm,CLASS属性,所有的元素都有一个CLASS属性，相当于一类的标记 CLASS用来给一组格式化定义分配一个名字。创建一个CLASS后，就可以多次使用它而不必重新输入 提示：使用格式声明的地方（如使用DIV和SPAN元素定义块元素和内联元素的地方）就可以指定

20、CLASS,DIV标记,DIV表示逻辑划分（logical DIVision）。该标记常用于把一个网页划分为多个部分，每个部分有它自己的样式。它可以包括HEAD、P、TABLE以及其它块元素 语法： 作为DIV元素的一部分，你既可以加入样式定义，也可以加入一个class名来定义包含在DIV块中的元素的显示外观 提示：DIV标记适合于把网页按主题进行划分,SPAN标记,如果你只想把样式应用在几个词或几个字母上，则应该使用SPAN元素。它的使用方式与DIV元素相同 语法： 作为SPAN元素的一部分，你既可以加入样式定义，也可以加入一个class名来定义样式，用来显示包含在SPAN块中的单词或字母的

21、显示外观 注意：当你希望把一个样式应用到多于一个元素或者少于一个元素上，不用把这个样式直接应用到某个元素，而应该分别使用DIV和SPAN来完成样式应用,DIV和SPAN使用示例, 本段落直接使用P元素的STYLE属性来控制显示外观 ,DIV和SPAN使用示例, 本段落在DIV块中，由DIV块的STYLE属性来控制显示外观 本段文本除了大和绿色由SPAN元素的class属性控制外观显示外，其它部分正常显示 ,DIV示例,表格,表格是从左到右、从上至下创建的 语法： 内容 说明： cellpadding：单元格内容与其边框之间的空白空间大小 cellspacing：单元格之间以及单元格与表格外边框

22、之间的空白空间大小 border：包围表格的框架的宽度（像素） frame：可以看到的表格边框的边 rules：单元格之间的界线 width，height：以像素为单位或以窗口百分比形式定义的表格宽度与高度,表格,frame属性可取以下值： void：没有边。这是缺省值 above：只有顶边 below：只有底边 hsides：只有顶边和底边 vsides：只有左边和右边 border：四周都有边 rules属性可取以下值： none：没有边。这是缺省值 groups：只在行分组和列分组之间出现的界线 rows：只在行间出现的界线 cols：只在列间出现的界线 all：所有的行列之间都有界线,

23、表格,表格的内容可以包含以下元素： CAPTION TR TH TD COL COLGROUP THEAD TBODY TFOOT,添加表格数据,表格中的所有数据都在单元格里。单元格是用TD或者TH元素创建的 在开始定义单元格之前，首先要设置一些行，浏览器将把单元格放入这些行中 如果没有定义行，每个单元格将自成一行，也就是说该表格只有一个列宽 使用TR元素可以创建行,添加表格数据,语法： 内容 创建表格行 说明： 内容：为TD或TH align：right left center justify等 valign：top middle bottom等 TR元素可以包含单元格数据和单元格头。为了区

24、分，浏览器会把单元格头格式化为黑体,添加表格数据,语法： 内容 创建单元格数据 说明： 内容：单元格数据 align：right left center justify等 valign：top middle bottom等 colspan：这个单元格所跨列的数目（缺省为1） rowspan：这个单元格所跨行的数目（缺省为1）,添加表格数据,语法： 内容 创建单元格标题 说明： 内容：单元格标题 align：right left center justify等 valign：top middle bottom等 colspan：这个单元格所跨列的数目（缺省为1） rowspan：这个单元格所跨行

25、的数目（缺省为1）,表格示例1,行分组,HTML 4使用THEAD、TBODY、TFOOT元素对行进行分组。一张表格通常有一个头行（用来放置单元格标题）、多个带数据的行以及一个带统计结果的尾行 这三个元素出现(?)的顺序是： THEAD、TFOOT、TBODY。原因是：表格主体可能有上百行，浏览器需要在装入主体之前先装入表头和表尾信息。,行分组,语法： 内容 创建表头 说明： 内容：TR,再TD align：right left center justify等 valign：top middle bottom等,行分组,语法： 内容 创建表尾 说明： 内容：TR ,再TD align：righ

26、t left center justify等 valign：top middle bottom等,行分组,语法： 内容 创建表格主体 说明： 内容：TR ,再TD align：right left center justify等 valign：top middle bottom等,表格示例2,跨行和跨列,对单元格分别使用rowspan和colspan属性来实现单元格的跨行和跨列 例如： a1 b1 b2 b3 c1 ,Rowspan Colspan Trtd ,表格的嵌套,一般有两种方法实现表格的嵌套： 在表格的单元格内包含另一个表格td 在表格的行内包含另一个表格tr 表格示例,表单,表单是

27、一种从站点访问者处收集信息的方法 表单的工作过程： 你在网页上放置一些数据输入域，如文本框、单选钮、文本区、提交按钮等 网站的访问者在自己的电脑上填写上述输入域，并按某个按钮 访问者输入的信息通过互联网发送到表单所在的服务器上 服务器对访问者所填写的数据进行处理 服务器对访问者提供一个屏幕确认信息，告诉访问者数据已经接收到并将对这些数据进行处理,表单,表单由两部分组成： FORM元素 接受数据的域或控件 如果没有FORM元素，表单将绝对不能工作 ,元素,语法： 内容 说明： 内容：内联元素（可选）和表单控件元素 action：告诉表单应该把它收集的数据发送到哪里(服务器)。如果没有该属性，数据

28、就不能被发送。该属性表示用来处理数据的脚本所在的URL或者是一个电子邮箱地址 method：表明以什么方式将数据发送除去。有两种选择：get和post method=“get”： 发送较少数据（256byte），数据经编码后显示在url中。例如：url/userinfo?username=张三&password=hehe method=“post”：数据长度无限制，且数据不会显示在url中 示例： ,Enctype: application/x-www-form-urlencoded Multipart/form-data(上传文件),INPUT元素,位于之中，用于接收用户输入 语法： 说明：

29、 type：可取下列值之一 text radio checkbox password hidden select submit reset button textarea file image name： 提交到服务器端的变量的名字，用于标识控件 Label 定义了快捷键以后与“ALT+字母”,输入控件text,表示一个文本框 语法： 属性说明： name：用于标识该文本框 value：文本框中的值 maxlength：可输入的最大字符长度 size：文本框宽度（字符）,输入控件 password,表示一个接收密码的文本框 语法： 属性说明： name：用于标识该密码框 value：密码框中的

30、值 maxlength： 可输入的最大字符长度 size：密码框宽度（字符）,输入控件 radio,表示一个单选按钮 语法： 单选按钮都是成组创建的。通过将所有单选按钮的name属性设置为同一个值，即可创建一个单选按钮组，然后为每一个单选按钮的value属性分配一个唯一的值 示例： 你最喜欢下面哪一种颜色？ red green blue,输入控件 checkbox,表示一个复选框 语法： 属性说明： name：用于标识该复选框 value：复选框被选中时的值 checked ：复选框已经被选中 disabled ：复选框不能被选择 如果用户根本没有选中复选框，那么该复选框不会被发送给脚本（对单

31、选按钮也是如此）,输入控件 hidden,表示一个隐藏域 语法： 说明： 不会在网页中显示出来 它是一种把数据从一个页面传送到另一个页面的方法。例如：你想得到前一个页面上的信息，就可以通过使用隐藏域，在访问者没有觉察的情况下将数据传送给脚本 示例： ,输入控件 select,表示一个列表框 语法： 说明： name：列表框的名字 multiple： 表示可以选中多个值。必须与size属性结合使用 size：定义列表框中可以同时被看到的行数,输入控件 select,列表框中的每个选项用OPTION元素来定义 语法：内容 说明： 内容：文本 value：选项的初始值。一般都与“内容”相同 sele

32、cted：选项被选中 label：作为该选项的值被发送（在内容较长时使用）,输入控件 textarea,表示一个多行多列文本框 语法： 内容 属性说明： name：文本框的名字 rows: 允许的文本行数 cols: 可见的文本列数,输入控件 按钮, 按下该按钮，value的值将被提交，value的值同时被显示在按钮上面 创建一个提交按钮，它负责把表单中的所有数据提交给form元素的action属性 value：定义按钮上显示的文字 创建一个重置按钮，它负责把表单中所有域的值重新设置为使用value属性定义的值, ,表单示例,框架,框架是用来提高网页导航性能的一种方式。框架用来划分浏览器窗口以

33、使窗口中能够容纳多个逻辑页面,框架划分站点示例,顶部标题区：可以放入站点名，公司图标，广告等。它是不变的,导航工具区：可以放入按钮、表格、文本等。它是不变的,主框架区：放入具体的内容。它是可变的,主框架文档,主框架文档是一个标准HTML文档，但其中没有BODY元素，而是有一个HEAD元素（）及一个FRAMESET元素，你应该加入所有常用的HEAD信息，其中包括META元素和TITLE元素,FRAMESET元素,语法：内容 说明： 内容：frameset元素、frame元素 rows：用于指定各行从上至下的宽度。缺省值为100，意思是一行。可以以像素PX、占浏览器窗口的百分比或相对宽度为单位进行

34、定义 cols：用于指定各列从左至右的宽度。缺省值为100，意思是一列。可以以像素、占浏览器窗口的百分比或相对宽度为单位进行定义 border:用于指定边框粗细 bordercolor：用于指定边框color,只有行的框架,例如： ,行1,行2,只有列的框架,例如： 200表示像素，*号告诉浏览器将剩下的空间作为第二列的宽度,列1,列2,行列都有的框架,例如： 说明：第一行占网页高度的1份，第二行占5份 尽量使用相对量来定义行高和列宽,框架示例,嵌套FRAMESET,如果你想创建图1那样的带框架文档，就要使用嵌套的FRAMESET：外层的FRAMESET用来定义行，内层的FRAMESET用来把

35、第2行划分为2列 示例： .第一行中的FRAME元素 .第一列中的FRAME元素 .第二列中的FRAME元素 ,FRAME元素,告诉浏览器每个框架中装入什么内容 语法： 说明： name：定义框架的名字（框架的目标名），很重要 src：用于定义该框架中最初装入的内容。可以使用相对路径或者绝对路径 scrolling：定义框架是否需要滚动条。可取下列值：yes、no、auto noresize:指不可改变左侧框架的尺寸 对创建的每一个框架都要定义FRAME元素,链接与框架,当框架有了名字以后，可以使用A元素的target属性使那些链接网页装入到框架中去 示例： 主框架文档index.html ,链接与框架,navigate.html文件的内容： .title和meta元素 解决方案 客户服务 白皮书 工作机会 ,A元素的TARGET属性,Target名必须以字母开始。以下划线（_）开始的名字是保留的target名，它们是HTML为帮助你使用框架而提供的。使用保留名可以相对地引用框架 保留名说明： _blank ：使链接的结果装入到一个新的窗口中 _self ：使链接的结果所装入的框架与A元素的结果所装入的框架相同 _parent：使链接的结果装入到