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> 1号字体 2号字体 3号字色红体 4号蓝色字体 5号橙色字体 6号黄色黑体字体 7号绿色隶书字体 +2号紫色宋体字体<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+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标签，定义多个元素的样式。

第5章 HTML语言基础

5.2.1 HTML的标题标记
例5-2 文件头标记的应用。 
<html>
<head> <title>文件头标记的应用</title> <meta name="keywords" content="study, computer">
<meta name="author" content="Zhangjie">
5.2.2 HTML的正文标记
（6）页面内容距浏览器边界的距离格式： <body leftmargin="number01" topmargin=" number02">…</body> 说明：leftmargin属性和topmargin属性取值均为数值，分别表示网页主体内容距浏览器左端和顶端的距离，如，<body leftmargin=“30” topmargin=“ number50”>。
属性：<body>标记一般有六种可选属性，它们用来设置Web页面的外观。这些属性分别是：
（1）页面背景颜色属性
格式：<body bgcolor="#RRGGBB">…</body>
说明：该属性是用来设置页面的背景颜色的，其值可用六位十六进制形式的颜色代码表示。颜色代码#RRGGBB中的RR、GG、BB分别表示红、绿、蓝三种原色的亮度，取值范围在00～FF之间，数值越大亮度越高，如颜色代码#000000表示为黑色。常见的颜色代码如表5-1所示。

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容器的标记

第2章 HTML语言基础

<head> <script src="path/to/script.js" language="javascript" type="text/javascript"> </script> </head>
引用外部文件
2.2.3 HTML中样式表的书写
级联样式表CSS可以精确指定网页元素位置，控制网页外观以及创建特殊效果。在网页上使用样式表有三种方法： ① 应用内嵌样式到各个网页元素。 ② 在网页上创建嵌入式样式表。 ③ 将网页链接到外部样式表。 1．内嵌样式使用内嵌样式以应用层叠样式表属性到网页元素上。例如段落标记符的内嵌样式属性如下： 
2.2.3 HTML中样式表的书写
2．嵌入式样式表若只是定义当前网页的样式，可使用嵌入的样式表。
<HEAD><TITLE>字体属性示例</TITLE> <STYLE> <!-.s1{ font-family:黑体;font-size:x-large; font-style:italic } .s2{ font-size:larger} .s3{ font-variant:small-caps} .s4{ font-weight:bolder} .s5{ font:bolder italic 楷体_gb2312} --> </STYLE> </HEAD>
图2-1 简单的HTML文档
2.2 HTML文件的整体结构
2.2.1 HTML文件结构
一个完整的HTML文件结构如下: <html> 头部 <head>头部信息</head> <body>正文信息</body> 正文 </html>

第2章 HTML语言基础

16
2.1.2 HTML文件
【例2-1】简单的HTML文件。 <HTML> <HEAD> <TITLE> 简单的HTML文件 </TITLE> </HEAD> <BODY> 最简单的网页 </BODY> </HTML>
17
2.2 HTML语言的段落、超链接、图片标记
2.2.1 简单标记的认识与使用
表2-2 16种标准颜色
23
2.2.1 简单标记的认识与使用
例2-2 使用网页的背景色（bgcolor）属性，可以设定整个网页的背景颜色；使用网页的文本色（text）属性，可以设定整个网页文字的颜色。 <HTML> <HEAD> 这是主体之外的文本 <TITLE> 试试BODY标记的属性 </TITLE> </HEAD> <BODY bgcolor=greenyellow text=blue>
就其本质而言，是一个基于文本的编码标准，用于指示浏
览器以什么方式显示信息。 HTML是一种用于网页制作的排版语言，是Web最基本的构成元素。HTML并非一种编程语言。组成HTML的“命令”就是标记，它用符号“<”和“>”括起
来。
3
2.1.1 HTML概述
2. HTML的作用
① 格式化文本。 ② 建立超链接。
注意： ①并不是所有的标记都有属性，如换行标记 。 ②根据需要可以用该标记的所有属性，也可以只用需要的几个属性，在使用时，属性之间没有顺序。多个属性之间用空格隔开。属性和标记一样，都不区分大小写。但为了阅读方便，本书用大写字母表示标记，小写字母表示属性。

HTML教学 ppt课件

网页设计与制作教程
第2章超文本标记语言HTML
ppt课件
1
2.1 HTML文件的基本结构 2.2 文字和段落标记 2.3 列表标记 2.4 图片标记 2.5 表格标记 2.6 超链接标记 2.7 表单标记 2.8 框架标记
ppБайду номын сангаас课件
目录
2
2.1 HTML文件的基本结构
2.1.1 HTML概述 2.1.2 HTML语法 2.1.3 HTML文件的基本结构
<META http-equiv=”Page-Exit” content=”revealTrans (duration=5,transition=2) ”>的意思是离开本网页时，页面将按圆形收缩的形式切换成其他网页，并且整个切换时间为5秒。
ppt课件
14
2. HTML文件主体
HTML文件主体标记的格式为： <BODY backgrongd=”文件名” bgcolor=”颜色值” text=” 颜色值” link=”颜色值” vlink=”颜色值” alink=”颜色值”> 网页的内容</BODY>
ppt课件
9
name属性主要用于描述网页，其常用的选项有 GENERATOR、Keywords、description、robots、 author等。 GENERATOR用来说明制作本网页所用的编辑工具， Keywords用来告诉搜索引擎本网页的关键字是什么， description用来告诉搜索引擎本网页的主要内容， robots用来告诉搜索机器人那些页面需要索引，哪些页面不需要索引，
ppt课件
27
表2-2 设置各种字型的标记
受影响的文字 受影响的文字 受影响的文字 <TT>受影响的文字</TT> <BIG>受影响的文字</BIG> 受影响的文字 <BLINK>受影响的文字</BLINK> 受影响的文字 受影响的文字 <STRIKE>受影响的文字</STRIKE>

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

语法： 
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>
 Hello World！ </body> </html>
-
7
HTML文档的基本构成
<HTML> <HEAD> ……… </HEAD> <BODY> <标签1 [属性[=属性值]] [属性[=属性值]].....> <标签2 [属性[=属性值]] [属性[=属性值]].....> ........... [</标签2>] [</标签1>]
Web页面中有一种称为主页(Hompage)的特殊页面。主页通常是用户通过Web浏览器访问某一Web站点时看到的第一个页面，用户通过主页可以访问该站点的其他页面。因此主页一般是关于某一组织、机构或个人的基本信息的页面。
-
4
标记语言
❖ 什么是标记？ ▪ 最基本的定义：标记是用于指明文档中文本格式编排的代码系统 ▪ 标记语言的发展 SGMLHTMLXML
HTML语言
- 辽宁工程技术大学软件学院
1
内容提要
一、HTML语言概述二、文字版面的编辑三、文字列表的设计四、表格的设计五、HTML的超链接六、图片的使用七、窗口框架八、高级HTML使用九、表单设计
-
2
一、HTML语言概述
-
3
Web页面与HTML文档
Web上的信息是以页面(Page)的形式组织起来的，Web页面由HTML描述。Web页面与 HTML文档实际上是同一事物的两个不同侧面：人们通常把用HTML编写的文件称为HTML文档，而把HTML文档在Web浏览器中的表现形式称为 Web页面。
-
16
二、文字版面的编辑
-
17
取消文字换行标记
语法：
说明：显示一个HTML文件时，浏览器会根据窗口的大小，调整每行显示的文字数和段落。如果想禁止这项功能，取消因窗口大小不同而产生的换行，就应该使用标记。
▪ 在编辑界面下的显示效果与用浏览器看到的很可能会不同；
▪ 会产生一些复杂的、非标准的代码，难以达到设计的效果，从而容易引起浏览器之间的兼容问题；
▪ 一些特殊的页面控制，必须通过HTML代码才可以实现。
❖ 可以借助于HTML编辑器，但不能依赖于它。
-
6
简单的HTML实例
<html> <head>
示例： 称为换行标记，当浏览器遇到 标记时，将换行显示文本
-
10
⑵双标记指令
语法：格式1 <标记名称>要控制的内容</标记名称> 格式2 <标记名称属性=属性值 …>要控制的内容</标记名称>
说明： ①用<标记名称>作为双标记指令的开始，用</标记名称>作为双
标记指令的结束，将要控制的内容安排在这一对标记中间 ②格式2与格式1的不同之处是后者在开始标记中带有起辅助作用
..…….
</BODY> </HTML>
-
8
HTML的标记和元素
1.HTML标记 HTML之所以称为“超文本标记语言”，一
是因为它的超链接功能，二是因为它的指令统一采用了“标记”表示法。HTML中主要有单标记指令和双标记指令两种。 2.HTML元素
如果用两个一组的HTML标记把一段文字包含在其中，则此段文字与包含文字的HTML标记称为一个HTML元素。
3.文件头标记(<head>…</head>) 语法： <head>…</head> 说明： ①由head这组标记定义的元素中，并不放置网页
的任何内容，而是放置关于这份HTML文件的信息。就是说，它并不属于HTML文件的主体，它包含文件的标题、编码方式和URL等。这些信息大部分用于提供索引、辨认或其他应用。 ②这对标记在HTML文件中并不是必需的。如果某个HTML文件并不需要提供相关信息，则可省略 <head>标记。
的属性参数。可以包含若干参数，也可没有参数。
-
11
HTML的层次概念
<html> <head> …… </head> <body> …… </body>
</html>
HTML文档基本结构
html head body
HTML文件的层次结构
-
12
HTML基本标记的使用方法
1.注释标记()
如果使用单独的HTML标记，则此HTML标记也被称为一个HTML元素。
-
9
⑴单标记指令
语法：<指令>
说明：用一对（两个为一对）尖括号“<”和 “>”作为标志符号，将要执行的指令包含在这一对尖括号之中；如果成对的标志符号中少了一个，则当浏览器解释时就会出现错误。标记本身不会出现在显示结果中，只对显示格式起作用。
❖ 标准通用标记语言SGML
Standard Generalized Markup Language
❖ 超文本标记语言HTML
Hyper Text Markup Language
❖ 可扩展标记语言XML
eXtensible Markup Lan-guage
5
HTML编辑器与HTML语言的学习
❖ 使用编辑器生成页面可能会产生的问题：
-
15
HTML基本标记的使用方法(续)
5.文件主体标记(<body>…</body>)
语法
说明：
①由<body>标记所建立的元素是HTML文件的内容主体，也是HTML文件的重点所在。 HTML文件中要显示在网页上的所有内容，也都放置在这个元素中。
②<body>具有一些特殊的属性，可以设定背景及字符颜色等。