《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教程讲义》课件
一、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课件
表示链接一个外部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利用近120种标记来表示 网页的结构及超链接等信息，使页面在浏览器中展示 出精彩纷呈的效果。
HTML建议WEB浏览器应该如何显示和排列信息，并 不能精确定义格式，因此在不同的浏览器中显示的 HTML文件效果会不同。
HTML文件时一种纯文本文件，通常以.htm or .html 作为文件扩展名。可以用各种类型的工具来创建或者 处理HTML页面，如记事本、写字板、FrontPage 、 Dreamweaver等。
HTML 文档 = 网页
HTML 文档描述网页 HTML 文档包含 HTML 标签和纯文本
5
HTML 简介
Web 浏览器的作用是读取 HTML 文档，并以网页的形 式显示出它们。浏览器不会显示 HTML 标签，而是使用 标签来解释页面的内容：
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> 例子解释 <html> 与 </html> 之间的文本描述网页 <body> 与 </body> 之间的文本是可见的页面内容 <h1> 与 </h1> 之间的文本被显示为标题 <p> 与 </p> 之间的文本被显示为段落
7. HTML 段落
7. HTML 颜色
8. HTML 格式化
8. HTML 颜色值
9. HTML 样式
9. HTML 颜色名
4
HTML 简介
什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML建议WEB浏览器应该如何显示和排列信息，并 不能精确定义格式，因此在不同的浏览器中显示的 HTML文件效果会不同。
HTML文件时一种纯文本文件，通常以.htm or .html 作为文件扩展名。可以用各种类型的工具来创建或者 处理HTML页面，如记事本、写字板、FrontPage 、 Dreamweaver等。
HTML 文档 = 网页
HTML 文档描述网页 HTML 文档包含 HTML 标签和纯文本
5
HTML 简介
Web 浏览器的作用是读取 HTML 文档，并以网页的形 式显示出它们。浏览器不会显示 HTML 标签，而是使用 标签来解释页面的内容：
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> 例子解释 <html> 与 </html> 之间的文本描述网页 <body> 与 </body> 之间的文本是可见的页面内容 <h1> 与 </h1> 之间的文本被显示为标题 <p> 与 </p> 之间的文本被显示为段落
7. HTML 段落
7. HTML 颜色
8. HTML 格式化
8. HTML 颜色值
9. HTML 样式
9. HTML 颜色名
4
HTML 简介
什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language)
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
<html> <head>
<title>台灣文學專題</title> </head> <body> 04/26 陳雪
<P>講題：從《惡女書》到 《橋上的孩子》 一個小說家的形成。。。
</P> </body> </html> 執行結果。
置中 - 對齊
<center>內容置中</center> <html>
– A Computer running some server programs
特別注意事項
1.電腦系統包含軟體系統與硬體系統
– 沒有思維能力，只有邏輯
2.所以任何的語法指令，都必須明確
– 每個字都是必要而且是正確的
3.電腦語法的特性在於給電腦明確的指令
– 構詞構句要符合一定的規定
名詞解釋(1/4)
<head> <title>台灣文學專題</title> </head> <body> <center> 04/26 陳雪
<P>講題：從《惡女書到 《橋上的 孩子》
一個小說家的形成。。。 </P>
</center> </body> </html> 執行結果。
各級標題字
<html> <head><title>標題測試</title></head> <body> <center> <h1>第一級標題</h1>正常文字 <h2>第二級標題</h2>正常文字 <h3>第三級標題</h3>正常文字 <h4>第四級標題</h4>正常文字 <h5>第五級標題</h5>正常文字 <h6>第六級標題</h6>正常文字 </center> </body> </html>
<title>台灣文學專題</title> </head> <body> 04/26 陳雪
<P>講題：從《惡女書》到 《橋上的孩子》 一個小說家的形成。。。
</P> </body> </html> 執行結果。
置中 - 對齊
<center>內容置中</center> <html>
– A Computer running some server programs
特別注意事項
1.電腦系統包含軟體系統與硬體系統
– 沒有思維能力，只有邏輯
2.所以任何的語法指令，都必須明確
– 每個字都是必要而且是正確的
3.電腦語法的特性在於給電腦明確的指令
– 構詞構句要符合一定的規定
名詞解釋(1/4)
<head> <title>台灣文學專題</title> </head> <body> <center> 04/26 陳雪
<P>講題：從《惡女書到 《橋上的 孩子》
一個小說家的形成。。。 </P>
</center> </body> </html> 執行結果。
各級標題字
<html> <head><title>標題測試</title></head> <body> <center> <h1>第一級標題</h1>正常文字 <h2>第二級標題</h2>正常文字 <h3>第三級標題</h3>正常文字 <h4>第四級標題</h4>正常文字 <h5>第五級標題</h5>正常文字 <h6>第六級標題</h6>正常文字 </center> </body> </html>
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课件1
加入图像
<img> 是空标签，意思是说，它只包含属 性，并且没有闭合标签。 要在页面上显示图像，需要使用源属性 （src）。src 指 "source"。源属性的值是图 像的 URL 地址。 定义图像的语法是： <img src="url" />
添加图像
<img src="url" /> URL 指存储图像的位置。 如果图片与本网页在同一目录下，那么： <img src="apple.jpg" width="320" height="300" /> 如何添加子文件夹中的图片？ <img src="pic/apple.jpg" width="320" height="300" />
相关软件介绍
Microsoft FrontPage Microsoft Expression Web Designer Adobe Golive
最简单的HTML文件
<html> <head> </head> <body> 网页设计开始了。 </body> </html>
HTML 标签 标记 标签(标记 标记)
HTML 标记标签通常被称为 HTML 标签，或标记 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 <html> HTML 标签通常是成对出现的，比如 <b> 和 </b> 标签对中的第一个标签是开始标签，第二个标签是
HTML
Hypertext Markup Language HTML是一种标记语言。 它不是编程语言。 它是描述性的。 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页
第1课HTML语言(一)PPT课件
15
4. HTML文件的基本结构
HTML文件是一种纯文本格式的文件，HTML文件包 括头部（head）和主体（body）。文件的基本结构为：
<HTML> <HEAD> <TITLE> 网页的标题 </TITLE> </HEAD> <BODY> 网页的内容 </BODY>
</HTML>
16
说明： ① HTML文件以<HTML>开头，以</HTML>结尾。 ② <HEAD>…</HEAD>：表示这是网页的头部，用 来说明文件命名和与文件本身的相关信息。可以包括 网页的标题部分：<TITLE>…</TITLE>。 ③ <BODY>…</BODY>：表示网页的主体即正文部 分。 ④ HTML语言并不要求在书写时缩进，但为了程序 的易读性，建议网页设计制作者使标记的首尾对齐， 内部的内容向右缩进几格。
<标记> 受标记影响的内容 </标记> <标记 />
12
说明： ① 每个标记都用“<”（小于号）和“>”（大于
号）围住，如<P>，<Table>，以表示这是HTML代码而 非普通文本。注意，“<”与标记名之间不能留有空格 或其它字符。
② 在标记名前加上符号“/”便是其结束标记， 表示这种标记内容的结束，如</FONT>。标记也有不用 </标记>结尾的，称之为单标记。
10
② 文字与图形资料：是指要提供给浏览信息的人 阅读的内容。WWW显示的图形一般都以独立文件的形式 存在，如果要显示图形（图形文件要用其他程序建 立），就必须用特殊的标记指向图形文件。
4. HTML文件的基本结构
HTML文件是一种纯文本格式的文件，HTML文件包 括头部（head）和主体（body）。文件的基本结构为：
<HTML> <HEAD> <TITLE> 网页的标题 </TITLE> </HEAD> <BODY> 网页的内容 </BODY>
</HTML>
16
说明： ① HTML文件以<HTML>开头，以</HTML>结尾。 ② <HEAD>…</HEAD>：表示这是网页的头部，用 来说明文件命名和与文件本身的相关信息。可以包括 网页的标题部分：<TITLE>…</TITLE>。 ③ <BODY>…</BODY>：表示网页的主体即正文部 分。 ④ HTML语言并不要求在书写时缩进，但为了程序 的易读性，建议网页设计制作者使标记的首尾对齐， 内部的内容向右缩进几格。
<标记> 受标记影响的内容 </标记> <标记 />
12
说明： ① 每个标记都用“<”（小于号）和“>”（大于
号）围住，如<P>，<Table>，以表示这是HTML代码而 非普通文本。注意，“<”与标记名之间不能留有空格 或其它字符。
② 在标记名前加上符号“/”便是其结束标记， 表示这种标记内容的结束，如</FONT>。标记也有不用 </标记>结尾的，称之为单标记。
10
② 文字与图形资料：是指要提供给浏览信息的人 阅读的内容。WWW显示的图形一般都以独立文件的形式 存在，如果要显示图形（图形文件要用其他程序建 立），就必须用特殊的标记指向图形文件。
HTML 教学.ppt
12
onResize事件示例
<html> <head>
<script language="JavaScript"> window.onresize= notify; function notify() { alert("窗口大小调整完毕！"); }
</script> </head> <body>
请调整窗口的大小。 </body> </html>
11
onMouseDown/onMouseUp事件示例
<HTML> <BODY BGCOLOR="lavender"> <FORM>
<INPUT type = button name =text1 value="改变颜色" onmousedown="(document.bgColor='aqua')" onmouseup="(document.bgColor='limegreen')" </FORM> </BODY> </HTML>
</body></html>
10
onLoad事件示例
<HTML> <HEAD> <TITLE>您好</TITLE> <SCRIPT LANGUAGE="JavaScript"> function hello() { alert("您好"); } </SCRIPT> </HEAD>
onResize事件示例
<html> <head>
<script language="JavaScript"> window.onresize= notify; function notify() { alert("窗口大小调整完毕！"); }
</script> </head> <body>
请调整窗口的大小。 </body> </html>
11
onMouseDown/onMouseUp事件示例
<HTML> <BODY BGCOLOR="lavender"> <FORM>
<INPUT type = button name =text1 value="改变颜色" onmousedown="(document.bgColor='aqua')" onmouseup="(document.bgColor='limegreen')" </FORM> </BODY> </HTML>
</body></html>
10
onLoad事件示例
<HTML> <HEAD> <TITLE>您好</TITLE> <SCRIPT LANGUAGE="JavaScript"> function hello() { alert("您好"); } </SCRIPT> </HEAD>
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语言PPT102页
学习html语言
6
、
露
凝
无
游
氛
，
天
高
风
景
澈
。
7、翩翩新 来燕，双双入我庐 ，先巢故尚在，相 将还旧居。
8
、
吁
嗟
身
后
名
，
于
我
若
浮
烟
。
9、 陶渊 明（ 约 365年 —427年 ），字 元亮， （又 一说名 潜，字 渊明 ）号五 柳先生 ，私 谥“靖 节”， 东晋 末期南 朝宋初 期诗 人、文 学家、 辞赋 家、散
文 家 。汉 族 ，东 晋 浔阳 柴桑 人 （今 江西 九江 ） 。曾 做过 几 年小 官， 后辞 官 回家 ，从 此 隐居 ，田 园生 活 是陶 渊明 诗 的主 要题 材， 相 关作 品有 《饮 酒 》 、 《 归 园 田 居 》 、 《 桃花 源 记 》 、 《 五 柳先 生 传 》 、 《 归 去来 兮 辞 》 等 。
1
Байду номын сангаас
0
、
倚
南
窗
以
寄
傲
，
审
容
膝
之
易
安
。
31、只有永远躺在泥坑里的人，才不会再掉进坑里。——黑格尔 32、希望的灯一旦熄灭，生活刹那间变成了一片黑暗。——普列姆昌德 33、希望是人生的乳母。——科策布 34、形成天才的决定因素应该是勤奋。——郭沫若 35、学到很多东西的诀窍，就是一下子不要学很多。——洛克
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML 文件结构 (Document Structures)
– <HTML>
• <HEAD>
– <title></title> – <meta>
• </HEAD> • <BODY>
– HTML 文件的正文
• </BODY>
– </HTML>
第一张网页（01.htm）
<html> <head> <title>my first page</title> </head> <body> This is my first homepage! </body>
• 编写一个网页，要求3秒钟后自动跳转到硅谷动 力学院的网站。
<html> <head> <title>my first page</title> <meta http-equiv=“refresh” content=“3;URL=/eschoo l”> </head> <body> <p align=“center”>三秒钟后本网页将自动跳转 到硅谷动力网络学院首页</p> </body>
first homepage!</p> </body>
</html>
HTML基本结构的 有关元素和元素属性
• HEAD元素——1 <head>元素出现在文档的开头部 分。<head>与</head>之间的内容 不会在浏览器的文档窗口显示， 但是其间的元素有特殊重要的意 义。
• <title>
<title>元素定义HTML文档的标 题。<title>与</title>之间的内 容将显示在浏览器窗口的标题 栏。
• <body>元素中有下列元素属性： – (3)bgproperties=fixed
• bgproperties=fixed使背景图片成 水印效果，即图片不随着滚动条 的滚动而滚动。
例：07.htm和08.htm对比
<body>元素及元素属性——5
• <body>元素中有下列元素属性： – (4)text
2. 使用可视化HTML编 辑 器 – Frontpage、Dreamweaver等
3. 由Web 服务器（ 或称HTTP 服 务器） 一 方实时动态地生成。
网页文件命名
1. *.htm或*.html 2. 无空格 3. 无特殊符号（例如&符号），只
可以有下划线“_”，只可以为英 文、数字 4. 区分大小写 5. 首页文件名默认为：index.htm 或 index.html
</html>
基本组成部分—— HTML元素属性
• HTML元素可以有自己的相关属 性，每一个属性还可以由我们网 页编制者赋一定的值。元素属性 出现在元素的< >内，并且和元素 名之间有一个空格分隔；属性值 用“”引起来。
第二张网页（02.htm）
<html> <head> <title>my first page</title> </head> <body> <p align="center">This is my
<body>元素及元素属性——3
• <body>元素中有下列元素属性： – (2)background
• background属性标志HTML文档 的背景图片。如： background=“images/bg.gif"。
• 可以使用的图片格式为GIF，JPG
例：05.htm、06.htm
<body>元素及元素属性——4
• bgcolor属性标志HTML文档的背 景颜色。如： bgcolor="#CCFFCC"。
• 例：04.htm
HTML对颜色的控制
• HTML对颜色的控制也有自己的 语法。HTML使用16进制的RGB 颜色值对颜色进行控制。
• 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
</html>
<body>元素及元素属性——1
• <body>元素表明是HTML文档的 主体部分。在<body>与</body>之 间，通常都会有很多其它元素； 这些元素和元素属性构成HTML 文档的主体部分。
<body>元素及元素属性——2
<body>元素中有下列元素属性： – (1)bgcolor
HTML基本结构的 有关元素和元素属性
• HEAD元素——3 • <meta>元素
– <meta name="author" content=“wutao">
– 用来标记文档的作者。
HTML基本结构的 有关元素和元素属性
• HEAD元素——4 • <meta>元素
– <meta http-equiv=“ContentType” content=“text/html; charset=gb2312”>
常见颜色的代码
颜色
黑色 银色 红色 蓝色 白色 黄色
绿色 海蓝色
颜色名和RGB值
Black=”#000000” Silver=”#c0c0c0” Red=”#ff0000” Blue=”#0000ff” White=”#ffffff” Yellow=”ffff00”
Green=”#00ff00” Aqua=”#00ffff”
– 用来标记你的页面的解码方式。
HTML基本结构的 有关元素和元素属性
• HEAD元素——5 • <meta>元素
– <meta http-equiv=“refresh” content=“5;URL=http://www.en /eschool”>
– 用来自动刷新网页
练习（03.htm）
HTML基本结构的 有关元素和元素属性
• HEAD元素——2 • <meta>元素 • <meta>元素下面可以插入很多很
有用的元素属性。下面介绍四种：
– <meta name="keywords" content="study,computer">
• 用来标记搜索引擎在搜索你的页 面时所取出的关键词。
HTML第一讲
HTML概念
• HTML（Hyper Text Markup Language 超文本标识语言） – 是一种用来制作超文本文档的 简单标记语言。 – 用HTML编写的超文本文档称 为HTML文档。
HTML文档的编写方法
1. 手工直接编写 – 记事本等，存成.htm .html格 式
• text属性标志HTML文档的正文文 字颜色。如：text=“#FF6666”。 Text元素定义的颜色将应用于整 篇文档。
• 例：09.htm
<body>元素及元素属性——6
• <body>元素中有下列元素属性： – (5)超级链接颜色
• link、vlink、alink分别控制普通 超级链接、访问过的超级
<html>...</html>
<head>...</head>
<body>...</body> • 元素：是HTML语言的基本部分。
元素总是成对出现，每一对元素 一般都有一个开始的标记（如 <body>），也有一个结束的标记 （如</body>）。元素的标记要用 一对尖括号括起来，并且结束的 标记总是在开始的标记前加一个 斜杠。
• 例：10.htm
<body>元素及元素属性——7
• <body>元素中有下列元素属性： – (6) leftmargin和topmargin
• 设置网页主体内容距离网页顶端 和左端的距离如： leftmargin="20" topmargin="30“
• 例：11.htm