1 / 52

HTML

HTML. HTML 语法概述 文本语法 图片语法 超链接语法 表格语法 表单语法 框架语法. *HTML 语法概述. 网页的基本结构. 菜单栏. 标题栏. 地址栏. 页面内容. 状态栏. HTML 的编写方法. 1.手工直接编写：由于 HTML 语言编写的文件是标准的 ASCII 文本文件，所以可以使用任意一个文本编辑器来打开并编写 HTML 文件，如记事本。 2.使用可视化软件： Microsoft 公司的 Frontpage、adobe 公司的 dreamweaver 等软件均能以可视化的方式进行网页的编辑制作。

sagira
Download Presentation

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. HTML

  2. HTML语法概述 文本语法 图片语法 超链接语法 表格语法 表单语法 框架语法

  3. *HTML语法概述 • 网页的基本结构 菜单栏 标题栏 地址栏 页面内容 状态栏

  4. HTML的编写方法 • 1.手工直接编写：由于HTML语言编写的文件是标准的ASCII文本文件，所以可以使用任意一个文本编辑器来打开并编写HTML文件，如记事本。 • 2.使用可视化软件：Microsoft 公司的Frontpage、adobe公司的dreamweaver等软件均能以可视化的方式进行网页的编辑制作。 • 3.由web服务器一方实时动态生成：这需要进行后端的网页变成来实现，如ASP、PHP等，一般情况下都需要数据库的配合。

  5.   HTML文件的基本结构 <html>以 <html> 开头 <head> <title>文件标题</title> :表头区 </head> <body> : :主体区 </body> </html>以 </html> 结尾 这部分包括标题和其他说明信息。包括在 <HEAD>…</HEAD>标签内 这部分包含文本、图像和链接。它包括在 <BODY>…</BODY>标签内 <HTML>…</HTML>标签标记 HTML 文档的开始和结束

  6. 编写的注意事项： 1）“<”“>”是所有标记的开始和结束，元素的标记要用这种括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。 2）标记与标记之间可以嵌套。 3）在源代码中不区分大小写，<head>,<HEAD>,<Head>都是正确的。 4）回车键和空格键在源代码里不起作用。 5）HTML标记中可以放置各种属性。 6）如果需要在源代码中添加注释，便于代码阅读，可以以“<！--”开始，以“-- > ”结束。

  7. HTML的基本语法 HTML的标注格式 • 通常HTML的标注是以成对的方式出现的，其格式如下： ＜标注名称 「属性名称＝参数(value)…]> …内容… ＜/标注名称＞ • 凡是在 <标注> 和 </标注＞ 之见的内容均会受到这个标注的影响 • 但是有少部份的标注，加上结尾标注反而觉得累赘，因此在习惯上也有不加结尾标注的。

  8. 基本语法 HTML语法：<HTML>…</HTML> 说明：宣告此文件为HTML文件与结束HTML文件. HEAD语法：<HEAD></HEAD> 说明：标示HTML文件标头的开始与结束，可省略不写. 标题语法：<TITLE>…</TITLE> 说明：用来设定HTML文件的标题名称，这个标题会在浏览器的左上方显示出来.

  9. HTML中的文本的语法 1.文字颜色表示法 COLOR=“#RRGGBB”，R、G 、B=0～F 2.字体大小变化 设定字体的大小，通常用于标题处。 语法： <Hi>…</Hi>，I=1…6, <H1></H1>是最大的字，<H6></H6>是最小的字。 设定字体的大小，通常用于文字变化。 语法：<FONT>…</FONT> 属性： 文字大小：SIZE=“n”，n=1…7

  10. 3.字体样式 设定字体样式 语法：<B>…</B> 说明：这对标签是用来将表示符号内的文字以粗体字显示。 语法：<I>…</I> 说明：这对标签是用来将表示符号内的文字以斜体字显示。 语法：<U>…</U> 说明：这对标签是用来将表示符号内的文字以有加底线的 文字显示

  11. 属性 描述 <Hn ALIGN=LEFT>……</Hn> 标题居左对齐 <Hn ALIGN=CENTER>……</Hn> 标题居中对齐 <Hn ALIGN=RIGHT>……</Hn> 标题居右对齐 4.标题字的对齐属性 • 语法：Align属性见下表： 标题字的对齐属性

  12. 属性 描述 Face 字体 Size 字号 Color 颜色 5.字体标记 基本语法：<FONT>标记 <FONT>标记属性

  13. 6.段落标记 在HTML语言中，有专门的标记表示段落。所谓段落，就是一段格式上统一的文本。在文档窗口中，每输入一段文字，按下回车键后，就自动生成一个段落。按下回车键的操作通常被成为硬回车，可以说，段落就是带有硬回车的文字组合。在HTML中，段落主要由标记<p>定义。 基本语法: <p>…</p> 使用成对的<p>标记来包含段落 …<p>使用单独的<p>标记来划分段落 段落标记的对齐属性Align 基本语法：<p align=left>…</p> <p align=center>…</p> <p align=right>…</p>

  14. 7.换行标记<br> 基本语法： <br>一个换行使用一个<br>，多个换行可以连续使用多个<br>标记。 不换行标记： <nobr>……</nobr>

  15. 8.水平线标记<hr> 水平线自身具有很多属性，宽度、高度、颜色、排列对齐 基本语法： <hr width=value size=value noshade color=value align=value> … </hr>

  16. 9.HTML中的列表语法 HTML提供一些列表式的卷标可以做出简单列表。 有编号列表(Ordered List) 基本语法： <OL> <LI>文字序列一 <LI>文字序列二 … </OL> 说明：在每一个序列之前自动加上由1.开始的数字编号.

  17. 无编号列表（Unordered List） 语法： <UL> <LI>有序文字一 <LI>有序文字二 … </UL> 说明：在每一个序列之前自动加上‧的符号.

  18. 叙述式列表(Definition List) 语法： <DL> <DT>文字或<DD>文字 … </DL> 说明：简单的项目格式编排，使用<DT>可以让字不缩排以表示为上一层， <DD>会让字往右缩排表示成下一层

  19. 背景语法：<BODY>…</BODY> 背景图片：BACKGROUND=”图片所在之URL” 背景颜色：BGCOLOR=”#RRGGBB”，R、G、B=0～F 文字颜色：TEXT=”#RRGGBB”，R、G、B=0～F 超连接颜色：LINK=”#RRGGBB”，R、G、B=0～F 浏览器超连接颜色：VLINK=”#RRGGBB”， R、G、B=0～F 使用中超连接颜色：ALINK=”#RRGGBB”， R、G、B=0～F

  20. HTML中图片的相关语法 1.基本语法： <IMG SRC=“图片URL” Alt=“替代文字” Width=* Height=* Border=* Vspace=* Hspace=* Align=* > …… </IMG>

  21. –属性： –SRC = “图片名称” –Alt 是为了在浏览器中指定代替图片显示的文字。 –Width 宽度 –Height 高度 –Border 边框 –Vspace 垂直间距 –Hspace 水平距离 –Align 排列 2.图片的超链接

  22. HTML中的超链接语法 • 基本语法： ＜标注名称 「属性名称＝参数…」>内容＜/标注名称＞ <A HREF=” ” name=“ ” title=“ ” target=“ ” >…</A> 定义了链接指向目标的打开方式,有四种打开方式. 给链接命名，多用于锚点连接中 定义了提示字符，对图片超链接很有用 定义了链接指向的地址。这个地址通常为 一个Web页面，但也可以是一幅图片，一个多媒体文件，一个office文档，一个电子邮件地址或一个程序。 TARGET属性 打开方式 _self 在链接所在的当前窗口中打开 _blank 在一个新窗口中打开 parent 在父框架中打开 top 在整个浏览器的窗口中打开

  23. 外部链接-绝对路径：http://www.sina.com.cn内部链接-相对路径:news/default.htm外部链接-绝对路径：http://www.sina.com.cn内部链接-相对路径:news/default.htm 绝对路径对文件提供完全的路径，包括适用的协议， 当链接到其他网站的文件时，必须使用绝对路径。 这种地址形式利用的是构建链接的两个文件之间的相对关系，不受站点文件夹所处服务器位置的影响,因此这种书写形式省略了绝对地址中的相同部分。这样做有他的好处：站点文件夹所在的服务器地址发生改变时，文件夹的所有内部链接都不会出问题。

  24. 相对路径的使用方法： • 如果链接到同一目录下，则只需要输入要链接文档的名称：href=“a.htm” • 要链接到下一级目录中的文件，只许先输入目录名，然后加“/”，再输入文件名: href=“book/news.htm” • 如链接到上一级目录中的文件，则先输入“../”，再输入目录名，文件名:href=“../news/index.htm”

  25. Root folder Index.html Photo album Birthday album second.html 根文件夹相对链接 /photoalbum/birthdaysalbum/second.html WWW 文档的相对链接 ../schoolalbum.htm schoolalbum.html 绝对链接http://www.mypersonalsite.com/photoalbum/birthdaysalbum/second.html 文档相对链接birthdaysalbum/second.html

  26. 标记 描述 <table>…</table> 表格标记 <tr>…</tr> 行标记 <td>…</td> 单元格标记 HTML中的表格语法 表格标记

  27. 表格标题 表格 列 列标题 单元格 行 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像

  28. 基本语法： <table> <tr> <td>…</td> …… </tr> …… </talbe>

  29. 创建表格 <HTML> <HEAD> <TITLE>使用表格</TITLE> </HEAD> <BODY> <TABLE BORDER = 2 > <TR> <TD>姓名</TD> <TD>性别</TD> <TD>分数</TD> </TR> <TR> <TD>Robert</TD> <TD>M</TD> <TD>80</TD> </TR> ....... </TABLE> </BODY> </HTML> <TABLE>代表表格的开始，border=2表示边框尺寸为2 <TR>表示行，这是表格的第一行，有三列数据，<TD>代表列 表格的第二行，有三列数据 表格的第三行，也有三列数据

  30. 表格的标题 <BODY> <TABLE BORDER = 2> <CAPTION align=top>学员档案信息</CAPTION> <TR> <TH>姓名</TH> <TH>性别</TH> <TH>分数</TH> </TR> <TR> <TD>Robert</TD> <TD>M</TD> <TD>80</TD> </TR> ....... </TABLE> </BODY> </HTML> <CAPTION>表示表格标题 <TH>表示行或列标题，粗体显示 表格的第二行，有三列数据 表格的第三行，有三列数据

  31. 表格的对齐方式 整个表格居中 <BODY> <TABLE border=2 align=center> <CAPTION align=top>学员档案信息</CAPTION> <TR> <TH>姓名</TH> <TH align="center">性别</TH> <TH align="right">分数</TH> </TR> <TR> <TD>Robert</TD> <TD align="center">M</TD> <TD align="right">80</TD> </TR> ....... </TABLE> </BODY> </HTML> 姓名列默认左对齐 性别列居中 分数列右对齐

  32. <BODY> <TABLE BORDER = 2 ALIGN = CENTER> <CAPTION>创建表格 </CAPTION> <TH COLSPAN = 3>第一学期</TH> <TH COLSPAN = 3>第二学期</TH> <TR> <TD>数学</TD> <TD>科学</TD> <TD>英语</TD> <TD>数学</TD> <TD>科学</TD> <TD>英语</TD> <TR> <TD>98</TD> <TD>95</TD> <TD>80</TD> <TD>95</TD> <TD>87</TD> <TD>88</TD> .... 合并单元格(跨列) COLSPAN=“n”属性表示跨多少列

  33. <BODY> <TABLE BORDER = 1, align = center> <CAPTION><b>创建表格<b></CAPTION> <TR> <TH></TH> <TH></TH> <TH>螺母</TH> <TH>螺栓</TH> <TH>锤子</TH> <TR> <TD ROWSPAN = 3>第一季度</TD> <TD>一月</TD> <TD>2500</TD> <TD>1000</TD> <TD>1240</TD> <TR> <TD>二月</TD> <TD>3000</TD> <TD>2500</TD> <TD>4000</TD> <TR> ..... 合并单元格(跨行) ROWSPAN=“n” 属性表示跨多少行

  34. 学员档案信息 姓名 性别 分数 Robert M 80 Mary F 18 表格的背景色和尺寸设置 <BODY> <TABLE border=0 align=center width=50%> <CAPTION align=top>学员档案信息</CAPTION> <TR bgcolor="#00FFFF"> <TH align="left">姓名</TH> <TH align="center">性别</TH> <TH align="right">分数</TH> </TR> <TR bgcolor="#FFFF00"> <TD>Robert</TD> <TD align="center">M</TD> <TD align="right">80</TD> </TR> <TR bgcolor="#FFFF00"> <TD>Mary</TD> <TD align="center">F</TD> <TD align="right">18</TD> </TR> </TABLE> 表格的尺寸设置： <TABLE width=n1 height=n2> 例如： <TABLE width="200" height="100"> 表示一个长为200像素，宽为100像素的表格。 <TABLE width=20% height=10%> 表示一个宽为窗口的20%，高为窗口的10%的表格。 表格的颜色设置： 　　表格的背景色 <TABLE bgcolor=颜色值> 　　行的背景色　<TR bgcolor=颜色值> 列的背景色 <TD bgcolor=颜色值> 颜色值可以采用 RGB（red/green/blue）红绿蓝十六进制值表示，如红色#FF0000, 或是一些预定义色彩名称：red ，blue，yellow等。

  35. 课堂测验:请编写HTML代码

  36. HTML中的表单语法 1.表单标记<FORM> 表单要以<FORM>标记开始，以<FORM>标记结束。 表单的各种元素及它们的属性都要放在这两个标记之间。 <FORM METHOD=“METHOD” ACTION=“URL” NAME=“FORM-NAME”> …… </FORM>

  37. 属性： NAME ：表单的名称。 METHOD :定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。 ACTION ：用来定义表单处理程序（一个ASP、CGI等程 序）的位置（相对地址或绝对地址） <FORM>标记内的标记：<INPUT>，<TEXTAREA>， <SELECT>,<OPTION>。

  38. TYPE 表单控件类型 TYPE 表单控件类型 Text 单行文本框 submit 提交按钮 Password 密码输入框 Reset 重置按钮 Checkbox 复选框 File 上传按钮 Radio 选项按钮 Hidden 隐藏按钮 button 普通按钮 image 图象按钮 2.输入标记<INPUT> VALUE属性和NAME属性分别给出了控件取值和控件名称。 <INPUT>标记的TYPE属性见下表：

  39. BUTTON（按钮） <INPUT name="button1" type="submit" value="提交"> <INPUT name="button2" type="reset" value="重置"> <INPUT name="button3" type="button" value="普通按钮">

  40. 单选按钮和复选框 性别：<INPUT TYPE=radio NAME=”sex” VALUE=”male”>男性 <INPUT TYPE=radio NAME=”sex” VALUE=”male”>女性 你喜欢以下哪些明星： <br> <input type="Checkbox" name="id1" value="Noriko_Sagai">酒井法子 <input type="Checkbox" name="id2" value="Leon">郑秀文 <input type="Checkbox" name="id3" value="BonJovi" checked>BonJovi

  41. TEXT（文本） 身份证号<input type="Text" name="PID" value="" size="20" maxlength="18"> 密 码： <INPUT type=password value=“” name=“pass" size=15> <TEXTAREA name=“textarea” clos="20" rows="5" >请填写您的工作经历</TEXTAREA>

  42. 3.文字域标记<TEXTAREA> 这个标记用来制作多行的文字域，可以在其中输入更多的 文本。 基本语法: <textarea name=”name” rows=value cols=value value=”value”> </textarea> 属性： name：文字域的名称 rows：文字域的行数 cols：文字域的列数 value：文字域的默认值

  43. <BODY bgColor="#ccccff" Text="#000099"> <FORM ACTION="http://www.com.cn" METHOD="POST"> <B><H2 align="left">2004 年欧锦赛</H2></B> <P><B>预测“最佳球员”</B></P><P> <INPUT TYPE="RADIO" NAME="myradio“ VALUE="0">Ronaldo <INPUT TYPE="RADIO" NAME="myradio" VALUE="1">Beckham <INPUT TYPE="RADIO" NAME="myradio" VALUE="2">Zidane </P><P><B>预测大赛亚军</B></P><P> <INPUT NAME="mybox2" TYPE="CHECKBOX" VALUE="0">巴西 <INPUT NAME="mybox" TYPE="CHECKBOX" VALUE="1">法国 <INPUT NAME="mybox3" TYPE="CHECKBOX" VALUE="2">阿根廷 <BR></P><P><B>预测谁将成为 2004 年欧锦赛冠军？</B></P><P> <INPUT NAME="text1“ TYPE="TEXT" SIZE="30" MAXLENGTH="30"></P><P> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="提交"> <INPUT TYPE="RESET" NAME="Reset" VALUE="重置"></P> </FORM> </BODY> 阅读代码，请问网页中的显示结果？

  44. 下拉菜单 • <B>谁是 2002 年世界杯冠军？</B> • <SELECT NAME =“myselect"> • <OPTIONSELECTED>西班牙</OPTION> • <OPTION>法国</OPTION> • <OPTION>巴西</OPTION> • <OPTION>德国</OPTION> • </SELECT> 列表选项

  45. 4.菜单和列表标记<SELECT>,<OPTION> 菜单是一种最节省空间的方式，正常状态下只能看到 一个选项，单击按钮打开菜单后才能看到全部选项。 列表可以显示一定数量的选项，如果超出了这个数量， 会自动出现滚动条，浏览者可以通过拖动滚动条来查看各 选项。 基本语法： <Select name =”name” size=value multiple> 〈option value=”value” selected〉选项 〈option value=”value” selected〉选项 …… </select>

  46. 属性： name：菜单和列表的名称 size：显示的选项的数目 multiple：列表中的项目多选 value：选项值 selected：默认选项

  47. 框架 广告栏顶部框架(top.htm) 商品导航 左侧 框架(left.htm) 商品详细介绍右侧框架(main.htm)

  48. 框架 顶部窗口显示广告 top.htm 显示详细内容 main.htm 左侧窗口显示 导航链接 left.htm

  49. HTML中的框架语法 1.<FRAMESET>基本语法： <HTML> <HEAD><TITLE>...</TITLE> </HEAD> <FRAMESET 属性><FRAME SRC=“第一个小视窗所要读入的HTML 档案”><FRAME SRC=“第二个小视窗所要读入的HTML 档案”>... </FRAMESET> </HTML>

  50. 2.属性设置 COLS：垂直切割画面，可以一次切成左右两个画面，也可以切成三个， COLS=“30,*,50” （数字随便自己调），依此类推，四个以上当然就是四组数字！其值可以用像素、分比、相对长度来定义，“* ”表示剩下的部分。 ROWS：就是横向切割画面，也就是将画面上下分开，切法同上。 Scrolling：设定是否要显示卷轴，YES是要显示卷轴，NO是无论如何都不要显示，AUTO是视情况显示。

More Related