第2章HTML语言
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
技术 第2章HTML语言
<u>：下划线 <s>：删除线 <strong>：加强显示
<big>：放大
<small>：缩小 3、<BODY>标记的text属性： 【格式】：<BODY text=“颜色”> 【说明】：
可以设定整个网页文字的颜色
技术 第2章HTML语言
换行和分段：
上述定义的锚点只是实现同一文件内的链接
技术
第2章HTML语言
3、图像链接： 【格式】：<A href=“被链接的文件名”><IMG src=“图 像文件名”></A>
2-9-1.aspx
技术
第2章HTML语言
2.6、表格
创建表格：
1、基本格式： 【格式】：<table>
<ISINDEX>:用来指定可检索的索引文档
技术 第2章HTML语言
2、文件主体：位于头部之后,以<BODY>为开始标记, </BODY>为结束标记
Background:设置网页的背景图案
Bgcolor:设置网页的背景色 Text:设置文本颜色,默认为黑色 Link:设置未访问过的超文本链接的颜色,默认蓝色 Vlink:设置已访问的超文本链接的颜色,默认紫色 3、注释： HTML使用 “<!--”和 “-->”表示注释部分。两标记之 间可包含多行HTML代码
技术 第2章HTML语言
(n=1,2,3,4,5,6)
【格式】：<Hn align=“right”>文本或图像 </Hn> 3、左对齐： 使用<P>标记的align属性的left值: 【格式】：<P align=“left”>文本或图像</p> 使用<Hn>标记和align属性的left值: 【格式】：<Hn align=“left”>文本或图像 (n=1,2,3,4,5,6)
Aling=“left/right/center”：定义对齐方式
技术 第2章HTML语言
cellpadding：调节表单元线和数据间的距离 cellspacing：调节表元与边框间的空白 rules=“参数”：设定表格内边框样式 Frame=“参数”：设定表格外边框样式 Align=“left/right/all”：设定表格与文本的相 互位置
2-7.aspx
1:阿拉伯数字。A：大写字母。a：小写字母。I：大 写罗马字。i：小写罗马字
技术 第2章HTML语言
【注意】： Type缺省自动设定为阿拉伯数字 <OL type=“”>的作用范围为整个标记范围 <LI type=“”>的作用范围是当前项 在实际应用中多使用在<OL>标记内设定的方法 2、设定起始序号： 【格式】：<OL start=x> <LI value=“x”> 【注意】： X为任意整数
<TR>标记 bgcolor：设定表格一行的背景色 Align=“left/right/center”：定义表格一行的表 数据项的水平对齐方式
主要由头部(HEAD)和主体(BODY)两部分组成
第2章HTML语言
头部用于文件命名及定义文件的相关说明 主体定义浏览器上显示页面的内容 1、文件头部： <TITLE></TITLE>:用于定义网页的标题 <BASE>:指定了HTML文档的基地址,用来定义其后所 有链接的起点. <META>:说明一些与文档相关的信息。如文档的作 者、关键内容、所用语言等 <LINK></LINK>:用来连接外部文件
</Hn>
(n=1,2,3,4,5,6)
4、<DIV>标记：为许多段落设置对齐方式
技术 第2章HTML语言
居中: 【格式】：<DIV align=“center”>文本或图像</DIV> 右对齐:
【格式】：<DIV align=“right”>文本或图像</DIV>
左对齐: 【格式】：<DIV align=“left”>文本或图像</DIV>
技术 第2章HTML语言
<OL start=x>的作用域为当前<OL>标记，<LI value=“x”>的作用域为从当前项开始直到当前的 </OL>标记为止
技术
第2章HTML语言
2.5、超文本链接
1、创建网页间的链接： 【格式】：<A href=“URL”>文本或图像</A> 标记<A>可以使用以下属性: href:指定一个URL,作为有效的链接资源的地址
技术 第2章HTML语言
3、图像尺寸设定： 【格式】：<IMG src=“文件名” width=x height=y> 【说明】： x，y可以取像素数，也可以取百分数
图像和文本布局：
【说明】：
1、图像与文本混排： 【格式】：<IMG src=“文件名” align=“位置参数”>
<标记名>文本或超文本</标记>
<标记名 属性名1=“属性值1” 属性名2=“属性值2 …>文本或超文本</标记名> <标记名>
4、标记的属性：用来修饰标记的,放在开始标记内
对齐属性: align=left align=center align=right 左对齐(默认) 居中 右对齐
2-4.aspx
位置参数可以取top、middle、bottom 分别表示文本与图像顶部、中央、底部对齐
技术 第2章HTML语言
2、文本环绕图像： 【格式】：<IMG src=“文件名” align=“位置”>文本 【说明】： 位置参数可以取left、right 分别表示图像居左，文本在图像的右侧、图像 居右，文本在图像的左侧
技术 第2章HTML语言
2.2、网页中的文本使用
标题：
【格式】：<Hn>标题</Hn> 【说明】：
标记中的n可取1～６的数值
取１时文字最大，６最小，默认为<H6>
2-1.aspx
文字的大小的颜色：
1、<FONT>标记： Size属性:
技术 第2章HTML语言
技术
第2章HTML语言
2.4、网页中的列表使用
无序列表：
【格式】：<UL type=“类型”>
<LI>项目
<LI>项目 … </UL> 【说明】： 标记<LI>是一个单标记，无结束标记
技术
2-5.aspx
第2章HTML语言
【特征】： 项目部分和上下段文本之间各有一行空白 项目向右缩进且左对齐 各项前带加重记号 无序列表可以嵌套 type=“circle”:空心圆 type=“disc”:圆点(默认) type=“square”:正方形
all cols groups none rows 技术 rules 显示所有内边框 只显示列之间的边框 只显示行列间的边框 只显示内边框 只显示行之间的边框 第2章HTML语言
Hale Waihona Puke above below border box hsides lhs rhs void vsides
frame 显示上方外框 显示下方外框 显示上下左右外框 显示上下左右外框 显示上下外框 显示左外框 显示右外框 不显示外框 显示左右外框
技术 第2章HTML语言
2-8.aspx
【步骤】： 对目标段进行定位命名 <A name=“value”>字符串</A> 在网页中建立链接:
<A href=“#锚点”>热点文本</A>
使用<A href=“#锚点1”>返回</A> 【注意】： 锚名前应加记号“#”
2-9.aspx
有序列表：
1、创建有序列表： 【格式】：<OL>
<LI>项目1 … </OL> 技术
2-6.aspx
第2章HTML语言
【特征】： 列表部分和上、下段文本之间有一行空白 列表项目向右缩进且左对齐 各列表项前带顺序号 有序列表可以嵌套 2、有序列表序号的种类： 【格式】：<OL type=“1,A,a,i,I”> 或 <LI type=“1,A,a,i,I”>
【格式】：<font size=n>…</font>
【说明】：
标记中的n可取1～7的数值 取7时文字最大，1最小 Color属性: face属性:格式同上，表示字体字号 2、其他字体标记： <b>：加粗
2-2.aspx
【格式】：<font color=“颜色”>…</font>
<i>：斜体
name:指定当前文档内的一个字符串作为链接时可 以使用的位置名称
rel:记载由href属性设定的锚点与原文章的关系 rev:指定反向关系 type:指定特定内容的类型
技术 第2章HTML语言
hreflang:指定链接资源的语言 【注意】： 根据资源存放的位置,链接可分为全局和局部 局部链接有下面4种情况: 链接同一目录内的文件 链接下一级目录内的文件 链接上一级目录内的文件 链接同级目录内的文件 2、链接指定的文章段落：
技术
第2章HTML语言
2.3、网页中的图像使用
网页中加入图像：
1、图像文件的格式：PNG、GIF、JPEG 2、加入图像： 【格式】：<IMG src=“文件名” alt=“” longdesc=“”> 【说明】： src可以是绝对路径或相对路径
alt用于不能显示图像或能显示但时间过长时， 先显示图像的文本说明
第2章 HTML语言
技术
第2章HTML语言
2.1、HTML概述
简介：
1、标记的功能： 2、标记的构成：
标记由符号<¨>、</¨>和括在其中的命令字符串
组成
标记有双标记和单标记两种 双标记包括开始标记和结束标记,必须成对出现 3、标记的表示方法：
技术 第2章HTML语言
1、强制改行： 【格式】：<BR> 【说明】：
位于文章一行的末尾,强制文本换行
2、段落： 【格式】：<P> 【说明】：
位置在文章前段的末尾,在前段和后段加一行空白
可以省略结束标记
技术 第2章HTML语言
3、标尺：
【格式】：<HR width=x>或<HR width=x%>
【说明】： 用于分段的标记,在两段之间加一条标尺线
技术
第2章HTML语言
范围属性:
width=像素值或百分比
height=像素值或百分比 色彩属性:
对象宽度
对象高度
color=#RRGGBB
bgcolor=#RRGGBB
前景色
背景色
注意:颜色值可以是英文颜色名或十六进制颜色值
HTML文件结构：
技术
标记不区分大小写
<tr>
<td>表项1</td>…<td>表项n</td> <tr> … </table>
技术 第2章HTML语言
<table>标记
Border=“n”：定义表格边框的粗细。单位为像素
Bordercolor=“颜色值”：定义表格边框的颜色 Summary=“简要说明”：对表格的格式和内容简要 说明 bgcolor：设定表格的背景色 Background：设定表格的背景图像 width=“n/n%”：设定表格的宽度 Height=“n”：设定表格的高度
2-3.aspx
文本布局：
1、居中： 使用<P>标记的align属性的center值: 【格式】：<P align=“center”>文本或图像</p> 【说明】： 使文本或图像居中显示
技术 第2章HTML语言
使用<center>标记: 【格式】：<center>文本或图像</center> 使用<Hn>标记和align属性的certer值: 【格式】：<Hn align=“center”>文本或图像 </Hn> 2、右对齐： 使用<P>标记的align属性的right值: 【格式】：<P align=“right”>文本或图像</p> 使用<Hn>标记和align属性的right值:
x为像素数,表示标尺线的长度.用%指定时,表示线 长占屏幕的百分数
使用size属性设定标尺线的粗细程度 <HR width=x size=y> y为像素数 使用noshade属性设定标尺线为黑色
标尺线的位置由align属性指定
技术 第2章HTML语言
<HR align=“right”> <HR align=“left”> <HR align=“center”> 标尺线的颜色由color属性指定
<u>：下划线 <s>：删除线 <strong>：加强显示
<big>：放大
<small>：缩小 3、<BODY>标记的text属性： 【格式】：<BODY text=“颜色”> 【说明】：
可以设定整个网页文字的颜色
技术 第2章HTML语言
换行和分段：
上述定义的锚点只是实现同一文件内的链接
技术
第2章HTML语言
3、图像链接： 【格式】：<A href=“被链接的文件名”><IMG src=“图 像文件名”></A>
2-9-1.aspx
技术
第2章HTML语言
2.6、表格
创建表格：
1、基本格式： 【格式】：<table>
<ISINDEX>:用来指定可检索的索引文档
技术 第2章HTML语言
2、文件主体：位于头部之后,以<BODY>为开始标记, </BODY>为结束标记
Background:设置网页的背景图案
Bgcolor:设置网页的背景色 Text:设置文本颜色,默认为黑色 Link:设置未访问过的超文本链接的颜色,默认蓝色 Vlink:设置已访问的超文本链接的颜色,默认紫色 3、注释： HTML使用 “<!--”和 “-->”表示注释部分。两标记之 间可包含多行HTML代码
技术 第2章HTML语言
(n=1,2,3,4,5,6)
【格式】：<Hn align=“right”>文本或图像 </Hn> 3、左对齐： 使用<P>标记的align属性的left值: 【格式】：<P align=“left”>文本或图像</p> 使用<Hn>标记和align属性的left值: 【格式】：<Hn align=“left”>文本或图像 (n=1,2,3,4,5,6)
Aling=“left/right/center”：定义对齐方式
技术 第2章HTML语言
cellpadding：调节表单元线和数据间的距离 cellspacing：调节表元与边框间的空白 rules=“参数”：设定表格内边框样式 Frame=“参数”：设定表格外边框样式 Align=“left/right/all”：设定表格与文本的相 互位置
2-7.aspx
1:阿拉伯数字。A：大写字母。a：小写字母。I：大 写罗马字。i：小写罗马字
技术 第2章HTML语言
【注意】： Type缺省自动设定为阿拉伯数字 <OL type=“”>的作用范围为整个标记范围 <LI type=“”>的作用范围是当前项 在实际应用中多使用在<OL>标记内设定的方法 2、设定起始序号： 【格式】：<OL start=x> <LI value=“x”> 【注意】： X为任意整数
<TR>标记 bgcolor：设定表格一行的背景色 Align=“left/right/center”：定义表格一行的表 数据项的水平对齐方式
主要由头部(HEAD)和主体(BODY)两部分组成
第2章HTML语言
头部用于文件命名及定义文件的相关说明 主体定义浏览器上显示页面的内容 1、文件头部： <TITLE></TITLE>:用于定义网页的标题 <BASE>:指定了HTML文档的基地址,用来定义其后所 有链接的起点. <META>:说明一些与文档相关的信息。如文档的作 者、关键内容、所用语言等 <LINK></LINK>:用来连接外部文件
</Hn>
(n=1,2,3,4,5,6)
4、<DIV>标记：为许多段落设置对齐方式
技术 第2章HTML语言
居中: 【格式】：<DIV align=“center”>文本或图像</DIV> 右对齐:
【格式】：<DIV align=“right”>文本或图像</DIV>
左对齐: 【格式】：<DIV align=“left”>文本或图像</DIV>
技术 第2章HTML语言
<OL start=x>的作用域为当前<OL>标记，<LI value=“x”>的作用域为从当前项开始直到当前的 </OL>标记为止
技术
第2章HTML语言
2.5、超文本链接
1、创建网页间的链接： 【格式】：<A href=“URL”>文本或图像</A> 标记<A>可以使用以下属性: href:指定一个URL,作为有效的链接资源的地址
技术 第2章HTML语言
3、图像尺寸设定： 【格式】：<IMG src=“文件名” width=x height=y> 【说明】： x，y可以取像素数，也可以取百分数
图像和文本布局：
【说明】：
1、图像与文本混排： 【格式】：<IMG src=“文件名” align=“位置参数”>
<标记名>文本或超文本</标记>
<标记名 属性名1=“属性值1” 属性名2=“属性值2 …>文本或超文本</标记名> <标记名>
4、标记的属性：用来修饰标记的,放在开始标记内
对齐属性: align=left align=center align=right 左对齐(默认) 居中 右对齐
2-4.aspx
位置参数可以取top、middle、bottom 分别表示文本与图像顶部、中央、底部对齐
技术 第2章HTML语言
2、文本环绕图像： 【格式】：<IMG src=“文件名” align=“位置”>文本 【说明】： 位置参数可以取left、right 分别表示图像居左，文本在图像的右侧、图像 居右，文本在图像的左侧
技术 第2章HTML语言
2.2、网页中的文本使用
标题：
【格式】：<Hn>标题</Hn> 【说明】：
标记中的n可取1～６的数值
取１时文字最大，６最小，默认为<H6>
2-1.aspx
文字的大小的颜色：
1、<FONT>标记： Size属性:
技术 第2章HTML语言
技术
第2章HTML语言
2.4、网页中的列表使用
无序列表：
【格式】：<UL type=“类型”>
<LI>项目
<LI>项目 … </UL> 【说明】： 标记<LI>是一个单标记，无结束标记
技术
2-5.aspx
第2章HTML语言
【特征】： 项目部分和上下段文本之间各有一行空白 项目向右缩进且左对齐 各项前带加重记号 无序列表可以嵌套 type=“circle”:空心圆 type=“disc”:圆点(默认) type=“square”:正方形
all cols groups none rows 技术 rules 显示所有内边框 只显示列之间的边框 只显示行列间的边框 只显示内边框 只显示行之间的边框 第2章HTML语言
Hale Waihona Puke above below border box hsides lhs rhs void vsides
frame 显示上方外框 显示下方外框 显示上下左右外框 显示上下左右外框 显示上下外框 显示左外框 显示右外框 不显示外框 显示左右外框
技术 第2章HTML语言
2-8.aspx
【步骤】： 对目标段进行定位命名 <A name=“value”>字符串</A> 在网页中建立链接:
<A href=“#锚点”>热点文本</A>
使用<A href=“#锚点1”>返回</A> 【注意】： 锚名前应加记号“#”
2-9.aspx
有序列表：
1、创建有序列表： 【格式】：<OL>
<LI>项目1 … </OL> 技术
2-6.aspx
第2章HTML语言
【特征】： 列表部分和上、下段文本之间有一行空白 列表项目向右缩进且左对齐 各列表项前带顺序号 有序列表可以嵌套 2、有序列表序号的种类： 【格式】：<OL type=“1,A,a,i,I”> 或 <LI type=“1,A,a,i,I”>
【格式】：<font size=n>…</font>
【说明】：
标记中的n可取1～7的数值 取7时文字最大，1最小 Color属性: face属性:格式同上，表示字体字号 2、其他字体标记： <b>：加粗
2-2.aspx
【格式】：<font color=“颜色”>…</font>
<i>：斜体
name:指定当前文档内的一个字符串作为链接时可 以使用的位置名称
rel:记载由href属性设定的锚点与原文章的关系 rev:指定反向关系 type:指定特定内容的类型
技术 第2章HTML语言
hreflang:指定链接资源的语言 【注意】： 根据资源存放的位置,链接可分为全局和局部 局部链接有下面4种情况: 链接同一目录内的文件 链接下一级目录内的文件 链接上一级目录内的文件 链接同级目录内的文件 2、链接指定的文章段落：
技术
第2章HTML语言
2.3、网页中的图像使用
网页中加入图像：
1、图像文件的格式：PNG、GIF、JPEG 2、加入图像： 【格式】：<IMG src=“文件名” alt=“” longdesc=“”> 【说明】： src可以是绝对路径或相对路径
alt用于不能显示图像或能显示但时间过长时， 先显示图像的文本说明
第2章 HTML语言
技术
第2章HTML语言
2.1、HTML概述
简介：
1、标记的功能： 2、标记的构成：
标记由符号<¨>、</¨>和括在其中的命令字符串
组成
标记有双标记和单标记两种 双标记包括开始标记和结束标记,必须成对出现 3、标记的表示方法：
技术 第2章HTML语言
1、强制改行： 【格式】：<BR> 【说明】：
位于文章一行的末尾,强制文本换行
2、段落： 【格式】：<P> 【说明】：
位置在文章前段的末尾,在前段和后段加一行空白
可以省略结束标记
技术 第2章HTML语言
3、标尺：
【格式】：<HR width=x>或<HR width=x%>
【说明】： 用于分段的标记,在两段之间加一条标尺线
技术
第2章HTML语言
范围属性:
width=像素值或百分比
height=像素值或百分比 色彩属性:
对象宽度
对象高度
color=#RRGGBB
bgcolor=#RRGGBB
前景色
背景色
注意:颜色值可以是英文颜色名或十六进制颜色值
HTML文件结构：
技术
标记不区分大小写
<tr>
<td>表项1</td>…<td>表项n</td> <tr> … </table>
技术 第2章HTML语言
<table>标记
Border=“n”：定义表格边框的粗细。单位为像素
Bordercolor=“颜色值”：定义表格边框的颜色 Summary=“简要说明”：对表格的格式和内容简要 说明 bgcolor：设定表格的背景色 Background：设定表格的背景图像 width=“n/n%”：设定表格的宽度 Height=“n”：设定表格的高度
2-3.aspx
文本布局：
1、居中： 使用<P>标记的align属性的center值: 【格式】：<P align=“center”>文本或图像</p> 【说明】： 使文本或图像居中显示
技术 第2章HTML语言
使用<center>标记: 【格式】：<center>文本或图像</center> 使用<Hn>标记和align属性的certer值: 【格式】：<Hn align=“center”>文本或图像 </Hn> 2、右对齐： 使用<P>标记的align属性的right值: 【格式】：<P align=“right”>文本或图像</p> 使用<Hn>标记和align属性的right值:
x为像素数,表示标尺线的长度.用%指定时,表示线 长占屏幕的百分数
使用size属性设定标尺线的粗细程度 <HR width=x size=y> y为像素数 使用noshade属性设定标尺线为黑色
标尺线的位置由align属性指定
技术 第2章HTML语言
<HR align=“right”> <HR align=“left”> <HR align=“center”> 标尺线的颜色由color属性指定