HTML基础ppt课件
合集下载
第2章 HTML入门(网页制作案例教程课件)
2020/7/26
2.2 创建第一个HTML文件
• HTML可以使用任何文本编辑器，如Windows“ 记事本”或“写字板等”进行编辑，代码输入 后，一定要把文件的扩展名保存为“.htm”或 “.html”。
图2-2 2020/7/26 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
属性值，这里是颜色值(粉红色)
bgcolor就是<body>标记的属性，用于设置背景色
2020/7/26
2.1.2 标记及其属性
• 如果一个标记有多个属性，属性和属性之间用 空格隔开 。
• 标记在使用时，应注意以下几点：
– HTML标记不区分大小写
– 使用“<!--”和“-->”标记将HTML文档中注解内容括 起来
</head>
<body> <font size=1>1号字体</font><p> <font size=2>2号字体</font><p> <font size=3 color=red>3号字色红体</font><p> <font size=4 color=blue>4号蓝色字体</font><p> <font size=5 color=orange>5号橙色字体</font><p> <font size=6 color=yellow face="黑体">6号黄色黑体字体</font><p> <font size=7 color=green face="隶书">7号绿色隶书字体</font><p> <font size=+2 color=purple face="宋体">+2号紫色宋体字体</font><p
2.2 创建第一个HTML文件
• HTML可以使用任何文本编辑器，如Windows“ 记事本”或“写字板等”进行编辑，代码输入 后，一定要把文件的扩展名保存为“.htm”或 “.html”。
图2-2 2020/7/26 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
属性值，这里是颜色值(粉红色)
bgcolor就是<body>标记的属性，用于设置背景色
2020/7/26
2.1.2 标记及其属性
• 如果一个标记有多个属性，属性和属性之间用 空格隔开 。
• 标记在使用时，应注意以下几点：
– HTML标记不区分大小写
– 使用“<!--”和“-->”标记将HTML文档中注解内容括 起来
</head>
<body> <font size=1>1号字体</font><p> <font size=2>2号字体</font><p> <font size=3 color=red>3号字色红体</font><p> <font size=4 color=blue>4号蓝色字体</font><p> <font size=5 color=orange>5号橙色字体</font><p> <font size=6 color=yellow face="黑体">6号黄色黑体字体</font><p> <font size=7 color=green face="隶书">7号绿色隶书字体</font><p> <font size=+2 color=purple face="宋体">+2号紫色宋体字体</font><p
《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
文本框、下拉框和单选框
《HTML5完整教程》课件
回答学习者关于HTML5的疑问和解决问题。
制作一个简单网站注 册页面
学习如何设计和实现一个用户 注册页面。
制作一个简单网页动 态效果
使用JavaScript和CSS3为网页添 加动态效果和交互性。
结束语
1 HTML5的未来
展望HTML5的发展前景和可能的趋势。
2 学习建议和资源推荐
提供给学习者关于深入学习HTML5的建议和推荐资源。
3 答疑时间
多媒体元素
学习如何在HTML5中嵌入视频、 音频和Canvas。
第四章 CSS3新特性
1 CSS3介绍
了解CSS3的功能和应用领域。
2 盒模型
深入了解CSS3盒模型的各个方面，包括边框、填充、外边距等。
3 文字样式
探索CSS3提供的新的文字样式特性，如文pt基础语法
Web Workers
探索Web Workers如何提供多线程编程能力。
Web Socket
学习使用Web Socket实现实时通信和数据传输。
WebGL
了解WebGL的基本原理和在浏览器中展示3D图 像的方法。
第七章 HTML5实战案例
制作一个简单网站
使用HTML5和CSS3创建一个功 能丰富的静态网站。
《HTML5完整教程》PPT 课件
在这份《HTML5完整教程》的PPT课件中，我将向大家介绍HTML5的各个方 面，包括概述、基础语法、新增元素、CSS3新特性、JavaScript基础语法、高 级技术和实战案例等内容。
第一章 HTML5概述
HTML5介绍
了解HTML5的定义、用途和优势。
HTML5特性
1
JS脚本位置
学习如何在HTML文档中嵌入JavaScript代码。
制作一个简单网站注 册页面
学习如何设计和实现一个用户 注册页面。
制作一个简单网页动 态效果
使用JavaScript和CSS3为网页添 加动态效果和交互性。
结束语
1 HTML5的未来
展望HTML5的发展前景和可能的趋势。
2 学习建议和资源推荐
提供给学习者关于深入学习HTML5的建议和推荐资源。
3 答疑时间
多媒体元素
学习如何在HTML5中嵌入视频、 音频和Canvas。
第四章 CSS3新特性
1 CSS3介绍
了解CSS3的功能和应用领域。
2 盒模型
深入了解CSS3盒模型的各个方面，包括边框、填充、外边距等。
3 文字样式
探索CSS3提供的新的文字样式特性，如文pt基础语法
Web Workers
探索Web Workers如何提供多线程编程能力。
Web Socket
学习使用Web Socket实现实时通信和数据传输。
WebGL
了解WebGL的基本原理和在浏览器中展示3D图 像的方法。
第七章 HTML5实战案例
制作一个简单网站
使用HTML5和CSS3创建一个功 能丰富的静态网站。
《HTML5完整教程》PPT 课件
在这份《HTML5完整教程》的PPT课件中，我将向大家介绍HTML5的各个方 面，包括概述、基础语法、新增元素、CSS3新特性、JavaScript基础语法、高 级技术和实战案例等内容。
第一章 HTML5概述
HTML5介绍
了解HTML5的定义、用途和优势。
HTML5特性
1
JS脚本位置
学习如何在HTML文档中嵌入JavaScript代码。
《HTML+CSS基础教程(课件PPT版)》
边框和边缘样式
1
边框样式
学习如何设置元素的边框样式、宽度和颜色。
2
内边距和外边距
了解内边距和外边距的区别，学习如何为元素添加间距。
3
边框圆角
掌握如何为元素的边框添加圆角效果，制作更具吸引力的页面。
标题和列表样式
标题样式
学习如何设置标题的样式，使其与页面风格一致。
列表样式
了解如何使用CSS样式为无序列表和有序列表定制符号 和样式。
4 样式优先级
了解CSS样式优先级的计算规则，学习如何解决样式冲突。
基本标签及其用法
div标签
了解div标签的作用，并学习如何使用它创建容器。
header和footer标签
学习如何使用header和footer标签来定义网页的页 眉和页脚。
span标签
掌握span标签的使用方法，如内联元素的容器。
《HTML+CSS基础教程 （课件PPT版）》
介绍HTML和CSS的基础知识。学习HTML基础语法、标签、CSS基础语法和选择 器，以及它们的基本用法。
HTML基础语法和标签
1 HTML是什么？
2 HTML标签
了解HTML的定义和作用，学 习HTML文档的基本结构。
掌握常用的HTML标签，如标 题、段落、图片、链接等。
ቤተ መጻሕፍቲ ባይዱ
跳转。
3
链接到外部网页
学习如何创建超链接，并链接到其他网页。
下载文件链接
掌握如何创建下载链接，提供文件下载功能。
CSS样式和样式表
1 内联样式
2 内部样式表
3 外部样式表
了解如何在HTML标签内部 添加样式，实现单个元素的 样式设置。
学习如何在HTML文档内部 使用style标签，定义多个元 素的样式。
HTML基础
• HTML标记标签通常被称为HTML标签 (HTML tag)HTML 标签是由尖括号包围的关键词，比 如 <html>
• HTML 标签通常是成对出现的，比如 <b> 和 </b> • 标签对中的第一个标签是开始标签，第二个标签 是结束标签 • 开始和结束标签也被称为开放标签和闭合标签
• "HTML 标签" 和 "HTML 元素" 通常都是描述 相同的意思。 • 但是严格来讲，一个 HTML元素包含了开始标 签与结束标签，如下实例:
• HTML 语言用于描述网页
• HTML 是指超文本标记语言: Hyper Text Markup Language • HTML 不是一种编程语言，而是一种标记语言 • 标记语言是一套标记标签 (markup tag) • HTML 使用标记标签来描述网页 • HTML 文档包含了HTML 标签及文本内容 • HTML 文档也叫做 web页面
• 注意：img元素是自关闭元素，不需要结束标 记。
<img src="school.png" width="104" height="142">
• alt 属性用来为图像定义一串预备的可替换的 文本。 • 替换文本属性的值是用户定义的。 • <img src="boat.gif" alt="Big Boat"> • 在浏览器无法载入图像时，浏览器将显示这个 替代性的文本而不是图像。 • 为页面上的图像都加上替换文本属性是个好习 惯，这样有助于更好的显示信息，并且对于那 些使用纯文本浏览器的人来说是非常有用的。
• 使用小写属性 • 完整的 HTML 属性列表: HTML 标签参考手册
网页制作案例教程 清华大学出版社 教学课件第3章 HTML基础
文本字体、大小、颜色属性,主要是通过在<font>标签 中设置face、size、color的值，设置文本的字体、大 小和颜色。
案例3-13文本字体属性应用
3、<hr>标签的属性
在<hr>标签中，通过设置width和size属性，用来控制 水平线的长度和宽度，默认情况下，水平线的宽度是 100%，1像素的高度，在设置宽度和高度时可以是确 定的像素值也可以是占窗口的百分比。 color属性可以设置水平线的颜色，颜色表示和字体 颜色的表示相同.
表格标签、属性、单元格以及表格嵌套应用 框架基本结构、分割方式、属性及链接、浮动 窗口
本章学习导航
HTML标签的学习，是初学者掌握网页制作的 入门技术，也是后续学习创建静态、动态网站 必备基础知识，了解JavaScript的基本标签、 属性运用及作用，并使用它们制作精美的网页 ，是初学者掌握本章内容的基本要求。 本章内容在全书知识结构中所处位置如图所示
3.1.2 HTML基本结构及书写规范
1、HTML基本结构
在HTML中，由<>和</>括起来的文本叫做“标签”，<> 表示开始标签；</>表示结束标签，开始标签和结束标签配 对使用，它们之间的部分是该标签的作用域，比如 <html></html>等。HTML就是以这些标签来控制内容的显 示方式。
8）注释标签 在HTML文档中用来表示注释的标签为<!-- 注释内容-->
案例3-10 注释标签应用 9）水平分割线标签hr <hr>标签是水平线标签，用于段落和段落之间的分割， 使文档结构清晰明了，使文字的编排更整齐。加入一 个<hr>标签，就加入了一条默认的水平线。
Web前端开发课件：HTML、CSS、JavaScript基础
2
以及Ajax优势。
学习创建、配置和使用
XMLHttpRequest对象来向服务器请
求数据和响应客户端。
3
响应处理
如何处理服务器的响应，以便更好地 交互和更快地更新页面
网站开发架构和区分前后端处理
开放式Web架构
详细解释开放式Web架构 的概念，包括数据存储和 传输，以及Web资源之间 的交互方式。
SEO基础（搜索引擎优化）
1
了解SEO
基础SEO知识,包括如何从搜做引擎的
搜索引擎优化
2
角度思考网站设计。
通过内容、元数据、链接和用户体验
来优化您的网站，以提高其排名。
3
其他优化技巧
一些其他优化技巧，例如通过社交媒 体和博客网站来引擎流量。
Web安全基础和防范措施
安全问题
所涉及的威胁以及可能感 到担忧的位置。
Web前端开发课件
本课程将涵盖HTML、CSS和JavaScript的基础知识，帮助您入门Web开发。 从基础语法开始，内容丰富、易于理解。
程序员入门指南
编程语言
选择一门适合你的编程语 言并针对该语言的知识进 行学习。
计算机基础
学习计算机基础，包括数 据结构、Байду номын сангаас法、操作系统 和网络基础知识。
实践项目
选择器和操作
使用jQuery选择器来操作 HTML元素，并使用方法来执 行更复杂的操作。
事件处理
jQuery的事件处理器可以进行 更简化你常规的事件处理。
Ajax基础知识、XMLHttpRequest对象的 使用
1
Ajax基础知识
了解什么是Ajax以及为什么要使用它，
XMLHttpRequest对象的使用
HTML+CSS+JS入门基础ppt
• 开一个新的(浏览器)窗口 (Target Window) <a href="URL" target=“_blank"> ... </a>
2.2.7 超级链接
超级链接是用锚元素<a>定义的 • 在<a>元素下，有元素属性href,href的属性值为一
个URL地址
➢ 如：<a href="/eschool">指向 学院的超级链接</a>
➢ 如：<a href="top.htm">普通超级链接</a> ➢ 如：<a href="../pic/left.htm">普通超级链接</a>
• 空格标记
2.2.5 水平线标记
• 水平线
<hr size = #>：设定线宽 <hr width=#>：设定线长 <hr align=#>：设定对齐方式 #=left, right <hr color=#> ：设定线的颜色
• <hr size=7 align=center width="75%" color="red">
2.1.3 HTML 文档结构-(head)meta
• 编写一个网页，要求3秒钟后自动跳转到北软教育首页。
• <html>
•
<head>
•
<title>my first page</title>
• <meta http-equiv="refresh" content="3;URL=">
2.2.7 超级链接
超级链接是用锚元素<a>定义的 • 在<a>元素下，有元素属性href,href的属性值为一
个URL地址
➢ 如：<a href="/eschool">指向 学院的超级链接</a>
➢ 如：<a href="top.htm">普通超级链接</a> ➢ 如：<a href="../pic/left.htm">普通超级链接</a>
• 空格标记
2.2.5 水平线标记
• 水平线
<hr size = #>：设定线宽 <hr width=#>：设定线长 <hr align=#>：设定对齐方式 #=left, right <hr color=#> ：设定线的颜色
• <hr size=7 align=center width="75%" color="red">
2.1.3 HTML 文档结构-(head)meta
• 编写一个网页，要求3秒钟后自动跳转到北软教育首页。
• <html>
•
<head>
•
<title>my first page</title>
• <meta http-equiv="refresh" content="3;URL=">
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>之间的内容将显示在浏览器窗口的标题 栏。
高中信息技术选修《网络编程：HTML和CSS基础》PPTX教学课件
head元素的内容不会显示在浏览器窗口中。
<body> 标签
定义文档的主体 包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）
<head>元素包含的标签
<title> 标签
定义了浏览器工具栏的标题 当网页添加到收藏夹时，显示在收藏夹中的标题 显示在搜索引擎结果页面的标题
HTML5: <!DOCTYPE html> HTML 4.01：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" /TR/xhtml1/DTD/xhtml1-transitional.dtd>
<th>、<tr>、<td>、<caption>、<colgroup>、<col>、 <thead>、<tbody>、<tfoot>
<base> 标签
<base> 标签描述了基准的链接地址，当浏览器遇到页面中的相对 URL时，基于<base>将相对URL转换为完整的绝对URL
<link>标签
定义了文档与外部资源之间的关系，如引入外部的css文件 <link rel="stylesheet" type="text/css" href="mystyle.css">
第九讲 HTML基础
第9讲 HTML基础
21
HTML标准单位
统一资源定位器(URL)[1]路径是一种 因特网资源地址的表示法。该数据里中 可以包括链接所需协议、链接主机的域 名或IP地址、链接主机的通讯端口 （port）号、主机文件的发布路径和文 件名称等。
[1] 由W3C对HTML 4.0的定义中，URL的描述为
“Universal Resource Identifier（URI）”。
第9讲 HTML基础
22
HTML标准单位
在HTML中，URL路径又分为两种形式： 绝对路径和相对路径。
绝对路径是将主机地址和主机上资源发布 目录的路径和资源名称进行完整的描述。 如:
<a href="/bbs/index.htm"> <a href="file:///c:/xitami/webpages/default.htm">
第9讲 HTML基础
13
HTML文档结构和常用元素
这三个元素一起构成完整的HTML文档结构模 板，所有的HTML文档都应该遵循这个模板：
<HTML> <HEAD> Header element </HEAD> <BODY> body of Document </BODY> </HTML>
第9讲 HTML基础
第9讲 HTML基础
28
块容器(续)
联系地址 <ADDRESS>text</ADDRESS> 特别指邮件地址，这个标记通常 用于标识文章开头的作者名行（作者姓 名）和电子邮箱地址。通常用比较小的 字体或斜体字表示，而且常使用<BR> 标记把地址的各个行分开。
02_HTML基础知识[1]
![02_HTML基础知识[1]](https://img.taocdn.com/s3/m/5bba27d6d5bbfd0a79567397.png)
HTML基本结构—文档头 ① http-equiv=“Content-type”时，content表示页面 内容的类型，例如： <meta http-equiv="Content-type" content="text/html;"> ② http-equiv="refresh"时，content表示刷新页面的时 间，例如： <meta http-equiv=“refresh” content="10;UR次本页面。 其他标记，<style></style>,<script></script>,……
正文常用标记—文本格式化标记 无序列表标记 无序列表是一种在各列表项前面显示特殊项目符号的缩 排列表，可以使用标记<ul>和<li>来创建，格式如下：
<ul 属性="值"…> <li>列表项1 <li>列表项2 … <li>列表项n </ul>
属性：type(项目符号类型） 值：disc（实心圆）、circle（空心圆）、squar（方块）
正文常用标记—多媒体标记 2. 字幕标记 在HTML语言中，可以在页面中插入字幕，水平或垂直 滚动显示文本信息。字幕标记格式如下： <marquee 属性="值"…>滚动的文本信息</marquee> 属性如下： bgcolor，指定字幕的背景颜色。 direction，指定文本的移动方向，取值是down、left、 right、up。 另外，align,behavior,height，hspace，vspace。。。
《HTML5基础》课件
3
开放标准
HTML5基于开放标准制定，吸引更多的开发者参与和贡献。
HTML5标签和元素
语义标签
使用语义化的标签，如<header>、<nav>和<section>， 提高页面结构的可读性。
多媒体支持
新增<video>和<audio>标签，方便网页直接嵌入视 频和音频内容。
表单增强
新增<input>类型，如email、url和date，提供更多表 单输入的选择。
总结
HTML5
HTML5是Web发展的未来，具备更强大、更丰富、更高效的特性和功能。
创造力
借助HTML5的各种新特性，开发者可以释放创造力，打造更出色的Web应用。
学习的旅程
HTML5基础只是开始，持续学习和掌握新技术将成为Web开发的重要任务。
《HTML5基础》PPT课件
本课程将介绍HTML5的基础知识，包括发展历程、标签和元素、新特性、与 传统HTML的区别以及应用场景。让我们一起探索HTML5的魅力！
HTML5的发展历程
1
HTML
HTML标准的演化历程，从HTML4到HTML5，不断推进Web技术的发展。
2
移动优先
随着移动设备的普及，HTML5带来了更好的移动兼容性和用户体验。
Canvas
使用<canvas>标签绘制图形和动画，为Web应用带 来更多交互和视觉效果。
HTML5新特性
本地存储
使用LocalStorage和SessionStorage在客户端存储临时和 持久化数据。
响应式设计
使用媒体查询和弹性布局，让网页适应不同设备和屏 幕尺寸。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
表示链接一个外部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容器的标记
<head>标记主要用来提供网页文件的整体 信息。包括标题栏名称、文件的网址、所采 用的文档编码等。
<head>标记用来告知浏览器这是文件标题 的开头，最后使用</head>标记告知浏览器 这是文件标题的结束点。
12
2.1 head容器的标记
HTML文档的head是一个容器元素，在head 容器元素中允许出现以下元素：
17
2.1 head容器的标记
4．base元素 格式：
<base href="URL" target="text" />
base元素指定一个显式 URL 用于解析对于外部源 的链接和引用，如图像和样式表。当用户使用相对 URL请求文档时，超链接也会正确地执行。Target 指定文档中所有链接的默认窗口，该属性主要用在 使用框架结构的网页中，使用框架结构，同一浏览 器窗口中可以容纳多个网页，同时在若干不同的框 架窗口中显示。
6
1 HTML文档结构
2．头部信息 <head> … </head>
这一部分用来说明文档标题以及该页面的其他信息， 它构成HTML文档的开头部分，在此标记对之间可 以使用<meta>、<title>等标记，这些标记都是 描述HTML文档相关信息的标志，标志对之间的内 容是不会在浏览器的框内显示出来的，但是其内容 应该尽量简短。
超文本标记一般成对出现，用带“/”的标记结束，如 </html>。成对出现的超文本标记也称容器元素。
有些标记只有起始标记而没有结束标记称空元素，如<br/>。 超文本标记可以忽略字母的大小写。 构成容器元素的一对标记可以写在不同行，标记属性的相对
位置不受限制，但属性必须出现在起始标记里。
14
2.1 head容器的标记
2．link元素 格式：
<link href="URL" rel="text" type="MIME_type“ />
link元素在当前文档和另一文档之间建立链接关系。 href属性指向相关的文档; rel属性描述了当前文档 与被连接文档的关系;type属性描述被连接文档的 类型。
2. 设置网页编码 <meta http-equiv=“content-type” content=“text/html; charset=GB2312” />
3. 刷新页面 <meta http-equiv=“refresh” content=“second; URL=targetURL” />
7
1 HTML文档结构
3．文本主体 <body> … </body>
这部分说明HTML文件的主体内容，在浏览器的客 户区中显示，这是页面开发者的编写HTML文档的 主要部分。
8
1 HTML文档结构
对于HTML标记的约定：
超文本标记是用一对尖括号“< >”括起来的文本串，例如 第一行的<html>。
1．HTML标记
<html> … </html>
这是定义HTML文档开始与结束的标记，也是 HTML文档中最先出现的标识，表明这个文件的内 容是用HTML语言来实现的。它必须成对出现，分 别表示HTML文件的起始和结束。在<html>容器 标记中又包括以下<head>和<body>两个部分。
meta元素用来描述当前网页的元信息。通常用来为 搜索引擎robots定义页面主题，或者是定义用户浏 览器上的cookie；它可以用于鉴别作者，设定页面 格式，标注内容提要和关键字；还可以设置页面的 自动刷新时间间隔（秒）等。
16
一些有关metal元素的例子
1. 设置搜索引擎关键字 <meta name=“keywords” content=“关键词” />
<标记名 属性1=“值1” 属性2=“值2” … 属性n=“值n” >
……Βιβλιοθήκη </标记名>9
编写HTML文档的方法: HTML文档是一个纯文本文件，可以使用任何 文本编辑器编写保存。
例：新建一个html文件
10
2 HTML基本标记的使用
2.1 head容器的标记 2.2 body容器的标记
1．title元素 2．link元素 3．meta元素 4．base元素 5．script元素
13
2.1 head容器的标记
1. title元素 格式：
<title> 标题文字
</title>
title元素包含文档的标题。它不显示在浏览器窗口 中，只显示在浏览器标题栏中。在起始标志 （<title>）和结束标志(</title>)间，可以放入 简述文档内容的标题。如果没有title元素，浏览器 的标题栏将显示网页的文件名。
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容器的标记
<head>标记主要用来提供网页文件的整体 信息。包括标题栏名称、文件的网址、所采 用的文档编码等。
<head>标记用来告知浏览器这是文件标题 的开头，最后使用</head>标记告知浏览器 这是文件标题的结束点。
12
2.1 head容器的标记
HTML文档的head是一个容器元素，在head 容器元素中允许出现以下元素：
17
2.1 head容器的标记
4．base元素 格式：
<base href="URL" target="text" />
base元素指定一个显式 URL 用于解析对于外部源 的链接和引用，如图像和样式表。当用户使用相对 URL请求文档时，超链接也会正确地执行。Target 指定文档中所有链接的默认窗口，该属性主要用在 使用框架结构的网页中，使用框架结构，同一浏览 器窗口中可以容纳多个网页，同时在若干不同的框 架窗口中显示。
6
1 HTML文档结构
2．头部信息 <head> … </head>
这一部分用来说明文档标题以及该页面的其他信息， 它构成HTML文档的开头部分，在此标记对之间可 以使用<meta>、<title>等标记，这些标记都是 描述HTML文档相关信息的标志，标志对之间的内 容是不会在浏览器的框内显示出来的，但是其内容 应该尽量简短。
超文本标记一般成对出现，用带“/”的标记结束，如 </html>。成对出现的超文本标记也称容器元素。
有些标记只有起始标记而没有结束标记称空元素，如<br/>。 超文本标记可以忽略字母的大小写。 构成容器元素的一对标记可以写在不同行，标记属性的相对
位置不受限制，但属性必须出现在起始标记里。
14
2.1 head容器的标记
2．link元素 格式：
<link href="URL" rel="text" type="MIME_type“ />
link元素在当前文档和另一文档之间建立链接关系。 href属性指向相关的文档; rel属性描述了当前文档 与被连接文档的关系;type属性描述被连接文档的 类型。
2. 设置网页编码 <meta http-equiv=“content-type” content=“text/html; charset=GB2312” />
3. 刷新页面 <meta http-equiv=“refresh” content=“second; URL=targetURL” />
7
1 HTML文档结构
3．文本主体 <body> … </body>
这部分说明HTML文件的主体内容，在浏览器的客 户区中显示，这是页面开发者的编写HTML文档的 主要部分。
8
1 HTML文档结构
对于HTML标记的约定：
超文本标记是用一对尖括号“< >”括起来的文本串，例如 第一行的<html>。
1．HTML标记
<html> … </html>
这是定义HTML文档开始与结束的标记，也是 HTML文档中最先出现的标识，表明这个文件的内 容是用HTML语言来实现的。它必须成对出现，分 别表示HTML文件的起始和结束。在<html>容器 标记中又包括以下<head>和<body>两个部分。
meta元素用来描述当前网页的元信息。通常用来为 搜索引擎robots定义页面主题，或者是定义用户浏 览器上的cookie；它可以用于鉴别作者，设定页面 格式，标注内容提要和关键字；还可以设置页面的 自动刷新时间间隔（秒）等。
16
一些有关metal元素的例子
1. 设置搜索引擎关键字 <meta name=“keywords” content=“关键词” />
<标记名 属性1=“值1” 属性2=“值2” … 属性n=“值n” >
……Βιβλιοθήκη </标记名>9
编写HTML文档的方法: HTML文档是一个纯文本文件，可以使用任何 文本编辑器编写保存。
例：新建一个html文件
10
2 HTML基本标记的使用
2.1 head容器的标记 2.2 body容器的标记
1．title元素 2．link元素 3．meta元素 4．base元素 5．script元素
13
2.1 head容器的标记
1. title元素 格式：
<title> 标题文字
</title>
title元素包含文档的标题。它不显示在浏览器窗口 中，只显示在浏览器标题栏中。在起始标志 （<title>）和结束标志(</title>)间，可以放入 简述文档内容的标题。如果没有title元素，浏览器 的标题栏将显示网页的文件名。