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语言基础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 表格与框架 • 本章小结
HTML语言简介ppt课件
• 标记是HTML文档中一些有特定意义 的符号，使用 ”<“ 和 ”>”括起来。
;
4
标记语言
• ＜标记 属性＝值＞内容＜/标记＞ • <B>这是Bold的文字</B> • <A href=“1.htm”>这是链接</A>
;
5
标记语言
• 起始标记(Start Tag)和结束标记(End Tag)一般 成对使用。<a>……</a>
• MIME类型和子类型一般以类型/子类型
的形式列出。
• 例如，一个MPEG视频文件将会以 "video/mpeg"的形式列出。
;
27
MIME多目的Internet邮件扩展
常见的MIME类型 超文本标记语言文本 .html,.html 普通文本 .txt RTF文本 .rtf GIF图形 .gif JPEG图形 .jpeg,.jpg au声音文件 .au MIDI音乐文件 mid,.midi RealAudio音乐文件 .ra, .ram MPEG文件 .mpg,.mpeg AVI文件 .avi GZIP文件 .gz TAR文件 .tar
9. 一个一般的URI会包括哪几个部分？
10. 什么是相对的URI？
11. HTTP协议工作在一个什么模型上？
12. HTTP协议中，Web服务器如何把网页发回给浏览器？
;
1
HTML
• HyperText Markup Language
• RFC 2616 - Hypertext Transfer Protocol -- HTTP1.1
• HTML文档中所有的内容都应该在这 两个标记之间，一个HTML文档总是 以<html>开始，以</html>结束。
;
4
标记语言
• ＜标记 属性＝值＞内容＜/标记＞ • <B>这是Bold的文字</B> • <A href=“1.htm”>这是链接</A>
;
5
标记语言
• 起始标记(Start Tag)和结束标记(End Tag)一般 成对使用。<a>……</a>
• MIME类型和子类型一般以类型/子类型
的形式列出。
• 例如，一个MPEG视频文件将会以 "video/mpeg"的形式列出。
;
27
MIME多目的Internet邮件扩展
常见的MIME类型 超文本标记语言文本 .html,.html 普通文本 .txt RTF文本 .rtf GIF图形 .gif JPEG图形 .jpeg,.jpg au声音文件 .au MIDI音乐文件 mid,.midi RealAudio音乐文件 .ra, .ram MPEG文件 .mpg,.mpeg AVI文件 .avi GZIP文件 .gz TAR文件 .tar
9. 一个一般的URI会包括哪几个部分？
10. 什么是相对的URI？
11. HTTP协议工作在一个什么模型上？
12. HTTP协议中，Web服务器如何把网页发回给浏览器？
;
1
HTML
• HyperText Markup Language
• RFC 2616 - Hypertext Transfer Protocol -- HTTP1.1
• HTML文档中所有的内容都应该在这 两个标记之间，一个HTML文档总是 以<html>开始，以</html>结束。
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基础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代码简介 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课件
网页设计与制作教程
第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 设置各种字型的标记
<B>受影响的文字</B> <I>受影响的文字</I> <U>受影响的文字</U> <TT>受影响的文字</TT> <BIG>受影响的文字</BIG> <SMALL>受影响的文字</SMALL> <BLINK>受影响的文字</BLINK> <SUB>受影响的文字</SUB> <SUP>受影响的文字</SUP> <STRIKE>受影响的文字</STRIKE>
第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 设置各种字型的标记
<B>受影响的文字</B> <I>受影响的文字</I> <U>受影响的文字</U> <TT>受影响的文字</TT> <BIG>受影响的文字</BIG> <SMALL>受影响的文字</SMALL> <BLINK>受影响的文字</BLINK> <SUB>受影响的文字</SUB> <SUP>受影响的文字</SUP> <STRIKE>受影响的文字</STRIKE>
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>之间的内容将显示在浏览器窗口的标题 栏。
html课件
块级元素从上到下、行内元素从左到右依次排列的布局方式。
文档流布局
通过设置元素的float属性，使元素脱离文档流并向左或向右浮动，常用于实现文字环绕效果。
浮动布局
通过设置元素的position属性，可以精确控制元素在页面上的位置，包括相对定位、绝对定位和固定定位等。
定位布局
掌握CSS的基本语法，包括选择器、属性和值的写法，以及样式的优先级规则。
使用浏览器前缀
针对不同浏览器使用特定的CSS前缀，确保样式在不同浏览器中的兼容性。
渐进增强与优雅降级
根据浏览器支持情况，提供基本的功能和样式，逐步增强用户体验。
使用Polyfill
针对某些浏览器不支持的HTML5、CSS3特性，引入Polyfill库进行兼容处理。
测试与调试
使用多种浏览器进行测试，及时发现问题并进行修复。
图像处理
06
HTML页面优化与兼容性处理
压缩HTML、CSS和JavaScript文件：通过压缩代码，减少文件大小，提高页面加载速度。
使用CDN加速：通过CDN服务分发资源，减轻服务器压力，提高用户访问速度。
优化图片：压缩图片、使用WebP格式、设置合适的图片尺寸等，降低图片加载时间。
减少HTTP请求：合并多个CSS和JavaScript文件，减少浏览器发起的HTTP请求数量。
CSS语法
颜色与背景
字体与文本
学习如何设置元素的颜色、背景色、背景图片等样式，以及渐变、阴影等高级效果。
学习如何设置文本的字体、大小、颜色、行高等样式，以及文本装饰、对齐等效果。
03
02
01
选择器优先级
了解选择器优先级的规则，包括内联样式、ID选择器、类选择器、元素选择器等之间的优先级关系。
03HTML基础.ppt
<html>…</html>：设置HTML文件的开始和结束。 <head>…</head>：设置HTML文件的头信息， 如主题、层叠样式表单、脚本程序等。 <title>…</tit口标题栏显示。 <body>…</body>：设置HTML文件的主体内容。
HTML是纯文本类型的语言，使用HTML编写的网页文 件也是标准的纯文本文件。您可以用任何文本编辑器，例如 Windows的“记事本”程序打开它，查看其中的HTML源 代码，也可以在用浏览器打开网页时，通过相应的“查看源 文件”命令查看网页中的HTML代码。
为什么要学习HTML
学会HTML语言，可以知道哪些是垃圾代码， 这样，我们就可以利用图形化网页开发工具快速 地做出网页，利用所学的HTML知识添加很多效果， 并且可以消除无用的代码，或者修改其他网页中 的一些代码来达到我们需要的效果，从而达到快 速制作高质量网页的目的。
<html> <head>
<meta …./> <title>HTML文件主题</title> </head> <body> HTML文件内容 </body> </html>
在html之前一般先声明版本信息，即文档类型说明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
其中的属性说明如下： 设定为all：文件将被检索，且页面上的链接可以被查询； 设定为none：文件将不被检索，且页面上的链接不可以被查询； 设定为index：文件将被检索； 设定为follow：页面上的链接可以被查询； 设定为noindex：文件将不被检索，但页面上的链接可以被查询； 设定为nofollow：文件将不被检索，页面上的链接可以被查询。
HTML是纯文本类型的语言，使用HTML编写的网页文 件也是标准的纯文本文件。您可以用任何文本编辑器，例如 Windows的“记事本”程序打开它，查看其中的HTML源 代码，也可以在用浏览器打开网页时，通过相应的“查看源 文件”命令查看网页中的HTML代码。
为什么要学习HTML
学会HTML语言，可以知道哪些是垃圾代码， 这样，我们就可以利用图形化网页开发工具快速 地做出网页，利用所学的HTML知识添加很多效果， 并且可以消除无用的代码，或者修改其他网页中 的一些代码来达到我们需要的效果，从而达到快 速制作高质量网页的目的。
<html> <head>
<meta …./> <title>HTML文件主题</title> </head> <body> HTML文件内容 </body> </html>
在html之前一般先声明版本信息，即文档类型说明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
其中的属性说明如下： 设定为all：文件将被检索，且页面上的链接可以被查询； 设定为none：文件将不被检索，且页面上的链接不可以被查询； 设定为index：文件将被检索； 设定为follow：页面上的链接可以被查询； 设定为noindex：文件将不被检索，但页面上的链接可以被查询； 设定为nofollow：文件将不被检索，页面上的链接可以被查询。
HTML基础知识PPT
h
29
HTML
例4.6： 课表代码清单 ：
例4.6
<html> <head><title>表格标记应用案例</title>
</head>
<body>
<table border=2> <caption>0705331课表</caption>
<tr> <th>节次</th><th>星期一 </th><th>星期二 </th> <th>星期三 </th> <th>星期四  </th><th>星期五 </th>
突出显示(斜体)
<em></em>
电子邮件和网址(缩小+斜体字) <address></address>
按代码显示(缩小字体)
<code></code>
h
类别
物理 物理 物理 物理 物理 物理 物理 物理 逻辑 逻辑 逻辑 逻辑
18
HTML
4.2.4 段落标记
<p>分段标记 <br>换行标记 <hr>水平线标记 <pre>预格式化标记
例4. 10
</head>
<body><center>
<a href="ex4-10_1.html">下一页</a><p>