HTML语言基础PPT演示课件
合集下载
HTML语言基础PPT教学课件
体1最大，6最小。 ➢ 粗体字：<B></B>，用于显示粗体文字 ➢ 斜体字：<I></I>，用于显示斜体文字 ➢ 底划线：<U></U>，用于显示文字下划线 ➢ 上标字：<SUP></SUP>，用于显示上标字 ➢ 下标字：<SUB></SUB>，用于显示下标换行标记<BR>
2020/12/10
9
水 平 线 标 记<HR>
水平线标记用于在网页窗口中加一条水平线，用以分隔文 档。它的标记为<HR>，其属性有： ➢ align，用于设定水平线的位置，值有靠左left，居中
center，靠右right ➢ noshade，用于设定水平线不具有三维立体感 ➢ size，用于设定水平线的高度 ➢ width，用于设定水平线的宽度 ➢ color，用于设定水平线的颜色
rignt，靠上top，靠下bottom等 ➢ width，height,分别用于设置图像的宽度和高度 ➢ vspace，hspace，用于设置图像的水平和垂直间距 ➢ id，用于给图像命名 问：插入站点images目录下的图片em.jpg，设置其文字提示为“峨嵋天 下秀”，设置其边框为1，设置其位置为居中，设置其宽度为200象素， 高度为150象素，代码如何编写？
件说明和刷新网页等（提示：在DWMX中可通过插入/文件头 标签来进行设置） ➢ 标题：<TITLE></TITLE>，用于定义文件标题，该标题将显 示于浏览器顶端的标题栏（提示：在DWMX中可通过文档工 具栏的标题文本框来设置） ➢ 样式：<STYLE></STYLE>，用于定义和控制网页的版式 （提示：在DWMX中可通过文本/CSS样式来进行设置）
2020/12/10
9
水 平 线 标 记<HR>
水平线标记用于在网页窗口中加一条水平线，用以分隔文 档。它的标记为<HR>，其属性有： ➢ align，用于设定水平线的位置，值有靠左left，居中
center，靠右right ➢ noshade，用于设定水平线不具有三维立体感 ➢ size，用于设定水平线的高度 ➢ width，用于设定水平线的宽度 ➢ color，用于设定水平线的颜色
rignt，靠上top，靠下bottom等 ➢ width，height,分别用于设置图像的宽度和高度 ➢ vspace，hspace，用于设置图像的水平和垂直间距 ➢ id，用于给图像命名 问：插入站点images目录下的图片em.jpg，设置其文字提示为“峨嵋天 下秀”，设置其边框为1，设置其位置为居中，设置其宽度为200象素， 高度为150象素，代码如何编写？
件说明和刷新网页等（提示：在DWMX中可通过插入/文件头 标签来进行设置） ➢ 标题：<TITLE></TITLE>，用于定义文件标题，该标题将显 示于浏览器顶端的标题栏（提示：在DWMX中可通过文档工 具栏的标题文本框来设置） ➢ 样式：<STYLE></STYLE>，用于定义和控制网页的版式 （提示：在DWMX中可通过文本/CSS样式来进行设置）
《HTML入门》课件
《HTML入门》PPT课件
HTML入门PPT课件将带领你探索Web开发的基础知识，从HTML的简介开始， 一直到应用HTML和CSS美化页面样式。准备好了吗？让我们开始吧！
1. 简介
1 HTML的定义
了解HTML是什么以及如何使用它构建Web页面。
2 Web开发的基础
HTML作为Web开发的基石，对于想要迈入这个领域的人来说至关重要。
3
提交按钮和重置按钮
了解如何在HTML表单中添加提交按钮和重置按钮，实现用户交互响应。
5. CSS基础介绍
1 CSS的定义
介绍CSS的概念和作用，以及在Web开发中的重要性。
2 CSS和HTML的关系
解释CSS和HTML之间的关系，以及如何共同构建出精美的网页。
6. HTML+CSS的应用
美化页面样式
学习如何使用HTML和CSS共 同美化网页，使其外观更加吸 引人。
响应式布局
示例案例
了解响应式布局的概念和原理， 并学习如何创建适应不同设备 的网页。
通过实际案例演示如何将 HTML和CSS应用于创建令人 印象深刻的网页。
7. 总结
1 HTML和CSS的重要性和应用
2 学习进阶建议
总结HTML和CSS在Web开发中的重要性， 并强调其广泛应用的优势。
提供学习HTML和CSS进一步深入的资源 和建议，鼓励学习者继续探索。
列表和表格
使用HTML创建有序列表、 无序列表和表格，为信息 呈现提供更多选项。
链接和图片
探索如何在HTML中插入 链接和图像，使页面更富 有互动性和视觉吸引力。
4. HTML表单的基本结构，包括输入字段、标签和按钮。
2
文本框、下拉框和单选框
HTML入门PPT课件将带领你探索Web开发的基础知识，从HTML的简介开始， 一直到应用HTML和CSS美化页面样式。准备好了吗？让我们开始吧！
1. 简介
1 HTML的定义
了解HTML是什么以及如何使用它构建Web页面。
2 Web开发的基础
HTML作为Web开发的基石，对于想要迈入这个领域的人来说至关重要。
3
提交按钮和重置按钮
了解如何在HTML表单中添加提交按钮和重置按钮，实现用户交互响应。
5. CSS基础介绍
1 CSS的定义
介绍CSS的概念和作用，以及在Web开发中的重要性。
2 CSS和HTML的关系
解释CSS和HTML之间的关系，以及如何共同构建出精美的网页。
6. HTML+CSS的应用
美化页面样式
学习如何使用HTML和CSS共 同美化网页，使其外观更加吸 引人。
响应式布局
示例案例
了解响应式布局的概念和原理， 并学习如何创建适应不同设备 的网页。
通过实际案例演示如何将 HTML和CSS应用于创建令人 印象深刻的网页。
7. 总结
1 HTML和CSS的重要性和应用
2 学习进阶建议
总结HTML和CSS在Web开发中的重要性， 并强调其广泛应用的优势。
提供学习HTML和CSS进一步深入的资源 和建议，鼓励学习者继续探索。
列表和表格
使用HTML创建有序列表、 无序列表和表格，为信息 呈现提供更多选项。
链接和图片
探索如何在HTML中插入 链接和图像，使页面更富 有互动性和视觉吸引力。
4. HTML表单的基本结构，包括输入字段、标签和按钮。
2
文本框、下拉框和单选框
HTML语言基础PPT课件
语法： <!--注释内容-->
2.文件标记(<html>…</html>)
语法： <html>…</html>
说明：<html>这对标记是HTML文件的标记。 <html>处于文件的最前面，表示HTML文 件的开始。即浏览器从<html>标记开始解 释，直到遇到</html>标记为止。
-
13
HTML基本标记的使用方法(续)
-
14
HTML基本标记的使用方法(续)
4.文件标题标记(<title>…</title>) 语法： <title>文件标题文字</title> 说明：此标记用于设定HTML文件的标题名
称，它将显示在浏览器的标题栏中。 注意：<title>标记用于<head>标记中。但如
果HTML文件中没有使用<head>标记，则 <title>标记仍然起作用。
<title>HTML实例</title> </head> <body>
<!-- 简单的HTML文件 --> <p>Hello World！</p> <br> </body> </html>
-
7
HTML文档的基本构成
<HTML> <HEAD> ……… </HEAD> <BODY> <标签1 [属性[=属性值]] [属性[=属性值]].....> <标签2 [属性[=属性值]] [属性[=属性值]].....> ........... [</标签2>] [</标签1>]
2.文件标记(<html>…</html>)
语法： <html>…</html>
说明：<html>这对标记是HTML文件的标记。 <html>处于文件的最前面，表示HTML文 件的开始。即浏览器从<html>标记开始解 释，直到遇到</html>标记为止。
-
13
HTML基本标记的使用方法(续)
-
14
HTML基本标记的使用方法(续)
4.文件标题标记(<title>…</title>) 语法： <title>文件标题文字</title> 说明：此标记用于设定HTML文件的标题名
称，它将显示在浏览器的标题栏中。 注意：<title>标记用于<head>标记中。但如
果HTML文件中没有使用<head>标记，则 <title>标记仍然起作用。
<title>HTML实例</title> </head> <body>
<!-- 简单的HTML文件 --> <p>Hello World！</p> <br> </body> </html>
-
7
HTML文档的基本构成
<HTML> <HEAD> ……… </HEAD> <BODY> <标签1 [属性[=属性值]] [属性[=属性值]].....> <标签2 [属性[=属性值]] [属性[=属性值]].....> ........... [</标签2>] [</标签1>]
《HTML基础》PPT课件
• <title>欢迎访问我的主页</title>
• <style type="text/css">
• .STYLE11 {FONT-SIZE: 12px; color: #666666; }
• </style>
• <script type="text/JavaScript">
• <!--
• function MM_jumpMenu(targ, selObj, restore){ //v3.0
3. 开头部分用以存载重要信息，而只有本文部分会被显示。所以 大部分标记会运用于本文部分。
4. <TITLE>所标示的是文件的标题。会出现于浏览器顶部及为 别人 Bookmark 时的名称，所以每页有不同而明确的标题 是需要的。
h
9
实例 • <HTML>
• <head>
• <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
HTML就没有WWW“世界” 。
• HTML 不是程序设计语言，而是一种结构
语言。
h
4
2.1 HTML概述
• HTML有许多元素，文档通过元素置标就 形成了所谓的HTML文档。
• HTML 也是文本文件，所以可以用纯文本 编辑器来编辑（如Windows 的记事本、 写字板)
• 其后缀名必须是 .html 或 .htm
h
1
第2章 HTML语言基础
• 2.1 HTML概述 • 2.2 文本的编辑 • 2.3 图像编辑 • 2.4 建立超链接 • 2.5 表格与框架 • 本章小结
第14章HTML基础-PPT课件
3. 单元格命令：td
Td：单元格命令，为开关命令，标记一个单元格的开始和结 束。可带参数。常用的参数有：
（1）bgcolor参数：背景颜色参数，可用颜色英文单词或以 ＃开头的6位16进制表示。 （2）align参数：水平对齐参数，值有left, center, right等， 代表单元格内容左齐、居中、右齐。 （3）valign参数：垂直对齐位置参数，值有top、center、 bottom等，分别代表单元格内容顶对齐、居中、底对齐。 （4）width参数：宽度参数，可用像素表示或百分比表示。 （5）height参数：高度参数，可用像素表示或百分比表示。
2. 表行命令：tr
Tr：表行命令，为开关命令，标记一个表行的开始 和结束。可带参数。常用的参数有：
（1）bgcolor参数：背景颜色参数，可以用颜色 英文单词或以＃开头的6位16进制表示。 （2）align参数：对齐位置参数，值有left、 center、right等，代表该行表格单元中的内容左 对齐、居中、右对齐。 （3）height参数：高度参数，可用像素或所占显 示窗口高度的百分比表示。
14.1 HTML文件编辑器
文本格式编辑器: Windows的记事本（Notepad） FrontPage的HTML源码编辑方式 UltraEdit软件（特别推荐）
1. 记事本
2. FrontPage的HTML模式
3. UltraEdit
14.2 HTML文件结构
<html> <head> HTML文件头 </head> <body> HTML文件体 </body> </html>
一些HTML命令及其在IE中的显示效果
《html语法基础》课件
HTML的未来
1
HTML 5
引入了许多新特性，如视频、音频、
响应式设计
2
画布等，提升了网页的表现力和交互 性。
为了适应不同的屏幕尺寸，HTML越
来越注重网页在移动设备上显示与
交互体验。
3
语义化
HTML撰写更应重视内容本身，通过 具有语义的标签描述文档结构，提供 更好的可访问性。
时尚
简洁
运用现代设计元素和色彩搭配， 打造个性化的网页。
去除繁杂的设计元素，注重信 息呈现的清晰和易读性。
使HTML学习更高效
实践
通过实际编写HTML代码，加深理解和掌握各种标签和属性。
网上资源
利用互联网上海量的教程和文档，快速解决问题和获取新知识。
交流与分享
加入HTML学习社群，与他人交流经验，互相学习，共同成长。
HTML语法基础
什么是HTML
HTML的全称是超文本标记语 言，是一种标记语言，用于创 建网页结构和内容。
HTML基础语法
HTML文档以``标签开头，以`` 标签结束。文档通常包括``和`` 两个部分。
常用HTML标签
` `标签表示段落，``标签表示超 链接，``标签表示图片，` `和` `标签表示列表。
HTML文本格式化
加粗、斜体和下划线
在HTML中可以使用``、``、``等标签对文本进行格式化。
换行和分割线
使用` `标签换行，`
`标签添加水平分割线。
练习
1
步骤一
编写HTML文档的基本结构，包括``、
步骤二
2
``和``标签。
添加标题、段落、超链接等元素，丰
富网页内容。
3
步骤三
HTML基础ppt课件
表示链接一个外部CSS文件default.css如下: <link href="default.css" rel="stylesheet" type="text/css“ />
15
2.1 head容器的标记
3．meta元素 格式：
<meta name="text" http-equiv="text" content="text“ />
第1章 HTML基础
1
第1章 HTML基础
1 HTML文档结构 2 HTML基本标记的使用 3 超链接标记 4 HTML表格 5 HTML表单
2
1 HTML文档结构
在互联网中传送的文档，绝大部分使 用超文本标记语言编写，这些文档称为 HTML文档。
在基本HTML文档中，只允许两种元 素存在：一种是HTML标记，另一种则是 普通文本。
18
2.1 head容器的标记
5．script元素 格式：
<script type=“text/javascript”> 脚本语言代码段
3
1 HTML文档结构
HTML文档的组成结构如下：
4
1 HTML文档结构
一个完整的HTML文档通常由以下三部分组成：
1．HTML标记 格式：<html> … </html>
2．头部信息 格式：<head> … </head>
3．文本主体 格式：<body> … </body>
5
1 HTML文档结构
11
2.1 head容器的标记
15
2.1 head容器的标记
3．meta元素 格式：
<meta name="text" http-equiv="text" content="text“ />
第1章 HTML基础
1
第1章 HTML基础
1 HTML文档结构 2 HTML基本标记的使用 3 超链接标记 4 HTML表格 5 HTML表单
2
1 HTML文档结构
在互联网中传送的文档，绝大部分使 用超文本标记语言编写，这些文档称为 HTML文档。
在基本HTML文档中，只允许两种元 素存在：一种是HTML标记，另一种则是 普通文本。
18
2.1 head容器的标记
5．script元素 格式：
<script type=“text/javascript”> 脚本语言代码段
3
1 HTML文档结构
HTML文档的组成结构如下：
4
1 HTML文档结构
一个完整的HTML文档通常由以下三部分组成：
1．HTML标记 格式：<html> … </html>
2．头部信息 格式：<head> … </head>
3．文本主体 格式：<body> … </body>
5
1 HTML文档结构
11
2.1 head容器的标记
《html基础常识》课件
《HTML基础常识》PPT课 件
让我们一起来探索HTML的奥秘吧！
HTML是什么
HTML（超文本标记语言）是一种用于创建网页的标准标记语言，它使用标签来描述网页的结构和内容。
HTML的历史发展
HTML起源于1989年，经过多次版本更新和改进，成为现代Web开发的基础。HTML5引入了许多新特性和语义 元素。
HTML链接
使用<a>标签可以在网页之间创建链接，使用户可以轻松导航到其他页面或位置。
HTML表格
使用<table>标签以及相关的<tr>、<td>标签可以创建具有行和列的表格， 用于展示和组织数据。
HTML表单
通过<form>标签可以创建交互式的表单，用于用户提交数据。各种输入类型和验证规则可以通过不同的标签 来定义。
HTML元素与标签
HTML元素由开始标签和结束标签组成，标签用于定义元素的类型和含义。例 如，<p>标签用于定义段落。
HTML文本格式化
HTML提供了多种标签来格式化文本，如<b>加粗</b>、<i>斜体</i>和<u> 下划线</u&的HTML文档由<!DOCTYPE>声明、<html>元素、头部信息和主体 内容组成。
HTML图像
使用<img>标签可以插入图像到网页中，通过指定图像的URL或搜索查询， 可以显示具体的图片。
HTML音视频
HTML5引入了<audio>和<video>标签，可以直接在网页中嵌入音频和视频 内容，为用户提供丰富的多媒体体验。
HTML颜色与样式
让我们一起来探索HTML的奥秘吧！
HTML是什么
HTML（超文本标记语言）是一种用于创建网页的标准标记语言，它使用标签来描述网页的结构和内容。
HTML的历史发展
HTML起源于1989年，经过多次版本更新和改进，成为现代Web开发的基础。HTML5引入了许多新特性和语义 元素。
HTML链接
使用<a>标签可以在网页之间创建链接，使用户可以轻松导航到其他页面或位置。
HTML表格
使用<table>标签以及相关的<tr>、<td>标签可以创建具有行和列的表格， 用于展示和组织数据。
HTML表单
通过<form>标签可以创建交互式的表单，用于用户提交数据。各种输入类型和验证规则可以通过不同的标签 来定义。
HTML元素与标签
HTML元素由开始标签和结束标签组成，标签用于定义元素的类型和含义。例 如，<p>标签用于定义段落。
HTML文本格式化
HTML提供了多种标签来格式化文本，如<b>加粗</b>、<i>斜体</i>和<u> 下划线</u&的HTML文档由<!DOCTYPE>声明、<html>元素、头部信息和主体 内容组成。
HTML图像
使用<img>标签可以插入图像到网页中，通过指定图像的URL或搜索查询， 可以显示具体的图片。
HTML音视频
HTML5引入了<audio>和<video>标签，可以直接在网页中嵌入音频和视频 内容，为用户提供丰富的多媒体体验。
HTML颜色与样式
HTML语言授课教学幻灯片 .ppt
胡崧
HTML对图片的控制--3
图片的显示大小
• 我们可以指定一幅图片在浏览器窗口里的显 示大小。
• 定义图片的显示大小的方法是： <img src="sample.jpg" width="100"
height="100" > • width指定图片的宽度，height指定高度。
它们的属性值可以是象素，也可以是%。
• 11、cellpadding属性：单元格边 距。
2020/4/17
HTML超文本标识语言
胡崧
表格(TABLE)标记--4
单元格属性
• 1、valign属性：指定某一个单元格里的内容（文本、 图片等）的垂直对齐方式。垂直对齐方式的属性值包 括：
top：顶端对齐； middle：居中对齐； bottom：底端对齐。 Baseline：相对于基线对齐。
（3）<td>元素；定义表格的一个表格单元。每行可以 有不同数量的单元格，在<td>和</td>之间，将出现 表格的每一个单元格里的具体内容。
需要注意的是；上述的三个元素必须、而且只能够配对 使用。缺少任何一个元素，都无法定义出一个表格。
2020/4/17
HTML超文本标识语言
胡崧
表格(TABLE)标记--2
• 6 、 Bordercolordark 属 性 ： 暗 边 框的颜色
2020/4/17
HTML超文本标识语言
胡崧
表格(TABLE)标记--3
表格元素的属性 --2
• 7、bgcolor属性：指定表格或某一 个单元格的背景颜色。
• 8、background属性：指定表格或 某一个单元格的背景图片。其属性值 为一个URL地址。
HTML对图片的控制--3
图片的显示大小
• 我们可以指定一幅图片在浏览器窗口里的显 示大小。
• 定义图片的显示大小的方法是： <img src="sample.jpg" width="100"
height="100" > • width指定图片的宽度，height指定高度。
它们的属性值可以是象素，也可以是%。
• 11、cellpadding属性：单元格边 距。
2020/4/17
HTML超文本标识语言
胡崧
表格(TABLE)标记--4
单元格属性
• 1、valign属性：指定某一个单元格里的内容（文本、 图片等）的垂直对齐方式。垂直对齐方式的属性值包 括：
top：顶端对齐； middle：居中对齐； bottom：底端对齐。 Baseline：相对于基线对齐。
（3）<td>元素；定义表格的一个表格单元。每行可以 有不同数量的单元格，在<td>和</td>之间，将出现 表格的每一个单元格里的具体内容。
需要注意的是；上述的三个元素必须、而且只能够配对 使用。缺少任何一个元素，都无法定义出一个表格。
2020/4/17
HTML超文本标识语言
胡崧
表格(TABLE)标记--2
• 6 、 Bordercolordark 属 性 ： 暗 边 框的颜色
2020/4/17
HTML超文本标识语言
胡崧
表格(TABLE)标记--3
表格元素的属性 --2
• 7、bgcolor属性：指定表格或某一 个单元格的背景颜色。
• 8、background属性：指定表格或 某一个单元格的背景图片。其属性值 为一个URL地址。
HTML语言基础PPT演示课件
3.3.2 图像标记
我们要可以在页面中插入一些漂亮的图像，使文章图文并茂，如何在Web页面上插入图像呢？
它的语法格式为： <img src=图像的URL地址>
[例]
<html> <head> <title>例3-12</title> </head> <body> <img src=picture1.jpg align=left alt=风景 height=165 width=200>插入一个图像 <br><p><a href="picture2.jpg">单击这里可以看到一个图像</a></p> <a href="music.mp3">单击这里可以欣赏音乐</a> </body> </html>
字体标记符的 COLOR 属性可用来控制文字的颜色，使用方法与正文标记符<BODY> 中使用的 BGCOLOR 属性相同。face 属性
face 属性用来指定字体样式。在这个属性中用户可以指定一个或几个字体名称 [例3-5] 字体设置
<html> <head> <title>例3-5</title> </head> <body> <font size=7 color=red>这是7号字体</font> <font size=5 color=blue>这是5号字体</font> <font size=3 color=yellow>这是3号字体</font> <font size=2 color=red>这是２号字体</font> </body> </html>
我们要可以在页面中插入一些漂亮的图像，使文章图文并茂，如何在Web页面上插入图像呢？
它的语法格式为： <img src=图像的URL地址>
[例]
<html> <head> <title>例3-12</title> </head> <body> <img src=picture1.jpg align=left alt=风景 height=165 width=200>插入一个图像 <br><p><a href="picture2.jpg">单击这里可以看到一个图像</a></p> <a href="music.mp3">单击这里可以欣赏音乐</a> </body> </html>
字体标记符的 COLOR 属性可用来控制文字的颜色，使用方法与正文标记符<BODY> 中使用的 BGCOLOR 属性相同。face 属性
face 属性用来指定字体样式。在这个属性中用户可以指定一个或几个字体名称 [例3-5] 字体设置
<html> <head> <title>例3-5</title> </head> <body> <font size=7 color=red>这是7号字体</font> <font size=5 color=blue>这是5号字体</font> <font size=3 color=yellow>这是3号字体</font> <font size=2 color=red>这是２号字体</font> </body> </html>
Html入门PPT课件
标签</a>里。 （4）href属性定义了链接的地址。如本例的 （5）title属性定义了鼠标悬停时显示的文字。 （6）target属性定义了打开链接时的浏览器的窗口。target常用的两个属性值：
_blank 新窗口打开 _self 当前窗口打开
HTML注释语法 <!--注释的内容--> Html代码 <!--链接结束-->
例属性指定链接地址
HTML 元素的嵌套
• HTML 文档由嵌套的 HTML 元素构成。 • 大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
例1： <html> <body> <p>This is my first paragraph.</p> </body> </html>
<_blank">链到</a>代码解读：
（1）这是一个典型的A链接元素。 （2）以<a>标签开始 </a>标签结束 定义了一个A链接元素。 （3）这个A链接元素有三个属性href title target，写在开始标签里<a>，而不是写是结束
文本是头信息开始
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页标题</title>
文档标题
</head>
文本是头信息结束 ，不显示
<body>
正文开始
这里是网页内容
</body> </html>
_blank 新窗口打开 _self 当前窗口打开
HTML注释语法 <!--注释的内容--> Html代码 <!--链接结束-->
例属性指定链接地址
HTML 元素的嵌套
• HTML 文档由嵌套的 HTML 元素构成。 • 大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
例1： <html> <body> <p>This is my first paragraph.</p> </body> </html>
<_blank">链到</a>代码解读：
（1）这是一个典型的A链接元素。 （2）以<a>标签开始 </a>标签结束 定义了一个A链接元素。 （3）这个A链接元素有三个属性href title target，写在开始标签里<a>，而不是写是结束
文本是头信息开始
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页标题</title>
文档标题
</head>
文本是头信息结束 ，不显示
<body>
正文开始
这里是网页内容
</body> </html>
HTML基础教程ppt课件
基本组成部分—— HTML元素属性
HTML元素可以有自己的相关属性，每一个 属性还可以由我们网页编制者赋一定的值。 元素属性出现在元素的< >内，并且和元素 名之间有一个空格分隔；属性值用“”引 起来。
第二张网页（02.htm）
<html> <head> <title>my first page</title> </head> <body> <p align="center">This is my first homepage!</p> </body> </html>
HTML对颜色的控制
HTML对颜色的控制也有自己的语法。 HTML使用16进制的RGB颜色值对颜色进 行控制。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
常见颜色的代码
颜色
黑色 银色 红色 蓝色 白色 黄色 绿色 海蓝色
颜色名和RGB值
Black=”#000000” Silver=”#c0c0c0” Red=”#ff0000” Blue=”#0000ff” White=”#ffffff” Yellow=”ffff00” Green=”#00ff00” Aqua=”#00ffff”
HTML基本结构的 有关元素和元素属性
HEAD元素——1 <head>元素出现在文档的开头部分。 <head>与</head>之间的内容不会在浏览 器的文档窗口显示，但是其间的元素有特 殊重要的意义。 <title>
<title>元素定义HTML文档的标题。<title>与 </title>之间的内容将显示在浏览器窗口的标题 栏。
第1课HTML语言(一)PPT课件
15
4. HTML文件的基本结构
HTML文件是一种纯文本格式的文件，HTML文件包 括头部（head）和主体（body）。文件的基本结构为：
<HTML> <HEAD> <TITLE> 网页的标题 </TITLE> </HEAD> <BODY> 网页的内容 </BODY>
</HTML>
16
说明： ① HTML文件以<HTML>开头，以</HTML>结尾。 ② <HEAD>…</HEAD>：表示这是网页的头部，用 来说明文件命名和与文件本身的相关信息。可以包括 网页的标题部分：<TITLE>…</TITLE>。 ③ <BODY>…</BODY>：表示网页的主体即正文部 分。 ④ HTML语言并不要求在书写时缩进，但为了程序 的易读性，建议网页设计制作者使标记的首尾对齐， 内部的内容向右缩进几格。
<标记> 受标记影响的内容 </标记> <标记 />
12
说明： ① 每个标记都用“<”（小于号）和“>”（大于
号）围住，如<P>，<Table>，以表示这是HTML代码而 非普通文本。注意，“<”与标记名之间不能留有空格 或其它字符。
② 在标记名前加上符号“/”便是其结束标记， 表示这种标记内容的结束，如</FONT>。标记也有不用 </标记>结尾的，称之为单标记。
10
② 文字与图形资料：是指要提供给浏览信息的人 阅读的内容。WWW显示的图形一般都以独立文件的形式 存在，如果要显示图形（图形文件要用其他程序建 立），就必须用特殊的标记指向图形文件。
4. HTML文件的基本结构
HTML文件是一种纯文本格式的文件，HTML文件包 括头部（head）和主体（body）。文件的基本结构为：
<HTML> <HEAD> <TITLE> 网页的标题 </TITLE> </HEAD> <BODY> 网页的内容 </BODY>
</HTML>
16
说明： ① HTML文件以<HTML>开头，以</HTML>结尾。 ② <HEAD>…</HEAD>：表示这是网页的头部，用 来说明文件命名和与文件本身的相关信息。可以包括 网页的标题部分：<TITLE>…</TITLE>。 ③ <BODY>…</BODY>：表示网页的主体即正文部 分。 ④ HTML语言并不要求在书写时缩进，但为了程序 的易读性，建议网页设计制作者使标记的首尾对齐， 内部的内容向右缩进几格。
<标记> 受标记影响的内容 </标记> <标记 />
12
说明： ① 每个标记都用“<”（小于号）和“>”（大于
号）围住，如<P>，<Table>，以表示这是HTML代码而 非普通文本。注意，“<”与标记名之间不能留有空格 或其它字符。
② 在标记名前加上符号“/”便是其结束标记， 表示这种标记内容的结束，如</FONT>。标记也有不用 </标记>结尾的，称之为单标记。
10
② 文字与图形资料：是指要提供给浏览信息的人 阅读的内容。WWW显示的图形一般都以独立文件的形式 存在，如果要显示图形（图形文件要用其他程序建 立），就必须用特殊的标记指向图形文件。
HTML语言基础PPT课件
HTML语言
2021/3/12
辽宁工程技术大学软件学院
1
内容提要
一、HTML语言概述 二、文字版面的编辑 三、文字列表的设计 四、表格的设计 五、HTML的超链接 六、图片的使用 七、窗口框架 八、高级HTML使用 九、表单设计
2021/3/12
2
一、HTML语言概述
2021/3/12
3
Web页面与HTML文档
示例：<br>称为换行标记，当浏览器遇到 <br>标记时，将换行显示文本
2021/3/12
10
⑵双标记指令
语法： 格式1 <标记名称>要控制的内容</标记名称> 格式2 <标记名称 属性=属性值 …>要控制的内容</标记名称>
说明： ①用<标记名称>作为双标记指令的开始，用</标记名称>作为双
标记指令的结束，将要控制的内容安排在这一对标记中间 ②格式2与格式1的不同之处是后者在开始标记中带有起辅助作用
❖ 超文本标记语言HTML
Hyper Text Markup Language
❖ 可扩展标记语言XML
2021/3/12eXtensible Markup Language
5
HTML编辑器与HTML语言的学习
❖ 使用编辑器生成页面可能会产生的问题：
▪ 在编辑界面下的显示效果与用浏览器看到 的很可能会不同；
<!-- 简单的HTML文件 --> <p>Hello World！</p> <br> </body> </html>
2021/3/12
7
2021/3/12
辽宁工程技术大学软件学院
1
内容提要
一、HTML语言概述 二、文字版面的编辑 三、文字列表的设计 四、表格的设计 五、HTML的超链接 六、图片的使用 七、窗口框架 八、高级HTML使用 九、表单设计
2021/3/12
2
一、HTML语言概述
2021/3/12
3
Web页面与HTML文档
示例：<br>称为换行标记，当浏览器遇到 <br>标记时，将换行显示文本
2021/3/12
10
⑵双标记指令
语法： 格式1 <标记名称>要控制的内容</标记名称> 格式2 <标记名称 属性=属性值 …>要控制的内容</标记名称>
说明： ①用<标记名称>作为双标记指令的开始，用</标记名称>作为双
标记指令的结束，将要控制的内容安排在这一对标记中间 ②格式2与格式1的不同之处是后者在开始标记中带有起辅助作用
❖ 超文本标记语言HTML
Hyper Text Markup Language
❖ 可扩展标记语言XML
2021/3/12eXtensible Markup Language
5
HTML编辑器与HTML语言的学习
❖ 使用编辑器生成页面可能会产生的问题：
▪ 在编辑界面下的显示效果与用浏览器看到 的很可能会不同；
<!-- 简单的HTML文件 --> <p>Hello World！</p> <br> </body> </html>
2021/3/12
7
《HTML编程基础》课件
HTML提供了标签来创建超链接。通过设置链接的目标URL，可以实现跳转到其他网页或锚点。
超链接的类型和创建方法
超链接可以是外部链接，指向其他网站；也可以是内部链接，指向同一网站的其他页面。创 建超链接只需使用标签并设置正确的URL即可。
五、HTML图像显示
1 图像显示的作用和常见场景
图像在网页中起到吸引用户注意力和丰富内容的作用，常见场景包括产品展示、新闻报 道等。
2 HTML调试技巧和工具
在实际开发过程中，可能会遇到各种HTML的调试问题。提供一些实用的技巧和工具，帮 助学员解决问题。
3 HTML进阶学习和推荐资源
展示一些进阶学习的途径和推荐资源，帮助学员进一步深入学习HTML和Web开发。
八、总结与答疑
1 HTML编程基础的总结
对整个课程内容进行总结，强调学员的收获和重点知识。
HTML标签的嵌套 和属性
HTML标签可以相互嵌套， 形成复杂的文档结构。同 时，标签还可以接受属性 来添加额外的信息和样式。
三、HTML文本格式化
1 文本格式化的作用
和常见场景
2 HTML中的文本格式 3 CSS样式表的基本
化标签
语法和应用
通过HTML的文本格式化 标签，可以给网页添加 各种样式，使其更加美 观和易读。
HTML提供了众多的文本 格式化标签，如加粗、 斜体、下划线等。
通过CSS样式表，可以更 加灵活地控制网页的外 观和布局。学习CSS是进 阶的重要一步。
四、HTML超链接超链接的概和作用超链接是连接网页与网页之间的桥梁，使用户可以点击跳转到其他页面。它是实现网页之间 互动的重要手段。
HTML中的超链接标签
《HTML编程基础》PPT课 件
# HTML编程基础 PPT课件
超链接的类型和创建方法
超链接可以是外部链接，指向其他网站；也可以是内部链接，指向同一网站的其他页面。创 建超链接只需使用标签并设置正确的URL即可。
五、HTML图像显示
1 图像显示的作用和常见场景
图像在网页中起到吸引用户注意力和丰富内容的作用，常见场景包括产品展示、新闻报 道等。
2 HTML调试技巧和工具
在实际开发过程中，可能会遇到各种HTML的调试问题。提供一些实用的技巧和工具，帮 助学员解决问题。
3 HTML进阶学习和推荐资源
展示一些进阶学习的途径和推荐资源，帮助学员进一步深入学习HTML和Web开发。
八、总结与答疑
1 HTML编程基础的总结
对整个课程内容进行总结，强调学员的收获和重点知识。
HTML标签的嵌套 和属性
HTML标签可以相互嵌套， 形成复杂的文档结构。同 时，标签还可以接受属性 来添加额外的信息和样式。
三、HTML文本格式化
1 文本格式化的作用
和常见场景
2 HTML中的文本格式 3 CSS样式表的基本
化标签
语法和应用
通过HTML的文本格式化 标签，可以给网页添加 各种样式，使其更加美 观和易读。
HTML提供了众多的文本 格式化标签，如加粗、 斜体、下划线等。
通过CSS样式表，可以更 加灵活地控制网页的外 观和布局。学习CSS是进 阶的重要一步。
四、HTML超链接超链接的概和作用超链接是连接网页与网页之间的桥梁，使用户可以点击跳转到其他页面。它是实现网页之间 互动的重要手段。
HTML中的超链接标签
《HTML编程基础》PPT课 件
# HTML编程基础 PPT课件
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2、字体控制标识符
FONT标记符用于控制字符的样式，包括开始标记符<FONT>和结束标记符</FONT>，FONT 标记符具有3个常用的属性： size 属性
字号属性的值可以从 1 到 7，3 是默认值，字号越大显示的字符就越大。该属性 值也可以用 +n 或 -n 来作为相对值指定。 color 属性
第3章 HTML语言基础
3.1 HTML语言的基本结构标记
3.1.1 常用页面标记
1、 开始和结束标记
HTML文档的开始标记是<html>,它告诉浏览器下面的内容是HTML文档，在HTML文档结束处 要有对应的<html>标记，它告诉浏览器HTML文档结束了。它的语法格式如下：
<html> HTML文件的所有内容 </html>
文档内容 </body>
3.1.2 文本格式标记
1、 标题标记符
在HTML中，用户可以通过Hn标记符来标识文档中的标题和副标题，其中：n是1-6的数字； <H1> 表 示 最 大 的 标 题 ， <H6> 表 示 最 小 的 标 题 。 使 用 标 题 样 式 时 ， 必 须 使 用 结 束 标 记 符 。
这是使用HTML语言编写的Web页面文件z </body> </html>
<body>标记还具有一些可以设定Web页面背景的属性，可使用图片/图像作背景，确定链接的 颜色，设置文字的颜色等。
它的语法格式为： <body[bgcolor= #|text= #|link= #|alink= #|vlink= #|background=图像文件名]>
5、 物理字符标记 所谓物理字符样式，是指标记符本身就说明了所修饰文字的效果的标记符。常用的物理标 记符有： 斜体：< i >(italic)或< em>(emphasize) 黑体：<b>(black)或<strong> 添加下划线： <u>(underline) 选择打印机字体:<tt> 标记HTML语句:<code> 标记定义的语句:<dfn> 标记键盘字符:<kbd> 标记某个命令的例子:<samp> 标记程序变量:<var>
3.2 超链接标记
3.2.1 什么是超链接
超链接是WWW的一种链接技巧 ，它通过已定义好的关键字和图形，只要您 点取某个图标或某段文字，就可以自动连上相对应的其他文件。 所以在WWW的 站点画面中 ， 您可以通过超链接点取的方式，从一个网页链接到另一个网页 。 超链接标记为<a>与</a>
2、头部标记 HTML文档的头部标记是<head>,它告诉浏览器下面的内容是HTML文档的头部，显示在文本
之前，而</head>标记告诉浏览器头部内容结束了。头部里面一般包括注释、Meta和标题。 它的语法格式为 <head>
HTML文档的头部内容 </head>
3、标题标记 <title>和</title>标记中间所包括的文字将成为这个Web页面的标题，一般写在头部
4、水平线标记
在HTML中除了可以用P标记划分落，还可以用添加水平线的方法分隔文档的不同 部分。
水平线的标记符为<HR>，它包括以下属性： SIZE 属性用来改变水平线的粗细程度 WIDTH 属性用来更改水平线的长度 NOSHADE 属性用来使水平线以实线显示 COLOR 属性用来设置水平线的颜色 ALIGN 属性用来设置水平线的对齐方式 其中：COLOR 属性在 Microsoft Internet Explorer 3 及更高版本中，通过 在<HR>中设置 COLOR 属性可以控制水平线的颜色。
它的语法格式为： <hi> 标题文字</hi>(I=1,2…6) [例3-4] 不同的标题文字 <html> <head> <title>例3-4</title> <body> <font size=7>这是7号字体</font> <font size=5>这是5号字体</font> <font size=3>这是3号字体</font> <font size=2>这是２号字体</font> </body> </html>
4、4、 主体标记
<body>标记是Web页面主体标记的开始，并对应结束符</body>.Web页面的主要内容都出现在 <body>和</body>标记之中。它的语法格式为：
<body> 主体内容 </body>
[例 3-2] HTML 语言的主体标记
<html> <head> <title>例3-2</title> </head> <body>
3、 段落标记和换行标记
在HTML中一般用<p>来标记段落，在HTML中，一般使用标记符的align属性来设置 段落的对齐方式它的语法格式为：
文本</p> 另处一个类似的标记元素是<br>,<br>这个标记用来标识一个换行动作。在 HTML文件中可以用它来调整行间距
字体标记符的 COLOR 属性可用来控制文字的颜色，使用方法与正文标记符<BODY> 中使用的 BGCOLOR 属性相同。face 属性
face 属性用来指定字体样式。在这个属性中用户可以指定一个或几个字体名称 [例3-5] 字体设置
<html> <head> <title>例3-5</title> </head> <body> <font size=7 color=red>这是7号字体</font> <font size=5 color=blue>这是5号字体</font> <font size=3 color=yellow>这是3号字体</font> <font size=2 color=red>这是２号字体</font> </body> </html>
标记之中。标题文字会显示在Web浏览器最上面的title(标题)栏上。浏览器用户可以把标 题加入收藏夹中，。标题文字最好使用中文并且有明确的意义。 它的语法格式为 <title> Web页面的标题 </title> 我们先看一个例子头部标记和标题标记使用的例子 [例 3-1] 头部标记和标题标记 <html> <head> <title>这是页面的标题</title> </head> </html>