网页制作(1)ppt课件
此外,字体标记符还包括 <b>…</b>粗体 标记符、 <i>…</i>斜体标记符等。
18
4.列表标记 [示例4]项目列表标记,HTML语句如下,保存后的浏览效果如图。 <html> <head> <title>花语</title> </head> <body bgcolor="#FFFF99"> <hl align="center"><font face="宋体">花语</font></hl> <p>各种花所代表的含义如下:</p> <ul> <li>玫瑰:纯洁的爱</li> <li>剑兰:用心坚固</li> <li>百合:百年好和</li> <li type="circle">满天星:爱怜</li> <li type="circle">菊花:吉祥</li> <li type="circle">康及馨:亲情思念</li>
例 如 单 标 记 <HR> 表 示 在 文 档 当 前 位 置 画 一 条 水 平 线 ( horizontal line),一般是从窗口中当前行的最左端一直画到最右端。
4
(一)建立HTML文件 操作步骤如下:
(1)单击“开始”按钮,选择“程序” →“附件” →“记事本”,并打开“记事本”窗口。
其中属性align用来设置文本块、一段文字或标题在网 页上的对齐方式:left、center和right。缺省时默认为 left。
14
两边缩进标记 <blockquote>....</blockquote> 滚动 <marquee>电子商务交易模式</marquee>
15
段落标记
水平线标记<hr>(horizontal line)
7
说明: <hi>标记符用于定义段落标题的大小级数。最大的标题级数是 <h1>,最 小的标题级数是<h6>。使用<hi>标记符的align属性可控制文字的对齐方式, 属性值可以是left(左对齐),center(居中对齐),或者right(右对齐)。
2. <P>段落标记符
[示例2]段落标记符,输入HTML语句如下,保存后的浏览效果
20
列表
1 无序列表标记<ul><li>...</ul>
无序列表中每一个表项的前面是项目符号(如●、■等符 号)。建立无序列表使用<UL>标记和<li>表项标记。格式 为:
<ul type="符号类型"> <li type="符号类型1"> 第一个列表项 <li type="符号类型2"> 第二个列表项 …
标记可以不在一行上。 2 强制换行和不换行标记<br>、<nobr>...</nobr>
要用HTML的标记来强制换行、分段。<br>放在一行的 末尾,可以使后面的文字、图片、表格等显示于下一行,而又 不会在行与行之间留下空行,即强制文本换行。强制换行标记 的格式为:
文字 <br> 不换行标记可令文字不能因太长使浏览器无法显示而换行, 它对住址、数学公式、一行数字等尤其有用。其格式为: <nobr> 文字 </nobr>
8
说明: <P>标记符用于划分段落,控制文本的位置。 <P> 是成对标记符,用于定义内容从新的一行开始,并与上段 之间的一个空行,其align属性定义新开始的一行内容在页 面中的对齐位置,属性值可以是left(左对齐),center(居中 对齐),或者right(右对齐)。
9
3. <br>换行标记 [示例3]换行标记,将示例2中相应段落中的段落标记 <P>替换为换行标记<br>,HTML语句如下,保存后的浏览 效果如图所示。注意段落标记<P>和换行标记<br>预览效 果的不同。 <html> <head> <title>我的花店</title> </head> <body bgcolor="#FFFF99">
说明:<br>标记符用于定义从新的一行显示,它不产生一个空行,但连续多个 <br>标记可以产生多个空行的效果。 <br>标记符是非成对标记符。
11
标记及其属性
<br>无格式,插哪儿哪儿产生一个换行 注意:不能插入标识中!只能插入标识间
12
段落标记
1 注释标记<!--...--> 注释标记的格式为: <!-- 注释内容 --> 注释并不局限于一行,长度不受限制。结束标记与开始
在页面中插入一条水平标尺线,可以使不同功能的文 字分隔开,看起来整齐、明了。当浏览器解释到HTML文档 中的<hr>标记时,会在此处换行,并加入一条水平线段。 线段的样式由标记的参数决定。
水平线标记的格式为: <hr align="left|center|right" size="横线粗细" width="横线长度" color="横线色彩" > size设定线条粗细,以像素为单位,默认为2。 width设定线段长度,可以是绝对值(以像素为单位) 或相对值(相对于当前窗口的百分比)。 color设定线条色彩,默认为黑色。可以采用色彩的名 称。色彩可以用相应英文单词或以“#”引导的一个十六进 制数代码来表示。
13
段落标记
定位标记<div>…</div> 与<p>...</p>类似,大区域段
设定文字、图像、表格的摆放位置。当在许多段落中 设置对齐方式时,常使用<div>…</div>标记。定位标记 的格式为:
<div align="left|center|right"> 文本、图像或表 格 </div>
如图所示。 <html> <head> <title>我的花店</title> </head> <body bgcolor="#FFFF99"> <h1 align="center">我的花店!</h1> <p align="center">欢迎您访问我的花店</p> <p align=“center”>花可以传情,可表达思念之情,亲情,感恩的心情,衷 心的祝福!</p> <p align="center">祝愿进入我的花店的朋友天天有好心情!</p> </body> </html>
<ol type="符号类型"> <li type="符号类型1"> 表项1 <li type="符号类型2"> 表项2 …
6
(2)保存HTML文件。 (3)在浏览器中预览所编辑的HTML文件效果。
1.<Hi>标题标记 [示例1]标题标记,在记事本中输入以下HTML语句,保存后浏 览效果,如图所示。 <html> <head> <title>我的花店</title> </head> <body> <h1>欢迎你访问我的花店!</h1> <h2>欢迎你访问我的花店!</h2> <h3>欢迎你访问我的花店!</h3> <h4>欢迎你访问我的花店!</h4> <h5>欢迎你访问我的花店!</h5> <h6>欢迎你访问我的花店!</h6> <h7>欢迎你访问我的花店!</h7> </body> </html>
16
(二) <font>标记的设置 字体标记,设置示例2中相应段落的字体,HTML语句如下,保存后
浏览效果,如图所示。 <head> <title>我的花店</title> </head> <body bgcolor="#FFFF99"> <h1 align="center"><b><font color="#FF0000" face=" 隶 书 "
HTML 文 件 均 以 <html> 标 记 符 开 始 , 以 </html> 标 记 符 结 束 。 <head> 和 </head>标记符之间的内容用于描述页面的头部信息,例如页面标题、关 键词等信息。在<body>和</body>标记符之间的内容即为页面的主体内容。 HTML文件的整体结构如图所示。
2
常见的标记有文本、图片、超链接、动画、音乐、表格、表单等