### 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的基础语法、常用标签及其属性,对于初学者来说是非常宝贵的学习资源。
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![circ](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 4
- 资源: 25
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
最新资源
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)
- 1
- 2
- 3
前往页