1 / 37

HTML 第二讲

专业铸造品质 知识成就未来 - 硅谷动力网络学院. HTML 第二讲. 主讲：吴涛. 硅谷动力网络学院. 作者仅授权硅谷动力网络学院发表该系列教程 , 版权归作者本人与网络学院拥有 . 任何个人与网站转载请联系 hzhang@mail.enet.com.cn. 文字标签属性 ——1. 文字属性标记 1. 文字颜色 指定颜色 <font color=# > ... </font> #=RRGGBB 16 进制数码 例： 01.htm. 文字标签属性 ——2. 文字属性标记 2. 文字字体

tayten
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第二讲 主讲：吴涛 硅谷动力网络学院 作者仅授权硅谷动力网络学院发表该系列教程,版权归作者本人与网络学院拥有.任何个人与网站转载请联系hzhang@mail.enet.com.cn

  2. 文字标签属性——1 • 文字属性标记 • 1.文字颜色 • 指定颜色 <font color=#> ... </font> • #=RRGGBB 16 进制数码 例：01.htm

  3. 文字标签属性——2 • 文字属性标记 • 2.文字字体 • <font face=“#, #, ..., #”> ... </font>#=客户端可获得的字体 02.htm

  4. 文字标签属性——3 • 文字属性标记 • 3.文字大小 • <font size=#> ... </font> • #=1, 2, 3, 4, 5, 6, 7 or +#, -# 例：03.htm

  5. 文字标签属性——4 • 文字属性标记 • 4.文字标题 • <h#> ... </h#> • #=1, 2, 3, 4, 5, 6 例：04.htm

  6. 文字布局 • 行的控制 • 段(Paragraph) (可以看作是空行) <p> • 空白占位符&nbsp; • 例：05.htm

  7. 文字布局 • 行的控制 • HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即<br>元素。<br>元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<br>元素不是成对出现的。 例：06.htm • 不换行<nobr> 07.htm

  8. HTML文字与段落格式控制 <body>…… <i>倾斜文本</i> <b>粗体文本</b> <u>下划线文本</u> <s>删除线文本</s> ……</body> 例：08.htm、09.htm、10.htm、11.htm(综合练习)

  9. 基本组成部分—HTML注释 • HTML文档可以插入注释。注释内容不会在浏览器窗口显示 • HTML注释的格式为：<!-- 注释内容 -- ><!--多行注释内容 -- > 例：12.htm

  10. 文字的对齐 <hn align=#>...</hn> (n=1,2,3,4,5,6) <p align=#>...</p> (#=left, center, right) 例：13.htm

  11. 文字的分区显示 • <div align=#> ... </div> (#=left, center, right) 例：14.htm

  12. 3.HTML段落与分行控制 • 居中--- <center>元素 • <center>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的align=“center”类似 • 例如：<center>居中段落</center> 15.htm

  13. 3.HTML段落与分行控制 • 标尺线 <hr size = #>：设定线宽 <hr width=#>：设定线长 <hr align=#>：设定对齐方式 #=left, right <hr color=#> ：设定线的颜色 例：16.htm

  14. 3. HTML的段落与分行控制 • 无序列表元素—1列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。

  15. 3. HTML的段落与分行控制 • 无序列表元素—2 无序列表是由<ul>和<li>元素定义的: <ul> <li>sports</li> <li> food </li> <li> drink </li> <li> friends </li> </ul> 例：17.htm

  16. 3. HTML的段落与分行控制 • 无序列表元素—3 • 无序列表的默认符号是圆点。<ul>元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：disc(圆)、circle（圆圈）、square（方块） • 例：18.htm

  17. 3. HTML的段落与分行控制 • 有序列表元素—1 有序列表由<ol>和<li>定义: <ol> <li>sports</li> <li> drink</li> <li> friends</li> </ol> 例：17.htm

  18. 3. HTML的段落与分行控制 • 有序列表元素—2<ol>元素也有自己的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、C……作为列表的编号例： 19.htm <ol>元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义<ol>元素的start属性 例：20.htm

  19. 4.超级链接—普通超级链接1 • 超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。

  20. 4.超级链接—普通超级链接2 超级链接是用锚元素<a>定义的 • 在<a>元素下，有元素属性href,href的属性值为一个URL地址 • 如：<a href=“http://www.enet.com.cn/eschool”>指向学院的超级链接</a> • 如：<a href=“29.htm">普通超级链接</a> 例：21.htm

  21. 4.超级链接—E-mail超级链接 • 超级链接可以指向E-mail地址 • 如：<a href=“mailto:hzhang@mail.enet.com.cn">指向E-mail地址的超级链接</a> 例：22.htm

  22. 4.超级链接—新开链接窗口 • 开一个新的(浏览器)窗口 (Target Window) <a href="URL" target=“_blank"> ... </a> 例：26.htm

  23. 4.超级链接—去除下划线 • 去掉超级连接的下划线：style=“text-decoration: none” 例：25.htm

  24. 4.超级链接——其他超级链接 • WWW应用仅仅是Internet应用的一种,Internet还有其他很多应用，如：Ftp等。实际上mailto也属于非WWW应用。我们可以类似的创建指向Ftp等的超级链接; • 指向其他Internet应用的超级链接不是我们掌握的重点。

  25. 4.超级链接——锚点(书签) 1 • <a name="aa"> • <a href="#aa">指向本页面锚点aa的超级链接</a> 例：23.htm • <a href=“23.htm#top”>指向23页面的锚点top的超级链接</a> 例：24.htm

  26. 练习：手写代码实现 • 链接（新开窗口与Email）、背景、文字颜色、字体、换行、页面标题。 练习：27.htm

  27. HTML对图片的控制--1 • 基本语法: • <img src=“图片名称”> • 引用图片必须用<img>元素标志。<img>元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。 • src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址 例：28.htm

  28. HTML对图片的控制--2 • 所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。 • 定义图片替代文本的方法是： • <img src=“图片名称” alt=“这是一张图片”> 例：28.htm

  29. HTML对图片的控制--3 • 图片的显示大小 我们可以指定一幅图片在浏览器窗口里的显示大小。 • 定义图片的显示大小的方法是： <img src="sample.jpg" width=100 height=100 > • width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。 例：29.htm

  30. HTML对图片的控制--4 • 图片的边框 • 我们可以为一幅图片加一个边框以突出显示： • <img src="sample.jpg" border= " 2 " > • border的属性值为象素数 例：30.htm

  31. HTML对图片的控制--5 • 图片的对齐方式 图片可以相对于页面或单元格有一个对齐方式。 定义水平对齐方式的方法是： • <img src=“sample.jpg” align=“left” > • <img rc=“sample.jpg” align=“right”> 例：31.htm

  32. HTML对图片的控制--6 • 图片的对齐方式 定义图片的垂直对齐方式： <img src="sample.jpg" align="top" > <img src="sample.jpg" align="middle"> <img src="sample.jpg" align="bottom" > 对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。 例：32.htm

  33. HTML对图片的控制--7 • 定义图片与左、右的文本之间的间距 • 图片在显示时，与左右的文本之间可以有一定的间距 <img src="sample.jpg" hspace=5 vspace=5 > • Hspace(horizontal)定义水平间距； Vspace(vertical)定义垂直间距。单位都是象素数. 例：33.htm

  34. HTML对图片的控制--8 • 图象的超级链接 • 图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是： <a href=“http://www.enet.com.cn/eschool”><img src="sample.jpg" ></a> • 所以，所谓超级链接实际上就是用<a>元素标志一个图象的引用; 例：34.htm

  35. HTML对图片的控制--9 • 图象映射 所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。

  36. HTML对图片的控制--10 • 图象映射（只要求理解标记含义） • 图象映射由<map>定义。<map>有一个基本属性是name。Name给图象映射命名，这个命名将会被<img>元素用usemap属性引用。所以，图象上的图象映射实际上是对<map>定义的映射的一个引用。 • <map>在定义图象映射时，可以定义三种形状的映射： circle(圆形)、rect(矩形rectangle)、poly(多边形)

  37. HTML对图片的控制--11 • 图象映射实例（35.htm） <img src="bear.jpg" usemap="#Map" > <map name=“Map"> <area shape="rect" coords="46,29,253,164" href="#" > <area shape="circle" coords="76,510,59" href="#" > <area shape="poly" coords="219,482,253,448,310,462,297,527,220,523" href="#" > </map>

More Related