1.4 HTML基础(课件）-高二《网页设计与制作》同步教学（北京理工版）

1.4 HTML基础 1.4.1 HTML的基本概念 HTML称为超文本标记语言。使用HTML编写的超文本文档称为HTML文档。任何网页页面都是以HTML语言为核心和基础的。例如，图1-1所示的是一个标准的网站页面，单击浏览器窗口菜单栏中的“查看”菜单，选择“源文件”选项，打开的即是网页页面的源代码，如图1-3所示，该源代码就是使用HTML语言编写的。 1.4.2 HTML网页的编写方法 1.H下ML网页文件的命名规则 (1)允许使用汉字、英文字母、数字和下划线，不能包含空格与特殊符号。 (2)名称区分大小写。 返回 下一页 1.4 HTML基础 (3)网站主页文件名一般为index. htm或index. html. 2.使用HTML编写网页 (1)手工编写。这是最传统的编写方法。只要装有Windows系统，使用“记事本”即可编写出HTML网页。 (2)使用可视化的HTML编辑软件，这是最方便的编写方法。例如，FrontPage, Dreamweaver等。 (3)通过编写程序，由Ph服务器实时、动态地生成网页。这属于动态网页的制作方法。 使用HTML编写网页的操作步骤如下: ①生成网页页面。打开“开始”菜单，选择“程序”、“附件”、“记事本”命令，启动windows系统中的“记事本”程序。 返回 下一页 上一页 1.4 HTML基础 也可以启动Dreamweaver，单击文档工具栏中的“代码视图”按钮，显示“代码视图”窗口。 ②在打开的记事本中输入图1-4所示的HTML源代码。 ③选择“文件”I“保存”命令，在弹出的“另存为”对话框中选择存放位置并输入网页文件名。例如，输入“网页.htm”。在“保存类型”下拉列表框中选择“所有文件”选项，然后单击“保存”按钮。 ④双击打开“网页.htm”文件，显示如图1-5所示的网页，浏览器标题栏显示“学习使用HTML编写网页”，浏览器窗口显示“学习HTML网页设计第一课”。 返回 下一页 上一页 1.4 HTML基础 3.HTML网页的结构 (1)网页源代码的基本结构如下: <html>…</ html> <head>…</head> <body>…</body> (2)元素是HTML语言的基本组成部分，一般成对出现，每一对元素都有一个开始标记与一个结束标记。例如，< body>与</body>。元素的标记应使用一对尖括号括起来，结束标记前应有一个斜杠。 (3) <html>与</html>标记分别表示HTML文档的开始与结束。任何HTML文档都被包含在一对<html>与</html>标记中。 返回 下一页 上一页 1.4 HTML基础 (4) <head>与</head>标记之间是网页的头部信息，其中<title>与</title>标记之间指定了网页的标题。 (5) <body>与</body>标记之间是网页的主体，在网页中看到的页面标识一般都包含在<body>与</body>之间。 (6) HTML元素具有自己的相关属性，每一个属性可以赋予一定的值。元素属性应放在元素的开始标记内，并与元素名之间有一个空格分隔，文本属性值应使用双引号(“”)括起来。 例如，<p>与</p>标记表示将所包含的文字存放在一个段落中;align表示排列属性，center表示居中对齐。 (7)书写HTML源代码时，标记字符不区分大小写，标记之间空格的多少不影响网页的显示。 返回 下一页 上一页 1.4 HTML基础 1.4.3 HTML的头部标记与主体标记 HTML源代码包括头部和主体两部分。分别对应<HEAD>标志和<BODY>标志。 图1-4的代码清单的第二行中，出现了这样一个标志:<HEAD> 而在第一七行中，出现了如下标志:< BODY > . 在HTML中，< HEAD>和<BODY>是两个非常重要的标志，这是因为所有的HTML文档都分为两个部分，即文档头和文档体。使用<HEAD>和</HEAD>标志将文档头包围起来;使用<BODY>和</BODY>标志将文档体包围起来。这样，浏览器才能正确地解释HTML文档。 这里再次提醒读者,HTML的标志是成对出现的，成对出现的标志间的唯一区别是后一个标志比前一个标志多了一个“/”符。 返回 下一页 上一页 1.4 HTML基础 1.4.4 <TITLE>标志 在图1-4的代码清单的第三行中，有如下代码:<TITLE>学习使用HTML编写网页</TITLE>。 对照图1-5,读者可能已经发现，用<TITLE>和</TITLE>包围起来的内容就是浏览器中显示的文档标题。 至此，读者已经了解了HTML中最基本的标志，可以使用这几个标志构成一个HTML文档，尽管这个HTML文档上什么内容也没有，但无论如何，它毕竟是一个完整的HTML文档。 现