HTML语言基本知识_第1页
HTML语言基本知识_第2页
HTML语言基本知识_第3页
HTML语言基本知识_第4页
HTML语言基本知识_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、第四章 HTML语言基本知识特别说明：本教材单独使用了html语言来制作网页，而现在的很多面向对象设计的网页制作软件可自动生成一些固定格式的网页元素，在学习本章的过程中，不要一味去死记这些标识内容，我们学习这html语言的主要目的不是要大家完全使用html语言来制作一个完整的网页，而是掌握其基本语法格式后应用到动态程序中去。在学习过程中，我们要结合动态程序asp的方法来应用这些标识。如果用html完全编写网页，那是过时了；如果不懂html语言那是学网页的无知，更谈不上灵活运用动态程序asp,php等。一个用户所见网页，实际上是由用户通过操作向服务器申请一个url，再由服务器找到此定位器所指的内

2、容，把这些由标识符组成的内容传给用户的浏览器，再在浏览器里按顺序进行组装成一个丰富多彩的网页界面。每一个网页元素都有一个界定型的标识符，浏览器根据这些不同的标识符来组织界面，所以说制作网页，实际上是安排这些标识在一个页面中的组织顺序。要掌握网页制作，不得不学习html源码语言。 随着网页技术的发展，在网页中适当的位置可嵌套入由特殊标识界定的非html计算机语言，就可构造成一个动态的网页，使网页更具动态性和交互性，甚至可达到智能的目的。 网页分为静态网页和动态网页，后者在目前是最主要的，如果一个网站没有动态程序，可以说是没有多大用处的，至少不具有技术性，所以动态网页是重点也是难点。 本章节主要是

3、讲静态网页，是显现给用户的直接界面。准备工作：1 选取制作工具： dreamweaver , 版本不限。2 站点建立：3 文件的打开和保存4 用dreamweaver携带的站点工具管理站下文件4.1 文档结构<html> <head>. </head> <body> . </body></html>这是dreamweaver构造网页的最基本的结构，当然不可能这样简单，每一组标识符内部的修饰很多，根据实际需要在每一个标识符内部增加所需子句。下面看看一个具体元素内部的表示方法： （1）<元素标识名> 内容 <

4、/元素标识名> (2) <元素标识名 属性1=”值1” 属性2=”值2”> 内容 </元素标识名> （3）<元素标识名> 第（1）种无修饰，此标识的其它属性统统采用系统默认值，第（2）种用得最多，要修饰一个元素，肯定少不了属性设置 ，第（3）种种类最少，如<hr> <br>无定界限制 每个大结构的说明：1 <html> . </html> 文档的开头和结束说明标识2 <head></head> 内部存放网页的一般说明及背景音乐等。对网页进行整体设置（但内容不能出现在body之内）的

5、内容可置放在这组标识之内。3 <tile>.</tile> 一般用来提供网页的页面标题名称，它的内容出现在浏览器的顶部。但这个整体标识的结构是放在<head>和</head>之间的。4 <meta> 用以提供文档的媒体信息（作者名，磁盘缓存期限），目的是为搜索引擎做描述说明和关键字。子属性有： name: 它和content属性一起使用 （1）keywords 参数 如：<meta name=”keywords” content=”西华大学，成都师专，彭州校区”>在一些安装大型搜索引擎的网站上注册后，用户可输入这些关键字进

6、行搜索到本网站 （2）description参数 如：<meta name=”description” comtent=”这是西华大学的网站，包括招生，就业，师资等信息”>在搜索到本网站后，出现在搜索引擎上的网站说明文字 http-equiv: 合法有效性设置，具体也是由content来指定完成（1）expires: 期限说明参数 一般情况下用户调用了某个网页后，此网页是存放在用户本地机器上的某个文件夹内的（称为网页缓冲区或临时网页文件夹），为了提高访问速度，第二次访问到同一网页时，系统首先会在这个缓冲区内查找是否有现成的网页，如有就直接从本地机上调用，如没有才到网站上去调用。但是

7、，这种方法虽然可提高速度，但用户往往看到的是”旧网页”，如果是一个新闻网站，那结果就可想而知了，所以要给某些对当前时间有要求的网页要设置一个有效时间。 如：<meta http-equiv=”expires” content=”Web,1 march 2005 08:01:01 GMT”>此网页有效到指定的时间。如果是天天更新的新闻类网站，这个属性可用动态程序中的变量设置成有效当前的1小时后等，或用下面的pragma参数限制访问缓冲区。 （2）pragma (cache 模式)参数 可禁止浏览器从本地机的缓冲区读取过时的网页。 如：<meta http-equiv=”prag

8、ma” content=”no-cache”> (3)refresh 参数 常用于自动刷新本页面或跳转到其它页面 如：<meta http-equiv=”refresh” content=”10; url=.”> 在当前网页出现10钞后，系统自动转到或刷新本页。 如果结合全局变量和asp，可实现轮流在同一个浏览界面里显示一个长文档内容或自动轮流显示图片。希望大家以后用上这个功能5 <body> </body>才是核心部分，所辖参数的标识符太多，在以后学习中是我们的重点。6 <!- . > 这是html语言的注释语句，也可用于隐藏css或调用

9、其它地方的函数。 这里先说明一下置于<body xxxxx>处的内容。这里的xxxx 参数通常是整个网页的总体设置，教材上的讲的内容实际上可直接调用dreamweaver的”modify”菜单page properties”来查看和修改。见教材p734.2 网页内文字修饰补充内容：首先看一下文字的手工设置和程序方式设置1 手工设置. 见教材p74 属性面板的调用和使用：手工方式比较简单，但在一个应用系统中，网页是动态的，往往要用动态程序来控制文字等元素的格式，所以大家一定要掌握这些源代码及常用参数的意义，把手工设置与程序方式对上号。 举例识别常用文字格式标识参数： 下面介绍一些教材

10、上没有的常用技术A 空格处理(在输入法的字符全角状态下可插入多个空格) 。注意：在动态网页中要输出空格一般使用&nbsp。B特殊符号的输入, 用工具面板的character下面的特殊符号，或用word“插入“”符号“再复制到dreamwaver中 C: 块状文字的随意位置排放：用图层(“insert”-“layer”),图层位置移动(用鼠标拖动图层左上角的移动柄,如同word中的文体框)4.2.1 设置文本的字体其它用法注意：dreamweaver版本不同，在有些书定上有差异，高版本的软件甚至有些过时的属性进行了改写的增删，大家不能一味地照搬教材来应用。 1 系统样式的使用 如<

11、h1 align="right">在在要革在</h1> 2 文本换行 <br> 强行不隔行换行 <nobr> .</nobr> 强行原代码中已有换行的文字块不换行3 源代码中的预格式化 <pre>.</pre>4 程序源代码以文本方式显示 为了防止这类代码被计算机误以为是动态程序，一般加上<code></code>4 滚动文本显示 <marquee> .</marquee> 有人称之为”跑马灯”，实现同样功能的其它方法很多。如：<marquee

12、 behavior="alternate">跑动文字</marquee> 可实现文字左右跑动。4.3 图像和多媒体元素1 图像先见教材p99基本属性。应用说明事项A 支持的图片类型( swf, jpg, gif , bmp )B 用表格实现多图片的排放，对齐，把表格的边框线(border设置成0)C 图片大小的统一设置: 以其中一个图片为准，统一在属性面板中设置其它图片的大小，达到多图片的整齐划一2 多媒体（1） 网页背景音乐在<head> 和</head>之间插入标识 <bgsound src=” loop=”infinit

13、e” > ，一般这种方式能识别的声音文件类型有限，常用于mid, wav类(2) 除mid,wav类的其它声音或音乐可用 <embed> 来实现如： <EMBED NAME='CS1086427618873' SRC='sound/s1.WAV' LOOP=false AUTOSTART=false MASTERSOUND HIDDEN=true WIDTH=0 HEIGHT=0></EMBED>(3)以上两法往往用于背景音乐，事件默认为form_onload( )事件，下面增讲一种用于某对象的某个事件的声音处理：当指向

14、图片时，发出声音或播放音乐文件<a href="javascript:;" onMouseOver="MM_controlSound('play','document.CS1086427618873','sound/SOUND55.WAV')"><img src="yy5.jpg" width="418" height="483" border="0"></a> 对应事件可改为对象的 onmo

15、useover, onmousedown, onmouseclick等4.4 超级链接一般人们把超级链接分为：相对链接和绝对链接。本教材又进一步细分如下1 按触发被链接对象分类 （1）文本超级链接 （2）图象整体超级链接 (3)图象部分热区链接2 按超级链接的目标位置分类 （1）当前页 （2）新窗口 （3）框架页（这种比较实用，但制作框架比较麻烦） （4）锚点（书签）关于链接几个使用方法（1） 一般站内文件的相对链接如< a herf=”meself.htm”> 自我介绍 </a>这种方法可实现站内的文件之间的链接 （2）站外链接 如< a herf=”>

16、成都师专 </a> 此法可把本站指向站外其它网站的链接 （3）图片某个区域的热区链接 如<map name="Map"> <area shape="rect" coords="97,336,275,406" href="index.htm"> <area shape="circle" coords="142,206,54" href="#"></map> 在一张图片上选取了两个区域（一个是矩形，一

17、个是圆形，大小由coords参数指定在图片内的相对区域），同时指定了这两个区的链接 （4）锚点链接 当一个网页太大，内容太多时，用户要找到所需要的信息不容易，可人为地把页面从上到下分成几个段，每个段首部设置一个段名（就是锚点）。再在网页的首部设置各段的说明文字，当，各自链接到相应的段上去。如：<a name="xx"></a> 先设置一个锚点，叫xx <a href="#xx" >第三部分</a> 对网页首部对应的文字设置相应的锚点链接4.5 列表(1)无序列表这个类似于word中的项目符号格式：<u

18、l><li>. </ul> （2）有序列表 格式：<ol start=数字 type =数字或字母><li >. </ol> 4.6 表格主要作用是安排和布局网页上的图片和文字，可以说几乎所有的复杂页面都是用表格和图层来实现安排的。如果一个网页的内容很多，一般可以先插入一个很大的图层,再在图层内插入一个所需要的表格。原代码： (1) <table> </table> 表示整个表格(2)<tr>. </tr>表示表格的一行(3)<td>.</td>表示某行内的

19、某个单元格列的内容（4）可以在<td>.</td>之内再套入一个<table> </table>这就是子表格例：<table width="50%" border=3> <caption><font size="5">中国人</font></caption><tr> <td><div align="center">天虎</div> </td> <td>新浪&

20、lt;/td> <td>网易</td> </tr><tr> <td>天虎</td> <td>新浪</td> <td>网易</td> </tr></table> 中国人天虎新浪网易天虎新浪网易说明：1在网页内容比较多时，要善于使用表格中的字表格来定位布局2 巧妙地运用表格的单元格垫，前景背景颜色可实现立体按钮的效果3 多图片的整齐化一的排放往往也要使用到表格。下面应用动态程序操作表格一例：大家结合以前的计算机语言知识先试着分析一下这个程序的结果是什么？<table width="50%" border=3> <caption><font size="5">中国人</font></caption><% dim i i=1while i<=3%> <tr>

人人文库> 全部分类> 行业资料

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论