HTML教程资源-CSDN文库

需积分: 9 180 浏览量 2011-11-28 23:16:17 上传评论收藏 1.3MB PDF 举报

### HTML教程精要 #### HTML概述与核心概念 HTML，全称HyperText Markup Language，超文本标记语言，是万维网（World Wide Web，简称WWW）上用于创建和展示网页的标准语言。它并非传统意义上的编程语言，而是通过一系列预定义的标记（tags）来结构化文本、图像、音频、视频等多媒体元素，实现网页内容的组织和呈现。HTML自1996年的1.0版本发展至今，随着网络技术的进步，其功能不断拓展，版本持续更新，最新版本为HTML5。 #### HTML的应用场景与优势 HTML因其简洁性和易学性，成为网页设计与开发的基石。它允许开发者通过简单的标记语法，创建包含丰富媒体元素的网页，且文件体积小，便于网络传输。此外，HTML与CSS（层叠样式表）和JavaScript的结合，能够实现更复杂、动态的网页交互和布局设计。 #### HTML设计网页的步骤 1. **生成HTML文本文件**：使用文本编辑器（如Notepad++、Sublime Text或Visual Studio Code）或具备HTML编辑功能的软件（如Microsoft FrontPage、Adobe Dreamweaver），创建以.htm或.html为扩展名的文件。网站的首页通常命名为index.htm或default.html，以便于浏览器自动识别。 2. **显示页面**：利用Web浏览器（如Google Chrome、Mozilla Firefox、Microsoft Edge）或网页设计软件查看和调试创建的HTML页面。只需在浏览器地址栏输入页面文件的路径，即可预览页面效果。 #### HTML基本结构与语法 HTML的基本结构由一系列标记组成，分为成对使用的标记和单标记。成对标记如`<html>`、`<head>`、`<body>`，它们分别有对应的结束标记`</html>`、`</head>`、`</body>`。单标记如`<img>`、`<br>`则无需结束标记。标记通常包含属性，如`<a href="url">`中的`href`属性用于指定链接的目标URL。 - **HTML文档的基本结构**： ```html <!DOCTYPE html> <html> <head>  </head> <body>  </body> </html> ``` - **属性与值**：属性用于提供额外的信息，如`src`属性用于图像标记`<img>`指定图像源文件，`alt`属性则提供替代文本。属性值通常用引号包围，如`src="image.jpg"`。 #### 学习HTML的关键点 - **理解HTML的基本概念和标记的作用**：熟悉常用的HTML标记及其功能，如段落标记`<p>`、标题标记`<h1>`至`<h6>`、列表标记`<ul>`、`<ol>`、`<li>`等。 - **掌握HTML文档的结构**：理解`<!DOCTYPE>`声明、`<html>`、`<head>`、`<body>`等标记的使用。 - **学习如何使用HTML标记嵌入多媒体元素**：如图像`<img>`、音频`<audio>`、视频`<video>`等。 - **了解HTML与CSS、JavaScript的协同作用**：CSS用于样式控制，JavaScript用于添加动态行为和交互。 - **实践操作**：通过实际编写HTML文档，逐步加深对HTML语法的理解，并尝试使用CSS和JavaScript进行页面美化和功能增强。 HTML是构建Web页面的基石，掌握其基础和进阶知识，对于从事网页设计、前端开发乃至整个IT行业的人来说，都是至关重要的技能。通过本教程的学习，读者应能够独立设计和开发基本的静态网页，并为进一步学习高级Web开发技术打下坚实的基础。

资源推荐

资源详情

资源评论

第 3 章

HTML 语言基础

学习目标

本章将通过实例，主要介绍 HTML 语言的有关概念、常见标识的功能和使用，以及学习

使用 HTML 语言来编写简单的页面程序。通过本章的学习，要求：

• 了解 HTML 的有关概念。

• 掌握 HTML 常见标识的功能、格式和使用。

• 学习使用 HTML 语言来设计网页的方法。

• 学会使用 HTML 生成简单网页程序，掌握 HTML 在网站建设中的应用。

3.1 HTML 使用示例

上一章介绍了 FrontPage 2002 网页设计与制作的基础知识。实际上，设计制作比较简单的

网页，完全可以使用 HTML 来完成。为了介绍 HTML 的知识，本章将选用滨海科技学院主页

和页面作为实例。其主页效果如图 1-1 所示，相应的 HTML 代码见附录 A。

3.2 HTML 的简介

3.2.1 HTML 的简介

HTML 是 Hypertext Markup Language 的缩写，称为超文本标识语言。它是 WWW（World

Wide Web，即万维网）上的发布语言、标识性语言或页面格式定义语言，是开发、研究 Web

数据库的基础，是网站建设必须掌握的基础知识。

HTML 语言并不是一种真正的“程序”语言，而是一种文字处理语言，它主要提供一些

标识。通过标识，用户可以在 HTML 文本中插入图形图像、音频、视频等对象，使其具有丰

富的网页内容和很强的观赏性，还可以实现文件间的超级链接。由于 HTML 文件本身的容量

很小（不包括插入的图像、声音之类文件），所以 HTML 文件非常适合在网络上传输。超文本

标识语言比较简单，本章主要介绍它的基本知识。

HTML 的版本很多，自 1996 年推出 HTML 的 1.0 版本以来，HTML 的版本在不断地提高，

功能也在不断地加强，浏览器的功能也在不断地随之提高。因此，本章在讲解 HTML 知识时，

会淡化版本问题，尽量以高版本的内容为准。

3.2.2 使用 HTML 设计网页的步骤

使用 HTML 设计网页，步骤比较简单，一般包括如下两步。

1．生成 HTML 文本文件

HTML 文件是一个纯 ASCII 文件，通常用来编辑 HTML 文件的软件非常多，可以是一般

的文本编辑器，如 Word 、记事本等，也可以是自带 HTML 编辑功能的网页浏览软件，如

FrontPage、IE 浏览器、Netscape 浏览器等。不管使用哪种软件，都要求生成的 HTML 文件的

扩展名为.htm 或.html。

提示：习惯上一个网站的首页名称通常命名为 index.htm 或 default.html。这样做的好处是，

只要浏览网站，浏览器便会自动地找出首页文件。

2．显示页面

用来显示 HTML 文件页面的软件比较多，通常使用的是浏览器（如 IE、Netscape）或网

页设计软件（如 FrontPage）等。

在本章的各节中，将采用记事本作为 HTML 文件的编辑器，IE 浏览器作为显示页面的工具。

要在 IE 浏览器中显示页面，只要在 IE 运行窗口的地址栏中输入要显示的页面文件的绝对

地址就可以了。

3.3 HTML 基本结构

3.3.1 HTML 语言的语法

HTML 语言的语法非常简单。HTML 语言由标识和属性构成，浏览器读到 HTML 的标识

后，将其解释并显示出来，使其成为网页或网页的某个组成部分。HTML 标识的学习是 HTML

学习的一个重要内容。

1．标识

（1）标识的类型

HTML 的标识分成两种，一种用来标识网页上的组件或描述组件的样式，如 HTML 格式

标识<HTML>、标题标识<TITLE>、头部标识<HEAD>、主体标识<BODY>等；另一种用来指

向其他资源，如图片插入<IMG>标识、识别网页内的位置标识或超链接标识<A>等。

在后面的章节中，再分别介绍 HTML 标识的格式、功能及使用。

（2）标识的使用格式

HTML 的标识由一对尖括号“<”和“>”将其括起来。大部分标识要成对使用，具有起

始标识和结束标识，放在它所描述的文档两边。结束标识前要加“/”。例如，<html>...</html>、

<head>...</head>、<body>...</body>等。

在上面三对标识中，<html>、<head>和<body>是起始标识，</html>、</head>和</body>

是结束标识。

也有一部分标识是单独使用的，有时结束标识可以省略。

2．属性和值

HTML 标识本身能描述特性，同时大部分标识还有一些属性，属性是存储值的变量，可

以存放更多的相关信息。通常属性都有一个属性值(Value)，和其他语言一样，属性值一般都有

一个定义好的取值范围，取值时通常不能超出规定的范围。

属性的使用一般格式是：属性名=属性值。

属性一般写在标识后边并位于尖括号内，标识和属性间一般用空格隔开，使内容和结构

清晰。如果有多个属性，属性间也加空格。

属性值一般有如下的规定：

① 值通常加引号“”将其界定起来。

② 如果值是由英文字母、数字(0~9)、减号或小数点组成，引号可以略去不写。在具体的

语句中，标识、标识的属性和属性值的写法，参照下例：

↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑

起属值属值属值内结

始性性性容束

标标

识识

3．嵌套标识

如果使用一个以上的标识来表示网页的数据，就要使用嵌套标识。嵌套标识的顺序不能

交叉。例如，将一行文字定义为标题 3、斜体、下划线，需要用到<H3>、<I>和<U>几个标识。

写法如下：

<H3> <I> <U> 学习网页制作 <U> <I> <H3>

如果写成下列的形式之一，就出现了嵌套标识的顺序交叉。

<H3> <I> <U> 学习网页制作 <I> <U> <H3>

<H3> <I> <U> 学习网页制作 <H3> <I> <U>

<H3> <I> <U> 学习网页制作 <U> <H3> <I>

提示：IE、Netscape 浏览器的语法非常宽容，交叉后还是能显示正确的结果。但是我们还

是要养成良好的程序书写习惯。

4．空字符

浏览器在显示页面时，忽略了 HTML 标识间多余的空格和回车。所以在编写 HTML 的文

档时，一般在 HTML 文件中加上必要的空行、空格和回车，使代码排列整齐，结构清晰，便

于阅读和理解。

提示：由于浏览器忽略了空格和回车，所以不能用空行、空格和回车来格式化要显示的

内容，必须用 HTML 的格式标识来实现格式化显示的功能。

5．特殊字符与转义字符

HTML 语言定义了一些特殊的字符，如空格符、&字符、小于号、大于号、双引号等。浏

览器可以显示这些字符。在 HTML 中，有一些字符如<、>、&等有特殊含义（前两个字符用

于标识界定，&用于转义），不能直接使用。使用这三个字符时，应使用它们的转义字符。

& 的转义序列为 &amps; 或 &#38；

< 的转义序列为 &Lt; 或 &#60；

> 的转义序列为 > 或 &#62；

前者为字符转义序列，后者为数字转义序列。

例如，在 HTML 文件中有字符串“&Lt;font&Lgt;”，则在显示时显示为<font>，若直接写

为<font>则被认为是一个标识。

由于 HTML 使用的字符集是 ISO &859 Larin-1 字符集，该字符集中有许多标准键盘上无

法输入的字符。对这些特殊字符也只能使用转义字符序列。

对于转义字符，有如下说明：

① 转义序列各字符间不能有空格。

② 转义序列必须以“;”结束。

③ 单独的&，浏览器并不认为是转义字符的开始。如“&Lt;”被解释为“&Lt;”而不是

“<”。

HTML 中的转义字符集合请参见附录 B。

6．注释标识

和其他语言一样，为了使 HTML 文档便于阅读和理解，HTML 提供了注释标识，用户可

以在文档中加入注释内容。在显示时，浏览器并不将注释的内容显示出来。注释语句是通过注

释标识来实现的。

注释标识： 或 <! 和 >。

格式： 或

<! 注释内容 >

功能：在 HTML 文件中加入注释内容。

提示：二种注释方法等效，但使用<! 注释内容 >格式注释时，注释的内容不能包含有右

尖括号“>”。

3.3.2 HTML 文件的基本结构

HTML 文件的结构非常清晰，使用 HTML 语言生成的文件基本结构如下：

标题

</TITLE>

</HEAD>

本文区内容

</BODY>

剩余49页未读，继续阅读

评论收藏

内容反馈

hanxunduke

粉丝: 0
资源: 7

HTML 教程

最新资源

HTML 教程

HTML 教程

HTML 教程

html教程

HTML教程

HTML教程（HTML ppt教程）

HTML教程软件（入门级）

HTML教程之文本的使用

最实用最详细HTML教程.

HTML教程 HTML教程 HTML教程 HTML教程 清华大学

html教程（完整版）

html教程chm详细教程

HTML教程 HTML教程

html的教程

html教程全集.zip

html基础html入门教程html网页制作基础

HTML教程（PPT）

html教程全.pdf

HTML教程(最全的图文并茂教程).ppt

html教程（完全）

三本Html教程合集下载.zip

最新资源

HTML教程 HTML教程 HTML教程 HTML教程清华大学