HTML网页制作第二章PPT课件
合集下载
第2章 HTML网页设计PPT课件
</TABLE>
2.3 HTML 表格标记
2.3.2 表格应用举例
<table border="0" width="260" bgcolor="skyblue"> <tr> <th width="112" align="left">商品名称</th> <th width="72">单位</th> <th width="87" align="right">单价</th></tr> <tr> <td width="112">平板电视机</td> <td align="center" width="72">台</td> <td align="right" width="87">$12,699</td></tr> ……
<hr>
2.2 HTML 常用标记
2.2.4 文字格式标记
1．字体标记
<FONT size = 大小 face = 字体名称 color = 颜色> 文字 </FONT>
2．文字修饰标记 <b>、<i>、<u>
2.2.5 特殊字符标记
在HTML文档中， <、>、& 、空格等特殊字符需要 用特定字符串来表示。
</html>
2.3 HTML 表格标记
2.3.2 表格应用举例
<table border="0" width="260" bgcolor="skyblue"> <tr> <th width="112" align="left">商品名称</th> <th width="72">单位</th> <th width="87" align="right">单价</th></tr> <tr> <td width="112">平板电视机</td> <td align="center" width="72">台</td> <td align="right" width="87">$12,699</td></tr> ……
<hr>
2.2 HTML 常用标记
2.2.4 文字格式标记
1．字体标记
<FONT size = 大小 face = 字体名称 color = 颜色> 文字 </FONT>
2．文字修饰标记 <b>、<i>、<u>
2.2.5 特殊字符标记
在HTML文档中， <、>、& 、空格等特殊字符需要 用特定字符串来表示。
</html>
第2章 HTML入门PPT教学课件
2.2.4 HTML链接标签<link>
<link>标签可以设定外部文件的链接，可定义当前文档和其
他文件之间的关系。
Href：指定要定义关系文件的URL。
ID：指定某个链接的标识符。
Title：说明链接的关系。
Rel：指定当前文档和Href域中文档之间的关系。
Байду номын сангаас
例如：
<link rel="stylesheet" href="style.css"> <!--调入样式表， 链接样式表文件”style.css” -->
2.2 HTML头标记
HTML头标记指的是<head>标签。在浏览器窗口中，头部信 息是不显示在正文中的，在标记中可以插入其他的用来说 明文件的标题或公共属性的标记。<head>和</head>标 签中包含了许多信息，如文档类型、语言编码、 JavaScript和Vbscript的函数和变量、搜索引擎的关键字 和内容提示等。
<body alink="color value" link="color value" vlink="color value">
语法说明： alink是指鼠标在超链接上按下时文本的显示颜色。 link是指默认的超链接文本颜色，即超链接没有被单击过的
状态。 vlink是指连接过的超链接文本的显示颜色。其中color value
2.2.1 HTML标题标签<title>
<title>标签定义页面标题，在<title>和</title>之间加入页面 的标题文字就会在浏览器的标题栏显示出来，如果与动态 程序相结合，可以实现实时显示文章标题。例如，在ASP 编程时，在文章显示页的<title>和</title>标签中加入 News_rs（“News_Title”），当浏览者单击新闻标题时 ，文章显示页面的标题栏上就会显示这条新闻的标题。
网页制作基础教程第二章
上一页 返 回
2.5 网页中的字体
2.5.1 文字在网页设计中的作用
在平面设计的构成要素中有两大基本元素，一个是图形，另 一个就是文字。只通过图形来传递信息常常不能达到最佳的 效果，须借助文字才能进行最有效的说明。在网页中也是如 此。
具体来说，文字在网页中的作用可以体现为以下几点，例如 在优秀设计作品中体现出的文字的特性。
开头，这在传统媒体版式设计中称之为“下坠式”。 （2）引文的强调。 在进行网页文字编排时，常常会碰到提纲挈领性的文字，即
引文（也称为眉头）。
上一页Байду номын сангаас下一页
2.5 网页中的字体
（3）个别文字的强调。 如果将个别文字作为页面的诉求重点，则可以通过加粗、加
框、加下划线、加指示性符号、倾斜字体等手段有意识地强 化文字的视觉效果，使其在页面整体中显得出众而夺目。 4. 文字的颜色 在网页设计中，设计者可以为文字、文字链接、已访问链接 和当前活动链接选用各种颜色。 颜色的运用除了能够起到强调整体文字中特殊部分的作用之 外，对于整个文案的情感表达也会产生影响。
上一页 下一页
2.6 网页中表格的运用
2. 表格运用的注意点 表格的嵌套并不是表格处理最困难的地方，无论多复杂的版
面，悉心琢磨一番总能找到解决的办法。 因此，在设计页面表格的时候，应该做到以下几点。 （1）整个页面不要都套在一个表格里，尽量拆分成多个表
格。 （2）单一表格的结构尽量整齐。 （3）表格嵌套层次尽量要少。
上一页 下一页
2.5 网页中的字体
拉丁字母依据其基本结构可以分为3种类型。 （1）饰线体（Serif）：此类字体在笔画末端带有装饰性部
分，笔画精细对比明显，与中文的宋体具有近似形态特征， 饰线体在阅读时具有较好的易读性，适合于长篇幅文本段落。 （2）无饰线体（Sans Serif）：笔画的粗细对比不明显， 笔画末端没有装饰性部分，字体形态与中文的黑体相类似。 （3）装饰体（Decorative，也称Display）：即通常所 说的“花”体，由于此类字体拘泥于形式的装饰意味，阅读 时较为费力，易读性较差，只适合于标题或较短文本，类似 于中文的美术体和手写体。
2.5 网页中的字体
2.5.1 文字在网页设计中的作用
在平面设计的构成要素中有两大基本元素，一个是图形，另 一个就是文字。只通过图形来传递信息常常不能达到最佳的 效果，须借助文字才能进行最有效的说明。在网页中也是如 此。
具体来说，文字在网页中的作用可以体现为以下几点，例如 在优秀设计作品中体现出的文字的特性。
开头，这在传统媒体版式设计中称之为“下坠式”。 （2）引文的强调。 在进行网页文字编排时，常常会碰到提纲挈领性的文字，即
引文（也称为眉头）。
上一页Байду номын сангаас下一页
2.5 网页中的字体
（3）个别文字的强调。 如果将个别文字作为页面的诉求重点，则可以通过加粗、加
框、加下划线、加指示性符号、倾斜字体等手段有意识地强 化文字的视觉效果，使其在页面整体中显得出众而夺目。 4. 文字的颜色 在网页设计中，设计者可以为文字、文字链接、已访问链接 和当前活动链接选用各种颜色。 颜色的运用除了能够起到强调整体文字中特殊部分的作用之 外，对于整个文案的情感表达也会产生影响。
上一页 下一页
2.6 网页中表格的运用
2. 表格运用的注意点 表格的嵌套并不是表格处理最困难的地方，无论多复杂的版
面，悉心琢磨一番总能找到解决的办法。 因此，在设计页面表格的时候，应该做到以下几点。 （1）整个页面不要都套在一个表格里，尽量拆分成多个表
格。 （2）单一表格的结构尽量整齐。 （3）表格嵌套层次尽量要少。
上一页 下一页
2.5 网页中的字体
拉丁字母依据其基本结构可以分为3种类型。 （1）饰线体（Serif）：此类字体在笔画末端带有装饰性部
分，笔画精细对比明显，与中文的宋体具有近似形态特征， 饰线体在阅读时具有较好的易读性，适合于长篇幅文本段落。 （2）无饰线体（Sans Serif）：笔画的粗细对比不明显， 笔画末端没有装饰性部分，字体形态与中文的黑体相类似。 （3）装饰体（Decorative，也称Display）：即通常所 说的“花”体，由于此类字体拘泥于形式的装饰意味，阅读 时较为费力，易读性较差，只适合于标题或较短文本，类似 于中文的美术体和手写体。
Dreamweaver网页设计第2章_HTML简介PPT教学课件
2.1 HTML文档的基本结构—标记和属性
Hale Waihona Puke ⑵ 其他常用属性属性名 background
text link alink vlink leftmargin topmargin
属性用法 background="图像url"
text="颜色" link="颜色" alink="颜色" vlink="颜色" Leftmargin="像素值" topmargin="像素值"
2.1 HTML文档的基本结构—标记和属性
⑴ bgcolor属性 用法二：bgcolor="颜色标识符" “颜色标识符”在HTML的预定义颜色符中取值。 常用的预定义颜色符： black、olive、teal、red、blue、maroon、navy、 gray、lime、fuchsia、white、green、purple、 sliver、yellow、aqua 例如： <body bgcolor=" yellow">
2.1 HTML文档的基本结构—标记和属性
⑵ meta标记 描述网页说明 <meta name="description" content="网页说明信息"> “网页说明信息”是一段文本，它将作为搜索引擎对网页 的描述信息。 搜索引擎就能够根据这些关键字搜索到相应网页，并显 示关于网页的说明信息。
2.1 HTML文档的基本结构—标记和属性
⑴ title标记 title标记用于标识网页标题。 格式如下： <title>字符串</title> 格式中的“字符串”是网页的标题内容，浏览网 页时该内容显示在网页顶部的标题行中。 ⑵ meta标记 meta标记用于描述网页关键字和网页说明、定义 网页语言编码、页面刷新设置等，进行网页浏览 时，这些标记信息是不可见的。
网页制作PPT课件
CSS历史
CSS最早在1996年由W3C发布，经过多个版本的发展，目前最新的版本是CSS3，增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式，例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式，以`#`开头，例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式，以`.`开头，例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式，例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性，需要对表单进行验证，如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计，使表单易于填写和提交，同时提供 友好的用户反馈，如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容，可以选择合适的导航类型， 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法，允许在 JavaScript 中编写 HTML 结构， 提高了开发效率。
组件化开发
React 同样支持组件化开发，可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能，可以方便地管理组件的状态和数据。
CSS最早在1996年由W3C发布，经过多个版本的发展，目前最新的版本是CSS3，增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式，例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式，以`#`开头，例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式，以`.`开头，例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式，例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性，需要对表单进行验证，如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计，使表单易于填写和提交，同时提供 友好的用户反馈，如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容，可以选择合适的导航类型， 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法，允许在 JavaScript 中编写 HTML 结构， 提高了开发效率。
组件化开发
React 同样支持组件化开发，可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能，可以方便地管理组件的状态和数据。
第2章HTML语言精品PPT课件
…
</ head > 文件头结束
<body> 文件体开始
…
</ body > 文件体结束
</ htnl >
htnl文件结束
2.1 文档结构
2.1.1 开始与结束标记
语法格式：
<HTML> HTML文件的所有内容
</HTML>
2.1 文档结构
2.1.2 头部标记
语法格式：
< head > HTML文档的头部内容
<A href=”#第一部分”>链接到第一部分
</A>
2.3 超链接标记
2.3.4 链接至不同文件的另一个段落
假如在example1.html文件里建立链接“链接
到第—部分”，而锚标记“第一部分”在
example2.html网页中，则可写在
example1.html添加语句：
<A href=” example2.htm#第—部
分”>链接到第—部分</A>
2.4 嵌入式内容
2.4.1 页面中插入图象
语法格式：
<img src=图像的URL[align=# alt=文字 border=# height=# wdith=#]>
2.4 嵌入式内容
2.4.2 页面中插入音频、视频和动画
语法格式：
<img src=音频、视频和动画的URL[align=# alt=文字border=# height=# wdith=#]>
3．表格行标记
<tr>…</tr>
4．列名标记
<th>列名</th>
HTML网页制作PPT教学课件
• 一种是使用现成的可视化工具软件，如 Frontpage、Dreamweaver等工具。 会自动加入其他代码与许多复杂的信息，也不 便于修改。
• 另一种就是使用纯文本编辑器，如Windows中 自带的记事本。 这种方法简单易行，自由方便，可以添加注释， 还可以使脚 本具有很好的可读性。
• 使用记事本创建网页的基本步骤是： •2020一/12/0、9 新建记事本文件 二、保存时修改其后缀名为.html 4
字体形式显示的标签对： <b></b>、<i></i>、<u></u>、<sub></ sub >、 <sup></ sup > <Font></ Font >有三个属性： face(字体)、 Size(大小)、 Color(颜色)
2020/12/09
例7
<img src=“url”>标签用来处理图象的显示。
HTML网页基本结构与标注
HTML是一种标记语言，不是编程语言。基本结 构是：
<html> <head> 头部元素、元素属性及内容
</head> <body> 主体元素、元素属性及内容
</body> </html>
2020/12/09
5
HTML总是以一对<></>开始和结束。
• 标题元素 <h1></h1> 设置某一行的字体大小
• Font元素 <font></font> 设置文档的字体 font元素的常用属性是size、color
• 另一种就是使用纯文本编辑器，如Windows中 自带的记事本。 这种方法简单易行，自由方便，可以添加注释， 还可以使脚 本具有很好的可读性。
• 使用记事本创建网页的基本步骤是： •2020一/12/0、9 新建记事本文件 二、保存时修改其后缀名为.html 4
字体形式显示的标签对： <b></b>、<i></i>、<u></u>、<sub></ sub >、 <sup></ sup > <Font></ Font >有三个属性： face(字体)、 Size(大小)、 Color(颜色)
2020/12/09
例7
<img src=“url”>标签用来处理图象的显示。
HTML网页基本结构与标注
HTML是一种标记语言，不是编程语言。基本结 构是：
<html> <head> 头部元素、元素属性及内容
</head> <body> 主体元素、元素属性及内容
</body> </html>
2020/12/09
5
HTML总是以一对<></>开始和结束。
• 标题元素 <h1></h1> 设置某一行的字体大小
• Font元素 <font></font> 设置文档的字体 font元素的常用属性是size、color
第二章网页制作语言HTML精品PPT课件
学时：60学时
第二章 网页制作语言HTML
• 了解：HTML语言的基本知识 • 熟练掌握：掌握使用HTML标签建立基本的网页；使用各种对象
标签在网页中插入文本、图像、表格、列表、多媒体；使用超 链接标签建立绝对路径和相对路径的链接；通过框架的形式建 立包含框架的页面。
• 掌握：熟悉HTML的语法；掌握HTML的基本标签；掌握HTML 中的文本、图像、链接、列表、表格、多媒体、框架等标签的 使用方法；掌握各个对象标签的属性应用。
• 到现在为止，HTML已经发展到了比较成熟的HTML 4.0版本，在这个版本下 的语言中，规范更加统一，浏览器之间的兼容性也更加完善。
• 除了HTML语言以外，W3C组织在2000年推出了另一种XHTML1.0语言，该 语言其实是HTML4.0的升级版本HTML4.01，只是用XHTML1.0来命名。
从上面的标签中可以看到标签都是成对出现，由开始标签<标签名>和结束标签 </标签名>组成的，这种成对出现的标签称之为双向标签。除此之外HTML标签 还有单向标记，单向标签只有一个标签<标签名/>，如图像标签<img/>，水平线 <hr/>等。大部分的HTML标签都是有属性的，在为标签添加属性时，属性要写 在标签内，如是双向标签，属性写在开如标签内，各个属性之间不分先后顺序， 属性是可选的，如果不写，那就是采用默认属性值，其格式如下：
二、HTML文件的编写方法
二、HTML文件的编写方法
1.手工直接编写
可以使用任何文本编辑器 来打开并编写HTML文件， 如Windows系统中自带的 记事本。
2.使用可视化软件
Microsoft公司的 FrontPage、Adobe公司 的Dreamweaver等软件均 可以创建HTML文档。
第二章 网页制作语言HTML
• 了解：HTML语言的基本知识 • 熟练掌握：掌握使用HTML标签建立基本的网页；使用各种对象
标签在网页中插入文本、图像、表格、列表、多媒体；使用超 链接标签建立绝对路径和相对路径的链接；通过框架的形式建 立包含框架的页面。
• 掌握：熟悉HTML的语法；掌握HTML的基本标签；掌握HTML 中的文本、图像、链接、列表、表格、多媒体、框架等标签的 使用方法；掌握各个对象标签的属性应用。
• 到现在为止，HTML已经发展到了比较成熟的HTML 4.0版本，在这个版本下 的语言中，规范更加统一，浏览器之间的兼容性也更加完善。
• 除了HTML语言以外，W3C组织在2000年推出了另一种XHTML1.0语言，该 语言其实是HTML4.0的升级版本HTML4.01，只是用XHTML1.0来命名。
从上面的标签中可以看到标签都是成对出现，由开始标签<标签名>和结束标签 </标签名>组成的，这种成对出现的标签称之为双向标签。除此之外HTML标签 还有单向标记，单向标签只有一个标签<标签名/>，如图像标签<img/>，水平线 <hr/>等。大部分的HTML标签都是有属性的，在为标签添加属性时，属性要写 在标签内，如是双向标签，属性写在开如标签内，各个属性之间不分先后顺序， 属性是可选的，如果不写，那就是采用默认属性值，其格式如下：
二、HTML文件的编写方法
二、HTML文件的编写方法
1.手工直接编写
可以使用任何文本编辑器 来打开并编写HTML文件， 如Windows系统中自带的 记事本。
2.使用可视化软件
Microsoft公司的 FrontPage、Adobe公司 的Dreamweaver等软件均 可以创建HTML文档。
第2章 网页设计与制作PPT课件
《网页设计与制作》 19
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图文混排是指当文字和图片在一起时他们的排列方式，通过图片的align属性设置，一般有如下几种值：
left:表示图片在文字的左边显示。 right:表示图片在文字的右边显示。 top:表示文字和图片的顶端对齐。 bottom:表示文字和图片的底端对齐。 middle：表示文字和图片中部对齐。
2.网页常用标签
注意:锚标记的使用需要先使用<a>标签和name属性定义一个锚标记，然后使用<a>标签的href属性去链接。
2.网页常用标签
2.2 超级链接
2）锚标记 例2-4：锚标记的使用
//…… <body>
<a name=“第一章”>第一章</a>为“锚”标记。 <hr/> <hr/> <hr/> <hr/> <hr/> <hr/> <p>
<img src=“图片路径” 属性1=“值1” 属性2=“值2”…/>
<img src=“图片路径” 属性1=“值1” 属性2=“值 2”…></img>
例2-1:<img/>标签的使用
//… <body>
我们在这里插入图片! <img src=“images/2.jpg” width=“330px”/> </body>
2.1 图片
3）图文混排 例2-2:图文混排
<html> <head><title>图文混排</title></head> <body>
<pre> <img src=“1.jpg” width=“100px” align=“right”/> 图片在文字的右边显示！
</pre><hr> <img src=“2.jpg” width=“150px” align=“middle”/> 文字和图片中部对齐！
</body> </html>
2.网页常用标签
2.2 超级链接
超级链接也称超链接或链接。超链接在本质上属于一个网页的一部分， 它是一种允许我们同其他网页或站点之间进行连接的元素。所谓的超 链接是指从一个网页指向一个目标的连接关系。
按照链接路径:
内部链接---点击该超链接连接到同一网站 的另外一个页面。 锚点链接---点击该超链接连接到同一页面 的某一个位置。 外部链接---点击该超链接连接到其它的网 站上的某一个页面
注意:在使用<img/>标签时，不是英语单词中的image单词拼写方式，在html页面中
可以插入图像，网页中常用的图像格式有jpg和gif两种。
2.网页常用标签
2.1 图片 2）属性介绍
页面中插入图片可以起到美化的作用，插入图片的标记只有一个，那就是<img/>标记，插入图片的时候，仅仅使 用<img/>标记是不够的，需要配合其它的属性来完成。如表2-1
除了链接到另外一个HTML文件，也可以在一篇文章内随心所欲地链接。 <hr/> <hr/> <hr/> <hr/> <hr/> <hr/> 这和前面两种稍有不同，需要先做出一个“锚”标记，即链接的目标地， <hr/> <hr/> <hr/> <hr/> <hr/><hr/> 再做到“锚”的链接。到“锚”的链接与平常相同。 </p>
按使用对象:
文本超链接---建立在文本上的超连接。 图像超链接---建立在图片上的超连接。 E-mail链接---超链接的目标是打开邮件发 送。 锚点链接---超链接的目标是在同一个页面 之内。 多媒体文件链接---超链接的目标是多媒体 文件。 空链接---超链接没有目标。
2.网页常用标签
2.2 超级链接 1）超链接
<hr/><hr/> <hr/><hr/> <hr/><hr/> <hr/><hr/> <hr/><hr/> <hr/><hr/> <hr/><hr/> <hr/><hr/> <a href=“#第一章”>从这里可链接到第一章</a> </body>
2.网页常用标签
2.2 超级链接
3）外链接 外链接是指超链接的目标是当前网站之外的页面路径，其语法格式和 超链接的语法件。 width:宽度。 border:边框。
alt:提示文字。 height：高度。 align:排列。
2.网页常用标签
2.1 图片 3）图文混排
图文混排是制作精美网页常用的功能之一，通过将适当的图像与文字有效的排列组合在一起，可以大大丰富 版面，在很大程度上提高版面的可视性。
超链接是一种对象，它以特殊编码的文本或图形的形式来实现链接， 如果单击该链接，则打开一个新的网页，其语法如下:
<a href=“#” target=“”>……</a>
href表示超链接的目标路径，href的值一般有三种形式的值: (1)绝对URL的超链接。URL就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径，称为内部链HTML网 来自制作第二章 网页常用标签
本章主要内容
图片、超级链 接、列表、滚 动效果
表格和层及表 单
教学要求
了解在网页中图片的添加及每
1
个页面之间链接的形成。
认识网页中的表格和层，及用
2 表格进行网页布局
2.网页常用标签
2.1 图片
1）图片标记
在网页中我们可以使用<img/>标签插入图片， <img/>标签的语法如下:
接。如。 (2)第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去，称为
外部链接。 (3)第三种称为同一网页的超链接，这种超链接又叫做书签或者锚标记。
2.网页常用标签
2.2 超级链接
1）超链接 例2-3:超级链接的使用
a.html //…… <body>
<a href=“b.html”>链接到另外一个页面</a> </body> </html> b.html //…… <body> 我们现在学习的是超级链接的使用! <img src=“image.jpg” width=“330px”/> </body> </html>
2.网页常用标签
2.2 超级链接 2）锚标记
锚标记的作用是链接到同一页面的某一个段落，它的语法和超链接的 语法几乎一样，只是src属性的书写有些变化和属性的使用,其锚标记 的定义语法如下:
<a name=“锚标记名称”>文本内容</a> 锚标记的使用语法如下: <a href=“#锚标记名称”>文本内容</a>
left:表示图片在文字的左边显示。 right:表示图片在文字的右边显示。 top:表示文字和图片的顶端对齐。 bottom:表示文字和图片的底端对齐。 middle：表示文字和图片中部对齐。
2.网页常用标签
注意:锚标记的使用需要先使用<a>标签和name属性定义一个锚标记，然后使用<a>标签的href属性去链接。
2.网页常用标签
2.2 超级链接
2）锚标记 例2-4：锚标记的使用
//…… <body>
<a name=“第一章”>第一章</a>为“锚”标记。 <hr/> <hr/> <hr/> <hr/> <hr/> <hr/> <p>
<img src=“图片路径” 属性1=“值1” 属性2=“值2”…/>
<img src=“图片路径” 属性1=“值1” 属性2=“值 2”…></img>
例2-1:<img/>标签的使用
//… <body>
我们在这里插入图片! <img src=“images/2.jpg” width=“330px”/> </body>
2.1 图片
3）图文混排 例2-2:图文混排
<html> <head><title>图文混排</title></head> <body>
<pre> <img src=“1.jpg” width=“100px” align=“right”/> 图片在文字的右边显示！
</pre><hr> <img src=“2.jpg” width=“150px” align=“middle”/> 文字和图片中部对齐！
</body> </html>
2.网页常用标签
2.2 超级链接
超级链接也称超链接或链接。超链接在本质上属于一个网页的一部分， 它是一种允许我们同其他网页或站点之间进行连接的元素。所谓的超 链接是指从一个网页指向一个目标的连接关系。
按照链接路径:
内部链接---点击该超链接连接到同一网站 的另外一个页面。 锚点链接---点击该超链接连接到同一页面 的某一个位置。 外部链接---点击该超链接连接到其它的网 站上的某一个页面
注意:在使用<img/>标签时，不是英语单词中的image单词拼写方式，在html页面中
可以插入图像，网页中常用的图像格式有jpg和gif两种。
2.网页常用标签
2.1 图片 2）属性介绍
页面中插入图片可以起到美化的作用，插入图片的标记只有一个，那就是<img/>标记，插入图片的时候，仅仅使 用<img/>标记是不够的，需要配合其它的属性来完成。如表2-1
除了链接到另外一个HTML文件，也可以在一篇文章内随心所欲地链接。 <hr/> <hr/> <hr/> <hr/> <hr/> <hr/> 这和前面两种稍有不同，需要先做出一个“锚”标记，即链接的目标地， <hr/> <hr/> <hr/> <hr/> <hr/><hr/> 再做到“锚”的链接。到“锚”的链接与平常相同。 </p>
按使用对象:
文本超链接---建立在文本上的超连接。 图像超链接---建立在图片上的超连接。 E-mail链接---超链接的目标是打开邮件发 送。 锚点链接---超链接的目标是在同一个页面 之内。 多媒体文件链接---超链接的目标是多媒体 文件。 空链接---超链接没有目标。
2.网页常用标签
2.2 超级链接 1）超链接
<hr/><hr/> <hr/><hr/> <hr/><hr/> <hr/><hr/> <hr/><hr/> <hr/><hr/> <hr/><hr/> <hr/><hr/> <a href=“#第一章”>从这里可链接到第一章</a> </body>
2.网页常用标签
2.2 超级链接
3）外链接 外链接是指超链接的目标是当前网站之外的页面路径，其语法格式和 超链接的语法件。 width:宽度。 border:边框。
alt:提示文字。 height：高度。 align:排列。
2.网页常用标签
2.1 图片 3）图文混排
图文混排是制作精美网页常用的功能之一，通过将适当的图像与文字有效的排列组合在一起，可以大大丰富 版面，在很大程度上提高版面的可视性。
超链接是一种对象，它以特殊编码的文本或图形的形式来实现链接， 如果单击该链接，则打开一个新的网页，其语法如下:
<a href=“#” target=“”>……</a>
href表示超链接的目标路径，href的值一般有三种形式的值: (1)绝对URL的超链接。URL就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径，称为内部链HTML网 来自制作第二章 网页常用标签
本章主要内容
图片、超级链 接、列表、滚 动效果
表格和层及表 单
教学要求
了解在网页中图片的添加及每
1
个页面之间链接的形成。
认识网页中的表格和层，及用
2 表格进行网页布局
2.网页常用标签
2.1 图片
1）图片标记
在网页中我们可以使用<img/>标签插入图片， <img/>标签的语法如下:
接。如。 (2)第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去，称为
外部链接。 (3)第三种称为同一网页的超链接，这种超链接又叫做书签或者锚标记。
2.网页常用标签
2.2 超级链接
1）超链接 例2-3:超级链接的使用
a.html //…… <body>
<a href=“b.html”>链接到另外一个页面</a> </body> </html> b.html //…… <body> 我们现在学习的是超级链接的使用! <img src=“image.jpg” width=“330px”/> </body> </html>
2.网页常用标签
2.2 超级链接 2）锚标记
锚标记的作用是链接到同一页面的某一个段落，它的语法和超链接的 语法几乎一样，只是src属性的书写有些变化和属性的使用,其锚标记 的定义语法如下:
<a name=“锚标记名称”>文本内容</a> 锚标记的使用语法如下: <a href=“#锚标记名称”>文本内容</a>