1 / 29

HTML 语言培训

HTML 语言培训. 主要目标. HTML 中的一般概念 页面元素的种类 如何书写一个 HTML 页面 常用标记. HTML 是： 全称： HyperText Mark-up Language 译称：超文本标记语言。 是一套独立于平台的格式定义 是由各种标记 (Tag) 组成的标记语言 用来描述网页文档中的各个组成部分 无需编译，浏览器可直接解释 当前版本： 4.0. 基本概念：什么是 HTML. 在ＷＷＷ的世界裡，大家統一都用ＵＲＬ來說明地址 ，用来指向 Internet 上的各种资源 。

maalik
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中的一般概念 • 页面元素的种类 • 如何书写一个HTML页面 • 常用标记

  3. HTML是： 全称：HyperText Mark-up Language 译称：超文本标记语言。 是一套独立于平台的格式定义 是由各种标记(Tag)组成的标记语言 用来描述网页文档中的各个组成部分 无需编译，浏览器可直接解释 当前版本：4.0 基本概念：什么是HTML

  4. 在ＷＷＷ的世界裡，大家統一都用ＵＲＬ來說明地址，用来指向Internet上的各种资源。在ＷＷＷ的世界裡，大家統一都用ＵＲＬ來說明地址，用来指向Internet上的各种资源。 URL=Ｕniform Ｒesource Ｌocator 格式：分成兩部份，第一個部份用來指定存取方式，第二個部份用來指定位址，兩者之間以“：//”符號隔開。如下所示: scheme://host.domain[:port]/path/filename 基本概念：什么是URL

  5. 通常HTML的标记是以成对的方式出现的，其格式如下：通常HTML的标记是以成对的方式出现的，其格式如下： ＜标记名称 「属性名称＝参数…]>內容＜/标记名称＞ 凡是在 <标记>和 </标记＞ 之间的內容均會受到這個标记的影响 但是有少部份的标记，加上結尾標註反而觉得累赘，因此在习惯上也有不加結尾标记的。其格式如下： <标记名称> 标记的写法

  6. HTML的基本结构 <html> <head> <title>文件标題</title> : </head> <body> : : </body> </html> 以 <html> 开头 表头区（包含对文档内容的一些说明和引入其他资源的申明） 主体区（包含要显示的内容） 以 </html> 结尾

  7. <HTML> <HEAD><TITLE>我是標題</TITLE></HEAD> <BODY TEXT="#808080" LINK="#008000"> <Center>This is a test!!<br> <a href=“http://myhomePage”>to my homepage</a> </Center> </BODY> </HTML> 基本HTML页面示例

  8. 实体指的是HTML语言中定义的一些特殊字符。常用有以下五种：实体指的是HTML语言中定义的一些特殊字符。常用有以下五种： &nbsp; 空格 &amp; & &lt < &gt > &quot; “ 实体

  9. 一般的Web页面由主要由以下元素组成: 文本 超链接 图片 表格 输入框 按钮 多媒体效果 框架 Web页面的组成

  10. 各标记与页面元素的对应关系 • 文本－－不加标记或使用<FONT>等标识 • 超链接－－<A> • 图片－－<IMG> • 输入框－－<INPUT>、<TEXTAREA>、<SELECT> • 按钮－－<BUTTON> • 表格－－<TABLE>、<TR>、<TD>等 • 多媒体效果－－<EMBED>、<OBJECT>等 • 框架－－<FRAME>、<IFRAME>等

  11. 写法：<FONT 属性名=参数>文字</FONT>。 SIZE属性：控制字体大小。例：SIZE=2 COLOR属性：控制颜色。例：COLOR=“#ff0000” FACE属性：控制字体。例：FACE=“黑体” 字体的有效空间为1到7，或者是-1到＋5。其他值无效。效果为得到当前浏览器字体大小的基础上-1到＋5的效果。 颜色可以是16 进制RGB数码，或者是下列预定义色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 字体能否识别识客户端而定，所以应采用常用字体。 FONT标记及其主要属性

  12. <Hn></Hn>(n=1..6)：标识六种大小的字体 <U></U>：字下加下划线 <I></I>：斜体 <B></B>：粗体 <S></S>：中划线 <SUP></SUP>：上标 <SUB></SUB>：下标 <BIG></BIG>：加大一号字体 其他可控制字体的标记

  13. MARQUEE标记可以实现文字在一定范围内的跑动效果。MARQUEE内可以为一个区段，不只是文字。MARQUEE标记只有IE浏览器支持。MARQUEE标记可以实现文字在一定范围内的跑动效果。MARQUEE内可以为一个区段，不只是文字。MARQUEE标记只有IE浏览器支持。 主要属性如下： 方向 <direction=#> #=left, right 方式 <bihavior=#> #=scroll, slide, alternate 循环 <loop=#> #=次数；若未指定则循环不止(infinite) 速度 <scrollamount=#> #为每步的象素数 延时 <scrolldelay=#> #为延时的毫秒数 跑马灯效果

  14. <P></P>:段落标记 <BR>:换行 <DIV></DIV>:分区。分区内可以是任意标记。 <UL><LI></UL>:无序列表 <OL ><LI></OL>:有序列表 <dl><dt>...<dd>...</dl>:双层列表 Li的type属性： 在无序列表中，可以选择disk, circle, square三种值 在有序列表中，可以选择A, a, I, i, 1五种值 文字的布局

  15. 写法：<A 属性名称＝参数>文字</A> Href属性：链接目的。如：href=http://www.sina.com.cn Target属性：打开链接的窗口。如：Target=“NewWin” Name属性：链接的名称 Href的值会被认为是一个URL。如格式不全浏览器会字段补全。如不带域名，浏览器会默认指向当前服务器；不带目录，浏览器会默认指向当前服务器当前目录下； Target属性有以下默认值： _self:当前框架；top:当前窗口；_blank:新窗口 Name属性和Href属性可以关联使用。<A href=“#AName”>会链接到当前页面上名字为AName的链接点的位置。 A标记及其属性

  16. IMG标记及其属性 写法：<IMG 属性名＝参数> • Src属性：指向图片的URL。如:src=“/Images/1.gif” • Width属性：图片的宽度。如：width=85 • Height属性：图片的高度。如：height=80 • Border属性：图片边框的厚度。如：border=3 • Alt属性：在浏览器尚未完全读入图象时，在图象位置显示的文字。如：alt=“请稍等，正在装载图像……” • Aligh属性：跟周边文字的对齐方式。如：align=top。 Width、Height、Border等属性的值的单位为象素。 Align的选择范围：top、middle、bottom、left、right

  17. 用于输入的标记 • <Input Type=Text>：单行输入框—— • <TextArea></TextArea>：多行输入框—— • <Input Type=radio>：单选按钮—— • <Input Type=checkbox>：复选框—— • <Select><option></option></Select> 下拉框—— • <Select size=（>1的值)><option></option></Select>： 多选框——

  18. 通用属性： Name：名字 Value：值 特殊属性： 单行输入框：SIZE（长度） 多行输入框：COLS（列数），ROWS（行数） 单选框、复选框：CHECKED（表示选中）。单选框和复选框必须成组使用。 下拉框、多选框：包含子标记<OPTION>代表各选项,OPTION标记如果拥有SELECTED属性，表示该选项被选中。 输入标记介绍

  19. 按钮的表示法： <Button></Button> <Input type=Button> <Input type=submit> <Input type=Reset> 图示： 用第一种表示法的话，按钮上文字为标记间的文字；用之后的表示法的话，用INPUT标记的Value属性值作为按钮上的文字。按下按钮时所执行的动作，由按钮的onclick事件的JavaScript处理程序决定。 按钮介绍

  20. <TABLE></TABLE>表示表格的开头和结尾。 <TR></TR>表示一行的开头和结尾。 <TH></TH>表示一个列标题单元格的开头和结尾。 <TD></TD>表示一个普通单元格的开头和结尾。 例如： <TABLE border=1><TR> <TH>姓名</TH> <TH>性别</TH></TR> <TR><TD>张三</TD> <TD>男</TD></TR> </TABLE> 表格的表示

  21. Width：宽度。 Height：高度。 bgColor：背景颜色。 Align：水平相对位置。 border：边框厚度。 borderColor：边框颜色。 Cellspacing：边框线内部空白厚度。 cellpadding：单元格与边框线间空白厚度。 TABLE标记的主要属性

  22. Width：宽度。 Height：高度。 bgColor：背景颜色。 Align：水平相对位置。 Valign：垂直相对位置。 TR标记及其主要属性

  23. Width：宽度。 Height：高度。 bgColor：背景颜色。 Align：水平相对位置。 Valign：垂直相对位置。 border：边框厚度。 borderColor：边框颜色。 Colspan：单元格所跨烈数。 Rowspan：单元格所跨行数。 TD、TH标记及其主要属性

  24. 一般来说，我们会使用EMBED、OBJECT这两个标记来往网页内插入多媒体效果。这两个标记的属性与具体所用的插件有关。相同的是都会有SRC属性，指向要嵌入的文件。一般来说，我们会使用EMBED、OBJECT这两个标记来往网页内插入多媒体效果。这两个标记的属性与具体所用的插件有关。相同的是都会有SRC属性，指向要嵌入的文件。 HTML还提供以下标记用来播放多媒体效果： <BGSOUND> 播放WAV文件。 Src属性：WAV文件的URL地址。 Loop属性：播放的循环次数。 <IMG dynsrc=“URL”>播放URL指向的AVI文件。 Loop属性：播放的循环次数。 多媒体效果

  25. 如果我们有三个HTML页面，想要他们在一个页面里面显示出来，如右图所示，那么我们需要用框架来达到这个效果。代码：如果我们有三个HTML页面，想要他们在一个页面里面显示出来，如右图所示，那么我们需要用框架来达到这个效果。代码： <HTML><HEAD><TITLE></TITLE></HEAD> <FRAMESET COLS="120,*"> <FRAME SRC="http://a.htm" > <FRAMESET ROWS="100,*"> <FRAME SRC=“b.htm"> <FRAME SRC=“c.htm"> </FRAMESET> </FRAMESET> <BODY></BODY></HTML> 框架的页面效果

  26. COLS=“宽度1,宽度2”就是垂直切割画面。切成几块取决于您使用了几个数字，使用逗号分隔开即可。COLS=“宽度1,宽度2”就是垂直切割画面。切成几块取决于您使用了几个数字，使用逗号分隔开即可。 ROWS= “宽度1,宽度2” 就是橫向切割画面，也就是將画面上下分开，切法同上。 另外，宽度可以用“*”号表示，代表未限定宽度，浏览页面时由浏览器看情况分配宽度。 FRAMESET的主要属性

  27. scrolling设定是否要显示滚动条，YES是要显示滚动条，NO是都不要显示，AUTO是看情况来显示。 noresize设定不让使用者可以改变這個框架的大小，如果沒有设定这个参数，使用者可以拉动框架，改变其大小。不需要设定此参数的值。 FRAME的主要属性

  28. 以上是HTML语言的一个介绍，希望能带领大家进入HTML世界的大门。以上是HTML语言的一个介绍，希望能带领大家进入HTML世界的大门。 HTML文档是Internet世界的构成元素，更是当前软件界流行的模式（B/S模式：Browser/Server）中的基本工具。学好HTML，才能做出优秀的B/S程序。 HTML语言还包含有丰富的标记来表示各种文档，需要大家去熟悉。 尾声

  29. 谢谢！

More Related