HTML网页编程基础讲义(PPT 65页)
合集下载
《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课件
• <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 表格与框架 • 本章小结
html讲解ppt
<html>
<head> <title>标题</title>
</head>
<body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6>
</body>
</html>
实例
<html> <head> <title>设置页面背景</title> </head> <body bgcolor="blue"> </body>
</html>
text属性
• 设置页面中文字显示的颜色 • 可以使用颜色单词，也可以使用十六进制 颜色值
实例
<html> <head>
<title>设置页面背景</title> </head> <body bgcolor="blue" text="white"> 页面文字颜色 </body> </html>
属性
属性
• 在标记和属性之间有个空格（如果有一个 或多个已存在的属性，就与前一个属性之 间有一个空格） • 属性后面紧跟着一个“=”符号. •有一个属性值，由一对双引号“ ”括起来
《html教程讲义》课件
一、HTML简介1.1 HTML的定义HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。
1.2 HTML的作用HTML用于描述网页的结构和内容，使得浏览器能够展示具有特定格式的文本、、图片等。
1.3 HTML的发展历程HTML 1.0（1993年）HTML 2.0（1995年）HTML 4.01（1997年）XHTML 1.0（2000年）HTML5（2014年）二、HTML文档结构2.1 基本结构<!DOCTYPE ><><head><meta charset="UTF-8"><>文档</></head><body><h1>一级</h1><p>段落内容</p><!-更多的标签和内容 --></body></>2.2 标签分类语义化标签：`<header>`、`<nav>`、`<section>`、`<article>`、`<footer>`等功能性标签：`<div>`、`<span>`等三、文本格式与排版3.1 标签`<h1>`～`<h6>`：依次表示一级到六级3.2 段落标签`<p>`：表示一个段落3.3 换行与清除浮动`<br>`：表示换行`<wbr>`：表示单词换行`<clear>`：清除浮动3.4 字符实体`<>&"`：分别表示小于号、大于号、引号四、图片与4.1 图片标签`<img>`：表示图片<img src="图片地址" alt="图片描述" width="宽度" height="高度"> 4.2 标签`<a>`：表示<a href="地址" target="_blank">文本</a>4.3 锚点`<a name="锚点名称">`：表示锚点`<a href="锚点名称">`：到锚点五、列表与表格5.1 无序列表`<ul>`：无序列表`<li>`：列表项5.2 有序列表`<ol>`：有序列表`<li>`：列表项5.3 定义列表`<dl>`：定义列表`<dt>`：定义`<dd>`：定义描述5.4 表格`<table>`：表格`<tr>`：表格行`<td>`：单元格`<th>`：表头单元格六、表单与数据验证6.1 表单标签`<form>`：表单`<input>`：输入框`<textarea>`：文本域`<select>`：下拉菜单`<option>`：下拉菜单选项6.2 数据验证`required`：必填字段`pattern`：正则表达式验证`minlength`、`maxlength`：字符长度限制`type="e"、type="number"、type=""：输入类型限制七、CSS样式7.1 内联样式在HTML标签内使用`style`属性添加样式7.2 内部样式表在`<head>`标签内使用`<style>`标签添加样式7.3 外部样式表使用`.css`文件作为样式表，通过`<link>`标签引入7.4 CSS选择器标签选择器：`h1 { }`类选择器：`.classname { }`ID选择器：`idname { }`属性选择器：`[attribute="value"] { }`八、盒子模型与布局8.1 盒子模型`margin`：外边距`border`：边框`padding`：内边距`width`、`height`：宽度和高度8.2 布局方式标准流布局浮动布局：`float`属性定位布局：`position`属性弹性盒模型（Flexbox）：`display: flex;`九、响应式设计9.1 媒体查询使用`media`查询不同设备屏幕大小时的样式9.2 移动端布局使用百分比、视口单位（vw、vh）、rem等实现响应式布局9.3 图片响应式使用`<picture>`标签或`srcset`属性实现图片响应式十、HTML5新特性10.1 视频与音频`<video>`：视频`<audio>`：音频10.2 画布（Canvas）`<canvas>`：绘制图形、动画等10.3 Web存储`localStorage`：本地存储`sessionStorage`：会话存储10.4 离线应用与缓存使用`manifest`文件实现离线应用10.5 其他新特性`<nav>`、`<section>`、`<article>`等语义化标签`<input type="e">`、`<input type="number">`等新输入类型`<dialog>`：对话框重点和难点解析HTML的基本结构和标签分类文本格式与排版，如、段落、换行等图片与的使用，包括图片标签和锚点列表与表格的创建和应用表单与数据验证，如必填字段、正则表达式验证等CSS样式的基础知识，包括内联样式、内部样式表和外部样式表盒子模型、布局方式以及响应式设计的基本概念HTML5的新特性，如视频与音频、画布、Web存储等HTML5的新特性，如离线应用、Web存储等，这些内容需要一定的实践和理解CSS的高级应用，如伪类、过渡、动画等，这些内容需要对CSS 有深入的了解表单的数据验证，如何使用JavaScript进行复杂的验证，需要对JavaScript有一定的了解。
HTML代码简介 PPT课件
• <a href=“” target=_blank title="新浪站点链接"> 新浪站点链接</a>
• </body>
• </html>
显示结果
1.25
© 2009
HTML代码简介
• 链接到email地址 • 在网站中，你经常会看到“联系我们”
的链接，一点击这个链接，就会触发你 的邮件客户端，比如Outlook Express， 然后显示一个新建mail的窗口。用<a>可 以实现这样的功能。
பைடு நூலகம்
1.26
© 2009
HTML代码简介
• <html>
• <body>
• <a href="biaoti.htm">这是一个链接 </a><br>
• <a href="" target=_blank title="新浪站点链接">新浪站 点链接</a>
• <a href = "mailto:info@">联系新 浪</a>
HTML代码简介
HTML注释
• 在HTML文件里，你可以写代码注释，解 释说明你的代码，这样有助于你和他人 日后能够更好地理解你的代码。
• 注释可以写在<!--和-->之间。浏览器是 忽略注释的，你不会在HTML正文中看到 你的注释。
• <!-- This is a comment -->
1.15
HTML绝对路径(Absolute Path)
HTML网页制作教程PPT课件
<form> <em>
HTML文档结构
<html> <head> <body>
Add Your Title Text
•Text 1 •Text 2 •Text 3 •Text 4 •Text 5
Text
html
head
body
title
h1
p
ul
p
li
li
ul
ol
li
li
li
li
li
li
ul
li
li
❖ 标尺线
<hr>
-------即为布局而提供的一种直线
可以为标尺线设定大小、宽高、颜色、对齐方式等。
如: <hr size=3> <hr width=25> <hr color=red>
表格（Table）标记（TAG）
❖ 基本语法： ❖ <table>...</table> 定义表格
<tr> 定义表行 <th> 定义表头 <td> 定义表元(表格的具体数据)
❖ <meta http-equiv=“Content-Type” content=“text/html;charset=#”>
“#”处填写的是语言的类型，如一般中国大陆基本上汉字 用的是国标编码，则为 gb2312 ；而港台地区则是 big5 ；美国则为us-ascii 。
❖ 注意：我们在做模板时，如果找的是一些韩国网站，则出 现的是<META HTTP-EQUIV=“content-type” content=“text/html; charset=euc-kr”> 如果 你不修改此处为gb2312，则会页面出乱！
HTML文档结构
<html> <head> <body>
Add Your Title Text
•Text 1 •Text 2 •Text 3 •Text 4 •Text 5
Text
html
head
body
title
h1
p
ul
p
li
li
ul
ol
li
li
li
li
li
li
ul
li
li
❖ 标尺线
<hr>
-------即为布局而提供的一种直线
可以为标尺线设定大小、宽高、颜色、对齐方式等。
如: <hr size=3> <hr width=25> <hr color=red>
表格（Table）标记（TAG）
❖ 基本语法： ❖ <table>...</table> 定义表格
<tr> 定义表行 <th> 定义表头 <td> 定义表元(表格的具体数据)
❖ <meta http-equiv=“Content-Type” content=“text/html;charset=#”>
“#”处填写的是语言的类型，如一般中国大陆基本上汉字 用的是国标编码，则为 gb2312 ；而港台地区则是 big5 ；美国则为us-ascii 。
❖ 注意：我们在做模板时，如果找的是一些韩国网站，则出 现的是<META HTTP-EQUIV=“content-type” content=“text/html; charset=euc-kr”> 如果 你不修改此处为gb2312，则会页面出乱！
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>
html5基础PPT课件
.文档类型声明。 .html页面。
--文件头<head></head> --文件主体部分<body></body>
<!DOCTYRE html>
<html>
<head>
<meta charset=”utf-8”>
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>
2021
5
html基础标签元素
2021
6
html基础标签元素
2021
7
html基础标签元素
2021
8
html基础标签元素
2021
9
html基础元素--表格
2021
<table> <caption>成绩统计表
</caption>
<tr> <td></td> <td></td> <td></td>
</select>
12
html基础元素--结构标记
2021
13
网页编程基础 HTML5
WebBasic HTML5 Unit01
2021
1
HTML快速入门
HTML快速入门
html概述 html文档结构 html基础语法
2021
超文本 什么是html
文档类型声明 head.body元素
标记语法 元素/嵌套 属性和值 HTML和XHTML HTML5
--文件头<head></head> --文件主体部分<body></body>
<!DOCTYRE html>
<html>
<head>
<meta charset=”utf-8”>
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>
2021
5
html基础标签元素
2021
6
html基础标签元素
2021
7
html基础标签元素
2021
8
html基础标签元素
2021
9
html基础元素--表格
2021
<table> <caption>成绩统计表
</caption>
<tr> <td></td> <td></td> <td></td>
</select>
12
html基础元素--结构标记
2021
13
网页编程基础 HTML5
WebBasic HTML5 Unit01
2021
1
HTML快速入门
HTML快速入门
html概述 html文档结构 html基础语法
2021
超文本 什么是html
文档类型声明 head.body元素
标记语法 元素/嵌套 属性和值 HTML和XHTML HTML5
第二章网页制作语言HTML精品PPT课件
学时：60学时
第二章 网页制作语言HTML
• 了解：HTML语言的基本知识 • 熟练掌握：掌握使用HTML标签建立基本的网页；使用各种对象
标签在网页中插入文本、图像、表格、列表、多媒体；使用超 链接标签建立绝对路径和相对路径的链接；通过框架的形式建 立包含框架的页面。
• 掌握：熟悉HTML的语法；掌握HTML的基本标签；掌握HTML 中的文本、图像、链接、列表、表格、多媒体、框架等标签的 使用方法；掌握各个对象标签的属性应用。
• 到现在为止，HTML已经发展到了比较成熟的HTML 4.0版本，在这个版本下 的语言中，规范更加统一，浏览器之间的兼容性也更加完善。
• 除了HTML语言以外，W3C组织在2000年推出了另一种XHTML1.0语言，该 语言其实是HTML4.0的升级版本HTML4.01，只是用XHTML1.0来命名。
从上面的标签中可以看到标签都是成对出现，由开始标签<标签名>和结束标签 </标签名>组成的，这种成对出现的标签称之为双向标签。除此之外HTML标签 还有单向标记，单向标签只有一个标签<标签名/>，如图像标签<img/>，水平线 <hr/>等。大部分的HTML标签都是有属性的，在为标签添加属性时，属性要写 在标签内，如是双向标签，属性写在开如标签内，各个属性之间不分先后顺序， 属性是可选的，如果不写，那就是采用默认属性值，其格式如下：
二、HTML文件的编写方法
二、HTML文件的编写方法
1.手工直接编写
可以使用任何文本编辑器 来打开并编写HTML文件， 如Windows系统中自带的 记事本。
2.使用可视化软件
Microsoft公司的 FrontPage、Adobe公司 的Dreamweaver等软件均 可以创建HTML文档。
第二章 网页制作语言HTML
• 了解：HTML语言的基本知识 • 熟练掌握：掌握使用HTML标签建立基本的网页；使用各种对象
标签在网页中插入文本、图像、表格、列表、多媒体；使用超 链接标签建立绝对路径和相对路径的链接；通过框架的形式建 立包含框架的页面。
• 掌握：熟悉HTML的语法；掌握HTML的基本标签；掌握HTML 中的文本、图像、链接、列表、表格、多媒体、框架等标签的 使用方法；掌握各个对象标签的属性应用。
• 到现在为止，HTML已经发展到了比较成熟的HTML 4.0版本，在这个版本下 的语言中，规范更加统一，浏览器之间的兼容性也更加完善。
• 除了HTML语言以外，W3C组织在2000年推出了另一种XHTML1.0语言，该 语言其实是HTML4.0的升级版本HTML4.01，只是用XHTML1.0来命名。
从上面的标签中可以看到标签都是成对出现，由开始标签<标签名>和结束标签 </标签名>组成的，这种成对出现的标签称之为双向标签。除此之外HTML标签 还有单向标记，单向标签只有一个标签<标签名/>，如图像标签<img/>，水平线 <hr/>等。大部分的HTML标签都是有属性的，在为标签添加属性时，属性要写 在标签内，如是双向标签，属性写在开如标签内，各个属性之间不分先后顺序， 属性是可选的，如果不写，那就是采用默认属性值，其格式如下：
二、HTML文件的编写方法
二、HTML文件的编写方法
1.手工直接编写
可以使用任何文本编辑器 来打开并编写HTML文件， 如Windows系统中自带的 记事本。
2.使用可视化软件
Microsoft公司的 FrontPage、Adobe公司 的Dreamweaver等软件均 可以创建HTML文档。
《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课件
html教程全PPT课件
– (1)bgcolor
• bgcolor属性标志HTML文档的背景颜色。如： bgcolor=“#CCFFCC”。
• 例：04.htm
2021/3/7
CHENLI
18
HTML对颜色的控制
• HTML对颜色的控制也有自己的语法。HTML 使用16进制的RGB颜色值对颜色进行控制。
• 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
2021/3/7
CHENLI
9
第二张网页（02.htm）
<html> <head> <title>第一张网页</title> </head> <body> <p align="center">欢迎光临我的主页!</p> </body>
</html>
2021/3/7
CHENLI
10
HTML基本结构的 有关元素和元素属性
3
HTML文档的编写方法
1. 手工直接编写
– 记事本等，存成.htm .html格式
2. 使用可视化HTML编 辑 器
– Frontpage、Dreamweaver等
3. 由Web 服务器（ 或称HTTP 服务器） 一 方 实时动态地生成。
2021/3/7
CHENLI
4
网页文件命名
1. *.htm或*.html 2. 无空格 3. 无特殊符号（例如&符号），只可以有下划
Green=”#00ff00” Aqua=”#00ffff”
2021/3/7
CHENLI
20
• bgcolor属性标志HTML文档的背景颜色。如： bgcolor=“#CCFFCC”。
• 例：04.htm
2021/3/7
CHENLI
18
HTML对颜色的控制
• HTML对颜色的控制也有自己的语法。HTML 使用16进制的RGB颜色值对颜色进行控制。
• 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
2021/3/7
CHENLI
9
第二张网页（02.htm）
<html> <head> <title>第一张网页</title> </head> <body> <p align="center">欢迎光临我的主页!</p> </body>
</html>
2021/3/7
CHENLI
10
HTML基本结构的 有关元素和元素属性
3
HTML文档的编写方法
1. 手工直接编写
– 记事本等，存成.htm .html格式
2. 使用可视化HTML编 辑 器
– Frontpage、Dreamweaver等
3. 由Web 服务器（ 或称HTTP 服务器） 一 方 实时动态地生成。
2021/3/7
CHENLI
4
网页文件命名
1. *.htm或*.html 2. 无空格 3. 无特殊符号（例如&符号），只可以有下划
Green=”#00ff00” Aqua=”#00ffff”
2021/3/7
CHENLI
20
网页html代码详解详解PPT文档共72页
▪
26、要使整个人生都过得舒适、愉快，这是不可能的，因为人类必须具备一种能应付逆境的态度。——卢梭
▪
27、只有把抱怨环境的心情，化为上进的力量，才是成功的保证。——罗曼·罗兰
▪
28、知之者不如好之者，好之大胆和坚定的决心能够抵得上武器的精良。——达·芬奇
▪
30、意志是一个强壮的盲人，倚靠在明眼的跛子肩上。——叔本华
谢谢！
72
网页html代码详解详解
16、人民应该为法律而战斗，就像为 了城墙 而战斗 一样。 ——赫 拉克利 特 17、人类对于不公正的行为加以指责 ，并非 因为他 们愿意 做出这 种行为 ，而是 惟恐自 己会成 为这种 行为的 牺牲者 。—— 柏拉图 18、制定法律法令，就是为了不让强 者做什 么事都 横行霸 道。— —奥维 德 19、法律是社会的习惯和思想的结晶 。—— 托·伍·威尔逊 20、人们嘴上挂着的法律，其真实含 义是财 富。— —爱献 生
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（4）在打开的记事本中，输入以下代码： <html><head> <title>网页标题</title></head> <body> 这是我的第一个主页 </body> </html>
上一页 下一页 返回
任务一使用HTML语言来制作网页
要浏览这个index.htm文件，只需在桌面上双击它，或者打开 浏览器，选择【File】→【Open】命令，然后选择这个文件就行 了。效果如图2-5所示。
任务一使用HTML语言来制作网页
【任务要点】
1.使用记事本来制作HTML网页 2.使用DreamWeaver来制作HTML网页
【案例1】使用记事本来制作HTML网页 【具体步骤】（在Windows XP中完成）
（1）双击【我的电脑】图标，选择【工具】→【文件夹选项】命令， 从弹出的对话框中打开【查看】选项卡，取消选中【隐藏已知文 件类型的扩展名】复选框，再单击【确定】按钮，即可将所有文 件的扩展名显示出来。
HTML只是一个纯文本文件。创建一个HTML文档只需要两 个工具，一个是HTML编辑器，另一个是Web浏览器。HTML编 辑器是用于生成和保存HTML文档的应用程序。Web浏览器是用 来打开Web网页文件，提供给用户查看Web资源的客户端程序。
上一页 下一页 返回
任务一使用HTML语言来制作网页
二、HTML的基本结构 一个HTML文档是由一系列的元素和标签组成的，元素名不
<HEAD>---------------------------------------------|头部标签开始 <TITLE>一个简单的HTML示例</TITLE> ------------|Title标签对用来在标题栏内显示网页主题 </HEAD>------------------------------------------------|头部标签结果 <BODY>-----------------------------------------|主体开始 这是网页的文档的显示部分（大部分代码是在这个标签对里面的） </BODY>----------------------------------------|主体结束 </HTML>-----------------------------------------------|结尾标签
【案例2】使用DreamWeaver来制作HTML网页
【具体步骤】（在DreamWeaver 8中完成） （1）在D盘根目录下建立文件夹并命名为website（网站）。 （2）打开DreamWeaver，选择【文件】→【新建】→【基本页】→
【HTML】→【创建】命令，将出现Unitiled-1（未命名1）的页 面，如图2-6所示。
区分大小写。HTML用标签来规定元素的属性和它在文件中的位 置，HTML超文本文档分文档头和文档体两部分，在文档头里， 对这个文档进行了一些必要的定义，文档体中才是要显示的各种 文档信息。
上一页 下一页 返回
任务一使用HTML语言来制作网页
下面是一个最基本的HTML文档的代码： <HTML>-----------------------------------------------|开始标签
上一页 下一页 返回
任务一使用HTML语言来制作网页
所谓超文本，是因为它可以加入图片、声音、动画、影视等 内容，事实上每一个HTML文档都是一种静态的网页文件，这个 文件里面包含了HTML指令代码，这些指令代码并不是程序语言， 它只是一种排版网页中资料显示位置的标记结构语言，易学易懂， 非常简单。HTML的普遍应用就是带来了超文本的技术，即通过 单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一 个页面，与世界各地主机的文件链接，直接获取相关的主题。
上一
（3）选择【文件】→【保存】命令，在弹出的【另存为】对话框的 【保存在】下拉列表框中，选择第一步建立的文件夹website，在 【文件名】下拉列表框中输入index.htm，然后单击【确定】按钮。
（4）在上半部分的代码区的<title></title>内，输入“我的第一个首 页”，在<body></body>内，输入“此处显示网页的主体内容”。
（5）按F12键运行网页，得到图2-7所示的网页。
上一页 下一页 返回
任务一使用HTML语言来制作网页
【案例3】在DreamWeaver中进行站点发布
【具体步骤】 （1）在【桌面】上右击，在弹出的快捷菜单中选择【管理】命令，弹
出【计算机管理】对话框，选择【Internet信息服务】→【网站】 →【默认网站】命令，右击，在弹出的快捷菜单中选择【新建】 →【虚拟目录】→【下一步】命令，如图2-8～图2-10所示。 （2）在【别名】文本框中填入要给网站起的别名后，单击【下一步】 按钮，单击打开的对话框中【目录】文本框后的【浏览】按钮， 选择D:\website→【下一步】→【下一步】→【完成】命令，如图 2-11和图2-12所示。
下一页 返回
任务一使用HTML语言来制作网页
（2）在【桌面】上右击，在弹出的快捷菜单中选择【新建】→【文本 文档】命令，此时会在桌面上出现“新建文本文档.txt”文件，如 图2-2所示，将文件名改为“index.htm”。图标会马上改为图2-3所 示的样式。
（3）在“index.htm”上右击，在弹出的快捷菜单中选择【打开方式】 →【记事本】命令，使用记事本来编缉代码文本，如图2-4所示。
上一页 下一页 返回
任务一使用HTML语言来制作网页
【背景知识】
一、HTML概述 HTML是Hypertext Marked Language的简写，即超文本标
记语言，是一种用来制作超文本文档的简单标记语言。超文本传 输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的 操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则 和标准，用HTML编写的超文本文档称为HTML文档，它能独立 于各种操作系统平台，自1990年以来HTML就一直被用作ＷＷＷ （World Wide Web，也可称为Web，中文叫做万维网）的信息表 示语言，使用HTML语言描述的文件，需要通过Web浏览器显示 出效果。
上一页 下一页 返回
任务一使用HTML语言来制作网页
要浏览这个index.htm文件，只需在桌面上双击它，或者打开 浏览器，选择【File】→【Open】命令，然后选择这个文件就行 了。效果如图2-5所示。
任务一使用HTML语言来制作网页
【任务要点】
1.使用记事本来制作HTML网页 2.使用DreamWeaver来制作HTML网页
【案例1】使用记事本来制作HTML网页 【具体步骤】（在Windows XP中完成）
（1）双击【我的电脑】图标，选择【工具】→【文件夹选项】命令， 从弹出的对话框中打开【查看】选项卡，取消选中【隐藏已知文 件类型的扩展名】复选框，再单击【确定】按钮，即可将所有文 件的扩展名显示出来。
HTML只是一个纯文本文件。创建一个HTML文档只需要两 个工具，一个是HTML编辑器，另一个是Web浏览器。HTML编 辑器是用于生成和保存HTML文档的应用程序。Web浏览器是用 来打开Web网页文件，提供给用户查看Web资源的客户端程序。
上一页 下一页 返回
任务一使用HTML语言来制作网页
二、HTML的基本结构 一个HTML文档是由一系列的元素和标签组成的，元素名不
<HEAD>---------------------------------------------|头部标签开始 <TITLE>一个简单的HTML示例</TITLE> ------------|Title标签对用来在标题栏内显示网页主题 </HEAD>------------------------------------------------|头部标签结果 <BODY>-----------------------------------------|主体开始 这是网页的文档的显示部分（大部分代码是在这个标签对里面的） </BODY>----------------------------------------|主体结束 </HTML>-----------------------------------------------|结尾标签
【案例2】使用DreamWeaver来制作HTML网页
【具体步骤】（在DreamWeaver 8中完成） （1）在D盘根目录下建立文件夹并命名为website（网站）。 （2）打开DreamWeaver，选择【文件】→【新建】→【基本页】→
【HTML】→【创建】命令，将出现Unitiled-1（未命名1）的页 面，如图2-6所示。
区分大小写。HTML用标签来规定元素的属性和它在文件中的位 置，HTML超文本文档分文档头和文档体两部分，在文档头里， 对这个文档进行了一些必要的定义，文档体中才是要显示的各种 文档信息。
上一页 下一页 返回
任务一使用HTML语言来制作网页
下面是一个最基本的HTML文档的代码： <HTML>-----------------------------------------------|开始标签
上一页 下一页 返回
任务一使用HTML语言来制作网页
所谓超文本，是因为它可以加入图片、声音、动画、影视等 内容，事实上每一个HTML文档都是一种静态的网页文件，这个 文件里面包含了HTML指令代码，这些指令代码并不是程序语言， 它只是一种排版网页中资料显示位置的标记结构语言，易学易懂， 非常简单。HTML的普遍应用就是带来了超文本的技术，即通过 单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一 个页面，与世界各地主机的文件链接，直接获取相关的主题。
上一
（3）选择【文件】→【保存】命令，在弹出的【另存为】对话框的 【保存在】下拉列表框中，选择第一步建立的文件夹website，在 【文件名】下拉列表框中输入index.htm，然后单击【确定】按钮。
（4）在上半部分的代码区的<title></title>内，输入“我的第一个首 页”，在<body></body>内，输入“此处显示网页的主体内容”。
（5）按F12键运行网页，得到图2-7所示的网页。
上一页 下一页 返回
任务一使用HTML语言来制作网页
【案例3】在DreamWeaver中进行站点发布
【具体步骤】 （1）在【桌面】上右击，在弹出的快捷菜单中选择【管理】命令，弹
出【计算机管理】对话框，选择【Internet信息服务】→【网站】 →【默认网站】命令，右击，在弹出的快捷菜单中选择【新建】 →【虚拟目录】→【下一步】命令，如图2-8～图2-10所示。 （2）在【别名】文本框中填入要给网站起的别名后，单击【下一步】 按钮，单击打开的对话框中【目录】文本框后的【浏览】按钮， 选择D:\website→【下一步】→【下一步】→【完成】命令，如图 2-11和图2-12所示。
下一页 返回
任务一使用HTML语言来制作网页
（2）在【桌面】上右击，在弹出的快捷菜单中选择【新建】→【文本 文档】命令，此时会在桌面上出现“新建文本文档.txt”文件，如 图2-2所示，将文件名改为“index.htm”。图标会马上改为图2-3所 示的样式。
（3）在“index.htm”上右击，在弹出的快捷菜单中选择【打开方式】 →【记事本】命令，使用记事本来编缉代码文本，如图2-4所示。
上一页 下一页 返回
任务一使用HTML语言来制作网页
【背景知识】
一、HTML概述 HTML是Hypertext Marked Language的简写，即超文本标
记语言，是一种用来制作超文本文档的简单标记语言。超文本传 输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的 操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则 和标准，用HTML编写的超文本文档称为HTML文档，它能独立 于各种操作系统平台，自1990年以来HTML就一直被用作ＷＷＷ （World Wide Web，也可称为Web，中文叫做万维网）的信息表 示语言，使用HTML语言描述的文件，需要通过Web浏览器显示 出效果。