HTML经典基础教程

《HTML经典基础教程》由会员分享，可在线阅读，更多相关《HTML经典基础教程（45页珍藏版）》请在装配图网上搜索。

1、第二章第二章 HTML基础基础HTML基础基础 一、HTML的概念p1.什么是HTML？超文本标记语言（HTMLHyperText Markup Language）是用于设计网页源文件（网页文档）的语言，利用它编写的代码保存在后缀名为.htm或.html的文件中。HTML包括一些定义页面内容和格式的符号，称为标记（标签）。它能够将文本、图像、声音和动画结合在一个网页文档中。这些文档可以通过Web浏览器显示，还可以通过超链接访问其它的信息资源。后来，进一步推出了XML（扩展标记语言），该语言可以由程序员自己定义标记。HTML基础基础p2.什么是标记？标记是网页文档中的一些有特定意义的符号，这些符

2、号指明如何显示文档中的内容。标记总是放在三角括号中，大多数标记都成对出现（有开始标记和结束标记）。结束标记和开始标记所用的字符相同，只是前面加一个斜杠。例如：用于标记一个自然段。标记可以具有相应属性即各种参数，如size、color、text、width和noshade等。例如：Hello标记可以嵌套使用。例如：DreamweaverHTML基础基础p3.什么是超文本、超媒体和超链接？超文本是网页上具有链接功能的文字。例如：新浪网 武汉大学 百度超媒体是网页上具有链接功能的多媒体。超链接是超文本和超媒体的统称，分为文字和图像（包括动画）两种。网页中的一段文字、一幅图像或图像的某一部分等都可以定

3、义为超链接。HTML基础基础 二、如何编写和浏览HTML网页文档p1.如何编写HTML网页文档？启动记事本程序，利用HTML语言编写源代码。输入完毕后，选择“文件”菜单中的“保存”或“另存为”命令，打开“另存为”对话框，指定合适的存储路径和文件名（注意在“保存类型”下拉列表框中选择“所有文件”选项）。启动Dreamweaver，选择“文件”“新建”，打开“新建文档”对话框：选择“常规”选项卡，在“类别”列表中选择“基本页”选项，在“基本页”列表里选择“HTML”选项，单击“创建”按钮。单击“文档”工具栏上的“代码”按钮，在编辑区中编写源代码。输入完毕后，选择“文件”菜单中的“保存”或“另存为”

4、命令，打开“另存为”对话框，指定合适的存储路径和文件名。HTML基础基础 二、如何编写和浏览HTML网页文档p2.如何浏览HTML网页文档？启动IE，在浏览器窗口的地址栏输入网页文档的URL。启动Dreamweaver，选择“文件”“打开”，打开要浏览的网页文档，单击“文档”工具栏上的“在浏览器中预览/调试”按钮，在弹出菜单中选择“预览在IExplore 6.0”选项；或者直接按下F12快捷键。HTML基础基础 三、HTML的常用标记 p1.文档结构标记 用来指明一个HTML文档的基本结构。（1）文档标记：整个HTML文档内容均在此标记之中。（2）头部标记：凡是在此标记之内的内容，例如标题等，

5、均属于头部信息。头部信息不显示在Web页中。HTML基础基础 （3）标题标记：此标记之间的内容将作为文档标题显示在浏览器的标题栏中。注意：标记只能放在标记之间。（4）主体标记：主体是Web页的主要部分，在标记之间的内容将显示在Web页中。HTML基础基础结构标记示例斜体字文本HTML基础基础p2.格式标记 （1）段落标记：此标记用来创建一个段落，在此标记之间的文本将按照段落的格式显示。（2）换行标记：此标记没有结束标记，用来创建一个换行。（3）两边缩进标记：在此标记之间的文本将按照两边缩进的方式显示。HTML基础基础 （4）项目列表标记：、用来创建项目列表 用来创建列表中的上层项目 用来创建列

6、表中的下层项目 和都必须放在标记之间。例 创建一个项目列表：HTML基础基础 该网页的HTML源文件如下：项目列表示例 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约HTML基础基础（5）有/无序号列表标记：、标记用来创建有序号列表 标记用来创建无序号列表 标记只能在或标记之间使用，用来创建列表项。若放在之间，则每个列表项前有一个数字；若放在之间，则每个列表项前有一个圆点。HTML基础基础例创建有序号列表和无序号列表：HTML基础基础该网页的HTML源文件如下：有/无序号列表标记示例中国城市 北京 上海 广州美国城市 华盛顿 芝加哥 纽约HTML基础基础（6）区隔标记：此标记主要用

7、来设定HTML文档中文字、图形、表格等元素的显示位置。例如：表示标记中的文本水平居中显示。align属性用来说明水平对齐方式，取值可以是left(左对齐)、center(居中)或right(右对齐)。HTML基础基础p3.文本标记（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源文件如下：文本标记的综合示例最大的标题使用h3的标题最

9、小的标题黑体字文本斜体字文本加下划线文本强调文本加重文本size取值5、color取值red时的文本HTML基础基础p4.链接标记（1）href属性用来指定链接的目标地址，可使用URL。在标记之间可指定作为超链接的文本或图像。例如：武汉大学 HTML基础基础href属性的值也可以是“mailto:Email地址”的形式。例如：联系我 当在网页中单击这个超链接时，将调用系统默认的客户端电子邮件软件，建立一个空白的电子邮件发送给指定的邮件地址。HTML基础基础标记还具有target属性，此属性用来指明链接网页显示的目标窗口，可取_self、_blank、_parent或_top四个值中的任何一个，

10、_self为默认值。例如：新浪网 HTML基础基础（2）锚点链接：此标记用来在网页中创建一个锚点(书签)，以实现同一网页内不同部分之间的跳转。例如：在页面顶端创建一个锚点：页首 要找到锚点所标示的位置，就必须使用标记。例如：回到页首 HTML基础基础例 链接标记的综合示例链接标记的综合示例创建锚点处欢迎想要学习网页制作的同学访问网站 武汉大学HTML基础基础 本网站的主要内容在新窗口中显示欢迎给我来信，我的E-Mail是：点击此处回到锚点处p5.图像标记和多媒体标记 （1）图像标记：此标记用于将图像文件加载到网页文档中显示。例如，网页文档与图像文件whu.jpg在同一个目录下，则图像标记写成：

11、假如图像文件放在网页文档所在目录的一个子目录(images)下，则图像标记写成：假如图像文件放在网页文档所在目录的上层目录下，则图像标记写成：。HTML基础基础此外，标记还有如下一些常用属性：alt：当浏览器不能显示指定图像时，则以指定给alt属性的字符串替代图像。align：对齐方式。border：设定图像的边框，如果值为0就表示不显示边框。width：设定图像宽度，单位为像素或百分比。height：设定高度高度，单位为像素或百分比。HTML基础基础例 图像标记示例HTML基础基础（2）多媒体标记 设置音乐和影像文件的超链接 在HTML中，可播放的音乐文件格式包括au、mid和wav等，可播

12、放的影像文件格式包括mov、mpg和avi等。若要提供音乐或影像文件供浏览者播放，可建立指向音乐或影像文件的超链接。例如：Do I have to cry for you 绝对巨星直接将音乐或影像嵌入网页 利用标记可在网页中插入各种媒体，格式可以是 mid、wav、au、avi等。例如：HTML基础基础播放背景音乐 利用标记可在网页中播放背景音乐，即：若“播放次数”设为infinite，音乐将循环播放，直到网页关闭为止。例如：HTML基础基础p6.表格标记（1）HTML中主要通过四个标记完成表格的创建：标记用于创建表格；标记用于创建表格中的行；标记用于创建表格中的单元格；标记用于创建表格的标题

13、单元格，此单元格中的文字将以粗体的方式显示。（2）可以在表格的单元格中创建新的表格，即嵌套表格。HTML基础基础例 表格标记示例 HTML基础基础表格标记示例 球队 基本资料 所属国家 国际排名 HTML基础基础 皇家马德里 西班牙 1 切尔西英格兰2 AC米兰意大利3 拜仁慕尼黑德国4 HTML基础基础p7.表单标记 表单和表单元素是动态网页设计的基础，客户端用户利用表单元素输入信息，表单将这些信息发送到服务器端作进一步的处理。（1）表单标记：此标记用来创建一个表单，常用属性包括action、method和target：action：指定服务器端处理信息的动态网页的存储位置和名称。metho

14、d：指定客户端信息发送到服务器端的方式，分为post和get两种。target：指定服务器端返回结果显示的目标窗口。HTML基础基础（2）表单元素标记 HTML基础基础例 表单标记示例 HTML基础基础静态网页的源程序为：表单标记示例用户名密  码 HTML基础基础p8.其他常用标记（1）空格标记： 编写网页文档时，若用空格键输入多个空格，都将被视为一个。如果想要输入多个空格，必须使用多个空格标记。例如：空格标记示例静    夜        &

15、nbsp;   席慕容天使  依然在每一夜前来 带着不能延续的    记忆从静静的夜空   静静坠落 HTML基础基础（2）原样排版标记：位于此标记中的任何文本，都会准确的按照原先的布局显示。例如：原样排版标记示例静 夜 席慕容天使 依然在每一夜前来 带着不能延续的 记忆从静静的夜空 静静坠落HTML基础基础（3）元标记：此标记能使当前网页显示几秒种后，自动跳转到另一网页。语法如下：标记应当置于标记之间；http-equiv属性值为“refresh”表示网页自动更新；cont

16、ent属性值“秒数;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基础基础