1 / 80

第 7 章 HTML 语言

第 7 章 HTML 语言. 知识点和技能点. 知识点 了解什么是 HTML 语言？ 了解 HTML 文档的基本结构 理解常用标记元素和属性的使用 技能点 掌握框架标记和表单标记的使用 熟练 HTML 语言编程规则 熟练使用 HTML 进行字体控制元素、字体修饰、排版、建立链接、插入图像、建立列表、建立表格及进行页面排版等. 重点和难点. 建立链接 建立表格 进行版面设计. 7.1.1 为什么要学习 HTML ？.

ruby
Download Presentation

第 7 章 HTML 语言

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第7章 HTML语言

  2. 知识点和技能点 知识点 • 了解什么是HTML语言？ • 了解HTML文档的基本结构 • 理解常用标记元素和属性的使用 技能点 • 掌握框架标记和表单标记的使用 • 熟练HTML语言编程规则 • 熟练使用HTML进行字体控制元素、字体修饰、排版、建立链接、插入图像、建立列表、建立表格及进行页面排版等

  3. 重点和难点 • 建立链接 • 建立表格 • 进行版面设计

  4. 7.1.1 为什么要学习HTML？ • 对于网页设计人员来讲，制作网页的时候，不涉及HTML语言几乎是不可能的，无论是初学者，还是高级的网页制作人员，都需要或多或少地接触到HTML语言，虽然有提供可视化操作工具（如Dreameaver）的方法来创建和编辑HTML文件，但是对于一个希望深入掌握网页制作、对代码严格控制的用户来说，直接书写HTML源代码仍然是必须的操作。

  5. 7.1.2 什么是HTML语言 • HTML是一种描述文档结构的标记语言，它使用一些约定的标记对WWW上的各种信息进行标记。当用户浏览WWW上的信息时，浏览器会自动解释这些标记的含义，并按照一定的格式在屏幕上显示这些被标记的文件。HTML的优点是其跨平台性。即任何可以运行浏览器的计算机都能阅读并显示HTML文件，不管其操作系统是什么，其显示结果相同。

  6. 7.1.3 认识HTML • <HTML> • <HEAD> • <TITLE> • Wittime工作室 • </TITLE> • </HEAD> • <BODY> • <H1 align = CENTER>朋友，用户好</H1> • <P> • <FONT face=“楷体-GB2312”color = # FF0000> • 河北工业职业技术学院 • </FONT> • </P> • <IMG src=“pic.jpg”> • </BODY> • </HTML>

  7. 7.1.3 认识HTML • 格式：<HTML>...</HTML> 整个HTML文档以<HTML>开始，并以</HTML>结束。这是HTML文件的声明部分。这就意味着HTML元素包含整个文档（注：<HTML>与</HTML>对可以省略不写）。 一个典型HTML文件有以下结构，所有的HTML文件都应该遵循这个模板： <HTML> <HEAD> 表头 </HEAD> <BODY> 主体 </BODY> </HTML>

  8. 7.1.3 认识HTML • HEAD元素 格式：<HEAD>...</HEAD> HEAD元素提供了有关HTML文档的一般信息，包括标题、关键字等。这部分是文件的说明，内容不会在浏览器的正文中显示。 <HEAD>标记一般放在<HTML>标记的后面，用来标明文件题目或定义。其中<TITLE>和</TITLE>是标题部分，它的内容“Wittime工作室”将显示在浏览器的标题栏上，但并不在浏览器的正文中出现。

  9. 7.1.3 认识HTML • BODY元素 格式：<BODY>...</BODY> 所有的正文内容和描述及连接全部写在<BODY>和</BODY>之间，其中的“朋友，用户好”就是正文部分。示例如下：如图7-1-3所示。 <HTML> <HEAD> <TITLE>欢迎学习 HTML</TITLE> </HEAD> <BODY> <H3>我的第一个 HTML 文档</H3> </BODY> </HTML>

  10. 7.2.1 长度单位 长度的表示有两种方式：绝对长度和相对长度。它们的单位分别为 • 像素（pixel） • 百分比（％） 像素代表屏幕上的各个显像点；而相对长度则描述了对象在浏览器窗口的所占的比例。

  11. 7.2.2 颜色单位 颜色单位有三种表达的方式： 1.十六进制的颜色代码 十六进制RGB颜色值由6位数字组成，每个数字的范围从“0”到“F”的十六进制值。前两位数字代表红色，中间两位数字代表绿色，后两位数字代表蓝色。网页的十六进制RGB颜色值一般以符号“#”开头，当然也可以不要符号“#”。 例如：<FONT color=#FF0000>Red Characters</FONT> 2. 颜色名码 HTML预设了一些颜色名称，可以直接使用颜色名称来设置相应的颜色。 例如：<FONT color="green">Green Characters </FONT> 3. 十进制颜色码 例如：<FONT color=rgb(0,0,255) > Blue </FONT>

  12. 7.3 HTML 头部标记 • HTML的头部标记是<HEAD>，主要包括页面上的一些基本描述的语句。 • 一般来说，HEAD部分包含许多不可见的信息，例如语言编码、搜索关键字、版权声明、作者信息、网页描述等等。位于头部的内容都不会在网页上直接显示，但是从功能角度来讲，它们确是必不可少的。

  13. 7.3 HTML 头部标记

  14. 7.3.1 <BASE>标记 • 格式：<BASE href="URL" target="windows name"> • <BASE>标记设定链接的基准路径。 • 例如，有一个网页上大量超链接都给予“http://www.hbivt.edu.cn”网址，就可以把这个网址设置为基本地址： • <BASE href=“http://www.hbivt.edu.cn”> • 这样，假如页面中有一个超链接要链接到“http://www.hbivt.edu.cn/test.html”，设置了这个基础后，超链接只写成test.html即可（即用相对路径）。

  15. 7.3.2 <META>标记 • <META>标记被用来描述HTML文档的元信息（Meta Information），即关于文档的自身信息，提供网页作者以各种方式来描述与文档本身而不是文档内容有关的信息。 格式1：<META name="text" content="text"> 格式2：<META http-equivalent="text" content="text">

  16. 7.3.3 <LINK>标记 • <LINK>标记定义当前网页和本地站中的另一网页之间的关系，以指明与当前文档的有关属性、词汇表、版本、相关资源、文档作者和其他信息。 格式：<LINK name="text" rel="text" href="URL">

  17. 7.3.4 <SCRIPT>标记 • <SCRIPT>标记是用来在页面中插入由浏览器执行的脚本程序（JavaScript或VBScript），<SCRIPT>为容器元素。如： <SCRIPT language="JavaScript"> <!-- … source code --> </SCRIPTt>

  18. 7.4.1 BODY元素的属性 • HTML的主体标记 是<BODY> ，在<BODY>和</BODY>中放置的是页面中的所有内容，如文字、图片、链接、表格、表单等 格式： <BODY bgcolor=# text=# link=# alink=# vlink=# background =”imageURL”>

  19. 7.4.1 BODY元素的属性

  20. 7.4.2 常用颜色的RGB值

  21. 7.4.2 常用颜色的RGB值 例如： <body text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed"> </body> 其中的属性值说明如下： ◆ 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)

  22. 7.5 字体标记

  23. 7.5.1修饰标题<Hn>标记 格式：<H#>text</H#> • Hn元素主要用来修饰标题。正如传统的书本一样，HTML中也规定了标题格式。标题把括起来的文本作为标题。它一共支持六级标题，＃值可以从1到6，用以充当文档该节的标题。#位置的数字值越小表示的标题就越重要，相应的字号要大些。标题字体支持align属性，用它可以指定对象的排版格式，其属性值有left、right和center等。

  24. 7.5.1修饰标题<Hn>标记 <HTML> <HEAD><TITLE>How to make Webs</TITLE></HEAD> <BODY bgcolor="#FFFFFF"> <Hl>标题元素显示效果1</Hl> <H2 align=left>标题元素显示效果2</H2> <H3 align=right>标题元素显示效果3</H3> <H4 align=center>标题元素显示效果4</H4> <H5>标题元素显示效果5</H5> <H6>标题元素显示效果6</H6> </BODY> </HTML>

  25. 7.5.2定义字体 <FONT>标记 • FONT元素用于设置作用范围内文字的字体、样式、大小、颜色等信息，通过改变其属性可以对字体进行不同的设置。 格式1 ：<FONT size＝＃>…</FONT> #={1,2,3, 4,5,6,7} 格式2 ：<FONT color＝white>…</FONT> 格式3 ：<FONT face＝”Times,Arial,Courier”>…</FONT>

  26. 7.5.2定义字体 <FONT>标记 <HTML> <HEAD><TITLE>New Document</TITLE></HEAD> <BODY bgcolor="#FFFFFF"> <FONT face="times,Arial,courier"> <basefont size=4> <FONT color=blue size=7>FONT的综合应用1/FONT><BR> <!--BR是换行符--> <FONT color=red>FONT的综合应用2/FONT><BR> <FONT color=red size=+1>FONT的综合应用3/FONT><BR> <FONT color=red size=-1>FONT的综合应用4/FONT><BR> </BODY> </HTML>

  27. 7.5.3字体修饰标记 1.实体标记与逻辑标记 ◆ 实体标记是指标记本身就说明了所修饰文字的效果，实体标记有固定的显示效果。 ◆ 逻辑标记标是指标记本身表示了所修饰的逻辑意义。例如<ADDRES>本身的逻辑意义为“地址”，但并没有说明具体的物理效果，它依不同浏览器而不同。

  28. 7.5.3字体修饰标记 2. U、I、B、BIG、SMALL等字体修饰元素 <HTML> <HEAD> <TITLE>这是一个字体风格测试网页</TITLE> </HEAD> <BODY> <P><U>这是下划线部分</U> <P><B>这是粗体字体</B> <P><I>这是斜体字体</I> <P><BIG>大字体</BIG> <P><SMALL>小字体</SMALL> <P><STRIKE>加删除线</STRIKE> </BODY> </HTML>

  29. 7.5.3字体修饰标记 3. 上标元素SUP与下标元素SUB <HTML> <HEAD> <TITLE>这是一个上下标测试网页</TITLE> </HEAD> <BODY> H<SUB>2</SUB>O<BR> E=me<SUP>2</SUP> </BODY> </HTML>

  30. 7.5.3字体修饰标记 4. STRONG、EM、CITE等短语元素 <HTML> <HEAD> <TITLE>这是一个测试网页</TITLE> </HEAD> <BODY> <P><STRONG> 这是STRONG加重语气，产生字体加粗 Bold 的效果</STRONG> <P><EM>这是EM强调的文字，强调标记，字体出现斜体效果</EM>的 <P><CITE>这是CITE被引用的文字，传记引述，产生斜体效果</CITE> </BODY> </HTML>

  31. 7.5.3字体修饰标记 5. ADDRESS地址元素 <ADDRESS> Newsletter editor:cool <BR> TEL:(0731)6688575 E-mail:xxx@263.net </ADDRESS>

  32. 7.6 排版标记

  33. 7.6.1 段落<P>标记 标记<P>是段落的开始，</P>是段落的结尾。P元素的结束标记</P>，经常可以不写。单独一个<P>，会添加一个空行。 例如： <P align=left>这是第一段落</P> <P align=right>这是第二段落</P> <P align=center>这是第三段落</P>

  34. 7.6.2 换行<BR>标记 • 换行元素BR在HTML文本中强制换行，指示浏览器执行—个断行动作，以便后继文本都放在下一行。

  35. 7.6.3 插入水平线<HR>标记 <P >这是第一条线段，无size，去默认值；颜色为绿色<BR> <HR color=“#00ff00”> <P >这是第二条线段，size=3，宽度为整个窗口的50%，居左显示<BR> <HR size=“2” width=”50%” align=”left” <P >这是第三条线段，有noshade，居中显示<BR> <HR size=“5” width=”80%” align=”center” noshade>

  36. 7.6.4 预格式<PRE>标记 • HTML的输出是基于窗口的，因而HTML文件在输出时都是要重新排版的，即把文本上任何额外的的字符（如空格、制表符和回车符）都忽略，若确实不需要重新排版的内容，可以用<PRE>…</PRE>通知浏览器。

  37. 7.6.5 居中<CENTER>标记 • 用户会发现很多的标记已有 align="CENTER" 的参数，<CENTER>似乎是多余了，事实上它还是常用的标记之一，其简单易用，常用于文字，对于已加有 align="CENTER" 参数的 <TABLE> 标记也不要厌其烦地加上居中标记，因为很多浏览器不支持<TABLE> 标记中的 align="CENTER" 参数。

  38. 7.6.5 居中<CENTER>标记 <CENTER>Chris's First Homepage</CENTER> <CENTER>What's new</CENTER> <CENTER>My profile</CENTER>

  39. 7.6.6 块标记<SPAN>、<DIV> • 如果需要将多个段落使用相同的对齐方式，那么可以不必在每个段落中设置align属性，而是使用<DIV>标记符将所有段落包括起来，然后在<DIV>标记符中设置align属性。

  40. 7.6.6 块标记<SPAN>、<DIV> <HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <DIV> 第1部分 <P>元素用于组织元素 <P>DIV通常用于块级元素 </DIV> <DIV align = center> 第2部分 <P>这是第二部分 <BR> <H2>用户觉得有意思吗？</H2> </DIV> <P>第二部分向右对齐。 <SPAN STYLE ="font-size:25"> 公共格式</SPAN>应用于这一部分中的所有元素 </BODY> </HTML>

  41. 7.6.7不换行标记<NOBR> • If you want to know how to create you own homepage quickly, don't miss <NOBR>Chris's Creation of Webpage</NOBR> which will help you a lot. 显示结果“Chris's Creation of Webpage” 将不被分开而显示于同一行。

  42. 7.6.8 排版及字体综合示例 <!--这是我学习排版及字体标记的例子--> <P><FONT face="宋体">这是第一自然段</FONT></P> <HR noshade color="#00FF00" size="2" width="70%" align="left"> <P align="center"><FONT face="华文楷体" size="4">这是第一自然段</FONT></P> <P><B><I>另起一行</I></B><BR> <U>这是新行</u></P> <P>这是新段</P>

  43. 7.7.1 绝对路径和相对路径 • 绝对路径 2. 和根目录相对的路径 3. 相对路径 <IMG src="Snowwhite.jpg"> 即图像文件"Snowwhite.jpg"与当前显示的网页在同一目录下。 <IMG src="../image/Leaves.jpg"> 即图像文件"Leaves.jpg "在与当前显示网页所在目录同层次的另一子目录image下。

  44. 7.7.2 链接类型 ◆ 内部链接：即在同一个站点内的不同页面之间相互联系的的超链接。 ◆ 锚点链接：除了可以对不同页面或文件进行链接外，还可以对同一网页的不同部分进行链接，例如，可以在长文档的顶部或底部以超链接的方式显示一个目录，并在页面的底部放一个返回顶部的链接。 ◆ 外部链接：把网页与internet中的目标相联系的链接。

  45. 7.7.3 <A>链接标记 • 格式：<A href="URL" name="text">text</A> • 标记<A>表示一个链接的开始，</A>表示链接的结束。 • href属性是A元素最重要的属性。它指定了链接的Web资源位置。超链接所指向的文件可以位于本地站点，也可以位于远端的服务器上。href的不同的属性值显示了链接方式的不同。

  46. 7.7.3 <A>链接标记 • 链接到外部网页 <HTML> <HEAD><TITLE>超链接示例</TITLE></HEAD> <BODY> <P>这是一个<A href =“page2.html”>超链接</A></P> <P>欢迎参观河北工业职业技术学院<A href=“http://www.cqu.edu.cn”>河北工业职业技术学院</A></P> </BODY> </HTML>

  47. 7.7.3 <A>链接标记 2. 链接到本站其它网页 <HTML> <HEAD> <TITLE>如何使用锚标签</TITLE> </HEAD> <BODY> <P><A href="THisDoc.Html">热点文本1 </A></P> <P><A href="../THisDoc.html">热点文本2 </A></P> <P><A href＝"C:/temp/Oontent/THisDoc.Html">热点文本3</A></P> </BODY> </HTML>

  48. 7.7.3 <A>链接标记 3. 锚点链接 • 锚点是链接的指针，它指向同一文档的不同部分或其他不同的文档（类似书签）。 • 如果要设置这样的超链接，首先应为页面中需要跳转到的位置命名，命名时应使用A标记的name属性（通常这样的位置被称为锚点），在标记<A与</A>之间可以包含内容也可以不包含内容。

  49. 7.7.3 <A>链接标记 4. 链接到电子邮件 • 链接到电子邮件与链接到一个网站的不同之处是，它们所用的传输协议不同，以及链接的服务器类型不同。 • <A href=“mailto：name@yahoo.com”>发送邮件</A> • Href的属性值中mailto表示电子邮件协议，冒号后面的内容为对方的电子信箱地址。

  50. 7.8 图像标记<IMG>

More Related