《html语言基础》由会员分享，可在线阅读，更多相关《html语言基础（42页珍藏版）》请在金锄头文库上搜索。
1、网页制作语言基础lHTML超文本标记语言lCSS样式表lJavaScript脚本语言lVBScript脚本语言lASP、PHP、JSP脚本语言HTML语言简介lHTML语言，又称超文本标记语言，是英文 Hyper Text Markup Language的缩定。l我们通过浏览器看到的网页，主要是通过 HTML来完成的，它通过各种标记将文字、 图片、表格、声音、视频等内容显示出来 。HTML语言的基本结构文件头表头主体HTML常用页面标记l标记的用法 l文件标记与页首标记 l文字标记与字幕标记 l水平线标记、段落标记与换行标记 l超链接标记 l图像标记 l表格标记、行标记、单元格标记 l表单标记
2、 l多窗口(框架)及浮动窗口标记标记的用法 例：标记的用法l这是一个定义5号白色黑体字的标记，FONT是标记名称 ，size、color、face都是标记的属性,5、white、黑体都 是属性的值 l除水平线标记，换行标记，图象标记 等标记外，大部分标记都是成对的，使用时不要忘记用 来结束定义； l标记的各个属性间用空格隔开； l标记属性的值可用引号“”引起来，也可以不用； l颜色可以用颜色用英文名称，也可以用十六进制数 #RRGGBB，比如白色可以用white，也可以用 #FFFFFF； （提示：大部分标记属性都可以用DWMX的属性检查器来完成）文 件 标 记l文件标记是指HTML文件中标识
3、页面主要属性的标记，包 括： 文件声明：，让浏览器知道这是HTML 文件 表头：，提供网页的整体定义信息 主体：，设计文件格式及正文所在， 其中的属性标记可以定义页面背景、文字和链接的样 式与颜色等（提示：在DWMX中可通过修改/页面属性 来进行设置）页 首 标 记l在HTML文件中，夹在标记之间的是标记网 页基本信息的页首标记，包括： 开头定义：，用于定义网页的字符集、关键字、 文件说明和刷新网页等（提示：在DWMX中可通过插入/文 件头标签来进行设置） 标题：，用于定义文件标题，该标题将 显示于浏览器顶端的标题栏（提示：在DWMX中可通过文 档工具栏的标题文本框来设置） 样式：，用于定义和
4、控制网页的版式 （提示：在DWMX中可通过文本/CSS样式来进行设置）文 字 标 记l文字标记是定义文字的字体大小、颜色、字形等变化的标记，包括 ： 字体：,用于设定字体大小、颜色、字形，其 中SIZE属性用于设置字体大小，COLOR属性用于设置文字颜 色，FACE属性用于设置文字字形 标题字：，用于设定标题字体的大小， n=16， 字体1最大，6最小。 粗体字：，用于显示粗体文字 斜体字：，用于显示斜体文字 底划线：，用于显示文字下划线 上标字：，用于显示上标字 下标字：，用于显示下标字段落标记和换行标记l段落标记和换行标记都可以实现换行，但段落标记在使用时相当于硬回车，它会产生一个新段落，
5、段落之间会加一空行；换行标记在使用时相当于软回车，通常用于段落内部的换行。l段落的标记为，其属性有：align，用于设定水平线的位置，值有靠左left，居中center，靠右rightl换行的标记为，一般不使用其它属性水 平 线 标 记l水平线标记用于在网页窗口中加一条水平线，用以分隔 文档。它的标记为，其属性有：align，用于设定水平线的位置，值有靠左left，居中center，靠右rightnoshade，用于设定水平线不具有三维立体感size，用于设定水平线的高度width，用于设定水平线的宽度color，用于设定水平线的颜色图像标记l图像标记用于插入一个图像并实现图文混排，它的标记为
6、， 其常用属性有： src，用于设置图像的地址 alt，用于设置图像的提示文字 border，用于设置图像的边框 align，用于设置图像的位置，值有居中center，靠左left，靠右 rignt，靠上top，靠下bottom等 width，height,分别用于设置图像的宽度和高度 vspace，hspace，用于设置图像的水平和垂直间距 id，用于给图像命名 问：插入站点images目录下的图片em.jpg，设置其文字提示为“峨嵋 天下秀”，设置其边框为1，设置其位置为居中，设置其宽度为200 象素，高度为150象素，代码如何编写？超 链 接 标 记l超链接标记用于定义一个超链接，从而实
7、现网页的跳转等，它的标 记为，其属性有： href，用于设定链接地址，链接地址可以是url地址如 http:/，本站文件如zyjs.htm，页内地址（又称书 签或命名锚记）如zyjs.htm#gsx，电子邮件地址如 mailto:, javasscript语句如关闭窗口 javascript:window.close(); target，用于设定链接的目标窗口，默认为当前窗口，新建窗口 为_blank title，用于设定鼠标移到链接上时显示的标题 onclick，用于设定当鼠标点击链接时触发的事件，一般为 javasript函数或语句，如关闭窗口window.close();（提示：要做文件
8、下载或音乐点播的链接，直接将地址指向文件即可，如 http:/ 幕 标 记l字幕标记用于定义活动字幕，从而让整个网页更有动感，它的标记 为，其属性有： bgcolor，用于设定背景颜色 direction，用于设定字幕的滚动方向，值有向左left,向右right,向 上up,向下down behavior，用于设定字幕滚动的方式，值有滚动条scrool，幻灯 片slid ，交替alternate scrollamount,用于设定字幕的滚动距离，一般为2 width，用于设定字幕的宽度 height，用于设定字幕的高度 id,用于给字幕命名如zm，便于用onmouseover=zm.stop(
9、) onmouseout=zm.start() 控制字幕的暂停与运动表格标记l表格标记用于插入一张表格，它的标记为，其常用属性 有： width，height，用于设置表格的宽度和高度 align，用于设置表格的位置居中，靠左或靠右 border，用于设置表格的边框 cellpadding，cellspacing，用于设置表格的单元格边距和单元 格间距 bgcolor，用于设置表格的背景颜色 background，用于设置表格的背景图片注：TABLE标记一般需要加上表格的行标记TR和单元格标记TD 才能正确显示。表格行标记和单元格标记l表格行标记用于产生表格的一行，它的标记为，一般不在行 标记
10、中设置其属性；l单元格标记用于在行中产生一个单元格，通常包含在标记内 ，它的标记为，其常用属性有： width，height，用于设置单元格的宽度和高度 align，用于设置单元格内容的位置居中，靠左或靠右 valign，用于设置单元格内容的垂直位置，值有中间middle，顶 端top，底部bottom bgcolor，用于设置单元格的背景颜色 backgroud，用于设置单元格的背景图片 colspan，rowspan，分别用于设置栏宽和栏高 问：制作一个三行三列的表格，并设置表格背景色为blue，宽度为500象 素，位置为居中，单元格内容也居中，代码如何编写？表单简介表单能使网站与访问者进
11、行交互或收集访问者信 息。表单从访问者处收集信息，然后将这些信息提交 给服务器进行处理，表单可以包含允许访问者进行交 互的各种表单对象。这些表单对象包括文本框、文本 域、隐藏域、单选框、复选框、下拉菜单、选择列表 、按钮等。当访问者将信息输入表单并单击提交按钮时，这 些信息将被发送到服务器，服务器端脚 本或应用程 序将对这些信息进行处理，服务器通过请求信息将相 应的结果发送回用户，或执行一些操作来进行响应。如果不使用服务器端脚本或应用程序如ASP、JSP 、PHP、CGI等来处理表单数据，将无法收集这些数 据。表单标记l表单标记用于插入表单，便于用户提交信息，并交给指定的程序进 行处理，它的标
12、记为，其常用属性有： name，用于设置表单的名称 action，用于设置处理被提交表单程序的URL method，用于设置表单的提交方式，值有POST和GET，当以 POST提交时，提交的数据放在请求报文的body部分，在ASP 中通过Request.Form来访问提交的内容；当以GET提交时，则 通过URL请求来传递提交的数据，在ASP中通过 Request.QueryString来取得变量的值注：FORM标记一般需要加上表单对象标记如、 SELECT、等才起作用。输入标记l输入标记用于定义用户输入类型，它的标记为，其常用属 性有： type，用于设置用户输入的形式，值text为文本输入框
13、，值 password为密码输入框，值checkbox为复选框，值radio为单 选按钮，值image为图片，值hidden为隐藏域，值submit为提交 按钮，值reset为重置按钮。 name，设置表单对象的名称 size，在type=text时为文本框长度 maxlength，在type=text时为文本框最大字符数 value，为用户输入或选择的值，也用于设置初始值文本域标记l文本域标记用于实现用户的多行输入，它的标记为 ，其常用属性有： name，用于设置文本域的名称 cols，用于设置文本域的字符宽度 rows，用于设置文本域的行数TEXTAREA的初始值写在 之间列表框标记l列表
14、框标记用于实现用户的选择输入，它的标记为 ，其常用属性有： name，用于设置列表框的名称l列表框标记还要与标记综合使用， 定义列表的选项，其常用属性有： value，列表选项的表单值 selected，设置是否预选列表项提示文字写在中多窗口(框架)标记l基本语法 . . l各窗口的尺寸设置 l不允许各窗口改变大小 l各窗口间相互操作 l特殊的 4 类操作 新窗口本窗口父窗口整个浏览器窗口 浮动窗口标记l浮动窗口标记用于在窗口中定义一个浮动窗口，它的标 记为，其常用属性有： src，窗口中显示网页的URL width,height,定义窗口的宽度和高度 frameborder,定义窗口的边框宽
15、度 scrolling，设置窗口是否需要滚动条 marginwidth, marginheight，设置窗口的水平与垂直 间距超链接l 理解超链接的文本、链接与目标l 建立文本超链接l 建立图像及热点超链接 l 建立电子邮件超链接l 建立锚点超链接超链接的文本、链接与目标l文本：即显示的文本；l链接：即链接到的路径，其中有相对路径和绝对路径；l目标：即超链接的打开方式，如点击链接后用新窗口打开，用_blank。图像l 常用的网页图像格式l 简单处理数码图片l在网页中插入图像并设置其属性l 在网页中进行图文混排 l 为页面背景和表格背景设置图像l 在网页中插入翻转图像和导航条常用的网页图像格式lGIF格式：支持256色，透明效果，动画，采用无损压缩格式，压缩比小，压缩图像与原图相同；lJPEG格式：支持16位真彩色，无透明效果，无动画，采用有损压缩格式，压缩比大，压缩图像稍逊于原图。l PNG格式：整合了GIF与JPEG优势常用的图片处理工具lACDSEEl光影魔术手lPhotoShoplFireworks表格l 插入表格l 设置表格间距与填充距离 l 设置表格边框与背景l 设置表格对齐l 设置单元格垂直与水平对齐l 用表格实现网页布局 表单l 表单简介l 插入表单及表单对象 l 设置表单及
