1、第二章 HTML基础,HTML基础,一、 HTML的概念 1.什么是HTML？ 超文本标记语言（HTMLHyperText Markup Language）是用于设计网页源文件（网页文档）的语言，利用它编写的代码保存在后缀名为.htm或.html的文件中。 HTML包括一些定义页面内容和格式的符号，称为标记（标签）。它能够将文本、图像、声音和动画结合在一个网页文档中。这些文档可以通过Web浏览器显示，还可以通过超链接访问其它的信息资源。 后来，进一步推出了XML（扩展标记语言），该语言可以由程序员自己定义标记。,HTML基础,2.什么是标记？ 标记是网页文档中的一些有特定意义的符号，这些符号指
2、明如何显示文档中的内容。 标记总是放在三角括号中，大多数标记都成对出现（有开始标记和结束标记）。结束标记和开始标记所用的字符相同，只是前面加一个斜杠。例如： 用于标记一个自然段。 标记可以具有相应属性即各种参数，如size、color、 text、 width和noshade等。 例如：Hello 标记可以嵌套使用。 例如：Dreamweaver,HTML基础,3.什么是超文本、超媒体和超链接？ 超文本是网页上具有链接功能的文字。例如：新浪网 武汉大学 百度 超媒体是网页上具有链接功能的多媒体。 超链接是超文本和超媒体的统称，分为文字和图像（包括动画）两种。网页中的一段文字、一幅图像或图像的某
3、一部分等都可以定义为超链接。,HTML基础,二、如何编写和浏览HTML网页文档 1.如何编写HTML网页文档？ 启动记事本程序，利用HTML语言编写源代码。输入完毕后，选择“文件”菜单中的“保存”或“另存为”命令，打开“另存为”对话框，指定合适的存储路径和文件名（注意在“保存类型”下拉列表框中选择“所有文件”选项）。 启动Dreamweaver，选择“文件”“新建”，打开“新建文档”对话框：选择“常规”选项卡，在“类别”列表中选择“基本页”选项，在“基本页”列表里选择“HTML”选项，单击“创建”按钮。单击“文档”工具栏上的“代码”按钮，在编辑区中编写源代码。输入完毕后，选择“文件”菜单中的“
4、保存”或“另存为”命令，打开“另存为”对话框，指定合适的存储路径和文件名。,HTML基础,二、如何编写和浏览HTML网页文档 2.如何浏览HTML网页文档？ 启动IE，在浏览器窗口的地址栏输入网页文档的URL。 启动Dreamweaver，选择“文件”“打开”，打开要浏览的网页文档，单击“文档”工具栏上的“在浏览器中预览/调试”按钮，在弹出菜单中选择“预览在IExplore 6.0”选项；或者直接按下F12快捷键。,HTML基础,三、HTML的常用标记 1.文档结构标记用来指明一个HTML文档的基本结构。 （1）文档标记： 整个HTML文档内容均在此标记之中。 （2）头部标记： 凡是在此标记之
5、内的内容，例如标题等，均属于头部信息。头部信息不显示在Web页中。,HTML基础,（3）标题标记： 此标记之间的内容将作为文档标题显示在浏览器的标题栏中。注意： 标记只能放在标记之间。 （4）主体标记： 主体是Web页的主要部分，在标记之间的内容将显示在Web页中。,HTML基础,结构标记示例斜体字文本,HTML基础,2.格式标记 （1）段落标记：此标记用来创建一个段落，在此标记之间的文本将按照段落的格式显示。 （2）换行标记：此标记没有结束标记，用来创建一个换行。 （3）两边缩进标记：在此标记之间的文本将按照两边缩进的方式显示。,HTML基础,（4）项目列表标记：、 用来创建项目列表 用来创
6、建列表中的上层项目 用来创建列表中的下层项目和都必须放在标记之间。例 创建一个项目列表：,HTML基础,该网页的HTML源文件如下：项目列表示例中国城市北京上海广州美国城市华盛顿芝加哥纽约,HTML基础,（5）有/无序号列表标记：、 标记用来创建有序号列表标记用来创建无序号列表标记只能在或标记之间使用，用来创建列表项。若放在之间，则每个列表项前有一个数字；若放在之间，则每个列表项前有一个圆点。,HTML基础,例创建有序号列表和无序号列表：,HTML基础,该网页的HTML源文件如下：有/无序号列表标记示例中国城市北京上海广州美国城市华盛顿芝加哥纽约,HTML基础,（6）区隔标记：此标记主要用来设
7、定HTML文档中文字、图形、表格等元素的显示位置。 例如：表示标记中的文本水平居中显示。 align属性用来说明水平对齐方式，取值可以是left(左对齐)、center(居中)或right(右对齐) 。,HTML基础,3. 文本标记 （1）标题标记： (n的范围为16)是最大的标题，则是最小的标题。被标示的文字将以粗体的方式显示在页面中。 （2）字体标记：、之间的文本以黑体字的形式输出之间的文本以斜体字的形式输出之间的文本以加下划线的形式输出,HTML基础,（3）斜体和加重标记：、用来输出需要强调的文本(通常是斜体)则用来输出加重文本(通常是黑体) （4）字型标记： 此标记通常用来控制文字的字
8、型、大小与颜色。它主要有三个属性face、size和color。face属性用来指定文字的字型，如果指定的字型不存在于系统中，将使用默认字型。size属性用来指定文字的大小，可以取值+1+6、-1-6、17，7为最大字体。,HTML基础,color属性用来指定文字的颜色，颜色的取值可以是预设的颜色名称或者十六进制的RGB颜色码。 例如：网页设计教程预设的颜色名称可参考教材P17 例如： 网页设计实验指导书十六进制的RGB颜色码是用六位十六进制数字表示的红、绿、蓝三原色的组合颜色。,HTML基础,例 文本标记的综合示例,HTML基础,该网页的HTML源文件如下：文本标记的综合示例最大的标题 使用
9、h3的标题 最小的标题 黑体字文本 斜体字文本 加下划线文本 强调文本 加重文本 size取值“5“、 color取值“red“时的文本,HTML基础,4. 链接标记 （1）href属性用来指定链接的目标地址，可使用URL。在标记之间可指定作为超链接的文本或图像。例如：武汉大学,HTML基础,href属性的值也可以是“mailto:Email地址”的形式。 例如： 联系我当在网页中单击这个超链接时，将调用系统默认的客户端电子邮件软件，建立一个空白的电子邮件发送给指定的邮件地址。,HTML基础,标记还具有target属性，此属性用来指明链接网页显示的目标窗口，可取_self、_blank、_pa
10、rent或_top四个值中的任何一个，_self为默认值。 例如：新浪网,HTML基础,（2）锚点链接：此标记用来在网页中创建一个锚点(书签)，以实现同一网页内不同部分之间的跳转。例如：在页面顶端创建一个锚点：页首要找到锚点所标示的位置，就必须使用标记。例如：回到页首,HTML基础,例 链接标记的综合示例链接标记的综合示例创建锚点处欢迎想要学习网页制作的同学访问网站武汉大学,HTML基础,本网站的主要内容 在新窗口中显示 欢迎给我来信，我的E-Mail是：点击此处回到锚点处,5.图像标记和多媒体标记 （1）图像标记：此标记用于将图像文件加载到网页文档中显示。例如，网页文档与图像文件whu.jp
11、g在同一个目录下，则图像标记写成：假如图像文件放在网页文档所在目录的一个子目录(images)下，则图像标记写成：假如图像文件放在网页文档所在目录的上层目录下，则图像标记写成：。,HTML基础,此外，标记还有如下一些常用属性： alt：当浏览器不能显示指定图像时，则以指定给alt属性的字符串替代图像。 align：对齐方式。 border：设定图像的边框，如果值为0就表示不显示边框。 width：设定图像宽度，单位为像素或百分比。 height：设定高度高度，单位为像素或百分比。,HTML基础,例 图像标记示例,HTML基础,（2）多媒体标记 设置音乐和影像文件的超链接在HTML中，可播放的音
12、乐文件格式包括au、mid和wav等，可播放的影像文件格式包括mov、mpg和avi等。若要提供音乐或影像文件供浏览者播放，可建立指向音乐或影像文件的超链接。例如：Do I have to cry for you绝对巨星 直接将音乐或影像嵌入网页利用标记可在网页中插入各种媒体，格式可以是 mid、wav、au、avi等。例如：,HTML基础,播放背景音乐利用标记可在网页中播放背景音乐，即：若“播放次数”设为infinite，音乐将循环播放， 直到网页关闭为止。例如：,HTML基础,6. 表格标记 （1）HTML中主要通过四个标记完成表格的创建： 标记用于创建表格； 标记用于创建表格中的行； 标
13、记用于创建表格中的单元格； 标记用于创建表格的标题单元格，此单元格中的文字将以粗体的方式显示。 （2）可以在表格的单元格中创建新的表格，即嵌套表格。,HTML基础,例 表格标记示例,HTML基础,表格标记示例球队 基本资料所属国家国际排名,HTML基础,皇家马德里西班牙1切尔西英格兰2AC米兰意大利3拜仁慕尼黑德国4,HTML基础,7. 表单标记 表单和表单元素是动态网页设计的基础，客户端用户利用表单元素输入信息，表单将这些信息发送到服务器端作进一步的处理。 （1）表单标记： 此标记用来创建一个表单，常用属性包括action、method和target： action：指定服务器端处理信息的动
14、态网页的存储位置和名称。 method：指定客户端信息发送到服务器端的方式，分为post和get两种。 target：指定服务器端返回结果显示的目标窗口。,HTML基础,（2）表单元素标记 ,HTML基础,例 表单标记示例,HTML基础,静态网页的源程序为： 表单标记示例用户名 密码,HTML基础,8.其他常用标记 （1）空格标记：静静坠落 ,HTML基础,（2）原样排版标记： 位于此标记中的任何文本，都会准确的按照原先的布局显示。例如： 原样排版标记示例静 夜席慕容天使 依然在每一夜前来 带着不能延续的 记忆从静静的夜空 静静坠落 ,HTML基础,（3）元标记： 此标记能使当前网页显示几秒种
15、后，自动跳转到另一网页。语法如下：标记应当置于标记之间； http-equiv属性值为“refresh”表示网页自动更新； content属性值“秒数; URL=文件名称或网址”用于指定网页几秒钟后将执行自动更新，以及更新后所连接的文件名称或网页地址。,HTML基础,（4）水平线标记： 此标记是在网页文档中加入一条水平线，它具有size、color、width和noshade属性。size用来设置水平线的厚度，width用来设定水平线的宽度，默认单位是像素；noshade属性用来设置无阴影水平线。 例如：,HTML基础,（5）滚动文本标记： 此标记用于在网页的浏览区域中滚动文本，它的常用属性包括： direction：滚动方向，可取值left、right、up和down，默认值是left。 behavior：滚动方式，可取值scroll(连续滚动)、slide(滚动一次)和alternate(来回滚动)。 loop：滚动次数，取值infinite或-1时表示无限循环。 scrollamount：每个连续滚动文本后面的间隔，单位为像素。 scrolldelay：两次滚动操作之间的间隔时间，单位为毫秒。 例：网页设计,HTML基础,
