Overview Of HTML

1,132 views

Published on

Inroduce the basic knoeledge of HTML inChinese.

Published in: Technology
  • Be the first to comment

Overview Of HTML

  1. 1. HTML 基础 WANGYU 201012
  2. 2. HTML 基础 I
  3. 3. 基本概念 <ul><li>HTML : </li></ul><ul><li>超文本标记语言 Hyper Text Markup Language 。它不是象 C++ 和 Java 之类的程序语言,而是一种描述性语言,一种 标记语言 。 </li></ul><ul><li>URL : </li></ul><ul><li>统一资源定位器 Uniform Resource Locator 。 </li></ul><ul><li>协议名称 域名 子目录 网页文档 </li></ul><ul><ul><li>实例 </li></ul></ul><ul><ul><li>http://www.sohu.com/direc/index.htm </li></ul></ul>
  4. 4. <ul><li>XML : </li></ul><ul><ul><li>可扩展标记语言 eXtensible Markup Language 的缩写, XML 用来定义如何标记文本的一套规则,但并不描述如何显示文本。 XML 没有一套固定的标记,在 XML 中,程序员可以根据所需要的数据元素定义不同的标记。 XML 是 区分大小写 的,所有元素必须 成对 出现 (<br></br> 或 <br /> ) ,所有 属性值 必须用 英文引号 括起来。 XML 文档只有一个根标记,其它标记嵌套 其中,从而形成一棵标记树。 </li></ul></ul><ul><li>XHTML : </li></ul><ul><ul><li>是可扩展超文本标记语言 eXtensible Hypertext Markup Language 的缩写,它建立在 HTML4.0 基础上并遵循 XML 规则,是 HTML 向 XML 过渡的标记语言。 XHTML 采用 XML 严谨的语法结构。 </li></ul></ul>
  5. 5. <ul><li>打开 Dreamweaver CS3 ,新建 HTML 文档 </li></ul><ul><li>标准 XHTML 文档结构 </li></ul><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /> <title> 无标题文档 </title> </head> <body> </body> </html>
  6. 6. <ul><li>W3C : World Wide Web Consortium 万维网联合会 </li></ul><ul><li>DTD : Document Type Define 文档类型定义 </li></ul><ul><li>xmlns : XHTML 命名空间, namespace 属性 </li></ul><ul><li>UTF-8 : ( 8-bit Unicode Transformation Format )是一种针对 Unicode 的可变长度字符编码,也是一种前缀码。它可以用来表示 Unicode 标准中的任何字符,且其编码中的第一个字节仍与 ASCII 兼容,这使得原来处理 ASCII 字符的软件无须或只须做少部份修改,即可继续使用。因此,它逐渐成为电子邮件、网页及其他存储或传送文字的应用中,优先采用的编码。 </li></ul>
  7. 7. <ul><li>shtml : 使用 SSI ( Server Side Include )的 html 文件扩展名, SSI 通常称为“服务器端嵌入”或“服务器端包含”,是一种类似于 ASP 的基于服务器的网页制作技术。因为包含 SSI 指令的文件要求特殊处理,所以必须为所有 SSI 文件赋予 SSI 文件扩展名。默认扩展名是 .stm 、 .shtm 和 .shtml 。 </li></ul><ul><li>SSI 工作原理: </li></ul><ul><li>将内容发送到浏览器之前,可以使用“服务器端包含 (SSI)” 指令将文本、图形或应用程序信息包含到网页中。例如,可以使用 SSI 包含时间 / 日期戳、版权声明或供客户填写并返回的表单。对于在多个文件中重复出现的文本或图形,使用包含文件是一种简便的方法。将内容存入一个包含文件中即可,而不必将内容输入所有文件。通过一个非常简单的语句即可调用包含文件,此语句指示 Web 服务器将内容插入适当网页。而且,使用包含文件时,对内容的所有更改只需在一个地方就能完成。 </li></ul><ul><li>Web 服务器在处理网页的同时处理 SSI 指令。当 Web 服务器遇到 SSI 指令时,直接将包含文件的内容插入 HTML 网页。如果“包含文件”中包含 SSI 指令,则同时插入此文件。除了用于包含文件的基本指令之外,还可以使用 SSI 指令插入文件的相关信息(如文件的大小)或者运行应用程序或 shell 命令。网站维护常常碰到的一个问题是,网站的结构已经固定,却为了更新一点内容而不得不重做一大批网页。 SSI 提供了一种简单、有效的方法来解决这一问题,它将一个网站的基本结构放在几个简单的 HTML 文件中(模板),以后我们要做的只是将文本传到服务器,让程序按照模板自动生成网页,从而使管理大型网站变得容易。 </li></ul>
  8. 8. <ul><li>标准的 XHTML 文档需要以 DOCTYPE 标记开始,通常有以下三种类型: </li></ul><ul><li>( 1 ) 过渡类型 </li></ul><ul><li>基本格式: </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul><ul><li>说明: </li></ul><ul><li>使用过渡类型的 XHTML 文档,浏览器对 XHTML 的解析比较宽松,允许使用 HTML4.01 中的标记,但是要符合 XHTML 的语法。 </li></ul><ul><li>( 2 ) 严格类型 </li></ul><ul><li>基本格式: </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li>说明: </li></ul><ul><li>使用严格类型的 XHTML 文档,浏览器对 XHTML 的解析比较严格,不允许使用表现样式的元素和属性,提倡内容与样式分开。 </li></ul><ul><li>( 3 ) 框架类型 </li></ul><ul><li>基本格式: </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;> </li></ul><ul><li>说明: </li></ul><ul><li>如果文档使用了框架结构,就需要使用框架类型。 </li></ul>
  9. 9. 1.1 HTML 语法基础 <ul><li>1.1.1 HTML 基本结构 </li></ul>
  10. 10. <ul><li>1.1.2 HTML 文档头和文档体的基本标记 </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title> </title> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  11. 11. <head> 标记 <ul><li>( 1 ) <title> 标记 </li></ul><ul><li>基本格式: <title>…</title> </li></ul><ul><li>( 2 ) <link> 标记 </li></ul><ul><li>Link 元素定义当前页面和其它文件之间的关系。常用于外部层叠样式表( CSS 文件)的链接。 </li></ul><ul><ul><li>基本格式: </li></ul></ul><ul><ul><li>< link rel =&quot;stylesheet&quot; href =&quot;mystyles.css&quot; type =&quot;text/css&quot;> </li></ul></ul>
  12. 12. <ul><li>( 3 ) <meta> 标记 </li></ul><ul><li>META 标记用于描述当前 HTML 页面的一些文档信息,例如字符编码、作者、版权、关键字、截止日期和页面刷新间隔等。 </li></ul><ul><li>关键字 </li></ul><ul><li><meta name=&quot; keywords &quot; content=&quot;yourkeyword1 , yourkeyword2…&quot;> </li></ul><ul><li>描述 </li></ul><ul><li><meta name=&quot; description &quot; content=&quot;your homepage's description&quot;> </li></ul><ul><li>刷新 </li></ul><ul><li><meta http-equiv=&quot; refresh &quot; content=&quot;timenum; URL=new.htm&quot;> </li></ul><ul><li>编码 </li></ul><ul><li><meta http-equiv=&quot; Content-Type &quot; content=&quot;text/html; charset=gb2312&quot;> </li></ul><ul><li>作者 </li></ul><ul><li><meta name=&quot; Author &quot; content=&quot; Author name&quot;> </li></ul><ul><li>调用最新版 </li></ul><ul><li><meta http-equiv=&quot; Pragma &quot; content=&quot;no-cache&quot;> </li></ul>
  13. 13. <ul><li><title> HEAD 元素示例 </title> </li></ul><ul><li><! --网页标题 -- > </li></ul><ul><li><meta http - equiv=&quot;Content - Type&quot; content=&quot;text/html; charset=gb2312&quot;> </li></ul><ul><li><! --网页内容类型, TXT 或 HTML 格式,编码方式为 GB2312 简体中文码 -- > </li></ul><ul><li><meta name=&quot;keywords&quot; content=&quot;HEAD 元素 &quot;> </li></ul><ul><li><! -- 关键字信息为“ HEAD 元素” -- > </li></ul><ul><li><meta name=&quot;description&quot; content=&quot; 本网页用于说明 HEAD 元素的使用方法 &quot;> </li></ul><ul><li><! -- 对网站内容的进一步描述-- > </li></ul><ul><li><meta http - equiv=&quot;refresh&quot; content=&quot;5&quot;;url=&quot;index.htm&quot;> </li></ul><ul><li><! --网页在 5 秒后自动刷新,链接地址为 index.htm  -- > </li></ul><ul><li><base href=&quot;http://www.adobe.com/&quot; target=&quot;_blank&quot;> </li></ul><ul><li><! --基本链接设定,目标为弹出新页面。-- > </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;homepage.css&quot;> </li></ul><ul><li><! --调入外部样式表,链接样式表文件 &quot;homepage.css&quot;  -- > </li></ul>
  14. 14. <ul><li>( 4 ) <base> 标记 </li></ul><ul><li>base 元素用来定义当前 HTTP 文件基本 URL ,以设定文件中所有链接标记的参数默认值,其它如 ftp:// 及 gopher:// 等则不受影响。 href 参数只可填入一个相对或绝对路径,不必填入文件名称。 </li></ul><ul><ul><li>基本格式: </li></ul></ul><ul><ul><li><base href=&quot; 基本 URL&quot; target=&quot; 窗口 &quot;> </li></ul></ul>
  15. 15. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>BASE Link</title> </li></ul><ul><li><base href=&quot;http://www.adobe.com/&quot; target=&quot;_blank&quot;> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><a href=&quot;index.htm&quot;>baselink</a> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  16. 16. <body> 标记 <ul><li>( 1 ) 文字属性 </li></ul><ul><li>text :指定 HTML 页面中所有 无链接 的文字的颜色。 </li></ul><ul><li>link :指定 HTML 页面中 未进行链接的 超链接文字的颜色。 </li></ul><ul><li>alink :指定 HTML 页面 中正处于链接中的 超链接文字的颜色。 </li></ul><ul><li>vlink :指定 HTML 页面中 已链接过的 超链接文字的颜色。 </li></ul><ul><li>( 2 ) 背景属性 </li></ul><ul><li>bgcolor :指定 HTML 页面 背景色 。 </li></ul><ul><li>background :指定 HTML 页面 背景图像 ,默认该图像在页面内有平铺的属性。 </li></ul><ul><li>bgproperties :只有与 background 属性扩展一起使用才有效,若设置成 fixed ,则背景图像固定、不滚动。 </li></ul><ul><li>( 3 ) 边距属性 </li></ul><ul><li>leftmargin :指定 HTML 页面左侧页边距,单位为像素。 </li></ul><ul><li>topmargin :指定 HTML 页面顶端页边距,单位为像素。 </li></ul>
  17. 17. <ul><li>< body text=&quot;#000000&quot; link=&quot;#0000FF&quot; vlink=&quot;#0000FF&quot; alink=&quot;#FF0000&quot; background=&quot;bg1.gif&quot; bgcolor=&quot;#FFFFFF&quot; leftmargin=0 topmargin=0 bgproperties=&quot;fixed&quot;> </li></ul>
  18. 18. 1.2 文本、段落标记 <ul><li>1.2.1 文本标记 </li></ul><ul><ul><li>( 1 ) <b> 、 <strong> 粗体标记 </li></ul></ul><ul><ul><li>( 2 ) <i> 、 <em> 、 <var> 、 <cite> 、 <dfn> 斜体标记 </li></ul></ul><ul><ul><li>( 3 ) <u> 下划线标记 </li></ul></ul><ul><ul><li>( 4 ) <strike> 删除线标记 </li></ul></ul><ul><ul><li>( 5 ) <big> 字体加大标记、 <small> 缩小标记 </li></ul></ul><ul><ul><li>( 6 ) <sup> 上标记、 <sub> 下标记 </li></ul></ul>示例 2-2-1 :常用文本标记
  19. 19. <ul><li>( 7 ) <Hn> 标题标记 </li></ul><ul><li>在 (X)HTML 中,标题一共有 6 个级别: <h1> 、 <h2> 、 <h3> 、 <h4> 、 <h5> 和 <h6> 。这些标记用于定义标题字大小,即 <hn></hn> ,其中 n 的取值可以从 1 到 6 ,总共有 6 级,数字越大文字越小。每个标题标记所标示的字句将独占一个段落。 </li></ul>示例 2-2-2 :标题文字
  20. 20. <ul><li>1.2.2 段落标记 </li></ul><ul><li>( 1 ) <!-- 注释内容 --> 注释标记 </li></ul><ul><li>( 2 ) <p /> 段落标记 </li></ul><ul><ul><li><p> 有一个基本属性是 align 对齐,属性值 left 、 center 、 right </li></ul></ul><ul><li>( 3 ) <br /> 换行标记 </li></ul>示例 2-2-5 :换行标记 示例 2-2-4 :段落标记
  21. 21. <ul><li>( 4 ) <hr> 水平线标记 </li></ul><ul><ul><li>1 size 属性,设定水平线厚度 </li></ul></ul><ul><ul><li>2 width 属性,设定水平线长度(像素或者百分比) </li></ul></ul><ul><ul><li>3 align 属性,当水平线长度小于浏览器窗口宽度时,使用该属性可以设定水平线对齐方式 </li></ul></ul><ul><ul><li>4 color 属性,设定水平线颜色 </li></ul></ul><ul><ul><li>5 noshade 属性,设定水平线为平面显示 </li></ul></ul>例 2-2-6 :水平线标记
  22. 22. <ul><li>( 5 ) <pre> 预格式化标记 </li></ul><ul><li><pre> 为预格式化标记, <pre>…</pre> 成对使用。 Web 浏览器按照文档编辑时原始字符的排列方式显示。保留原始字符中输入的空格及空行。 </li></ul>示例 2-2-7 :预格式化标记
  23. 23. <ul><li>( 6 ) <div> 区块标记与 <span> 内嵌标记 </li></ul><ul><ul><li><div> 为区块标记, <span> 为内嵌标记,都是用来设定元素的布局位置,两者均成对 <div>…</div> 或 <span>…</span> 使用。 <div> 与 <span> 常用于 CSS 层级样式表,作为定义样式的容器。 </li></ul></ul><ul><ul><li>display: inline; </li></ul></ul><ul><ul><li>display: block; </li></ul></ul>
  24. 24. <ul><li>( 7 ) <center> 居中标记 </li></ul><ul><li>( 8 ) <address> 地址标记 </li></ul><ul><li>( 9 ) <blockquote> 块引用标记 </li></ul>
  25. 25. 1.3 图像标记 <ul><li>基本格式: </li></ul><ul><li>< img src=&quot;picfile-h&quot; width=num-w height=num-h hspace=dis-h vspace=dis-v border=num-bor align=&quot;pos&quot; alt=&quot;text&quot; lowsrc=&quot;picfile-l&quot;> </li></ul><ul><ul><li>align 属性 : top 、 middle 、 bottom 、 left 、 right </li></ul></ul>
  26. 26. 1.4 列表标记 <ul><li><ol> :有序列表( Ordered List ) </li></ul><ul><li><ul> :无序列表( Unordered List ) </li></ul><ul><li><li> :项目标记( Listed Item ) </li></ul><ul><li><dl> 、 <dt> 、 <dd> :定义列表( Definition List ) </li></ul>
  27. 27. <ul><li>有序列表的顺序编号方式 </li></ul><ul><li>无序列表的项目符号外观 </li></ul>
  28. 29. 1.5 超链接标记 <a> <ul><li>( 1 ) 链接至其他网页: </li></ul><ul><li><a href= &quot;urlfile&quot; target= &quot;_self&quot; > 有链接的对象 </a> </li></ul><ul><li>( 2 ) 在图像上建立超链接: </li></ul><ul><li><a href=&quot;urlfile&quot;><img src=&quot;image_name.jpg&quot; alt=&quot; 单击将链接至 urlfile&quot;></a> </li></ul><ul><li>( 3 ) 链接至电子邮件: </li></ul><ul><li><a href=&quot; mailto: name@site.com&quot;> 锚标 </a> </li></ul>
  29. 30. <ul><li>( 4 ) 锚点 (anchors) 链接 </li></ul><ul><li>设置锚点: </li></ul><ul><ul><li>先将光标移至预建立锚点的位置,输入 </li></ul></ul><ul><ul><li><a name=” 锚点名称” > </li></ul></ul><ul><li>链接锚点: </li></ul><ul><li>链接至本网页的锚点 ,格式为: </li></ul><ul><ul><li><a href=” # 锚点名称” > 预链接的文字 </a> </li></ul></ul><ul><li>链接至其他网页的锚点 ,格式为: </li></ul><ul><ul><li><a href=”url/hpage.htm# 锚点名称” > 预链接的文字 </a> </li></ul></ul>
  30. 31. <ul><li>( 5 ) 建立超链接地图 </li></ul><ul><li>< img src = &quot;img_map.gif&quot; usemap =&quot; # map_name&quot; border=0> </li></ul><ul><li>< map name = &quot;map_name&quot;> </li></ul><ul><li>< area shape = &quot;rect&quot; coords=&quot;99,54,162,166&quot; href=&quot;file1.htm&quot; alt =&quot;eg1&quot; target =&quot;_blank&quot;> </li></ul><ul><li><area shape = &quot;circle&quot; coords=&quot;267,147,30&quot; href=&quot;file2.htm&quot; alt =&quot; eg2&quot; target =&quot;_self&quot;> </li></ul><ul><li><area shape = &quot;poly&quot; coords=&quot;28,26,31,34,35,25&quot; href=&quot;file3.htm&quot; alt=&quot; eg3&quot; target =&quot;_top&quot;> </li></ul><ul><li></map > </li></ul>
  31. 32. HTML 基础 II
  32. 33. 2.1 表格标记 <ul><li><table> <tr> <td> </li></ul><ul><li><th> </li></ul><ul><li><caption> </li></ul>
  33. 34. 2.1 表格标记 <ul><li>( 1 ) <table> 表格标记 </li></ul><ul><li>基本格式: </li></ul><ul><li><table border=&quot;n&quot; width=&quot;num-w&quot; height=&quot;num-h&quot; cellspacing=&quot;num-cs&quot; cellpadding=&quot;num-cp&quot; align=&quot;h-pos&quot; background=&quot;imgfile&quot; bgcolor=&quot;#RRGGBB&quot; bordercolor=&quot;#RRGGBB&quot; bordercolorlight=&quot;#RRGGBB&quot; bordercolordark=&quot;#RRGGBB&quot;> 表格内容及参数 </table> </li></ul><ul><li>说明: </li></ul><ul><li>cellspacing 属性 </li></ul><ul><li>表格内单元格间距以及单元格边框和表格边框的间距(像素) </li></ul><ul><li>cellpadding 属性 </li></ul><ul><li>单元格内容与单元格边框间距(像素) </li></ul>
  34. 35. <ul><li>( 2 ) <tr> 行标记 </li></ul><ul><li><tr align=&quot;h-pos&quot; valign=&quot;v-pos&quot; width=&quot;num-w&quot; height=&quot;num-h&quot; bgcolor=&quot;#RRGGBB&quot;> 行内容 </tr> </li></ul><ul><li>( 3 ) <td> 普通单元格标记 </li></ul><ul><li><td align=&quot;h-pos&quot; valign=&quot;v-pos&quot; width=&quot;num-w&quot; height=&quot;num-h&quot; colspan=&quot;m&quot; rowspan=&quot;n&quot; bgcolor=&quot;#RRGGBB&quot; background=&quot;imgfile&quot;> 单元格内容 <td> </li></ul><ul><li>说明: </li></ul><ul><li>colspan :代表一个单元格内容水平方向跨了多少列; </li></ul><ul><li>rowspan :代表一个单元格内容垂直方向跨了多少行。 </li></ul>
  35. 36. <ul><li>( 4 ) <th> 标题单元格标记 </li></ul><ul><li><th> 项目标题 </th> </li></ul><ul><li>说明: </li></ul><ul><li>标题单元格标记( Table Header ) <th> 与 <td> 同样是标识一个单元格,不同的是 <th> 所标识的单元格中的文字是以粗体、居中显示,通常用于把表格的第一行或第一列作为其他单元格内容的标题 。 </li></ul><ul><li>( 5 ) <caption> 表格标题标记 </li></ul><ul><li><caption align=&quot;h-pos&quot; valign=&quot;v-pos&quot;> 表格标题 </caption> </li></ul><ul><li>说明: </li></ul><ul><li><caption> 标记必须内嵌于 <table> 标记内使用 。 </li></ul>
  36. 38. 2.2 框架标记 <ul><li><frameset> 、 <frame> </li></ul><ul><li><noframes> </li></ul>
  37. 39. 2.2 框架标记 <ul><li>( 1 )框架集文件基本格式: </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> 框架集文件 </title> </li></ul><ul><li></head> </li></ul><ul><li><frameset> </li></ul><ul><li><frame name=&quot;main-name&quot; src=&quot;frame-1.htm&quot;> </li></ul><ul><li><frame name=&quot;other-name&quot; src=&quot;frame-2.htm&quot;> </li></ul><ul><li>… </li></ul><ul><li></frameset> </li></ul><ul><li><noframes> </li></ul><ul><li>请使用支持框架的高版本浏览器 </li></ul><ul><li></noframes> </li></ul><ul><li></html> </li></ul>
  38. 40. <ul><li>说明: </li></ul><ul><li><frameset> 是框架集标记, </li></ul><ul><li><frame> 框架窗体标记, <frame> 必须嵌套在 <frameset> 中使用。 </li></ul><ul><li> 若有 n 个框架窗体,则共有 n+1 个文件( 1 个框架集文件, n 个框架文件)才能完全读取所有信息。 </li></ul>
  39. 41. <ul><li>( 2 ) <frameset> 框架集标记 </li></ul><ul><li>基本格式: </li></ul><ul><li><frameset rows=&quot;num-r,*&quot; cols=&quot;num-c,*&quot; frameborder=&quot;0&quot; border=&quot;num-b&quot; framespacing=&quot;num-s&quot; bordercolor=&quot;#RRGGBB&quot;> </li></ul><ul><li> … </li></ul><ul><li></frameset> </li></ul>
  40. 42. <ul><li>( 3 ) <frame> 框架标记 </li></ul><ul><li>基本格式: </li></ul><ul><li><frame name=&quot;name-f&quot; src=&quot;file-src&quot; marginwidth=&quot;num-mw&quot; marginheight=&quot; num-mh &quot; scrolling=&quot;Auto&quot; frameborder=&quot;0&quot; noresize framespacing=&quot;num-s&quot; bordercolor=&quot;#RRGGBB&quot;> </li></ul>
  41. 43. <frameset rows=&quot;120,*&quot;> <frame name=&quot;top&quot; src=&quot;a.html&quot;> <frame name=&quot;bottom&quot; src=&quot;b.html&quot;> </frameset>   
  42. 44. <frameset cols=&quot;100,*&quot;> <frameset rows=&quot;120,*&quot;> <frame name=&quot;upper_left&quot; src=&quot;a.html&quot;> <frame name=&quot;lower_left&quot; src=&quot;b.html&quot;> </frameset> <frame name=“right” src=&quot;c.html&quot;> </frameset>      
  43. 45.                  
  44. 46. 2.3 IFRAME 浮动帧标记 <ul><li><iframe> </li></ul>
  45. 47. 2.3 IFRAME 浮动帧标记 <ul><li>( 1 )基本格式: </li></ul><ul><li><iframe src=&quot;URL&quot; width=&quot;num-w&quot; height=&quot; num-h&quot; scrolling=&quot;auto&quot; frameborder=&quot;0&quot; name=&quot;name-iframe&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; > </li></ul><ul><li></iframe> </li></ul><ul><li>说明: </li></ul><ul><li>name 属性:设定此浮动框架的名称,常供 <a> 标记中的 target 属性引用,也可供 Flash 的 getURL() 函数中的 window 属性引用。 </li></ul>
  46. 49. <ul><li>( 2 ) 设置背景透明的浮动框架 </li></ul><ul><li>必须同时满足两个条件: </li></ul><ul><li>一、 <iframe> 标记的 allowTransparency 属性值为 true ,即 <iframe allowTransparency=“true”> </li></ul><ul><li>二、浮动框架链接的源文档的 <body> 标记的 bgcolor 属性值为 transparent ,即 <body bgcolor=&quot;transparent&quot;> </li></ul>
  47. 51. HTML 基础 III
  48. 52. 3.1 多媒体标记 <ul><li><bgsound> 播放声音 </li></ul><ul><li><embed> 播放视频、音频、 flash 动画等 </li></ul><ul><li><img> 当 <img> 标记设置了 dynsrc 属性时,也可以用于播放视频 </li></ul>
  49. 53. <ul><li>( 1 ) <bgsound> 标记 </li></ul><ul><li>基本格式: </li></ul><ul><li>< bgsound src=&quot;sound-name&quot; autostart=true loop=n> </li></ul><ul><li>(只对 IE 有效) </li></ul>示例利用框架标记和背景音乐标记创建音乐不间断跳转
  50. 54. <ul><li>( 2 ) <img> 标记 </li></ul><ul><li>基本格式: </li></ul><ul><li>< img src=&quot;url.gif&quot; dynsrc =&quot;url.avi&quot; loop=&quot;num&quot; loopdelay=&quot;num-ms&quot; start=&quot;fileopen, mouseover&quot; controls> </li></ul><ul><li>(只对 IE 有效) </li></ul>
  51. 55. <ul><li>( 3 ) <embed> 标记 </li></ul><ul><li>基本格式: </li></ul><ul><li>< embed src=&quot;multimedia-name&quot; autostart=true loop=n hidden=&quot;no&quot; starttime=&quot; 分 : 秒 &quot; volume=&quot;0-100&quot; width=&quot;num-w&quot; 和 hight=&quot;num-h&quot; align=&quot;pos&quot;> </li></ul><ul><li>说明: </li></ul><ul><li><embed> 标记用来插入各种多媒体,可以是 midi 、 wav 、 swf 、 au 等格式文件。 </li></ul>
  52. 56. <ul><li>starttime 属性 </li></ul><ul><li>用来设定多媒体开始播放的时间, </li></ul><ul><li>格式为 starttime=“ 分 : 秒”。例: starttime =“00:30” 表示从第 30 秒处开始播放。 </li></ul><ul><li>controls 属性 </li></ul><ul><li>用来设定控制画面的外观。默认值是 console 。 </li></ul><ul><li>console 一般正常的面板; </li></ul><ul><li>smallconsole 较小的面板; </li></ul><ul><li>playbutton 只显示播放按键; </li></ul><ul><li>pausebutton 只显示暂停按键; </li></ul><ul><li>stopbutton 只显示停止按键; </li></ul><ul><li>volumelever 只显示音量调整钮。 </li></ul>
  53. 57. <ul><li>( 4 ) 插入 flash 标记 </li></ul><ul><li>基本格式: </li></ul><ul><li><object width=&quot;&quot; height=&quot;&quot;> </li></ul><ul><ul><li><param name=&quot;movie&quot; value=“flash.swf&quot;> </li></ul></ul><ul><ul><li><param name=&quot;quality&quot; value=&quot;high&quot;> </li></ul></ul><ul><ul><li><param name=&quot;wmode&quot; value=&quot;opaque&quot;> </li></ul></ul><ul><li><embed src=&quot;flash.swf&quot; quality=&quot;high&quot; wmode=&quot;opaque&quot; width=&quot;&quot; height=&quot;&quot;> </li></ul><ul><li></embed> </li></ul><ul><li></object> </li></ul><ul><li>说明: object: IE / embed: NN </li></ul>
  54. 58. 3.2 表单标记 <ul><li><form > </li></ul>
  55. 59. 3.2 表单标记 <ul><li>基本结构: </li></ul><ul><li><form method=&quot;get/post&quot; action=&quot; 处理表单的程序 &quot;> </li></ul><ul><li><input type=&quot; 输入域种类 &quot; name=&quot; 输入域名称 &quot;> </li></ul><ul><li><select> <option> </li></ul><ul><li><textarea> </li></ul><ul><li></form> </li></ul><ul><li>说明: </li></ul><ul><li>( 1 ) action 将表单传给相应的接收和处理表单数据的应用程序,也可参数为 action =&quot;mailto:admin_name@email.com&quot; </li></ul><ul><li>( 2 ) get 方法将变量追加到 URL 末尾,信息长度不能超过 255 个字符,该方法用于发送少量变量; post 方法用于发送长的变量字符串。一般情况下,申请表单用 post ,而搜索引擎用 get </li></ul>
  56. 60. <ul><li>( 3 ) <input> 、 <select> 、 <textarea> 输入域标记、选择域标记、文本域标记 </li></ul><ul><li><input> 输入域标记的常见类型有: </li></ul><ul><ul><li>Text 、 Radio 、 Checkbox 、 Password 、 Image 、 File 、 Hidden 、 Button 必须至少设置 type 和 name 属性 </li></ul></ul><ul><ul><li>Submit/Reset 必须设置 type 属性 </li></ul></ul>
  57. 61. <ul><li>( 1 ) Text 单行文本域 </li></ul><ul><li>基本格式: </li></ul><ul><li><input type=“text&quot; name=&quot;name-text&quot; value=&quot;val-default&quot; align=&quot;middle&quot; size=&quot;lenth-display&quot; maxlength=&quot;num-putin&quot; /> </li></ul>
  58. 62. <ul><li>( 2 ) Password 密码域 </li></ul><ul><li>基本格式: </li></ul><ul><li><input type=“password&quot; name=&quot;name-text&quot; value=&quot;val-default&quot; align=&quot;middle&quot; size=&quot;lenth-display&quot; maxlength=&quot;num-putin&quot; /> </li></ul>
  59. 63. <ul><li>( 3 ) Radio 单选框 </li></ul><ul><li>基本格式: </li></ul><ul><li><input type =“radio&quot; name=&quot;name-radio&quot; value=&quot;val&quot; align=&quot;middle&quot; checked /> </li></ul>说明: 同组各单选项之间是互相排斥的,用户只能选择该组中的一个作为输入信息。 同组单选框中所有单选项的 name 属性值是相同的。
  60. 64. <ul><li>( 4 ) Checkbox 复选框 </li></ul><ul><li>基本格式: </li></ul><ul><li><input type =“checkbox&quot; name=&quot;name-check&quot; value=&quot;val&quot; align=&quot;right&quot; checked /> </li></ul>2-4-4 说明: 各复选项的 name 属性值不同。
  61. 65. <ul><li>( 5 ) Image 图像 </li></ul><ul><li>基本格式: </li></ul><ul><li><input type=“image&quot; name=&quot;pic&quot; align=&quot;left&quot; src=&quot;icon.gif&quot; /> </li></ul><ul><li>说明: </li></ul><ul><li>因为表单中的按键外观不一定适合网页设计的整体风格,所以在表单中插入的图像通常用来替代按键实现当用户单击图像按键时将表单输入信息传送给服务器。 </li></ul>action=&quot;http://www.baidu.com/s&quot;
  62. 66. <ul><li>( 6 ) File 文件域 </li></ul><ul><li>基本格式: </li></ul><ul><li><input type=“file&quot; name=&quot;upload&quot; align=&quot;bottom&quot; size=&quot;20&quot; maxlength=&quot;100&quot; accept=&quot;text/html&quot; /> </li></ul>
  63. 67. <ul><li>( 7 ) Button 按键 </li></ul><ul><li>基本格式: </li></ul><ul><li><input type=“button&quot; name=&quot;bt&quot; value=&quot;valshow&quot; /> </li></ul><ul><li>( 8 ) Hidden 隐藏域 </li></ul><ul><li>基本格式: </li></ul><ul><li><input type=&quot;Hidden&quot; name=&quot;hidid&quot; value=&quot;hidval&quot; /> </li></ul>
  64. 68. <ul><li>( 9 ) Submit 发送键及 Reset 重置键 </li></ul><ul><li>基本格式: </li></ul><ul><li><input type=“submit&quot; value=&quot; 确定 &quot; /> </li></ul><ul><li><input type=“reset&quot; value=&quot; 清除 &quot; /> </li></ul><ul><li>说明: </li></ul><ul><li>Submit 发送键使浏览器将表单输入信息传送给服务器; Reset 重置键用于将表单输入信息恢复到初始值。 </li></ul>
  65. 69. <ul><li>( 10 ) <textarea> 标记 </li></ul><ul><li>基本格式: </li></ul><ul><li><textarea name=&quot;comments&quot; cols=&quot;30&quot; rows=&quot;5&quot; wrap=&quot;off&quot;> … </textarea> </li></ul><ul><li>说明: </li></ul><ul><li><textarea> 是表单中的多行文本域标记,是成对使用的,首尾标记之间的内容就是此多行文本域的初始显示信息。常用于需要用户填写大量资料 。 </li></ul>
  66. 70. <ul><li>( 11 ) <select> 标记 </li></ul><ul><li>基本格式: </li></ul><ul><li><select name=&quot;sel&quot; size=&quot;num&quot; multiple id =&quot;selpic&quot; ><option value=&quot;val&quot; selected > </li></ul><ul><li>… </li></ul><ul><li></select> </li></ul>onChange=&quot;pic.src=selpic.value&quot; onChange=&quot;pic.src=sel.value&quot; 使用 name 或者 id 都可以 :
  67. 71. <ul><ul><li><input name=&quot;&quot; type=&quot;text&quot; id=&quot;&quot; /> </li></ul></ul><ul><ul><li><input name=&quot;&quot; type=&quot;radio&quot; value=&quot;&quot; /> </li></ul></ul><ul><ul><li><input name=&quot;&quot; type=&quot;checkbox&quot; value=&quot;&quot; /> </li></ul></ul><ul><ul><li><input name=&quot;&quot; type=&quot;file&quot; /> </li></ul></ul><ul><ul><li><input name=&quot;&quot; type=&quot;image&quot; src=&quot;&quot; /> </li></ul></ul><ul><ul><li><input name=&quot;&quot; type=&quot;button&quot; /> </li></ul></ul><ul><ul><li><input name=&quot;&quot; type=&quot;submit&quot; /> </li></ul></ul><ul><ul><li><input name=&quot;&quot; type=&quot;reset&quot; /> </li></ul></ul><ul><ul><li><select name=&quot;&quot;><option>...</option></select> </li></ul></ul><ul><ul><li><textarea name=&quot;&quot; id=&quot;&quot; cols=&quot;&quot; rows=&quot;&quot;></textarea> </li></ul></ul>
  68. 72. HTML 基础 IV
  69. 73. XHTML 遵循严格的语法规则 ( 部分 ) <ul><li>( 1 ) 文档中的根元素之前必须有 DOCTYPE 声明 </li></ul><ul><li>DOCTYPE 声明必须引用 XHTML 的三个文档类型定义 (DTD) 文件(严格、过渡或框架页)之一。 </li></ul><ul><li>例如: 在 XHTML 文档中添加一个 XHTML DOCTYPE 。 </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul><ul><li>( 2 ) 文档的根元素必须为 html </li></ul><ul><li>html 元素必须指定 XHTML 命名空间,将 namespace 属性添加到 html 元素,例如: </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> </li></ul><ul><li>( 3 ) 标准文档必须包含完整的结构元素 </li></ul><ul><li>标准的文档必须包含 head 、 title 和 body 结构元素。框架集文档必须包含 head 、 title 和 frameset 结构元素。 </li></ul>
  70. 74. <ul><li>( 4 ) 标记必须成对使用 </li></ul><ul><li>空元素必须有结束标记,或者开始标记必须以 /> 结束。 </li></ul><ul><li>例如: <br> 无效;正确的形式为 <br></br> 或 <br /> ( 而不是 <br/>) </li></ul><ul><li>( 5 ) 标记中属性名必须小写 </li></ul><ul><li>例如: <marquee width=“300”> ,其中 width 必须小写,不能使用 WIDTH 或者 </li></ul><ul><li>Width 。 </li></ul><ul><li>( 6 ) 属性值必须用引号括起来 </li></ul><ul><li>虽然直接填写属性值一般不会出现显示错误,但是 XHTML 规定必须使用引号把属性值括起来。 </li></ul><ul><li>( 7 ) 属性不允许简写 </li></ul><ul><li>在 HTML 表单设计中经常使用简写属性,例如设定该选项初始状态为被选中。但是 XHTML 不允许属性简写,要求必须使用完整的属性语法。 </li></ul><ul><li>例如: <td nowrap> 无效; </li></ul><ul><li>正确的形式为: <td nowrap=&quot;nowrap&quot;> </li></ul>
  71. 75. <ul><li>( 8 ) 使用 id 作为名称属性 </li></ul><ul><li>HTML 中使用的 name 属性在 XHTML 中已不推荐使用,提出用 id 作为名称属性。 </li></ul><ul><li>例如: <a name=&quot;intro&quot;>Introduction</a> 无效; </li></ul><ul><li>正确的形式为: <a id=&quot;intro&quot;>Introduction</a> 或 </li></ul><ul><li><a id=&quot;section1&quot; name=&quot;intro&quot;> Introduction</ a> </li></ul><ul><li>( 9 ) 具有枚举类型的属性值必须小写 </li></ul><ul><li>枚举类型的值是来自指定的允许值列表中的值; </li></ul><ul><li>例如: align 属性具有以下允许值: center 、 left 和 right 。 </li></ul><ul><li>( 10 ) 所有脚本和样式元素都必须具有 type 属性 </li></ul><ul><li>设置 script 元素的 type 和 language 属性, style 元素的 type 属性。 </li></ul><ul><li>( 11 ) 必须对 img 和 area 元素应用 alt 属性 </li></ul><ul><li>所有 img 和 area 元素都必须具有 alt 属性。 </li></ul>

×