《知识点和技能点》PPT课件.ppt

第7章 HTML语言,知识点和技能点,知识点 了解什么是HTML语言？ 了解HTML文档的基本结构 理解常用标记元素和属性的使用 技能点 掌握框架标记和表单标记的使用 熟练HTML语言编程规则 熟练使用HTML进行字体控制元素、字体修饰、排版、建立链接、插入图像、建立列表、建立表格及进行页面排版等,重点和难点,建立链接 建立表格 进行版面设计,7.1.1 为什么要学习HTML？,对于网页设计人员来讲，制作网页的时候，不涉及HTML语言几乎是不可能的，无论是初学者，还是高级的网页制作人员，都需要或多或少地接触到HTML语言，虽然有提供可视化操作工具（如Dreameaver）的方法来创建和编辑HTML文件，但是对于一个希望深入掌握网页制作、对代码严格控制的用户来说，直接书写HTML源代码仍然是必须的操作。,7.1.2 什么是HTML语言,HTML是一种描述文档结构的标记语言，它使用一些约定的标记对WWW上的各种信息进行标记。当用户浏览WWW上的信息时，浏览器会自动解释这些标记的含义，并按照一定的格式在屏幕上显示这些被标记的文件。HTML的优点是其跨平台性。即任何可以运行浏览器的计算机都能阅读并显示HTML文件，不管其操作系统是什么，其显示结果相同。,7.1.3 认识HTML, Wittime工作室 朋友，用户好 河北工业职业技术学院 ,7.1.3 认识HTML,格式：. 整个HTML文档以开始，并以结束。这是HTML文件的声明部分。这就意味着HTML元素包含整个文档（注：与对可以省略不写）。 一个典型HTML文件有以下结构，所有的HTML文件都应该遵循这个模板： 表头 主体 ,7.1.3 认识HTML,HEAD元素 格式：. HEAD元素提供了有关HTML文档的一般信息，包括标题、关键字等。这部分是文件的说明，内容不会在浏览器的正文中显示。 标记一般放在标记的后面，用来标明文件题目或定义。其中和是标题部分，它的内容“Wittime工作室”将显示在浏览器的标题栏上，但并不在浏览器的正文中出现。,7.1.3 认识HTML,BODY元素 格式：. 所有的正文内容和描述及连接全部写在和之间，其中的“朋友，用户好”就是正文部分。示例如下：如图7-1-3所示。 欢迎学习 HTML 我的第一个 HTML 文档 ,7.2.1 长度单位,长度的表示有两种方式：绝对长度和相对长度。它们的单位分别为 像素（pixel） 百分比（） 像素代表屏幕上的各个显像点；而相对长度则描述了对象在浏览器窗口的所占的比例。,7.2.2 颜色单位,颜色单位有三种表达的方式： 1.十六进制的颜色代码 十六进制RGB颜色值由6位数字组成，每个数字的范围从“0”到“F”的十六进制值。前两位数字代表红色，中间两位数字代表绿色，后两位数字代表蓝色。网页的十六进制RGB颜色值一般以符号“#”开头，当然也可以不要符号“#”。 例如：Red Characters 2. 颜色名码 HTML预设了一些颜色名称，可以直接使用颜色名称来设置相应的颜色。 例如：Green Characters 3. 十进制颜色码 例如： Blue ,7.3 HTML 头部标记,HTML的头部标记是，主要包括页面上的一些基本描述的语句。 一般来说，HEAD部分包含许多不可见的信息，例如语言编码、搜索关键字、版权声明、作者信息、网页描述等等。位于头部的内容都不会在网页上直接显示，但是从功能角度来讲，它们确是必不可少的。,7.3 HTML 头部标记,7.3.1 标记,格式： 标记设定链接的基准路径。 例如，有一个网页上大量超链接都给予“”网址，就可以把这个网址设置为基本地址： 这样，假如页面中有一个超链接要链接到“/test.html”，设置了这个基础后，超链接只写成test.html即可（即用相对路径）。,7.3.2 标记,标记被用来描述HTML文档的元信息（Meta Information），即关于文档的自身信息，提供网页作者以各种方式来描述与文档本身而不是文档内容有关的信息。 格式1： 格式2：,7.3.3 标记,标记定义当前网页和本地站中的另一网页之间的关系，以指明与当前文档的有关属性、词汇表、版本、相关资源、文档作者和其他信息。 格式：,7.3.4 标记,标记是用来在页面中插入由浏览器执行的脚本程序（JavaScript或VBScript），为容器元素。如： ,7.4.1 BODY元素的属性,HTML的主体标记 是 ，在和中放置的是页面中的所有内容，如文字、图片、链接、表格、表单等 格式： ,7.4.1 BODY元素的属性,7.4.2 常用颜色的RGB值,7.4.2 常用颜色的RGB值,例如： 其中的属性值说明如下： text=“#000000“： 设定文字颜色(#号后加6位十六进制数，表示不同的颜色)。这里#000000代表黑色，亦可以采用颜色的英文名称，即text=“black“。 link=“#0000FF“： 设定一般文字链接颜色为蓝色。 alink=“#FF0000“： 设定刚暗匣时的文字链接颜色为红色。 vlink=“#0000FF“： 设定链接后(被按过)的颜色为蓝色。 background=“bg1.gif“： 设定背景墙纸。GIF或JPEG 皆可，可以是绝对路径或相对路径。 bgcolor=“#FFFFFF“： 设定背景颜色为白色。当已设定背景墙纸时会失去作用，除非墙纸有透明部分。 leftmargin=2： 设定整份文件显示画面的左方边沿空间，单位为像素。(只适用于IE) topmargin=2： 设定整份文件显示画面的上方边沿空间。(只适用于IE) bgproperties=“fixed“： 固定背景墙纸，当卷动文字时墙纸不会跟着卷动。(只适用于IE),7.5 字体标记,7.5.1修饰标题标记,格式：text Hn元素主要用来修饰标题。正如传统的书本一样，HTML中也规定了标题格式。标题把括起来的文本作为标题。它一共支持六级标题，值可以从1到6，用以充当文档该节的标题。#位置的数字值越小表示的标题就越重要，相应的字号要大些。标题字体支持align属性，用它可以指定对象的排版格式，其属性值有left、right和center等。,7.5.1修饰标题标记, How to make Webs 标题元素显示效果1 标题元素显示效果2 标题元素显示效果3 标题元素显示效果4 标题元素显示效果5 标题元素显示效果6 ,7.5.2定义字体 标记,FONT元素用于设置作用范围内文字的字体、样式、大小、颜色等信息，通过改变其属性可以对字体进行不同的设置。 格式1 ： #=1,2,3, 4,5,6,7 格式2 ： 格式3 ：,7.5.2定义字体 标记, New Document FONT的综合应用1/FONT FONT的综合应用2/FONT FONT的综合应用3/FONT FONT的综合应用4/FONT ,7.5.3字体修饰标记,1.实体标记与逻辑标记 实体标记是指标记本身就说明了所修饰文字的效果，实体标记有固定的显示效果。 逻辑标记标是指标记本身表示了所修饰的逻辑意义。例如本身的逻辑意义为“地址”，但并没有说明具体的物理效果，它依不同浏览器而不同。,7.5.3字体修饰标记,2. U、I、B、BIG、SMALL等字体修饰元素 这是一个字体风格测试网页 这是下划线部分 这是粗体字体 这是斜体字体 大字体 小字体 加删除线 ,7.5.3字体修饰标记,3. 上标元素SUP与下标元素SUB 这是一个上下标测试网页 H2O E=me2 ,7.5.3字体修饰标记,4. STRONG、EM、CITE等短语元素 这是一个测试网页 这是STRONG加重语气，产生字体加粗 Bold 的效果 这是EM强调的文字，强调标记，字体出现斜体效果的 这是CITE被引用的文字，传记引述，产生斜体效果 ,7.5.3字体修饰标记,5. ADDRESS地址元素 Newsletter editor:cool TEL:(0731)6688575 E-mail: ,7.6 排版标记,7.6.1 段落标记,标记是段落的开始，是段落的结尾。P元素的结束标记，经常可以不写。单独一个，会添加一个空行。 例如： 这是第一段落 这是第二段落 这是第三段落,7.6.2 换行标记,换行元素BR在HTML文本中强制换行，指示浏览器执行个断行动作，以便后继文本都放在下一行。,7.6.3 插入水平线标记,这是第一条线段，无size，去默认值；颜色为绿色 这是第二条线段，size=3，宽度为整个窗口的50%，居左显示 这是第三条线段，有noshade，居中显示 ,7.6.4 预格式标记,HTML的输出是基于窗口的，因而HTML文件在输出时都是要重新排版的，即把文本上任何额外的的字符（如空格、制表符和回车符）都忽略，若确实不需要重新排版的内容，可以用通知浏览器。,7.6.5 居中标记,用户会发现很多的标记已有 align=“CENTER“ 的参数，似乎是多余了，事实上它还是常用的标记之一，其简单易用，常用于文字，对于已加有 align=“CENTER“ 参数的 标记也不要厌其烦地加上居中标记，因为很多浏览器不支持 标记中的 align=“CENTER“ 参数。,7.6.5 居中标记,Chriss First Homepage Whats new My profile,7.6.6 块标记、,如果需要将多个段落使用相同的对齐方式，那么可以不必在每个段落中设置align属性，而是使用标记符将所有段落包括起来，然后在标记符中设置align属性。,7.6.6 块标记、, 学习HTML 第1部分 元素用于组织元素 DIV通常用于块级元素 第2部分 这是第二部分 用户觉得有意思吗？ 第二部分向右对齐。 公共格式应用于这一部分中的所有元素 ,7.6.7不换行标记,If you want to know how to create you own homepage quickly, dont miss Chriss Creation of Webpage which will help you a lot. 显示结果“Chriss Creation of Webpage” 将不被分开而显示于同一行。,7.6.8 排版及字体综合示例, 这是第一自然段 这是第一自然段 另起一行 这是新行 这是新段,7.7.1 绝对路径和相对路径,绝对路径 2. 和根目录相对的路径 3. 相对路径 即图像文件“Snowwhite.jpg“与当前显示的网页在同一目录下。 即图像文件“Leaves.jpg “在与当前显示网页所在目录同层次的另一子目录image下。,7.7.2 链接类型, 内部链接：即在同一个站点内的不同页面之间相互联系的的超链接。 锚点链接：除了可以对不同页面或文件进行链接外，还可以对同一网页的不同部分进行链接，例如，可以在长文档的顶部或底部以超链接的方式显示一个目录，并在页面的底部放一个返回顶部的链接。 外部链接：把网页与internet中的目标相联系的链接。,7.7.3 链接标记,格式：text 标记表示一个链接的开始，表示链接的结束。 href属性是A元素最重要的属性。它指定了链接的Web资源位置。超链接所指向的文件可以位于本地站点，也可以位于远端的服务器上。href的不同的属性值显示了链接方式的不同。,7.7.3 链接标记,链接到外部网页 超链接示例 这是一个超链接 欢迎参观河北工业职业技术学院河北工业职业技术学院 ,7.7.3 链接标记,2. 链接到本站其它网页 如何使用锚标签 热点文本1 热点文本2 热点文本3 ,7.7.3 链接标记,3. 锚点链接 锚点是链接的指针，它指向同一文档的不同部分或其他不同的文档（类似书签）。 如果要设置这样的超链接，首先应为页面中需要跳转到的位置命名，命名时应使用A标记的name属性（通常这样的位置被称为锚点），在标记之间可以包含内容也可以不包含内容。,7.7.3 链接标记,4. 链接到电子邮件 链接到电子邮件与链接到一个网站的不同之处是，它们所用的传输协议不同，以及链接的服务器类型不同。 发送邮件 Href的属性值中mailto表示电子邮件协议，冒号后面的内容为对方的电子信箱地址。,7.8 图像标记,7.9.1 定义映射区域,定义映射区域应使用标记，在和之间添加映射区域信息。 为了能够引用相应的映射信息，应在标记中使用name属性指定图像映射的名称。 ,7.9.2 对映射区域进行引用,标记了映射区域后，就可以通过在IMG标记符中使用usemap属性来引用相应的映射信息，此时应将usemap的属性之设定为等于MAP标记符中name属性值。注意与锚点超链接类似，引用映射名称时也要用号。例如，以下代码就定义了一个引用映射信息的图像映射： ,7.10 列表标记,7.10.1 有序列表标记,表示有序号的列表，是在每一个列表项的前面加上一个编号字符，该字符可以是数字或字母。它以重要程度或先后次序进行排列。其列表元素由来决定。 1：（默认值）数字编号：“1、2、3” a：小写的英文字母，如：“a、b、c” A：大写的英文字母，如：“A、B、C” i：小写的罗马字母，如：“i、ii、iii” I：大写的罗马字母，如：“I、II、III”,7.10.2 无序列表标记,无序列表元素UL的列表项前的标记为统一的符号，由UL元素指定了列表类型为无序列表。列表项的内容有所LI元素指定。 text text 其type属性定义了序号使用的符号，当其值为： disc ： 表示实心圆 circle：空心圆 square：小方块,7.10.3 定义列表标记,与有序列表与无序列表相比，定义列表元素DL增加了两个部分：一个术语和一段定义，术语由DT元素指定，定义由DD元素指定。 HTML 超文本标记语言 WWW 简称万维网 ,7.11 使用表格,在创建HTML页面的过程中，表格是页面排版的强大工具,7.11.1 表格标记,标记的一般形式是： .用来给表格提供一个标题 .定义表行 .定义表元 ,7.11.1 表格标记,7.11.2 表格标题标记,表格的标题表达了创建表格的目的，由CATION元素来设置，其属性值align的值可以是top、bottom、left、right，分别表示表格标题出现在表格的顶部、底部、左侧和右侧。 表格标题强调 . ,7.11.3 行,定义表格的一行。表格中的每一行都必须包含在一对标记中。 行标记的一般形式是： ,7.11.4 标题标记与数据标记,单元格是表格的基本组成元素，一个TD元素表示表格中的一个数据单元格，由标记对中所圈入的所有TD元素构成了表格的一行。,7.11.5 表格使用, 第一行第一栏 第一行第二栏 第一行第三栏 第二行第一栏 第二行第二栏 第二行第三栏 ,7.12.1 什么是表单,HTML的表单特性是给予万维网真正力量，完成生动的交互式应用的因素之一。HTML提供的表单是用来将用户数据从浏览器传递给Web服务器的。 ASP（Active Server Page）程序是在服务器端工作，并且通过服务器端的编译动态地送出HTML文件给客户端，它负责处理HTML文件与运行在服务器端的程序之间的数据交换。,7.12.2 标记,7.12.3 输入域标记,格式： INPUT元素用来定义一个用户可以在表单上输入信息的输入域，把不同的字段放在表单里，以便用户输入信息。 HTML中的INPUT标记是表单中最常用的标记。我们在网页上所见到的文本框、按钮等等都由这个标记引出的。,7.12.4 多行文本框标记,格式： text 当用户的输入文本超过一行时，可以使用多行文本框。多行文本框由TEXTAREA元素定义，其常用属性有三个： （1）name 规定多行文本框的名字。 （2）rows 定义多行文本框的行数。 （3）cols 定义多行文本框的列数。,7.12.5 标记和标记,SELECT元素支持name、size和multiple三种属性: name属性指定SELECT元素的名字； size属性定义列表框的大小，即用户次可以看到的列表项的数目； multiple属性表示允许用户进行多项选择。 OPTION元素定义列表框的各选项，在SELECT元素中，所有可选项目由标记逐条列出，通常用下拉式菜单显示；跟在每个标记后面的text在下拉框中显示； selected属性表示预先已经选定； value属性指定用户选择某项后的返回值。,7.13.1 框架的概念,HTML支持框架（FRAME）功能，FRAME元素可以将浏览器分隔为几个子框架，以多重视域来显示一个文档。这样可以保证某些信息始终可见，而其它信息可以滚动浏览或被代替。,7.13.2 框架结构,框架的基本结构： ,7.13.2 框架结构,(1) FRAMESET元素： 定义框架集（总框架），并且可以嵌套。 (2) FRAME元素： 定义每一个框架。 (3) NOFRAMES元素： 用来显示没有框架时的信息（由于有的浏览器不支持框架功能）。,7.14 实体,HTML文档中出现的很多字符不可能通过输入直接放入HTML文档中，这些字符包括对HTML有特殊意义的字符，如，“”字符，以及许多键盘上找不到的国际字符和印刷字符。 可以用实体（Entities）把这些字符放在文档中。实体是若干个文本片段，它们一起表示单个字符。其一般语法包括一个“&”号、一个表示字符的名字及一个分号。,7.14.1保留字符,保留字符是HTML中用于其它目的的普通字符，如果按原样输入则会引起混乱。,7.14.2 保留字符国际字符,国际字符指多数除英语外的欧洲语言中使用的字符，其名字参照ISO拉丁字符集。,总结,HTML是一种语言，但不是“程序”语言， HTML的作用是说明如何表现文字、图片，以及如何建立文件之间的连接。Html语言只是一种让文字、图形等在计算机屏幕上按一定布局和格式展示出来的排版语言，其中采用了一些通俗易懂的英文字母或其缩写，因而很容易掌握。 Html文档从开始，以结束，其中包含了与两大部分，这就是html文档的基本结构。 元素并不是标记。标记和标记元素并不相同，标记元素是位于“”符号之间的内容，而标记则包括了标记元素“”符号本身。 Html中各元素的属性/值给予网页具体的显示方式。 元素名称和属性值不分大小写，但为了使源代码层次清晰，便于阅读，一般元素名称使用大写字母，属性使用小写字母。 段落元素P用来控制段落的显示格式，换行元素BR提供中断段落、强制换行的控制。 短语元素与字体风格元素用来格式化段落中的字体片断。字体控制元素FONT可以控制字体类型、字体大小、字体颜色，是分别由属性face、size、Color定义的。,总结,列表有无序列表、有序列表、定义列表等形式。无序列表由UL 来定义，列表项由L1来定义，项目符号类型由属性type来指定；有序列表由OL来定义，列表项由L1来定义，序号类型由属性type来指定；定义列表由DL来定义，并由DT指定术语，DD指定内容；定义列表可以相互嵌套。 超链接是HTML中的重要概念，它改变了传统的阅读方式。链接有两端：一端是链接的锚点，一端是目标文件；超链接由A元素来定义，它最重要的一个属性是href，它的值提供了目标文件的地址。 在创建HTML页面的过程中，表格是页面排版的强大工具。表格由TABLE元素来定义；CAPTION元素指定了表格的标题；TR元素定义表格的行，TH元素定义标题单元格，TD定义数据单元格。表格和单元格的宽度由