HTML网页设计
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
</BODY>
</HTML>
</P>
<P>…</P> 标签用于标记段落
3.htm
10
换行符
只要在文本中放入 <BR> 标签，就会强制换行
<HTML>
<HEAD>
<TITLE>诗词学习</TITLE>
</HEAD>
<BODY>
<BR>我是第一行<BR>我是第二行 <P>我是第一段</P>
<BR>
<P>我是第二段</P>
5.htm
12
字符格式化标签
<HTML>
此<<HT标IET签ALDE用>>学于习对H文T本ML应</用TIT各L种E>格式，如粗体、斜体、下划线、下标、上标等
</HEAD>
<BODY>
<P>
<B>这很有趣</B>
<BR>
<BR>
<I>足球是最令人喜爱的运动之一。</I>
<BR>
<BR>
<U>信息技术是发展的关键。</U>
图文混排时用于和图片的对齐
插入图片例1
<HTML><HEAD>
<TITLE>动物世界</TITLE>
</HEAD>
<H1><FONT SIZE=3 COLOR=FORESTGREEN>
<B>让我们看看这些可爱的动物</B></FONT></H1>
<BODY>
<P>
<IMG ALIGN=BOTTOM SRC=e:\h1.jpg>底部对齐</P>
HTML元素与标签 3
大多数元素都有内容，这些内容包含在开始标记和 结束标记之间。但有些元素没有任何内容，如BR， 它产生一个换行动作
元素是大小写不敏感的，建议使用大写
HTML元素与标签 4
所有元素都具有一些属性。属性都有值，属性值总 是包括在双引号之中。属性一般小写。如：
align=“center”
6
HTML 标签
<HTML> <BODY BGCOLOR = “SILVER”>
<HEAD> <TITLE>学习 HTML </TITLE> </HEAD> <BODY BGCOLOR =SILVER> <标H1签>欢迎来到属H性TML 世界</H1> 值 </BODY> 标</识HTBMOLD>Y提元供素有关元素的附加信分息配给属性的内容
9.htm
图片标记
只有开始标记，无内容及结束标记
语法：<img src=“..” align=“..” border=“..” vspace=“..” >
属性说明：
src： 图片路径，一般使用相对路径 vspace： 图片上下垂直的段落间距 border： 边框的厚度 align： = top middle bottom
<P>
<IMG ALIGN=TOP SRC=e:\h1.jpg>顶部对齐</P>
<P>
<IMG ALIGN=MIDDLE SRC=e:\h1.jpg>居中对齐</P> </BODY>
10.html
</HTML>
25
插入图片例2
<HTML><HEAD> <TITLE>动物世界</TITLE> </HEAD> <H1><FONT COLOR=FORESTGREEN>让我们看看这些 可爱的动物</FONT></H1> <BODY> <P><IMG ALIGN=BOTTOM SRC=e:\h2.jpg width=30% height=30% border=3 VSPACE=30>底部对齐</P> <P><IMG ALIGN=TOP SRC=e:\h2.jpg width=30% height=30%>顶部对齐</P> <P><IMG ALIGN=MIDDLE SRC=e:\h2.jpg width=30% height=30%>居中对齐</P> </BODY> </HTML>
22
网页背景图片
<HTML> <HEAD> <title> 图片背景</title> </HEAD> <br><br> <center><h1>图片作背景</h1></center> <BODY BACKGROUND ="e:\h1.jpg" > <br><br> </BODY> </HTML>
相对路径
<P><FONT SIZE = 5 COLOR = BLUE >斑马的特性</FONT>
<P>没有任何两匹斑马<FONT COLOR = RED SIZE = 3>的斑
纹是完全一样的，</FONT>因此每匹斑马都是独一无二的
</BODY> </HTML>
可以按名称或十六进制值指定颜色
<FONT> 元素及其相关属性（如 SIZE、8.htm COLOR）可用于控制网页上文本的显示
</BODY>
Width Size Noshade
</HTML>
14
7.htm
使用字体和属性
<HTML>
<HEAD>
<FONT SIZE = 5 COLOR = BLUE >
<TITLE>动物世界</TITLE>
</HEAD> 可以为字体指定的大小范围为从 1 到 7，默认字体为3 <BODY>
<H1>了解有关动物的更多信息</H1>
浏览器显示 HTML 文档/页面
4
编辑器
在记事本中键入源代码
5
HTML 文档结构
<HTML> <HEAD>
头部部分
<TITLE>学习 HTML </TITLE>
</HEAD>
<BODY >
</H1> 欢迎来到 HTML 世界</H1>主体部分
</BODY>
</HTML>
HTML 网页
这部这分部<包分H含T包M文括L本>标…、题<图和/H像其TM和他L链说>标接明签。信标它息记包。括H包T在括M在L<B文<OH档DEY的A>开D…>始<…/和B<O/结HDE束YA>D标> 签标内签内
浏览器处理代码并进行 显示
1.htm
编辑器和浏览器
HTML 代码
<HTML> <HEAD> <TITLE>学习 HTML</TITLE> </HEAD> <BODY BGCOLOR = “SILVER”> <H1>欢迎来到 HTML 世界</H1> </BODY> </HTML>
在编辑器中编写 HTML 代码
HTML
HTML 可用于：
• 控制页面和内容的外观 • 发布和检索联机文档 • 插入诸如音频剪辑和视频剪辑等对象
1
HTML简介
HTML：HyperText Markup Language 超文本标 记语言
超文本: 文字+图片+音视+链接… 标记语言: 浏览器根据标记来显示内容 专门用于在Web上传递信息
HTML元素与标签 2
HTML中的元素通常由3部分组成：
开始标签：由尖括号括起来的元素，如： <HEAD>、 <BODY>、<P>
内容： 结束标签：在元素名前加上一个“/”（斜杠）符号，
并由尖括号括起来，如： </HEAD>、</BODY>、 </P>
绝大多数元素都有开始标签和结束标签
当浏览器看到一个开始标签时，它就会知道随后 的文本的类型都是由开始标记所定义的类型决定 的，直到它找到一个结束标签
HTML文件能独立于各种操作系统平台。在DOS 系统中HTML文档的后缀为“.htm” ，UNIX 系统 中“.html”，Windows 系统两种都可以使用。
HTML规则是由W3C（万维网组织）制定的。
HTML 文档示例
HTML 代码
<HTML> <HEAD> <TITLE>学习 HTML</TITLE> </HEAD> <BODY BGCOLOR = “SILVER”> <H1>欢迎来到 HTML 世界</H1> </BODY> </HTML>
<BR>
<BR>
水的分子式是 H <SUB>2</SUB> O。
<BR>
<BR>
3 <SUP>2</SUP> 等于 9。
<BR>
<BR>
</P>
</BODY>
6.htm
<用于在页面上绘制水平线
<HTML>
<HEAD> <TITLE>动物世界</TITLE>
</HEAD>
20
常见颜色的代码
颜色：网页中使用的是十六进制RGB值颜色，它由6位数字组成，每个数 字取从0至F的十六进制数值，前两位数字代表红色，中间两位数字代 表绿色，后两位数字代表蓝色，需要以“#”开头。
颜色
黑色 银色 红色 蓝色 白色 黄色 绿色 海蓝色
颜色名和RGB值
Black=”#000000” Silver=”#c0c0c0” Red=”#ff0000” Blue=”#0000ff” White=”#ffffff” Yellow=”ffff00” Green=”#00ff00” Aqua=”#00ffff”
7
标题 段落 换行符 预先格式化 字符格式化 列表 水平线 字体 图像 特殊字符 超级链接
8
HTML 基本元素
<HTML> <HEAD> <TITLE>动物世界</TITLE>
</HEAD> <BODY> <H1>从大自然获得灵感</H1> <H2>从大自然获得灵感</H2> <H3>从大自然获得灵感</H3> <H4>从大自然获得灵感</H4> <H5>从大自然获得灵感</H5> <H6>从大自然获得灵感</H6> </BODY> </HTML>
width=”33%”
有些属性的值来自于W3C设置标准时创建的值的列 表。例如，align属性的值有left、center、right三种
有些属性用数字来代表它们的值。数字可以是百分 比数字
总结
HTML 标签一般配对使用，不区分大小写 标签都具有属性。属性提供关于网页上 HTML 元
素的附加信息 标题级标签使用<H1>…<H6> 段落标签使用<P align＝“对齐方式”>…</P> 字体标签<Font color=“颜色” size=“大小” >
基本语法：<a name="name">文字段落</a> <a href="#bookmark">超链接文字</a> <a href="">超链接文字</a> <a href=“” >网址名</a>
说明： name 书签名称，文字段落是作为导引目的的文字内容 bookmark 插入的书签名称，“#”表示书签位置。 同一网站的html文件名称及路径 链接internet上的其它网站
</BODY>
</HTML>
4.htm
11
<Pre> 标签
<HTML>
<HEAD> <TITLE>诗词学习</TITLE>
</HEAD>
<BODY> <H1>静夜思</H1>
<PRE> 床前明月光
疑是地上霜
举头望明月
低头思故乡
</PRE> </BODY> </HTML>
<PRE> 标签用于显示具有预先定义格式的文本 （如 HTML 文档中所示）
11.html
总结
<img>用于控制图片属性，有src（地址），width （宽），height（高），border（边框）， vspace（垂直间距），hspace（水平间距）， align（对齐方式）。
27
超链接的使用
超链接标记<A>…</A> 包括同一份文件的超链接，同一个网站的超链接，链接 internet的资源
H1 到 H6 标签用于指定不同级2别.htm的标题
9
标题
段落标签
<HTML>
<HEAD> <TITLE>诗词学习</TITLE>
</HEAD>
<BODY> <P>我是第一段</P>
<P><P>我是第二段</P>
<P align="left">左对齐显示<P> <P align="center">居中显示<P> <P align="right">右对齐显示<P>
<BODY> <H3>老虎的夜间视觉 </H3>
<HR noshade size = 5 align = center width =
<HR> 标签属性
50%>
</HTML>
</P>
<P>…</P> 标签用于标记段落
3.htm
10
换行符
只要在文本中放入 <BR> 标签，就会强制换行
<HTML>
<HEAD>
<TITLE>诗词学习</TITLE>
</HEAD>
<BODY>
<BR>我是第一行<BR>我是第二行 <P>我是第一段</P>
<BR>
<P>我是第二段</P>
5.htm
12
字符格式化标签
<HTML>
此<<HT标IET签ALDE用>>学于习对H文T本ML应</用TIT各L种E>格式，如粗体、斜体、下划线、下标、上标等
</HEAD>
<BODY>
<P>
<B>这很有趣</B>
<BR>
<BR>
<I>足球是最令人喜爱的运动之一。</I>
<BR>
<BR>
<U>信息技术是发展的关键。</U>
图文混排时用于和图片的对齐
插入图片例1
<HTML><HEAD>
<TITLE>动物世界</TITLE>
</HEAD>
<H1><FONT SIZE=3 COLOR=FORESTGREEN>
<B>让我们看看这些可爱的动物</B></FONT></H1>
<BODY>
<P>
<IMG ALIGN=BOTTOM SRC=e:\h1.jpg>底部对齐</P>
HTML元素与标签 3
大多数元素都有内容，这些内容包含在开始标记和 结束标记之间。但有些元素没有任何内容，如BR， 它产生一个换行动作
元素是大小写不敏感的，建议使用大写
HTML元素与标签 4
所有元素都具有一些属性。属性都有值，属性值总 是包括在双引号之中。属性一般小写。如：
align=“center”
6
HTML 标签
<HTML> <BODY BGCOLOR = “SILVER”>
<HEAD> <TITLE>学习 HTML </TITLE> </HEAD> <BODY BGCOLOR =SILVER> <标H1签>欢迎来到属H性TML 世界</H1> 值 </BODY> 标</识HTBMOLD>Y提元供素有关元素的附加信分息配给属性的内容
9.htm
图片标记
只有开始标记，无内容及结束标记
语法：<img src=“..” align=“..” border=“..” vspace=“..” >
属性说明：
src： 图片路径，一般使用相对路径 vspace： 图片上下垂直的段落间距 border： 边框的厚度 align： = top middle bottom
<P>
<IMG ALIGN=TOP SRC=e:\h1.jpg>顶部对齐</P>
<P>
<IMG ALIGN=MIDDLE SRC=e:\h1.jpg>居中对齐</P> </BODY>
10.html
</HTML>
25
插入图片例2
<HTML><HEAD> <TITLE>动物世界</TITLE> </HEAD> <H1><FONT COLOR=FORESTGREEN>让我们看看这些 可爱的动物</FONT></H1> <BODY> <P><IMG ALIGN=BOTTOM SRC=e:\h2.jpg width=30% height=30% border=3 VSPACE=30>底部对齐</P> <P><IMG ALIGN=TOP SRC=e:\h2.jpg width=30% height=30%>顶部对齐</P> <P><IMG ALIGN=MIDDLE SRC=e:\h2.jpg width=30% height=30%>居中对齐</P> </BODY> </HTML>
22
网页背景图片
<HTML> <HEAD> <title> 图片背景</title> </HEAD> <br><br> <center><h1>图片作背景</h1></center> <BODY BACKGROUND ="e:\h1.jpg" > <br><br> </BODY> </HTML>
相对路径
<P><FONT SIZE = 5 COLOR = BLUE >斑马的特性</FONT>
<P>没有任何两匹斑马<FONT COLOR = RED SIZE = 3>的斑
纹是完全一样的，</FONT>因此每匹斑马都是独一无二的
</BODY> </HTML>
可以按名称或十六进制值指定颜色
<FONT> 元素及其相关属性（如 SIZE、8.htm COLOR）可用于控制网页上文本的显示
</BODY>
Width Size Noshade
</HTML>
14
7.htm
使用字体和属性
<HTML>
<HEAD>
<FONT SIZE = 5 COLOR = BLUE >
<TITLE>动物世界</TITLE>
</HEAD> 可以为字体指定的大小范围为从 1 到 7，默认字体为3 <BODY>
<H1>了解有关动物的更多信息</H1>
浏览器显示 HTML 文档/页面
4
编辑器
在记事本中键入源代码
5
HTML 文档结构
<HTML> <HEAD>
头部部分
<TITLE>学习 HTML </TITLE>
</HEAD>
<BODY >
</H1> 欢迎来到 HTML 世界</H1>主体部分
</BODY>
</HTML>
HTML 网页
这部这分部<包分H含T包M文括L本>标…、题<图和/H像其TM和他L链说>标接明签。信标它息记包。括H包T在括M在L<B文<OH档DEY的A>开D…>始<…/和B<O/结HDE束YA>D标> 签标内签内
浏览器处理代码并进行 显示
1.htm
编辑器和浏览器
HTML 代码
<HTML> <HEAD> <TITLE>学习 HTML</TITLE> </HEAD> <BODY BGCOLOR = “SILVER”> <H1>欢迎来到 HTML 世界</H1> </BODY> </HTML>
在编辑器中编写 HTML 代码
HTML
HTML 可用于：
• 控制页面和内容的外观 • 发布和检索联机文档 • 插入诸如音频剪辑和视频剪辑等对象
1
HTML简介
HTML：HyperText Markup Language 超文本标 记语言
超文本: 文字+图片+音视+链接… 标记语言: 浏览器根据标记来显示内容 专门用于在Web上传递信息
HTML元素与标签 2
HTML中的元素通常由3部分组成：
开始标签：由尖括号括起来的元素，如： <HEAD>、 <BODY>、<P>
内容： 结束标签：在元素名前加上一个“/”（斜杠）符号，
并由尖括号括起来，如： </HEAD>、</BODY>、 </P>
绝大多数元素都有开始标签和结束标签
当浏览器看到一个开始标签时，它就会知道随后 的文本的类型都是由开始标记所定义的类型决定 的，直到它找到一个结束标签
HTML文件能独立于各种操作系统平台。在DOS 系统中HTML文档的后缀为“.htm” ，UNIX 系统 中“.html”，Windows 系统两种都可以使用。
HTML规则是由W3C（万维网组织）制定的。
HTML 文档示例
HTML 代码
<HTML> <HEAD> <TITLE>学习 HTML</TITLE> </HEAD> <BODY BGCOLOR = “SILVER”> <H1>欢迎来到 HTML 世界</H1> </BODY> </HTML>
<BR>
<BR>
水的分子式是 H <SUB>2</SUB> O。
<BR>
<BR>
3 <SUP>2</SUP> 等于 9。
<BR>
<BR>
</P>
</BODY>
6.htm
<用于在页面上绘制水平线
<HTML>
<HEAD> <TITLE>动物世界</TITLE>
</HEAD>
20
常见颜色的代码
颜色：网页中使用的是十六进制RGB值颜色，它由6位数字组成，每个数 字取从0至F的十六进制数值，前两位数字代表红色，中间两位数字代 表绿色，后两位数字代表蓝色，需要以“#”开头。
颜色
黑色 银色 红色 蓝色 白色 黄色 绿色 海蓝色
颜色名和RGB值
Black=”#000000” Silver=”#c0c0c0” Red=”#ff0000” Blue=”#0000ff” White=”#ffffff” Yellow=”ffff00” Green=”#00ff00” Aqua=”#00ffff”
7
标题 段落 换行符 预先格式化 字符格式化 列表 水平线 字体 图像 特殊字符 超级链接
8
HTML 基本元素
<HTML> <HEAD> <TITLE>动物世界</TITLE>
</HEAD> <BODY> <H1>从大自然获得灵感</H1> <H2>从大自然获得灵感</H2> <H3>从大自然获得灵感</H3> <H4>从大自然获得灵感</H4> <H5>从大自然获得灵感</H5> <H6>从大自然获得灵感</H6> </BODY> </HTML>
width=”33%”
有些属性的值来自于W3C设置标准时创建的值的列 表。例如，align属性的值有left、center、right三种
有些属性用数字来代表它们的值。数字可以是百分 比数字
总结
HTML 标签一般配对使用，不区分大小写 标签都具有属性。属性提供关于网页上 HTML 元
素的附加信息 标题级标签使用<H1>…<H6> 段落标签使用<P align＝“对齐方式”>…</P> 字体标签<Font color=“颜色” size=“大小” >
基本语法：<a name="name">文字段落</a> <a href="#bookmark">超链接文字</a> <a href="">超链接文字</a> <a href=“” >网址名</a>
说明： name 书签名称，文字段落是作为导引目的的文字内容 bookmark 插入的书签名称，“#”表示书签位置。 同一网站的html文件名称及路径 链接internet上的其它网站
</BODY>
</HTML>
4.htm
11
<Pre> 标签
<HTML>
<HEAD> <TITLE>诗词学习</TITLE>
</HEAD>
<BODY> <H1>静夜思</H1>
<PRE> 床前明月光
疑是地上霜
举头望明月
低头思故乡
</PRE> </BODY> </HTML>
<PRE> 标签用于显示具有预先定义格式的文本 （如 HTML 文档中所示）
11.html
总结
<img>用于控制图片属性，有src（地址），width （宽），height（高），border（边框）， vspace（垂直间距），hspace（水平间距）， align（对齐方式）。
27
超链接的使用
超链接标记<A>…</A> 包括同一份文件的超链接，同一个网站的超链接，链接 internet的资源
H1 到 H6 标签用于指定不同级2别.htm的标题
9
标题
段落标签
<HTML>
<HEAD> <TITLE>诗词学习</TITLE>
</HEAD>
<BODY> <P>我是第一段</P>
<P><P>我是第二段</P>
<P align="left">左对齐显示<P> <P align="center">居中显示<P> <P align="right">右对齐显示<P>
<BODY> <H3>老虎的夜间视觉 </H3>
<HR noshade size = 5 align = center width =
<HR> 标签属性
50%>