1、HTML初步,WWW、HTTP与HTML,WWW：万维网是由许多互相链接的超文本文件组成的一个资料系统，在因特网上向浏览者提供信息检索服务，又称全球网，3W 或3Web HTTP是用于从WWW服务器上传输超文本到本地浏览器的传输协议。 HTML（Hyper Text Markup Language 超文本标识语言） 是一种用来制作超文本文档的简单标记语言。 用HTML编写的超文本文件称为HTML文件，也称Web文件。,HTML的发展历程,1969年前后由托德尼尔逊提出超文本概念。 1996 W3C组织编写了3.2版本的HTML,HTML标记的语法及文件结构,HTML标记总是封装在由小于符号“”
2、构成的一对尖括号内，用于修饰、设置HTML文件的显示内容及格式 HTML标记一般分为容器型标记和非容器型标记。 容器型标记格式为内容 非容器型标记格式为 。,HTML文件的基本结构,网页标题文件主体,标记的常用属性,简单的例子5-1,我的第一个网页大家好！欢迎访问我的网页另存为扩展名为.html 或.htm的文件,HTML中常用的标记,1、注释标记 2、换行标记 3、换段标记、,可以使用ALIGN属性：left center right 4、居中标记：. 5、水平线标记：在默认情况下插入一条水平线：黑色，3D，粗细为2个像素。,HTML中常用的标记2,标记的常用属性,HTML中常用的标记3,6
3、、段落标题标记. 功能：在页面中将标记之间的文本设置为一个段落标题，其中N的取值为1.2.3.4.5.6六个级别。 7、字体标记： 功能：在页面中对标记之间的字体设置字体、字号、颜色，此标记有三个属性：FACE字体、 SIZE字体大小、COLOR字体颜色。,HTML中常用的标记3,字体样式标记 .对标记之间的字体设置加粗 对标记之间的字体设置倾斜 对标记之间的字体设置字体加下划线 对标记之间的字体设置加删除线,建立列表,有序列表功能：在页面中建立一个具有多个列表的有序列表 列表项一 列表项二 列表项三 有序序列号用属性标记TYPE来设置： 有1.Aa来表示,建立列表2,无序列表 功能：在页面中
4、建立多个无序列表，也称符号列表 格式：列表项一.列表项二无序列表属性标记是disc “circle square 还是用TYPE=“ “来标记,建立列表3,定义列表： 一部份是概念部份容器表示，一部份是定义的解释部份用 例5-6,建立列表4,列表嵌套：是指多于一级层次的列表，一般不超过三级列表，例5-7,超链接,超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚
5、至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。,建立超链接,超级链接是用锚元素来定义的 在元素下，有元素属性href, href的属性值为一个URL地址 如：指向学校的超级链接 如：普通超级链接,超级链接E-mail超级链接,超级链接可以指向E-mail地址 如：指向E-mail地址的超级链接,建立简单的表格, 表格标题表头单元格 表头单元格 .数据单元格 数据单元格 ,表格的行列合并,表格行的合并：是指将表格中相同列内的多行合并成一行。在HTML中主要通过表头单元格
6、标记数据单元格标记的ROWSPAN来设置 格式或,表格的列合并,表格的列合并是指将表格中相同行内的多列合并成一列。在HTML中主要通过表头单元格的标记和数据单元格标记的COLSPAN来设置,表格修饰,标记的常用属性,标记的常用属性,和标记的常用属性,建立表单,表单是在网页中向浏览者提供的一种交互式操作界面。其作用是向浏览者收集各种资料信息，并将这些信息提交给网络服务器的CGI程序进行处理。 表单的使用包括两部份：一部份是交互式操作界面；一部份是处理程序，处理用户提交的数据并返回结果。,表单标记,格式：. action用于指定处理表单数据的URL地址，其值通常是动态网页文件的路径。,表单输入控件
7、标记,格式： TYPE 类型有以下一些种类：text,password,file,radio,checkbox,submit,reset,buttom name: size,value,checked maxlength,表单的其他控件标记,1多行文本框标记 功能：在表单中建立一个指定的多行的文本框 格式: 2列表框标记 格式：列表项一列表项二列表项三功能：在表单中建立一个列表框,HTML 文件结构中的基本标记,.标记 .标记 .标记 .标记 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且
8、结束的标记总是在开始的标记前加一个斜杠。,HTML文档的编写方法,手工直接编写 记事本等，存成.htm .html格式 使用可视化HTML编 辑 器 Frontpage、Dreamweaver等 由Web 服务器（ 或称HTTP 服务器） 一 方实时动态地生成。,网页文件命名,*.htm或*.html 无空格 无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字 区分大小写 首页文件名默认为：index.htm 或 index.html,HTML 文件结构,. . . 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如
9、）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。,HTML 文件结构 (Document Structures), HTML 文件的正文,第一张网页（01.htm）,第一张网页欢迎光临我的主页！,基本组成部分 HTML元素属性,HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。,第二张网页（02.htm）,第一张网页 欢迎光临我的主页!,HTML基本结构的 有关元素和元素属性,HEAD元素1 元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但
10、是其间的元素有特殊重要的意义。 元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。,HTML基本结构的 有关元素和元素属性,HEAD元素2 元素 元素下面可以插入很多很有用的元素属性。下面介绍四种：用来标记搜索引擎在搜索你的页面时所取出的关键词。,HTML基本结构的 有关元素和元素属性,HEAD元素3 元素 用来标记文档的作者。,HTML基本结构的 有关元素和元素属性,HEAD元素4 元素 用来标记你的页面的解码方式。,HTML基本结构的 有关元素和元素属性,HEAD元素5 元素 用来自动刷新网页,练习（03.htm）,编写一个网页，要求3秒钟后自动跳转到校网主页。my fi
11、rst page三秒钟后本网页将自动跳转到华东理工大学首页,元素及元素属性1,元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。,元素及元素属性2,元素中有下列元素属性： (1)bgcolor bgcolor属性标志HTML文档的背景颜色。如：bgcolor=“#CCFFCC”。 例：04.htm,HTML对颜色的控制,HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.,常见颜色的代码,元素及元素属性3,元素
12、中有下列元素属性： (2)background background属性标志HTML文档的背景图片。如：background=“images/bg.gif“。 可以使用的图片格式为GIF，JPG 例：05.htm、06.htm,元素及元素属性4,元素中有下列元素属性： (3)bgproperties=fixed bgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。 例：07.htm和08.htm对比,元素及元素属性5,元素中有下列元素属性： (4)text text属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色
13、将应用于整篇文档。 例：09.htm,文字标签属性1,文字属性标记 1.文字颜色 指定颜色 . #=RRGGBB 16 进制数码 例：010.htm,文字标签属性2,文字属性标记 2.文字字体. #=客户端可获得的字体 011.htm,文字标签属性3,文字属性标记 3.文字大小. #=1, 2, 3, 4, 5, 6, 7 or +#, -# 例：012.htm,文字布局,行的控制 段(Paragraph) (可以看作是空行) 空白占位符 例：013.htm,文字布局,行的控制 HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即元素。元素可以使所在的
14、位置出现换行。这种换行和浏览器的自动换行的效果类似。元素不是成对出现的。 例：014.htm 不换行015.htm,HTML文字与段落格式控制,倾斜文本粗体文本下划线文本删除线文本 例：016.htm,基本组成部分HTML注释,HTML文档可以插入注释。注释内容不会在浏览器窗口显示 HTML注释的格式为： 例：017.htm,文字的对齐,. (n=1,2,3,4,5,6) . (#=left, center, right),3.HTML段落与分行控制,居中- 元素 元素是一个独立的使所标记的字符居中的元素。它的作用与使用元素里的align=“center”类似 例如：居中段落 例：018.ht
15、m,3.HTML段落与分行控制,标尺线：设定线宽：设定线长：设定对齐方式 #=left, right ：设定线的颜色例：019.htm,3. HTML的段落与分行控制,无序列表元素1 列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。,3. HTML的段落与分行控制,无序列表元素2 无序列表是由和元素定义的:sportsfood drink friends 例：020.htm,4.超级链接普通超级链接1,超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重
16、要的意义。,4.超级链接普通超级链接2,超级链接是用锚元素定义的 在元素下，有元素属性href, href的属性值为一个URL地址 如：指向学校的超级链接 如：普通超级链接 例：021.html,4.超级链接E-mail超级链接,超级链接可以指向E-mail地址 如：指向E-mail地址的超级链接 例：022.htm,4.超级链接新开链接窗口,开一个新的(浏览器)窗口 (Target Window) . 例：023.htm,HTML对图片的控制-1,基本语法:引用图片必须用元素标志。元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。 src属性是必须的。Src的URL
17、可以是绝对地址，也可以是相对地址,HTML对图片的控制-2,所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。 定义图片替代文本的方法是：例：024.htm,HTML对图片的控制-3,图片的显示大小 我们可以指定一幅图片在浏览器窗口里的显示大小。 定义图片的显示大小的方法是：width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。 例：025.htm,HTML对图片的控制-4,图片的边框 我们可以为一幅图片加一个边框以突出显示：border的属性值为象素数 例：026.htm,HTML对图片的控制-5,图片的对齐方
18、式 图片可以相对于页面或单元格有一个对齐方式。 定义水平对齐方式的方法是：例：027.htm,表格(TABLE)标记-1, 元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格。 元素：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。 元素：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容。 需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。,表格(TABLE)标记-2,表格的基本结构 定义表格定义表头定义表行 定义单元格,表格(TABLE)标记-3,表格的属性 1 width属性：指定表格
19、或某一个表格单元格的宽度。单位可以是%或者象素。 height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。 border属性：表格边线粗细,表格(TABLE)标记-2,表格的属性 1 bgcolor属性：指定表格或某一个单元格的背景颜色。 background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。 align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。,小小网上书屋 , ,读者须知,联系我们,网页中的框架,制作框架页面的步骤： 1.编写所有子框架页面 2.编写主框架页面 3.在主框架页面中设定子框架名称 4.如果框架页面之间存在
20、链接，在子框架中设定链接。 注意：框架页面是不含标签的,网页中的框架,基本语法您的浏览器不支持框架，请考虑升级您的浏览器！,网页中的框架,定义框架的基本语法 框架由一对定义 有两个属性：rows和cols Rows定义上下分割的框架的大小； cols定义左右分割的框架的大小； 在定义大小时，rows和cols可以使用相对大小或以百分比为单位。,网页中的框架,各窗口的尺寸设置 横排多个窗口排列方式： ABC 例：041.htm,网页中的框架,各窗口的尺寸设置 纵向排列多个窗口排列方式：A B C 例：042.htm,网页中的框架,COLS & ROWS：纵横排列多个窗口排列方式： BAC 例：0
21、53.htm,网页中的框架,框架边框的颜色 bordercolor=“ff0000“ 例：043.htm 各窗口边框的设置 frameborder=#=yes, no / 1, 0 框架边框的宽度 framespacing=“10“ 例：044.htm,网页中的框架,的属性 name：定义该框架的名字。这个名字可以被一些网页元素引用，如被元素引用。Src：在本框架里显示网页的URL。 Target：目标框架,引用的是目标框架的名字。,网页中的框架,在当前框架中打开超链接页面 默认就是在当前框架页中打开,也可以采用Target=“_self” 在指定框架中打开超级链接页面 Target=“nam
22、e” 新开窗口打开链接页面 Target=“_blank” 跳出整个框架集 Target=“_parent”,网页中的框架,的属性 Scrolling：是否显示滚动条。yes, no, auto Noresize：框架在浏览器里不可以被调整大小。,会移动的文字,基本语法. 文字移动属性 (1)方向 ：direction=# #=left, right,up,down,会移动的文字,2、文字移动属性 (2)方式： behavior=# #=scroll(循环), slide(只走一次), alternate(来回走) (3)循环: loop=# #=次数；若未指定则循环不止(infinite),
23、会移动的文字,2、文字移动属性 (4)速度: scrollamount=# (5)延时: scrolldelay=#,会移动的文字,3、其他属性 (1)底色: bgcolor=# #=RRGGBB 16 进制颜色代码 (2)面积: height=# width=# (3)空白:hspace=# vspace=#,表单(FORM)标记,HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。 在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。,表单(FORM)标记,表单是网页上的一个特定区域。这个区域是由一对元素定义的。
24、 元素 action属性：用来定义表单处理程序（一个ASP、CGI等程序）的位置(相对地址或绝对地址)。 Method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。,表单(FORM)标记,表单的基本语法:. * =GET有数据量限制，POST无以上限制,以文件形式传输,表单(FORM)标记,文本框? 文本框的名字 * text,password * 默认值 * 长度 ? 最大输入字符数,表单(FORM)标记,3.文本域. ,表单(FORM)标记,按钮 包括普通按钮、重置按钮和提交按钮,表单(FORM)标记,5.复选框(Checkbox) 在一个表单里的所有多选框可以
25、有一个或多个被选中。,表单(FORM)标记,6.单选框(RadioButton) 一个表单里的所有变量名相同的单选框只能够有一个被选中。各个选项的name必须一样才能达到预期效果,表单(FORM)标记,7.下拉列表 基本语法说明说明2 ,表单(FORM)标记,7.下拉列表 （2）列表框的长度（3）允许多选 ,表单(FORM)标记,8.图象域 ,姓名：,性别: 男女,户籍：北京市上海市天津市重庆市,兴趣：电脑体育游戏音乐电影 ,留言：,“) %您是人您喜欢的是：您的留言是：,文件Echo64.asp,ASP文件包括文本、HTML标记、ASP脚本语句（用界定符标记）。,您是人您喜欢的是：您的留言是：,Name=林琳； appellation=小姐； city= 北京； loves=体育，音乐，电影 Memo= 你们好！在哪儿能看到免费电影？,http:/localhost/ w / Echo64.asp,
