学习大纲:
一、静态网页和动态网页
1.静态网页
- 在动态网页出现之前,传统的采用HTML编写的网页。
- 静态网页无需系统实时生成,网页风格灵活多样,但是静态网页在交互性能上比动态网页差,日常维护也更加繁琐。
- 文件后缀一般为.html,html
2.动态网页
- 采用ASP、JSP、PHP、CGI等程序动态生成的页面,只有在接到用户的访问要求后才动态生产页面并传输到用户的浏览器中。
- 动态页面由计算机实时生成,具有日常维护简单、更改结构方便、交互性强等优点,同时动态网页需要大量的系统资源来合成网页。
- 文件后缀多为.ASP、.SHTM、.PHP、.CGI,后台有数据库如:ACCESS、SQL SERVER。
3.在日常生活中,以为页面上有动的东西,比如GIF图片、FLASH等就是动态页面,是完全错误的,两者根本没有关系
注:不能仅从后缀断定是静态网页还是动态网页
二、HTML的基本概念
1.HTML(HyperText Markup Language)超文本标记语言
2.HTML对WEB页面中显示内容的属性有着精细的调控作用
3.一个Web页面就是一个HTML文档
4.HTML文档是普通的ASCII文件,它由一系列的文本字符按照 HTML 特定的语法规则组成,这些字符被封装在诸如<html>、<body>、<p>等各类标记标签之中,浏览器在读取 HTML 文档时,能够依据这些标签所传达的指令,将文本内容转换为可视化的网页,向用户展示包含文字、图片、链接等丰富元素的页面信息,让互联网上的信息得以生动呈现。
5.客户机上的浏览器(Browser)会接收来自服务器的 HTML、CSS、JavaScript 等相关资源,并按照相应的解析规则对这些代码进行处理,再结合本地的一些设置(如字体偏好、屏幕分辨率适配等),从而使页面内容正确显示在显示器上。
6.HTML文档的基本结构
<HTML>
<HEAD>文件信息的描述</HEAD>
<BODY>页面元素的描述</BODY>
</HTML>
三、HTML基本标记创建网页
1.标题
网页标题标记:
2.文本
(1)标题
文本标题字体标记:
一般文章都有标题、副标题、章和节等结构,HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题,n越小,标题字号就越大
(2)字体
3.图像
(1)文件类型
【1】图像文件
- GIF
- JPG
- BMP
【2】媒体文件
- RM
- AVI
- MP3
- WAV
- SWF
(2)图像标记
格式:<IMG>标题[</IMG>]
- 属性align的主要属性值left,middle,right
属性:
4.背景
(1)背景颜色
<body bgcolor="red">
(2)背景图像
<body background="back-ground.gif">
(3)背景音乐
<bgsound src="background_sound.mid" loop="-1">
5.列表
列表标记:
(1)有序列表
(2)无序列表
6.超链接
(1)超级链接简介
【1】文档的任何部分(如文本、页面、表单、动画或图像等)都可用作超级链接
【2】超级链接可用于指向页面的特定部分或网站的不同页面
【3】有两种类型的链接路径:
- 绝对路径:完整的描述文件位置的路径就是绝对路径。
- 相对路径:
(2)超链接标记
【1】文档间链接
格式:<a href=目标 url,…>内容</a>
【2】文档内部锚点链接:跳转到文档内指定区域
格式:<a href=# 目标>内容</a> 目标命名<a name="…"></a>
【3】多媒体链接
<A HREF="音乐地址">乐曲名</A>
<A HREF="视频地址">视频名称</A>
(3)电子邮件链接
用户可从网页发送电子邮件
(4)链接到同一文档的各部分
【1】当一个网页的主题较多或内容过长时,可以在网页内建立多个标记点,将超链接指向这些标记点,使浏览者能快速找到要阅读的内容
【2】这些标记点也就是命名锚记,简称锚
(5)链接到文档的某个部分
【1】锚记标签用于使用户“跳”到文档的某个部分
【2】HTML的NAME属性用于创建锚标记
【3】为达到这种跳转效果,请在HREF参数中使用该标记