HTML教程(42页)免费下载.pdf

1、HTML教程HTML教程课程内容第1章HTML简介31.1 什么是HTML31.2 为什么学习HTML31.3 HTML的发展史4第2章 第一个HTML文档 42.1 HTML 结构42.2 我的第一个网页5第3章HTML元素53.1 HTML 标签53.2 标签属性6练习：6第 4章 使用 Dreamweaver Mx 开发网页 7第5章 HTML基本标签75.1 段落75.2 标题元素85.3 换行85.4 水平线85.5 HTML中的注释95.6 嵌入元素9练习：9第6章 HTML格式化标签 106.1 HTML 的 标签106.2 格式化文字： 116.3 删除和插入文字：126.4

2、预格式化文本 126.5 其他参考：136.5.1 “计算机输出”标签： 136.5.2 地址：146.5.3 缩写和首字母缩略法： 146.5.4 文字方向：146.5.5 块引用：15第7章HTML链接157.1 连接157.2 锚标签和href属性 167.3 邮件链接：177.4 target 属性18练习：18第8章HTML表格18Created by YYMPage 3 of 428.1 表格头使用th标签指定 198.2 有标题的表格：198.3 美化表格208.4 frame属性20练习：23第9章 HTML列表 239.1 无序列表.9.2 有序列表.93自定义列表练习：23

3、2424第第,第第10.3 图像导航:10.4 图像地图:练习：11章颜色表示2526272727WiK13bzwHn框架14.1垂直分栏:2829323214.3混合框架:14.4导航框架第15章 HTML样式15.1 内部样式表 15.2 行内样式.6.36.36例2 :背景音乐3714.2 水平分栏：4|/第 16 章 HTmV 头例1 ：给所有连接添加一个目标 3716.1 HTML Meta16.1.1 n ame 属性3716.1.2 http-equiv 属性 38第17章HTML 脚本40第18章HTML4.0 事件属性

4、 41第19章HTML 属性42Page 2 of 42Created by YYM标准资料收藏家 wWW4Z易启标准网免费提供十万标准书籍资料下参考信息http:/www. 相关技术手册 new/software/html/i ndex.html微软提供的在线帮助http:/msd n/html/vblrf HTMLDivC on trols.asp第1章HTML简介1.1什么是HTMLHTML9 HTML文件是一个包含标记的文本文件。9 HTML语言（Hyper Text Markup Language,表示超文本标记语言）：描述信 息所用的规范标签，这些标记告诉浏览器怎样显示这个页面。9

5、 浏览器：HTML的翻译显示工具。9 浏览器的显示控制：In ternet属性。1.2为什么学习HTML9 Web开发的基本技术9 是JSP页面的组成部分HTML教程1.3 HTML的发展史91978到 1986年间,ANSI 等组织制定了 SGML (Standard Generalized MarkupLanguage)语言标准91990,Tim Berners-Lee HTML1996年，著名的 Netscape浏览器在其 2.0版中增加了对 JavaApplets和 JavaScript 的支持；Microsoft为I匚3.0设计了另一种后来也声名显赫的脚本语言iptascading

6、Style Sheets 的建议标准 ie 插件的支持ActiveX控件的功能 I I，提出了 XML (Extensible Markup语言91996年底，W3C 提出了CSS(Cascading Style S年的鬧*和2.0成功地引入了歹坤穴甫91996 年，W3CLanguage)语言草案9 | 1997年的Netscape 4.0不但支持 CSS,而且增加了许多 Netscape公司自定义 的动态HTML标记1997 年，Microsoft 发布了i (99年, IE.0E式支持在mJ页面中插入a W3C在SGML语言减础上，提出了,1997年，Microsoft发布了4并将动态H

7、TML标记、CSS和动态对象、模型(/TMHobje/Mode)发展成了一套完整、实用、高效的客户端开发 技术体系MiSS称其为DhTmlR91998年，W3C正式发布了 XML 1.0标准91999年，W3C制定出了 XSLT标准。同一年，IE 5.0增加了对XML和XSLT的支持92000年1月26日XHTML1.0成为 W3C的推荐标准之一XML92001 年 W3C 发布的 SVG(ScaBbev!ctor Graphics 1.0 标准就是二种用W言ww维矢fTZwJu一种t参考文档：Web开发技术发展史话.doc第文jZ I2.1 HTML 结构9 HTML标签是大小写无关的，W3

8、C在他们的HTML4建议中提倡使用小写标 签，XHTML (下一代HTML )要求标签用小写。9 HTML文件的所有内容都应该包含在html标记中9 HTML语言在结构上分为两部分，即头部和主体。 头部描述浏览器所需要的一些信息，如文件编码、标题等。 主体则包含了文件的主体内容9 HTML文件必须有htm或者html扩展名。Page 4 of 42Created by YYM标准资料收藏家 wWW4ZbZW.cn易启标准网免费提供十万标准书籍资料下Created by YYMPage 9 of 429 HTML文件可以用一个简单的文本编辑器创建2.2我的第一个网页Title of page T

9、his is my first homepage.This text is bold 例子解释z html这个标签告诉浏览器这是 HTML文档的开始。HTML文档的最后一个 标签是/html，这个标签告诉浏览器这是 HTML文档的终止。z 在head和/head#签之间文本的是头信息。在浏览器窗口中，头信息是不 被显示的。z 在title和/title标签之间的文本是文档标题，它被显示在浏览器窗口的标 题栏。z 在body和/body标签之间的文本是正文，会被显示在浏览器中。z 在b和/b标签之间的文本会以加粗字体显示。浏览器的缓存功能，可用使用“刷新/重载”按钮来强迫浏览器读取编辑过的 页面

10、。第3章HTML元素9 HTML文档是由HTML元素组成的文本文件。9 HTML元素是预定义的正在使用的 HTML标签。3.1 HTML 标签9 HTML标签两端有两个括号字符：“”和“”，这两个括号字符被称为角括 号。9 HTML标签通常成对出现，比如b和/b。一对标签的前面一个是开始标签，第二个是结束标签，在开始和结束标签之间的文本是元素内容。9 单独使用的标签不需要与之配对的结束标签，又称为空标签，例如W3C在他们的HTML4建议中提倡在空标签后面加上反斜杠以明确表明这是 空标签，例如.3.2标签属性标签可以拥有属性。9属性进一步说明了该元素的显示或使用特性。9属性通常由属性名和值成对出

11、现，属性值部分可以用英文的双引号或单引号Www使用ISjZw示om checked属性，input type二checkbox checkedApple9 属性值本身包含引号时，使用另一种引号做定界符。例如：需要i例如9 一个标签元素需要同时设置几个属性时，属性之间用空格分开，不区分先后 顺序。JkWwwITbzwxn练习：题目：设计一个网页，页面内容为“I can designe HTML page!”，背景色为黑色，字体颜色为白色，提示：卍面的背景色由bod标签中勺;bgcoPi属性控制，沪面文本颜色由 自性w wht Mwr描述红色和值We. nhettextWCreated by YY

12、MPage 6 of 42标准资料收藏家 wWW4Z易启标准网免费提供十万标准书籍资料下HTML教程第4章 使用Dreamweaver Mx开发网页Dreamweaver 的优点:9 创建页面元素9 编码支持第5章HTML基本标签5.1段落段落是用vp标签定义的。vpThis is a paragraph.v/pvpThis is a paragraph.This is a paragraph.Paragraph eleme nts are defi ned by the p tag.v/body v/html5.2标题元素This is a headi ngv/h1 This is a he

13、adi ngv/h2 This is a headi ngv/h3 This is a headi ngv/h4ihis is a neading|Www：6l7izw com i6MThsir heodi你认为标题是什么？你认为标题是什么？ 带有一定格式的段落 标题的居中属性:wwwJgXbzwrcnThe head ing above is alig ned to the cen ter of this page. The headi ng above is alig ned to the cen ter of this page. The headi ng above is alig n

14、ed to the cen ter of this page.ww. 5.3换行:wwwlTizcnHTML将截掉你文本中的多余空格。不管多少个空格，处理起来只当一个。一点附加信息：在HTML里面，一个空行也只被当作一个空格来处理。 使用 空段落p中，使用br标签来插入空白行。This is a paragraph with line breaks5.4水平线hr标签用来来分隔我们的内容Page 8 of 42Created by YYM标准资料收藏家 www4Z易启标准网免费提供十万标准书籍资料下Created by YYMPage 13 of 42vpThe hr tag defi nes

15、 a horiz on tal rule：v/pThis is a paragraphThis is a paragraphThis is a paragraph5.5 HTML中的注释z 注释会被浏览器忽略。z 可以使用注释来解释代码。注意：你需要在左括号“ v”后面跟一个感叹号，右括号不用5.6嵌入元素9 声频：vEMBED SRC=音乐文件名AUTOSTART=true9 视频：vEMBED SRC=视频文件名AUTOSTART=true练习：的控制是否有显示的题目：编写一个页面，测试段落之间是否会用换行分割，和 不同，水平线分割测试的段落。HTML教程This is the first

16、 paragraphn This is the first paragraph! This is the first paragraph, This is the first paragraphf This is the first paragraphs This is the first paragraph. This is the first paragraph. This is the firt pariraph IThis is second pagraphk This is secondl paragraph* This is second paragraphj This is se

17、cond paragraphi This is second paragraphs This i吕 second paragraph? This is second paragraphs This is： second paragraph,This is second paragraph*Wwwdjwcom6.1 HTML 的 vfont 标签WwnZbzwcdont size=3 face=TimesThis is ano ther paragraph.字WwWJTzwnetfPurpose定义字体大小增加字体大小Attribute Examplesize=nu mber size=2 ze

18、=+nu mber size=+1wwwiface=faCe-name face=Timescolor=color-value color=#eeffOO定义字体颜色值color=col or-n ame color=red定义字体颜色名称W3C组织已经将标签从它的推荐中删除，将来版本的HTML ,样式表(css) 将会被使用来定义布局以及显示 HTML各元素的属性使用正确的方法来做-使用样式设置文字的大小、字体、颜色Page 10 of 42Created by YYM标准资料收藏家 wWW4ZbzW.cn易启标准网免费提供十万标准书籍资料下会打字、5分钟快速自助建网站 易启建站网免费提供建

19、站平台，商业网站1年仅60元HTML教程This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph with some text in it.到哪里去学习更多的样式表？http:/www. 6.2格式化文字：This text is boldThis text is stro ngThis text is bigThis text is emphasizedThis

20、 text is italicThis text issmallThis text containsCreated by YYMPage # of 42AHTML教程subscriptThis text contains superscriptv/body v/htmlWWW文字 ；wwwJZbzwxritwe nty twelve v/inspi Some older browsers will display deleted or inserted text as plain text.Www. 17jzw .cn v/boc /htm6.4预格式化文本 This isPage 12 of

21、 42Created by YYM标准资料收藏家 易启标准网免费提供十万标准书籍资料下会打字、5分钟快速自助建网站 易启建站网免费提供建站平台，商业网站1年仅60元AHTML教程preformatted text.It preserves both spacesand line breaks.v/prevpThe pre tag is good for displayi ng computer code: for i = 1 to 10print in ext iv/body预格式化有什么好处？这个例子说明了可以怎样用pre标签来控制换行和空格。6.5其他参考：6.5.1“计算机输出”标签：C

22、omputer code/codeKeyboard in put Teletype texSample texComputer variableNote：v/b These tags are ofte n used to display computer/programmi ng code.Created by YYMPage 19 of 42HTML教程6.5.2地址:Donald DuckBOX 555Disn eyla ndWww47jzwcom6,5.3缩写和首字母缩略法：Www.17bzw. cnacronymhowmouseVTayThis only works for the a

23、cronym element in IE 5. T6.5.4文字方向:/boc v/htmIf your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):Created by YYMPage 14 of 42标准资料收藏家 www4ZbZ易启标准网免费提供十万标准书籍资料下会打字、5分钟快速自助建网站 易启建站网免费提供建站平台，商业网站1年仅60元HTML教程Here is some Hebrew text v/body

24、v/html6.5.5块引用:Here comes a long quotati on:This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotati on. This is a long quotati on.Here comes a short quotati on:This is a short quotatio nWith the block quote eleme nt, the browser in serts line breaks and m

25、argins, but the q eleme nt does not ren der as anything special.第7章HTML链接7.1连接9 HTML使用超级链接来连接到网络上的其他页面Created by YYMPage 29 of 42This text is a link to a page on this Web site. v/pa href=This text is a link to a page on the World Wide Web. v/body图片作为链接：Www .17jzwcomlYou can also use an image as a li

26、nk:Www.17bzwcri7.2锚标签和href 属性_ .丄99t军接到锚，在URL地址的后面加一个“ #”和这个锚的名字:w用w以后，可以. 链1直接7jz个 wname属性用来创建一个命名的锚。创建一个锚的语法：TextWww .T7jzw.c nSee also Chapter 4.Chapter 1This chapter expla ins ba bla blaPage 16 of 42Created by YYM标准资料收藏家 wWW47bZW.cn易启标准网免费提供十万标准书籍资料下Chapter 2vpThis chapter expla ins ba bla bla C

27、hapter 3This chapter expla ins ba bla bla Chapter 4 This chapter expla ins ba bla bla Chapter 5This chapter expla ins ba bla bla Chapter 6This chapter expla ins ba bla bla Chapter 7This chapter expla ins ba bla bla Chapter 8This chapter expla ins ba bla bla Chapter 9This chapter expla ins ba bla bla

28、 Chapter 10This chapter expla ins ba bla bla Chapter 11This chapter expla ins ba bla bla Chapter 12This chapter expla ins ba bla bla Chapter 13This chapter expla ins ba bla bla Chapter 14This chapter expla ins ba bla bla Chapter 15This chapter expla ins ba bla bla Chapter 16This chapter expla ins ba

29、 bla bla Chapter 17This chapter expla ins ba bla bla v/body什么情况下使用锚？7.3邮件链接：This is a mail li nk:Send MailNote：v/b Spaces betwee n words should be replaced by %20 to e nsure that the browser will display your text properly.wWw .17jzw .comlbla nkVisit W3Schools!7.4 target 属性Visit W3Schools!www.17BZwc

30、ri_pare nt练习第8章HTML表格 wwwljwcn 表格边框border属性9 表格被划分为行（使用tr标签）9 每行又被划分为数据单元格（使用td标签）Row 1, cell 1 Row 1, cell 2 Page 18 of 42Created by YYM标准资料收藏家 www4ZbZ易启标准网免费提供十万标准书籍资料下Row 2, cell 1Row 2, cell 28.1表格头使用标签指定vtable border=1Head in gA no ther Headi ngv/throw 1, cell 1row 1, cell 2row 2, cell 1row 2,

31、cell 28.2有标题的表格：This table has a capti on,and a thick border:My Capti on100200300400500600 v/tr v/table v/body v/html8.3美化表格tFirst Row /严Www47bzwcriSec on d RowA background image:f丄:www un d=|magS/bjeSZjpgGtFirstRowtdR www17jzwcn 8.4 frame 属性Page 20 of 42Created by YYM标准资料收藏家 wWW4Z易启标准网免费提供十万标准书籍资料下

32、HTML教程If you see no frames around the tables in these examples, your browser is too old, or does not support it.With frame=border：v/h4FirstRowSec on dRowWith frame=box：v/h4FirstRowSec on dRowWith frame=void：v/h4FirstRowSec on dRowWith frame=above:FirstCreated by YYMPage 33 of 42Rowv/trSec on dRowv/t

33、ableWith frame=below：v/h4Www.17jzwcomSec on dRowWww47bzwcnlamEFirsttdRowtWv/tabWith frame=vsides：v/h4Www17jzwcnFirstRowtablSec on dRowWith frame=lhs: vtable frame=lhsPage 22 of 42Created by YYM标准资料收藏家 易启标准网免费提供十万标准书籍资料下FirstRowSec on dRowv/tableWith frame=rhs：v/h4FirstRowSec on dRowv/body练习：题目：你自己的个

34、人简介是表格形式的吗， 编写一个可以发表在个人网站上的个 人简介表。第9章HTML列表z HTML支持有序、无序和自定义列表9.1无序列表z 无序列表是一个项目的序列。z 各项目前加有标记（通常是黑色的实心小圆圈） z 无序列表以ul标签开始。z 每个列表项目以Vli开始。ulHTML教程CoffeeMilk在浏览器中显示如下:? Coffee? Milk9.2有序列表z 有序列表以ol标签开始。z 每个列表项目以Vli开始。type可以指定为A、a、1、i、Isw有前加是数字作目的1列z 有序列表以ol标签开始。:www Milk在浏览器中显示如下:W9.3自定义列表1. CoffeeCre

35、ated by YYMPage 35 of 42n ame zhangsan score 100自定义列表不是一个项目的序列，它是一系列条目和它们的解释有序列表以ww开始，自1义7jzw始,c义列表勺定义Page 24 of 42Created by YYM标准资料收藏家 易启标准网免费提供十万标准书籍资料下练习:你的个人简介表中，在个人经历描述内容中使用列表是否可以使你的逻辑更清 晰，更有条理。第10章HTML图像z Img标签和src属性z 在HTML里面，图像是由标签定义的。z 是空标签，它只拥有属性，而没有结束标签。z src属性的值是所要显示图像的 URL。z 插入图像的语法：如：1

36、0.1alt 属性alt属性用来给图像显示一个“交互文本” 。alt属性的值是由用户定义的。“alt”属性在浏览器装载图像失败的时候告诉用户所丢失的信息，此时，浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上 alt属性是一个好习 惯，它有助于更好地显示信息，而且，对纯文本浏览器很有用。10.2对齐图像：An imagein the textAn imagein the textHTML教程An imagevimg src=./images/xhtml.gif align=top width=100 height=50in the textNote that bottom alig

37、nment is the default alig nmen tAn imagein the textWwwfeiTzwcomAn image after the textvimg src=./images/xhtml.gif width=100 height=50Www47bzwcri10.3图像导航:vWwwJTjzwnetClickimg varea shape=circle coords=124,58,8 alt=Ve nu s href=ve nus.htm pn one of the planets to watch it closer:src=./images/pla nets.gif widd=pjanetmbpaAe=pla netmaIhape=rlctlfcodidsi0eght=126 usemap=#pla netmac&p会打字、5分钟快速自助建网站 易启建站网免费提供建站平台，商业网站1年仅60元Note: We use both an id and a n ame attribute in the map tag because some versi ons of Netscape dont un dersta nd the id attribute.Page 26 of 42Cre