1 / 23

第 2 章 HTML 基础

第 2 章 HTML 基础. 内容简介：. 2.1 HTML 概述 2.2 文本格式应用 2.3 嵌入多媒体 2.4 创建表单 2.5 创建表格 2.7 嵌入小程序 2.8 编写第一个简单网页. 2.1 HTML 概述. 2.1.1 基本概念 1 ． HTML 简介 2 ． HTML 与 XML 的关系 2.1.2 基本格式 1. 头部 <head>…</head> 2. 主体 <body>…</body>. 2.2 文本格式应用. 2.2.1 文字标记 1 ．标题文字 <h# align=" 对齐 ">...</h#>

hamlin
Télécharger la présentation

第 2 章 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. 第2章 HTML基础

  2. 内容简介： • 2.1 HTML概述 • 2.2 文本格式应用 • 2.3 嵌入多媒体 • 2.4 创建表单 • 2.5 创建表格 • 2.7嵌入小程序 • 2.8 编写第一个简单网页

  3. 2.1 HTML概述 • 2.1.1 基本概念 • 1．HTML简介 • 2．HTML与XML的关系 • 2.1.2 基本格式 • 1.头部 <head>…</head> • 2.主体 <body>…</body>

  4. 2.2 文本格式应用 • 2.2.1文字标记 • 1．标题文字 <h# align="对齐">...</h#> 2．字体样式 （1）<basefont size=# face="字体名称" color="颜色">…</basefont> （2）<font size=# face="字体名称" color="颜色">...</font> （3）<small>...</small> （4）<big>…</big>

  5. （5）<b>…</b> （6）<em>…</em> （7）<strong>...</strong> （8）<i>...</i> （9）<pre width=#>…</pre> （10）<u>...</u> （11）<strike>...</strike> （12）<sub>...</sub> （13）<sup>...</sup> （14）<br> （15）<nobr>…</nobr> （16）<center>…</center> （17）<hr size=# width=# align="对齐方向" color="颜色" noshade> （18）<!--…--> （19）特殊字元表示法

  6. 2.2.2段落标记 • <p align="对齐方向"> • 2.2.3列表标记 • 1．目录式清单 • <dir> • <li>项目1 • <li>项目2 • <li>项目3 • </dir> • 2．选项式清单 • <menu> • <li>项目1 • <li>项目2 • <li>项目3 • </menu>

  7. 3．无序号的清单 • <ul type="项目符号样式" plain warp="排列方式"> • <li>项目1 • <li type="项目符号样式">项目2 • <li>项目3 • </ul> • 4．有序号清单 • <ol type="序号类型" start="序号起始值"> • <li>项目1 • <li type="序号类型">项目2 • <li value="指定值">项目3 • </ol>

  8. 5．定义式清单 • <dl compact > • <dt>项目1 • <dd>项目1说明 • <dt>项目2 • <dd>项目2说明 • <dt>项目3 • <dd>项目3说明 • </dl>

  9. 2.2.4超链接标记 • <a href="URL" target="窗口名称">…</a> • 1．外部链接 • <a href=http://www.sina.com.cn target=_blank>新浪（互联网上的位置）</a> • <a href=E:\Mine\网页设计与制\second.htm>当前目录下文件名为second.htm的网页（本地计算机位置）</a> • 2．内部链接 • <a href="档名#名称">...</a> • … • <a name="名称">…</a>

  10. 2.3 嵌入多媒体 • 2.3.1嵌入图像 • 1．简单嵌入图像 • <img src="图像文件名" lowsrc="低解析度图形文件名" border=# width=# heighth=# vspace=# hspace=# align=对齐 alt="注释"> • 2．影像地图（Image Map） • <img src="图形文件名" usemap="#图的名称"> //插入图像 • <map name="图的名称"> //定义地图使用的图像 • <area shape=形状 coords=区域座标列表 href="连结点之URL"> //定义地图的热点区域 • <area shape=形状 coords=区域座标列表 href="连结点之URL"> • <area shape=形状 coords=区域座标列表 href="连结点之URL"> • </map>

  11. 2.3.2嵌入背景音乐 • <bgsound src="andy.mp3" autostart=true loop=#> • 2.3.3嵌入流动文字 • <marquee align="对齐" behavior="行为名称" bgcolor=# direction="流动方向" height=# width=# hspace=# vspace=# loop=# scrollamount=# scrolldely=# onmouseout=this.start() onmouseover=this.stop()>…</marquee>

  12. 2.3.4嵌入动画和多媒体文件 • <embed src="文件名称" width=# height=# autostart=boolean loop=boolean hidden=true或者no quality="高或者低" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">

  13. 2.4 创建表单 • 2.4.1表单 • <form action="CGI程序的URL"或"mailto:电子信箱的URL" method="get或post" name=表单名> • 2.4.2文本框 • <form action="URL" method="post"> • … • <input type=text name=名称 value=字符串size=# maxlength=#> • … • </form>

  14. 2.4.3密码框 • <input type=password name=名称 value=字符串size=# maxlength=#> • 2.4.4编辑框 • <textarea name=名称 cols=# rows=# wrap=off或virtual>预设文字</textarea> • 2.4.5文件输入框 • <input type=file name=名称 size=# value=文件路径> • 2.4.6 隐藏域 • <input type=hidden name=名称 value=字符串>

  15. 2.4.7命令按钮 • <input type=button name=名称 value=字符串> • 2.4.8重置按钮 • <input type=reset name=名称 value=字符串> • 2.4.9提交按钮 • <input type=submit name=名称 value=字符串> • 2.4.10图像按钮 • <input type=image name=名称 src=图像文件名 align=对齐方式> • 2.4.11单选按钮 • <input type=radio name=名称>单选按钮标题1 • <input type=radio name=名称 [checked] >单选按钮标题2

  16. 2.4.12复选按钮 • <input type=checkbox name=名称 [checked]>复选按钮标题1 • <input type=checkbox name=名称 [checked] >复选按钮标题2 • 2.4.13组合框与列表框 • <select name=名称 size=# [multiple]> • … • <option value="传回值" [selected]> </option> • <option value="传回值" [selected]> </option> • … • </select>

  17. 2.5 创建表格 • 2.5.1在网页中插入简单表格 • <table border=# cellspacing=# cellpading=# width=# height=# bgcolor=颜色 background=文件名 bordercolor=颜色> • <caption align=标题位置>...</caption> • <tr align=对齐方式 bgcolor=颜色 height=#><th align=对齐方式bgcolor=颜色background=文件名 width=# rowspan=# colspan=#>…</th> <th>…</th>……</tr> • <tr><td align=对齐方式bgcolor=颜色background=文件名 width=# rowspan=# colspan=#>…</td> <td>…</td>……</tr> • <tr><td >…</td><td>…</td>……</tr> • … • </table>

  18. 2.5.2使用表格对网页版面进行控制 • <table width=100% height=100% border=0> • <tr bgcolor=#ffee80 height=20%> • <td colspan=3></td> • </tr> • <tr height=60%> • <td bgcolor=#ffeef0></td><td bgcolor=#ffee80> • <table width=100%> • <tr bgcolor=#ffe08f height=40><td></td><td></td></tr> • <tr bgcolor=#ff0000 height=60><td colspan=2></td></tr> • </table> • </td><td bgcolor=#ffee40></td> • </tr> • <tr bgcolor=#ffee80 height=20%> • <td colspan=3></td> • </tr> • </table>

  19. 2.6 框架 • <frameset rows=# cols=#> • <frame src=文件名 name=视窗名称 marginheight=# marginwidth=# scrolling=yes或no [noresize] > • … • <frameset rows=# cols=#> • <frame src=文件名 name=视窗名称 marginheight=# marginwidth=# scrolling=yes或no [noresize] > • … • </frameset> • … • </frameset>

  20. 2.7嵌入小程序 • 2.7.1嵌入VBScript小程序 • 1．在程序头部中嵌入小程序 • <Script language=VBScript> • Sub object_on#event() • … • End sub • </Script> • 2．在程序主体部分嵌入小程序 • <Script language=VBScript> • … • </Script> • 或： • <Script> • … • </Script>

  21. 3．在头部中嵌入小程序，在主体部分运行 • 在程序头部中写如下程序段： • … • <Script Language=VBScript> • Sub func() • Msgbox "欢迎光临" • End sub • </Script> • … • 在主体部分下如下代码： • … • <Script> • Call func() • </Script> • …

  22. 2.7.2嵌入JavaScript小程序 • 在程序头部中嵌入如下程序代码： • … • <Script Language=JavaScript> • function func(p1) • { • alert(p1); • } • </Script> • … • 在HTML程序主体部分通过以下代码嵌入一个文本框和一个命令按钮： • … • <form name=frm> • <input type=text value="请输入您的姓名" name=txt> • <input type=button value="单击" name="bttn" OnClick=func(document.frm.txt.value)> • </form> • …

  23. 2.8 编写第一个简单网页 • 2.8.1网页制作前的准备 • 2.8.2利用HTML制作一个简单的网页

More Related