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>