### HTML教程知识点总结
#### 一、HTML简介
**1.1 什么是HTML**
- **定义**: HTML（HyperText Markup Language）是一种标记语言，用于创建网页。它通过一系列的标签来描述网页的内容和结构。
- **文件类型**: HTML文件本质上是纯文本文件，包含了特定的标记来描述内容。
- **浏览器**: 浏览器如Chrome、Firefox等是用来解释并显示HTML文件的工具。
**1.2 为什么学习HTML**
- **基础性**: HTML是Web开发的基础，任何想要从事前端开发或网站建设的人都必须掌握。
- **实用性**: HTML不仅用于构建静态网页，也是动态网页（如JSP页面）的重要组成部分之一。
**1.3 HTML的发展史**
- **起源**: HTML基于SGML（Standard Generalized Markup Language），这是一种标准化的标记语言，最早在1978年至1986年间由ANSI等组织制定。
- **发明**: 1990年，Tim Berners-Lee发明了HTML，标志着万维网的诞生。
- **浏览器竞争**: 1996年，Netscape和Microsoft分别推出了支持新特性的浏览器版本，如Java Applets、JavaScript和VBScript的支持。
- **CSS标准**: 同一年，W3C提出了CSS标准，增强了网页的表现力。
- **插件支持**: Netscape 2.0和IE 3.0分别引入了对QuickTime插件和ActiveX控件的支持，进一步丰富了网页的多媒体功能。
#### 二、HTML基础
**2.1 HTML结构**
- **文档结构**: HTML文档通常由`<!DOCTYPE html>`声明开始，接着是`<html>`标签，包含`<head>`和`<body>`两部分。
- **基本结构示例**:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
```
**2.2 我的第一个网页**
- **创建方法**: 使用文本编辑器编写简单的HTML代码，并保存为`.html`文件。
- **示例代码**:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
</body>
</html>
```
#### 三、HTML元素
**3.1 HTML标签**
- **定义**: HTML标签用于定义网页的结构和内容。
- **示例**: `<p>`表示段落，`<a>`表示链接。
**3.2 标签属性**
- **定义**: 标签可以包含属性，用来提供更多关于标签的信息或控制其行为。
- **示例**: `href`属性用于定义链接的目标地址，如`<a href="http://example.com">链接</a>`。
#### 四、使用Dreamweaver Mx开发网页
- **软件介绍**: Dreamweaver是一款专业的网页设计与开发软件，支持可视化编辑和代码编辑。
- **使用方法**: 可以通过拖拽元素和属性来构建网页，也可以直接编辑HTML代码。
#### 五、HTML基本标签
**5.1 段落**
- **标签**: `<p>`。
- **用途**: 定义段落。
**5.2 标题元素**
- **标签**: `<h1>`至`<h6>`。
- **用途**: 定义不同级别的标题。
**5.3 换行**
- **标签**: `<br>`。
- **用途**: 插入换行符，不使用`<br>`时，浏览器默认将多行文本合并为一行显示。
**5.4 水平线**
- **标签**: `<hr>`。
- **用途**: 在页面中创建一条水平线，常用于分隔不同的内容区域。
**5.5 HTML中的注释**
- **标签**: `<!-- -->`。
- **用途**: 添加不会显示在页面上的注释。
**5.6 嵌入元素**
- **标签**: 如`<img>`、`<iframe>`等。
- **用途**: 插入图片、视频、音频或另一个网页。
#### 六、HTML格式化标签
**6.1 HTML的`<font>`标签**
- **标签**: `<font>`。
- **用途**: 控制字体的颜色、大小和类型。注意，此标签已被废弃，建议使用CSS来控制字体样式。
**6.2 格式化文字**
- **标签**: `<strong>`、`<em>`、`<sup>`、`<sub>`等。
- **用途**: 改变文本的外观，如加粗、斜体、上标、下标等。
**6.3 删除和插入文字**
- **标签**: `<del>`、`<ins>`。
- **用途**: 表示删除的文字和插入的文字。
**6.4 预格式化文本**
- **标签**: `<pre>`。
- **用途**: 显示预格式化的文本，保持原有的空格和换行。
**6.5 其他参考**
- **计算机输出**: `<code>`。
- **地址**: `<address>`。
- **缩写和首字母缩略法**: `<abbr>`、`<acronym>`。
- **文字方向**: `<bdo>`。
- **块引用**: `<blockquote>`。
#### 七、HTML链接
**7.1 连接**
- **标签**: `<a>`。
- **用途**: 创建链接到其他网页或同一页面内的链接。
**7.2 锚标签和`href`属性**
- **标签**: `<a href="URL">链接文本</a>`。
- **用途**: 定义链接的目标地址。
**7.3 邮件链接**
- **标签**: `<a href="mailto:email@example.com">发送邮件</a>`。
- **用途**: 创建电子邮件链接。
**7.4 target属性**
- **属性**: `target="_blank"`。
- **用途**: 指定链接打开的方式，例如在新窗口或标签页中打开。
#### 八、HTML表格
**8.1 表格头使用`<th>`标签指定**
- **标签**: `<th>`。
- **用途**: 定义表格中的表头单元格。
**8.2 有标题的表格**
- **标签**: `<table>`、`<thead>`、`<tbody>`、`<tr>`、`<td>`。
- **用途**: 创建带有标题的表格结构。
**8.3 美化表格**
- **方法**: 使用CSS来改变表格的外观，如边框样式、背景颜色等。
**8.4 frame属性**
- **属性**: `frame`。
- **用途**: 定义表格的边框样式，已废弃。
#### 九、HTML列表
**9.1 无序列表**
- **标签**: `<ul>`、`<li>`。
- **用途**: 创建项目符号列表。
**9.2 有序列表**
- **标签**: `<ol>`、`<li>`。
- **用途**: 创建数字编号列表。
**9.3 自定义列表**
- **标签**: `<dl>`、`<dt>`、`<dd>`。
- **用途**: 创建定义列表，常用于描述术语或关键词。
#### 十、HTML图像
**10.1 alt属性**
- **属性**: `alt`。
- **用途**: 提供图像的替代文本，在图像无法加载时显示。
**10.2 对齐图像**
- **属性**: `align`。
- **用途**: 设置图像相对于周围文本的位置，已废弃。
**10.3 图像导航**
- **标签**: `<a href="URL"><img src="image.jpg" alt="替代文本"></a>`。
- **用途**: 将图像作为链接的一部分。
**10.4 图像地图**
- **标签**: `<map>`、`<area>`。
- **用途**: 定义图像上的热点区域，使得点击这些区域时可以跳转到不同的URL。
#### 十一、颜色表示
- **概念**: 使用RGB值、十六进制值或颜色名称来表示颜色。
- **示例**: `color: #FF0000`表示红色。
#### 十二、HTML特殊字符/实体
- **概念**: 用于表示特殊字符，如版权符号、注册商标等。
- **示例**: `©`表示版权符号。
#### 十三、HTML表单
- **标签**: `<form>`、`<input>`、`<textarea>`、`<select>`等。
- **用途**: 创建用户输入数据的表单，包括文本输入、复选框、单选按钮等。
#### 十四、HTML框架
**14.1 垂直分栏**
- **标签**: `<frameset cols="percentage, percentage">`。
- **用途**: 将页面划分为垂直排列的多个部分。
**14.2 水平分栏**
- **标签**: `<frameset rows="percentage, percentage">`。
- **用途**: 将页面划分为水平排列的多个部分。
**14.3 混合框架**
- **标签**: 结合`cols`和`rows`属性使用。
- **用途**: 创建复杂的多列布局。
**14.4 导航框架**
- **标签**: `<frameset>`结合`<frame>`。
- **用途**: 创建专门用于导航的框架。
**14.5 `<noframes>`标签**
- **标签**: `<noframes>`。
- **用途**: 为不支持框架的浏览器提供备选内容。
**14.6 内嵌框架**
- **标签**: `<iframe>`。
- **用途**: 在当前页面内嵌入另一个HTML文档。
#### 十五、HTML样式
**15.1 内部样式表**
- **标签**: `<style>`。
- **用途**: 在HTML文档内部定义CSS样式。
**15.2 行内样式**
- **属性**: `style`。
- **用途**: 直接在HTML标签中定义样式。
**15.3 连接外部样式表**
- **标签**: `<link rel="stylesheet" href="styles.css">`。
- **用途**: 引入外部CSS文件。
**15.4 样式标签**
- **标签**: `<style>`。
- **用途**: 在HTML文档内部定义CSS规则。
#### 十六、HTML文件头
**16.1 HTMLMeta**
- **标签**: `<meta>`。
- **用途**: 提供有关网页的元数据，如关键字、描述、视口设置等。
**16.1.1 name属性**
- **属性**: `name`。
- **用途**: 定义元数据的名称。
**16.1.2 http-equiv属性**
- **属性**: `http-equiv`。
- **用途**: 类似于HTTP头部字段，用于指定某些HTTP头部字段的值，如内容类型、刷新间隔等。
#### 十七、HTML脚本
- **标签**: `<script>`。
- **用途**: 定义客户端脚本，如JavaScript。
#### 十八、HTML4.0事件属性
- **概念**: 用于定义HTML元素触发的事件，如`onclick`、`onmouseover`等。
#### 十九、HTML属性
- **概念**: HTML标签可以携带各种属性，用于控制标签的行为或外观。
以上是对《HTML教程（PDF版）》的内容进行整理后得到的关键知识点总结。这些知识点覆盖了HTML的基础语法、常用标签及其属性，对于初学者来说是非常宝贵的学习资源。
- 1
- 2
- 3
前往页