网页设计————HTML基本标记
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
•值 - 分配给属性的内容 •属性 - 描述标记 •元素 - 标识标记
标记:人(事物) 属性:性别、头发、职业……
值:女性、长头发、工程师…… 男性、黄头发、培训师……
5
超链接：锚记A
语法为:
HREF 指定链接目标点的地址或名称 <A HREF = protocol://host.domain:port/path/filename> Hypertext </A>
用来指定目标窗口的打开方式。包含4个取值：
_blank：在新窗口中打开。
_parent：在上一级的浏览窗口中打开。
_self：在当前页面或框架中打开。 _top：在当前浏览窗口页面中打开。
<HTML> <head> </head> <BODY> <A HREF="x1.html" TARGET="_blank">文件x</A> </BODY> </HTML>
17
字符级标记
<B> . . . </B> <U> . . . </U> <S> . . . </S> 粗体文本 下划线效果 删除线效果
<SUP> . . . /SUP> 上标文本 <SUB> . . . /SUB> 下标文本 <EM> . . </EM> 强调文本 <CODE>. . .</CO 用于显示编程代码 DE> <CITE>. . . 用于引用 </CITE>
<HTML> <HEAD> <TITLE>使用链接</TITLE> </HEAD> <BODY> <BR><BR> <P>本页的所有内容都讲述关于如何创建到 文档的链接 <A HREF =Doc2.html> 单击此处查看文 档2</A> </BODY> </HTML>
8
链接到同一文档的各个部分
单击
– 手工直接编写：记事本、EditPlus等，存成.htm 或.html文件 – 可视化编辑器：Dreamweaver、 Frontpage等 – 由Web 服务器实时动态地生成：IIS、Tomcat等
HTML 文档的结构
基本结构：
HTML 部分 文档头部分
包含：网页标题、网页说明、 CSS样式、脚本代码等
14
HTML基本标记
标题标记 字符级标记 段落级标记 字体标记
容器标记 列表标记 水平线标记 IMG 图像标记
目标
•使用基本标记 •在 HTML 文档中插入图像
16
题目标记
可显示六种大小的标题，即<H1>到<H6>，<H1>为最大，<H6>为最小 <HTML> <HEAD> <TITLE>HTML 简介</TITLE> </HEAD> <BODY> <H1>HTML 简介</H1> <H2>HTML 简介</H2> <H3>HTML 简介</H3> <H4>HTML 简介</H4> <H5>HTML 简介</H5> <H6>HTML 简介</H6> </BODY> </HTML>
第二章 HTML基本标记
回顾：
掌握HTML文档的结构 掌握HTML标记构成及其使用方法 熟练使用超链接
2
● HyperText Markup Language—超文本标记语言 – 制作Web页面的基本编程语言
– 一系列标记的集合 – 用HTML编写的超文本文档称为HTML文档。
● HTML文档的编写方法
22
补充：关于颜色
颜色值是一个关键字或一个RGB格式的数 字。 aqua，black， blue，fuchsia, gray， green， lime，maroon，navy，olive， purple，red，silver，teal，white，yellow
23
在 HTML 中对于颜色的定义可以用6位 十六进制数。 电脑屏幕的色彩是由rgb（红、绿、蓝） 三种色光所合成的，通过调整这三个基 色就可以调配出其它的颜色。 – 每2位数代表一种颜色的浓度，三种 颜色的顺序为红、绿、蓝，00代表 颜色浓度最小，FF代表颜色浓度最 大。 #000000代表纯黑、#FFFFFF代表纯 白、
21
使用FONT标记
<FONT>标记用于控制文本在网页上的显示。可以指定size（大小）、 color（颜色）face（字体）style（样式）等属性。
<HTML> <HEAD> <TITLE>欢迎使用HTML</TITLE> </HEAD> <BODY> <H3><FONT SIZE = 3 COLOR = HOTPINK FACE = "隶书">我的第一个 HTML文档</FONT></H3> <P>这<FONT COLOR = BLUE SIZE = 6>将会</FONT>是一种很有趣的 体验 </BODY> </HTML>
19
块引用标记：<BLOCKQUOTE> 标记
可以使用BLOCKQUOTE元素显示文档中的引用文本。BLOCKQUOTE用于较 长的引用且显示为缩进式段落。
<HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <P>blockquote 元素用于以文本块的形式 设置内容格式。 <BLOCKQUOTE> 汉普蒂·邓普蒂坐在墙上 汉普蒂·邓普蒂摔了一大跤 国王所有的马 和所有的人 也无法再把汉普蒂 · 邓普蒂拼 起来 </BLOCKQUOTE> <P>请注意，上述内容显示为一个文本块。 </BODY> </HTML>
<BR><BR><BR><BR><BR><BR> </BODY> </HTML> 9
链接到另一文档中某个特定位置
单击 <HTML> <HEAD> <TITLE>主文档</TITLE> </HEAD> <BODY> <A HREF= 副文档 .html#Internet> 互联网 </A> <BR> <BR> <A HREF= 副 文 档 .html#HTML>HTML 简 介 </A> <BR> <BR> <A HREF= 副 文 档 .html#Consistency> 多 样性和统一性</A> </BODY> </HTML>
文档体部分
浏览器页面的显示内容
<HTML> <HEAD> <TITLE>欢迎进入 HTML 世界</TITLE> </HEAD> <BODY> <P>这会是一种很有趣的体验</P> </BODY> </HTML>
运行结果
4
HTML 标记的格式组成：
<ELEMENT ATTRIBUTE = value></ELEMENT>
10
链接到另一文档中某个特定位置
单击
<HTML> <HEAD> <TITLE>副文档</TITLE> </HEAD> <BODY> <A name = Internet>互联网</A><BR> <P>互联网是网络的网络。也就是说，计算机网络可以跨越 国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以 通过TCP/IP传输协议绑定在一起。</P> <A name = HTML>HTML简介</A><BR> <P> 超文本标记语言是 Web 用来创建和识别文档的标准语言。 虽然它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程 度上的关联。SGML是一种文档格式语言表示方法。</P> <A name = Consistency>多样性和统一性</A><BR> <P>万事万物都离不开多样性和统一性这样一条基本准则。 也就是说，所有的事物都可以融合成一个整体，同时，又保持自己 独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜 色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持 一致。 </P> <BR><BR><BR><BR><BR><BR> </BODY> </HTML> 11
<A name = Consistency>多样性和统一性</A><BR> <P>万事万物都离不开多样性和统一性这样一条基本准则。也就是
说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同 的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及 其他设计元素应在站点的每个部分都保持一致。 </P>
至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输 协议绑定在一起。</P>
<A name = HTML>HTML简介</A><BR> <P>超文本标记语言是 Web用来创建和识别文档的标准语言。虽然
它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程度上的关联。 SGML是一种文档格式语言表示方法。</P>
18
字符级标记
<HTML> <HEAD> <TITLE>字符级标记示例</TITLE> </HEAD> <BODY> <P ALIGN="center"><B>字符级标记示例</B></P> <P>圆的面积=pi*r<SUP>2</SUP></P> <P>水的化学符号：H<SUB>2</SUB>O</P> <P><EM>这是一种很有趣的体验</EM></P> </BODY> </HTML>
链接到其他文档
<HTML> <HEAD> <TITLE>使用链接</TITLE> </HEAD> <BODY> <BR><BR> <P>本页的所有内容讲述链接到其它网站 <A HREF="http://www.cugb.edu.cn">地大 网</A> </BODY> </HTML>
12
补充：<A>目标显示方式属性--target
20
预排版标记：<PRE> 标记
如果希望文本以预定义的格式显示，可以使用PRE元素。此元素用于定义 文本的格式。文本在浏览器中显示时遵循在HTML源文档中定义的格式。
<HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <PRE> 汉普蒂·邓普蒂坐在墙上 汉普蒂·邓普蒂摔了一大跤 国王所有的马 和所有的人 也无法再把汉普蒂·邓普蒂拼起来 </PRE> </BODY> </HTML>
24
d
图中所示是部分颜色的RGB代码:
例：为页面设置背景色：
<body bgcolor=“#FFFF33”>
25
容器（区域控制）标记<SPAN>、<DIV>
<DIV>„</DIV>可以设定多行或跨段落或某一区域的内容样式； <SPAN>„</SPAN>一般只用在一行中设定几个字的情况。
<HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <DIV> 第1部分 <P>元素用于组织元素 <P>DIV通常用于块级元素 </DIV> <DIV align = right> 第2部分 <P>这是第二部分 <BR> <H2>您觉得有意思吗？</H2> </DIV> <P>第二部分向右对齐。 < SPAN STYLE ="font-size:25"> 公共格式</SPAN>应用于这一部分中的所有元素 </BODY> </HTML> 26
6
链接类型
•内部链接
1、到同一网站内 的其它网页的链 接 2、到同一文档内 的其他部分的链 接
----------------
------
------
-----------
------
------
•外部链接
------
到其他网站或服 务器上的页面的 链接。
Web站点1
Web站点2
7ຫໍສະໝຸດ Baidu
链接到其他文档
<HTML> <HEAD><TITLE>使用链接</TITLE></HEAD> <BODY> <A HREF = #Internet>互联网</A><BR><BR> <A HREF = #HTML>HTML简介</A><BR><BR> <A HREF = #Consistency> 多 样 化 和 统 一 性 </A><BR><BR> <A name = Internet>互联网</A><BR> <P>互联网是网络的网络。也就是说，计算机网络可以跨越国家甚
NAME 给链接目标点命名 <A NAME=name>text</A>
eg. <A HREF =" F:\Doc2.html">文档2</A> <A HREF=“ #internet”>互联网部分</A> <A HREF=“ F:\Doc2.html#internet”>文档2的互联网部分</A>
<A HREF=“ http://www.cugb.edu.cn”>地大网</A>
标记:人(事物) 属性:性别、头发、职业……
值:女性、长头发、工程师…… 男性、黄头发、培训师……
5
超链接：锚记A
语法为:
HREF 指定链接目标点的地址或名称 <A HREF = protocol://host.domain:port/path/filename> Hypertext </A>
用来指定目标窗口的打开方式。包含4个取值：
_blank：在新窗口中打开。
_parent：在上一级的浏览窗口中打开。
_self：在当前页面或框架中打开。 _top：在当前浏览窗口页面中打开。
<HTML> <head> </head> <BODY> <A HREF="x1.html" TARGET="_blank">文件x</A> </BODY> </HTML>
17
字符级标记
<B> . . . </B> <U> . . . </U> <S> . . . </S> 粗体文本 下划线效果 删除线效果
<SUP> . . . /SUP> 上标文本 <SUB> . . . /SUB> 下标文本 <EM> . . </EM> 强调文本 <CODE>. . .</CO 用于显示编程代码 DE> <CITE>. . . 用于引用 </CITE>
<HTML> <HEAD> <TITLE>使用链接</TITLE> </HEAD> <BODY> <BR><BR> <P>本页的所有内容都讲述关于如何创建到 文档的链接 <A HREF =Doc2.html> 单击此处查看文 档2</A> </BODY> </HTML>
8
链接到同一文档的各个部分
单击
– 手工直接编写：记事本、EditPlus等，存成.htm 或.html文件 – 可视化编辑器：Dreamweaver、 Frontpage等 – 由Web 服务器实时动态地生成：IIS、Tomcat等
HTML 文档的结构
基本结构：
HTML 部分 文档头部分
包含：网页标题、网页说明、 CSS样式、脚本代码等
14
HTML基本标记
标题标记 字符级标记 段落级标记 字体标记
容器标记 列表标记 水平线标记 IMG 图像标记
目标
•使用基本标记 •在 HTML 文档中插入图像
16
题目标记
可显示六种大小的标题，即<H1>到<H6>，<H1>为最大，<H6>为最小 <HTML> <HEAD> <TITLE>HTML 简介</TITLE> </HEAD> <BODY> <H1>HTML 简介</H1> <H2>HTML 简介</H2> <H3>HTML 简介</H3> <H4>HTML 简介</H4> <H5>HTML 简介</H5> <H6>HTML 简介</H6> </BODY> </HTML>
第二章 HTML基本标记
回顾：
掌握HTML文档的结构 掌握HTML标记构成及其使用方法 熟练使用超链接
2
● HyperText Markup Language—超文本标记语言 – 制作Web页面的基本编程语言
– 一系列标记的集合 – 用HTML编写的超文本文档称为HTML文档。
● HTML文档的编写方法
22
补充：关于颜色
颜色值是一个关键字或一个RGB格式的数 字。 aqua，black， blue，fuchsia, gray， green， lime，maroon，navy，olive， purple，red，silver，teal，white，yellow
23
在 HTML 中对于颜色的定义可以用6位 十六进制数。 电脑屏幕的色彩是由rgb（红、绿、蓝） 三种色光所合成的，通过调整这三个基 色就可以调配出其它的颜色。 – 每2位数代表一种颜色的浓度，三种 颜色的顺序为红、绿、蓝，00代表 颜色浓度最小，FF代表颜色浓度最 大。 #000000代表纯黑、#FFFFFF代表纯 白、
21
使用FONT标记
<FONT>标记用于控制文本在网页上的显示。可以指定size（大小）、 color（颜色）face（字体）style（样式）等属性。
<HTML> <HEAD> <TITLE>欢迎使用HTML</TITLE> </HEAD> <BODY> <H3><FONT SIZE = 3 COLOR = HOTPINK FACE = "隶书">我的第一个 HTML文档</FONT></H3> <P>这<FONT COLOR = BLUE SIZE = 6>将会</FONT>是一种很有趣的 体验 </BODY> </HTML>
19
块引用标记：<BLOCKQUOTE> 标记
可以使用BLOCKQUOTE元素显示文档中的引用文本。BLOCKQUOTE用于较 长的引用且显示为缩进式段落。
<HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <P>blockquote 元素用于以文本块的形式 设置内容格式。 <BLOCKQUOTE> 汉普蒂·邓普蒂坐在墙上 汉普蒂·邓普蒂摔了一大跤 国王所有的马 和所有的人 也无法再把汉普蒂 · 邓普蒂拼 起来 </BLOCKQUOTE> <P>请注意，上述内容显示为一个文本块。 </BODY> </HTML>
<BR><BR><BR><BR><BR><BR> </BODY> </HTML> 9
链接到另一文档中某个特定位置
单击 <HTML> <HEAD> <TITLE>主文档</TITLE> </HEAD> <BODY> <A HREF= 副文档 .html#Internet> 互联网 </A> <BR> <BR> <A HREF= 副 文 档 .html#HTML>HTML 简 介 </A> <BR> <BR> <A HREF= 副 文 档 .html#Consistency> 多 样性和统一性</A> </BODY> </HTML>
文档体部分
浏览器页面的显示内容
<HTML> <HEAD> <TITLE>欢迎进入 HTML 世界</TITLE> </HEAD> <BODY> <P>这会是一种很有趣的体验</P> </BODY> </HTML>
运行结果
4
HTML 标记的格式组成：
<ELEMENT ATTRIBUTE = value></ELEMENT>
10
链接到另一文档中某个特定位置
单击
<HTML> <HEAD> <TITLE>副文档</TITLE> </HEAD> <BODY> <A name = Internet>互联网</A><BR> <P>互联网是网络的网络。也就是说，计算机网络可以跨越 国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以 通过TCP/IP传输协议绑定在一起。</P> <A name = HTML>HTML简介</A><BR> <P> 超文本标记语言是 Web 用来创建和识别文档的标准语言。 虽然它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程 度上的关联。SGML是一种文档格式语言表示方法。</P> <A name = Consistency>多样性和统一性</A><BR> <P>万事万物都离不开多样性和统一性这样一条基本准则。 也就是说，所有的事物都可以融合成一个整体，同时，又保持自己 独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜 色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持 一致。 </P> <BR><BR><BR><BR><BR><BR> </BODY> </HTML> 11
<A name = Consistency>多样性和统一性</A><BR> <P>万事万物都离不开多样性和统一性这样一条基本准则。也就是
说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同 的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及 其他设计元素应在站点的每个部分都保持一致。 </P>
至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输 协议绑定在一起。</P>
<A name = HTML>HTML简介</A><BR> <P>超文本标记语言是 Web用来创建和识别文档的标准语言。虽然
它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程度上的关联。 SGML是一种文档格式语言表示方法。</P>
18
字符级标记
<HTML> <HEAD> <TITLE>字符级标记示例</TITLE> </HEAD> <BODY> <P ALIGN="center"><B>字符级标记示例</B></P> <P>圆的面积=pi*r<SUP>2</SUP></P> <P>水的化学符号：H<SUB>2</SUB>O</P> <P><EM>这是一种很有趣的体验</EM></P> </BODY> </HTML>
链接到其他文档
<HTML> <HEAD> <TITLE>使用链接</TITLE> </HEAD> <BODY> <BR><BR> <P>本页的所有内容讲述链接到其它网站 <A HREF="http://www.cugb.edu.cn">地大 网</A> </BODY> </HTML>
12
补充：<A>目标显示方式属性--target
20
预排版标记：<PRE> 标记
如果希望文本以预定义的格式显示，可以使用PRE元素。此元素用于定义 文本的格式。文本在浏览器中显示时遵循在HTML源文档中定义的格式。
<HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <PRE> 汉普蒂·邓普蒂坐在墙上 汉普蒂·邓普蒂摔了一大跤 国王所有的马 和所有的人 也无法再把汉普蒂·邓普蒂拼起来 </PRE> </BODY> </HTML>
24
d
图中所示是部分颜色的RGB代码:
例：为页面设置背景色：
<body bgcolor=“#FFFF33”>
25
容器（区域控制）标记<SPAN>、<DIV>
<DIV>„</DIV>可以设定多行或跨段落或某一区域的内容样式； <SPAN>„</SPAN>一般只用在一行中设定几个字的情况。
<HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <DIV> 第1部分 <P>元素用于组织元素 <P>DIV通常用于块级元素 </DIV> <DIV align = right> 第2部分 <P>这是第二部分 <BR> <H2>您觉得有意思吗？</H2> </DIV> <P>第二部分向右对齐。 < SPAN STYLE ="font-size:25"> 公共格式</SPAN>应用于这一部分中的所有元素 </BODY> </HTML> 26
6
链接类型
•内部链接
1、到同一网站内 的其它网页的链 接 2、到同一文档内 的其他部分的链 接
----------------
------
------
-----------
------
------
•外部链接
------
到其他网站或服 务器上的页面的 链接。
Web站点1
Web站点2
7ຫໍສະໝຸດ Baidu
链接到其他文档
<HTML> <HEAD><TITLE>使用链接</TITLE></HEAD> <BODY> <A HREF = #Internet>互联网</A><BR><BR> <A HREF = #HTML>HTML简介</A><BR><BR> <A HREF = #Consistency> 多 样 化 和 统 一 性 </A><BR><BR> <A name = Internet>互联网</A><BR> <P>互联网是网络的网络。也就是说，计算机网络可以跨越国家甚
NAME 给链接目标点命名 <A NAME=name>text</A>
eg. <A HREF =" F:\Doc2.html">文档2</A> <A HREF=“ #internet”>互联网部分</A> <A HREF=“ F:\Doc2.html#internet”>文档2的互联网部分</A>
<A HREF=“ http://www.cugb.edu.cn”>地大网</A>