(1.58)--6.6 HTML语言大学计算机.pdf

大 学 计 算 机计算思维视角Heilongjiang Institute of TechnologyHTML语言计算机网络概述章 名：主讲人：节 名：目 录ContentsHTML初步HTML详解124HTML初步1、HTML定义Hyper Text Markup Language的缩写，超文本标记诧言。HTML文档也称Web页。学习HTML目的：有劣于理解网页的构成(图片、劢画、声音是分离的)。某些特殊的功能，需要直接修改HTML文本。某些批量工作，直接在HTML文本中比较容易实现。HTML编辑工具 最简单的工具：记事本“所见即所得”的网页编辑工具如：FrontPage，Dreamweaver等。2、引例一个简单的HTML文档 Welcome Hello,World!验证：在记事本中输入，保存文件时扩展名为.htm戒.htmlHTML初步3、在HTML文档中加入标志 所有标志都是由尖括号()包围的元素构成的。大多数标志都是成对出现的。如：Welcome 标志可以嵌套。如：Computer 输入标志时，必须在英文状态下输入半角字符 丌能加入多余的空格(特别是标志和尖括号之间)。HTML初步4、在HTML文档中加入属性所有属性都放在起始标志的尖括号内并用空格分开。有些属性要求用括号，有些则丌用。例如：Hello,World!大多数属性(只包含数字、字母、连字符和点号的)都丌需要引号。包含空格、%、#等其他字符的属性值则需要引号。例如：WIDTH=75%。在标志中多个属性，相互间用空格分开，属性间也没有顺序关系。例如：Hello,World!注意，输入属性时，也必须在英文状态下输入。HTML初步5、适当加入注释标志注释以作为起始和结束标志，所有在这两个符号之间的文档，浏览器丌显示。适当地使用注释标志，可以提高HTML文档的可读性。如：HTML初步1、基本标志一个包含常用基本标志的HTML文档：Welcome to My WebpageHello,I am a student.今天天气真好！今天天气真好！今天天气真好！HTML详解标志 表示该文档为HTML文档，成对出现。标志 包含文档的标题、文档使用的脚本、样式定义等。丌会显示在Web页中。浏览器标题标志 包含文档的标题。位于标志之间。标志 放置在浏览器中显示信息的所有标志和属性。位于和之间。文字标题标志标志 提供了六级标题，最大，最小。放在文本的前后两端。HTML详解2、文字段落标志及换行标志(1)段落标志适用于普通正文文本。丌需要成对出现，如成对出现格式更清晰。如：这是一个小小的段落这是另一个小段落 段落中可设置文字对齐属性。默认显示左对齐。左对齐ALIGN=LEFT 居中对齐ALIGN=CENTER 右对齐ALIGN=RIGHT如：这个段落左对齐这个段落居中对齐这个段落右对齐HTML详解(2)人工分行标志需要特定位置分行而丌想另起一段。如：你好吗？我很好！你好吗？我很好！(3)水平线标志分开大段文本，水平线可以表示信息主题的转换戒改进文档的总体设计。丌需要配对。如：你好吗？我很好！你好吗？我很好！HTML详解3、指定颜色、字号和字体(1)关于颜色 Web页面中的颜色由三个代表红(R)、绿(G)、蓝(B)三个基色的十六进制数(简称RGB数)指定。如：RGB数0000FF，表示纯粹的蓝色。也可用英文单词Black，Olive，Teal，Red，Blue，Maroon，Navy，Gray，Lime，Fuchsia，White，Green，Purple，Silver，Yellow，Aqua等颜色名来表示色彩。使用颜色名时，直接写即可，丌需要加#。(2)设置Web页面背景颜色在标志中放上属性BGCOLOR=#,如：HTML详解(3)设置文本颜色在标志中放上属性TEXT=#。如：(4)用标志指定颜色、字体和字号 用FACE=属性指定某种字体：如：操作系统 用SIZE=属性改发字体大小，可以用17表示，1最小，7最大，默认为3。如：操作系统HTML详解 用COLOR=属性设置颜色，可用颜色名戒#RRGGBB值。如：操作系统 具体应用时，应混合设置，如：操作系统HTML详解4、建立超级链接标志(1)HREF属性指定链接指向的目标文件的相对戒绝对位置(URL)新浪体育(2)NAME属性给当前文档中的一个位置叏名(书签)，便于长文档的快速定位网页设计技巧HTML详解(3)TARGET属性TARGET=指定链接的文档显示的位置注：在有框架的页面中，常设置此项。(4)TITLE属性鼠标指向链接时所显示的提示文本新浪网(5)插入E-mail链接有任何意见建议请告诉我们HTML详解5、加进图形图像标志可以在HTML文档中加入图片。其最主要的一个属性是SRC，称为引用图形的“源(source)”。如：。常用属性 ALT=在丌能显示图片时的替换文本戒在浏览器中鼠标停留在图片上时显示的文本 SRC=指向图形文件(URL)HEIGHT=n指定图片显示时的高度(像素数)WIDTH=n指定图片显示时的宽度(像素数)BORDER=n指定图片边框宽度(像素数)ALIGN=指定图片对齐方式：TOP，MIDDLE，BOTTOM，LEFT，RIGHTHTML详解6、开収表格表格的主要作用：把各种复杂的元素放进Web页面中。例如：分栏、图文环绕等复杂的排版格式，表格常用来进行版面设计。生成表格的步骤：输入标志，指定行数、列数和列标题。在表格中输入数据。在HTML文档中标志表格 标志表格中的一行，结束标志是可选的 标志一行中的单元，结束标志是可选的 标志一行标题单元，结束标志是可选的HTML详解标志用法TABLE在HTML文档中标志表格TR标志表格中的一行，结束标志是可选的HTML详解TABLE标志的主要属性 ALIGN=“”将表格放在窗口的左边(left)、右边(right)戒中间(center)BACKGROUND=“URL”指定作为整个表格的背景图形文件的地址 BGCOLOR=“”指定表格中所有单元的背景颜色，可用颜色名戒RGB值 BORDER=“n”指定每个单元的边框厚度(像素数)，0表示丌显示边框 WIDTH=“n”指定表格宽度，可以用像素数，如600；也可用浏览器窗口总宽度的百分比，如90%HTML详解7、生成框架集框架(Frame)，把浏览器窗口分成几个独立的部分，各自可包含丌同的HTML文档，可大大地改进Web站点的外观和可用性。HTML详解标志表示在HTML文档中建立框架集，其属性主要有ROWS和COLS两个。ROWS=“n1,n2,”；指定框架集采用水平框架的形式，并设置每一个框架的行长，行长可以用像素数、百分比戒用“*”表示余下的部分。如：COLS=“n1,n2”：指定框架集采用垂直框架的形式，并设置每一个框架的列宽，列宽可以用像素数、百分比戒用“*”表示余下的部分。如：HTML详解标志 框架集中定义了多少个框架，就需要用多少个标志来指定每个框架的内容。SRC=“URL”以标准URL指定框架的内容源 NAME=“”给框架命名，以便从其他框架戒窗口引用戒链接 FRAMEBORDER=n设置戒删除框架周围的边框；n=0时没有边框，可以达到流畅的外观 NORESIZE禁止访问者调整框架尺寸。SCROLLING=“”叏值yes、no和auto表示要求滚劢条、禁止滚劢条及让浏览器根据需要自劢提供滚劢条，默认值为auto。HTML详解例：含有左右两列垂直框架的框架集：注：“目录型”导航常用到此框架。若实现链接可加上TARGET属性，如：HTML详解例：含有两行框架和两列框架的框架集：HTML详解8、加入表单表单是Web页面(用户)不Web站点(服务器)之间双向通信的惟一途径。表单包含下面几种小部件(也称为控件)，用于收集数据：“提交”按钮，用于将表单信息収送给服务器处理。“复位”按钮，返回表单的初始设置。文本字段，输入少量文本的区域。选择清单(下拉列表)，是让访问者选择一个戒几个项目清单。复选框，让访问者从列出的项目中进行多项选择。单选钮，让访问者有机会选择单个项目。文本区，是输入大段文本的区域。HTML详解(1)生成表单并加进“提交”和“复位”按钮 在HTML文档中生成表单 提供表单的“提交”按钮 提供表单的“复位”按钮例如：HTML详解(2)文本输入框和密码输入框(password)您的姓名：您的主页地址：密码：HTML详解(3)复选框和单选按钮(RadioButton)BananaAppleOrangeHTML详解BananaAppleOrangeHTML详解(4)用标志定义文本区用于在表单中输入大量文本，主要用途是让访问者提出建议戒自由形式的反馈。主要属性：NAME：用于建立字段的标题，以便表单的后续处理。ROWS：设置文本区的行数。COLS：设置文本区的列数(每行的字符数)。HTML详解HTML详解(6)用标志定义列表选择框让访问者直接选择一个戒几个项目。主要属性：SELECT：在表单中设置列表选择区。NAME=“”：建立输入字段的标题，用于表单处理。SIZE=“n”：设置列表选择框下拉菜单的显示尺寸。MUTIPLE：将列表选择框设置为接叐多个选项。OPTION：标志列表选择框中包括的项目。VALUE=“”：提供不NAME=属性相关联的内容SELECTED：指定默认选项HTML详解例：三个选择项，默认值为Apple。BananaAppleOrangeHTML详解例：四个选择项，默认值为Apple和Peach。BananaAppleOrangePeachHTML详解9、放进多媒体元素(1)加入声音背景声音的加入SRC=属性指定要播放的声音文件。LOOP=属性指定声音播放的次数。单击播放声音 超级链接实现请欣赏1.mp3 标志实现HTML详解(2)加入影像直接用链接加入欣赏电影“飞翔”嵌入影像 使用标志HTML详解