web-3. 用于页面排版的格式标记

3. 用于页面排版的格式标记

本节课用于介绍文字的排版、段落的排版、列表的建立、注释的使用。

3.1 文字的排版

  1. 标题标记

由开始标记<hn>和结束标记</hn>共同组成,要显示的标题内容插入在开始标记与结束标记之间。标题标记一般包含在<body>标记中。

格式如下:<hn>......</hn>,其中n的取值范围是16

HTML语言中的标题标记从高到低,分为6个等级:<h1><h2><h3><h4><h5><h6>。每级标题的字体大小依次递减。

例如:

<html>

<head>

<title>标题的等级实例</title>

</head>

<h1>1</h1>

<h2>2</h2>

<h3>3</h3>

<h4>4</h4>

<h5>5</h5>

<h6>6</h6>

</body>

</html>

  1. 字体标识

1<font>用来设置字体的样式,格式如下:

<font face=”字体” size=字号 color=颜色值 align=对齐方式>......</font>

2face设置字体

3size设置大小,可以使1-7,也可以在前面加上(+)或者(-)号,表示相对大小

例如:

<html>

<head>

<title>标题的等级实例</title>

</head>

<body>

<font size=7>字号设置实例</font><br>

<font size=6>字号设置实例</font><br>

<font size=5>字号设置实例</font><br>

<font size=4>字号设置实例</font><br>

<font size=3>字号设置实例</font><br>

<font size=2>字号设置实例</font><br>

<font size=1>字号设置实例</font><br>

字号设置实例<br>

<font size=+1>字号设置实例</font><br>

</body>

</html>

注:HTML默认的字体大小是3

(4)color用来设置颜色,有两种表示方法:一种是利用RGB颜色值,以#字开头,如:#001122,每两位表示一个颜色的深浅;另一种是直接显示颜色

例子:

<html>

<head>

<title>color</title>

</head>

<body>

<font color=#000000>黑色</font><br>

<font color=gray>灰色</font><br>

<font color=#00ff00>绿色</font><br>

<font color=silver>银白色</font><br>

</body>

</html>

  1. 文字修饰

<b>粗体</b>

<strong>粗体</strong>

<i>斜体</i>

<em>斜体</em>

<cite>斜体</cite>

<big>字号加大一级</big>

<small>字号减小一级</small>

<b>X</b><sup>2</sup>     上角号

<b>Y</b><sub>2</sub>      下角号

例如:

<html>

<head>

<title>decorate</title>

</head>

<body>

<b>粗体</b>

<strong>粗体</strong>

<i>斜体</i>

<em>斜体</em>

<cite>斜体</cite>

<big>字号加大一级</big>

<small>字号减小一级</small>

<b>X</b><sup>2</sup>

<b>Y</b><sub>2</sub>

</body>

</html>

  1. 特殊符号

这里的特殊符号特别多,我们给出下面的地址,我们先记住   表示的是空格,切记有分号。

http://www.fhdq.net/ts/177.html

3.2 段落的排版

  1. 段落标记和对齐方式

<p align=对齐方式>......</p> 其中结束标记</p>可以省略

align=lift      表示左对齐

align=right    表示右对齐

align=center   表示中间对齐

  1. 换行标记

<br>

  1. 居中标记

<center>......</center>

  1. 水平分隔线

<hr size=厚度值 noshade width=宽度值 align=对齐方式>

水平分隔线标识的size属性用来设置分割线的厚度(以像素为单位);noshade属性用来去掉3D效果;width属性用来设置分割线的宽度(以像素为单位),默认分隔显示横跨整个浏览器窗口;align属性用来设置分割线的对齐方式,默认值是center

  1. 预编排标识

预编排标识<pre>可以预先定义好一段文字,浏览器将完全按照在源代码中的效果显示。预编排标记的一个常见应用就是用来显示源代码。

例子:

<html>

<head>

<title>pre</title>

</head>

<body>

<pre>

main

</pre>

</body>

</html>

3.3 列表的建立

  1. 无序列表

无序列表<ul>用项目符号来表示一个没有特定顺序的相关条目的集合。

无序列表使用一对标记<ul></ul>,并且每个表项要使用<li>标记进行定义,</ul>可以省略。

例如:

<html>

<head>

<title>pre</title>

</head>

<body>

what will we eat today?

mian food:

<ul>

<li>rice</li>

<li>hambuger</li>

</ul>

</body>

</html>

  1. 有序列表

有序列表<ol>在列表项目前添加的是编号不是项目符号,在排序的时候会用到它。、

样式:

<ol type=样式 start=起始值>

<li>......</li>

......

</ol>

type的可选范围有:1(数字序号)、a(小写字母)、A(大写字母)、i(小写罗马字母)、I(大写罗马字母),默认的值是1

例如:

<html>

<head>

<title>pre</title>

</head>

<body>

今天的功课有:

<ol>

<li>数学</li>

<li>语文</li>

</ol>

明天的功课有:

<ol type=a start=3>

<li>数学</li>

<li>语文</li>

</ol>

</body>

</html>

  1. 定义列表

定义列表又称为字典列表,是表现术语表、名词列表等的理想方式。

格式:

<dl>

<dt>术语项</dt>

<dd>前面术语的解释</dd>

<dt>术语项</dt>

<dd>前面术语的解释</dd>

......

</dl>

3.4 注释的使用

格式:<!__*******************__>

<!____>组成。

猜你喜欢

转载自www.cnblogs.com/free-1122/p/9857778.html