文字与段落

文字与段落

一，标题文字的建立

1，标题文字的对齐方式--align

<html>
 	<head>
 	<title>标题文字的对齐效果</title>
 	</head>
 	<body>
		<h1>一级标题的默认对齐效果</h1>
		<h2 align=left>二级标题的左对齐效果</h2>
		<h3 align=center>三级标题的居中效果</h3>
		<h4 align=right>四级标题的右对齐效果</h4>
	</body>
 	</body>
 </html>

效果图：
### 二，文字格式标记 ### **1，设置文字字体--face**

设置文字的不同字体效果，设置的字体效果必须在浏览器中安装了相应的字体后才可以正确浏览，否则这些特殊字体会被浏览器中的普通字体所替代。

语法：<font face="字体1，字体2">应用字体的文字</font>

face的属性可以是一个或者多个。默认使用第一种字体进行显示；如果第一种字体不存在，则使用第二种字体进行替代，以此类推。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>背景图片</title>
</head>
<body>
<font face="黑体">黑体效果</font>
</body>
</html>

2，设置字号--size

HTML中，字号可以设为17，默认字号是3号字体，也可以是+17或者-1~7，是在默认字号的基础上+（-）；

语法：<font size="文字字号"></font>

3，设置文字颜色--color

语法：<font color="颜色代码"></font>

face在前，size居中，最后color；如下代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>背景图片</title>
</head>
<body>
<font face="黑体" color="#0099FF">淡蓝色的黑色效果</font><br>
<font size="2" color="#990000">暗红色的2号文字效果</font><br>
<font face="黑体" size="5" color="#FF6600">桔色的5号黑色效果</font><br>
</body>
</html>

效果图：

**4，粗体、斜体、下划线--strong、em、u**

斜体：

<em>斜体字</em>
<I>斜体字</I>
<cite>斜体字</cite>

带下划线的文字：

<u>带下划线的文字</u>

粗体的文字：

<strong>粗体的文字</strong>
<b>粗体的文字</b>

5，上标与下标--sup、sub

语法：

<sup>上标</sup>
<sub>下标</sub>

效果：上标正常下标

6，设置删除线--strike

语法：

<strike>文字1</strike>
<s>文字2</s>

效果：文字1文字2

7，等宽文字标记--code

一般用于英文效果，使用该标记可以实现网页中字体的等宽效果。

语法：

<code>文字</code>
<samp>wenzi</samp>

8，其他特殊符号

浏览器会将两个句子之间的所右半角空白当作一个来看待，如果要保留空格效果

空格 &_nbsp;(不要下划线,下同)
“（引号） &_quot;
& &_amp;
<（左尖括号） &_lt;
>（右尖括号） &_gt;
×（乘号） &_times;
§（小节符号） &_sect;
©（版权所有的符号） &_copy;
®（已注册的符号） &_reg;
™（商标符号） &_trade;
### 三，段落标记 ###

1，段落标记--p

语法：<p>段落文字</p>

2，取消文字换行标记--nobr

如果某一行的文字宽度过长，浏览器会自动对这行文字进行换行处理。如果不希望被换行，可以用nobr来实现。

语法：<nobr>不换行显示的文字</nobr>

3，换行标记--br

段落标记的换行是隔行的， 而使用换行标记能使两行的文字更加紧凑。一个
标记代表一个换行，连续多个标记可以多次换行。

语法：<br>

4，保留原始排版方式标记--pre

保留文本格式的挨劈半效果，如空格，制表符等等。在标记中间的文字会保留文档中的空白，按照原始的文本格式进行显示。

语法：<pre>文字</pre>

5，居中对齐标记--center

将段落居中。

语法：<center>文字</center>

代码：

<center>
<p>春雪</p>
新年都未有芳华，二月初惊见草芽。<br>
白雪却嫌春色晚，故穿庭树作飞花。<br>
</center>

效果：

春雪

新年都未有芳华，二月初惊见草芽。
白雪却嫌春色晚，故穿庭树作飞花。

6，向右缩进标记--blockquote

每使用一次，段落就缩进一次，可以嵌套使用。

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>段落的缩进效果</title>
</head>
<body>
没有缩进
<blockquote>一个缩进</blockquote>
<blockquote><blockquote>两个缩进</blockquote></blockquote>
<blockquote><blockquote><blockquote>三个缩进</blockquote></blockquote></blockquote>
</body>
</html>

效果图：

### 四，水平线标记 ### **1，添加水平线--hr** 
输入一个<hr>标记，就添加了一条默认样式的水平线

效果：

2，设置水平线宽度与高度属性--width,size

在默认的情况下，在网页中插入的水平线是100%的宽度，1像素的高度。在实际创建网页时，可以对水平线的宽度和高度进行设置。

语法：<hr width=水平线的宽度 size=水平线的高度>

水平线的宽度值(width)可以是确定的像素值，也可以是窗口的百分比。而水平线的高度值（size）只能是像素值。如果创建水平线时只有一个参数，那么另一个参数则会取默认值。

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置水平线的大小</title>
</head>
<body>
<hr width=50% size=5>
<hr width=100% size=1>
<hr width=70% size=20>
</body>
</html>

效果图：

3，设置水平线的颜色--color

语法：<hr color="颜色代码">

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置水平线的颜色</title>
</head>
<body>
<hr width="50%" size=10 color="#00FF66">   <!--注意顺序-->
</body>
</html>

效果图：

4,设置水平线的对其方式--align

水平线在默认情况下是居中对齐的，如果希望水平线左对齐或者右对齐，就需要使用align参数。对齐方式有三种，包括left,right和center。center与默认效果相同。

语法：<hr align=对齐方式>

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置水平线的对齐方式</title>
</head>
<body>
<hr width="50%" size=10 color="#00FF66" align=right>     <!--注意顺序-->
</body>
</html>

效果图：

**5，去掉水平线阴影--noshade**

在默认的情况下，水平线是空心的带阴影的立体效果，通过设置shade参数可以将水平线的阴影去掉。

语法：<hr noshade>

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>去掉水平线阴影</title>
</head>
<body>
<hr width="50%" size=2>
<hr width="50%" size=2 noshade>
<hr width="50%" size=10>
<hr width="50%" size=10 noshade="noshade">
</body>
</html>

效果图：

### 五，其他标记 ###

1，文字标注标记--ruby

在网页中可以通过添加文字的标注来说明网页中的某段文字。在默认情况下，标注的文字很小，但是在HTML中可以像设置其他文字一样调整标注文字的各种属性，包括大小，颜色等。

语法：

<ruby>
被说明的文字
	<rt>
	文字的标注
	</rt>
</ruby>

代码：

<ruby>
天下第一山
	<rt>
	泰山
	</rt>
</ruby>

效果：

天下第一山

泰山

2，声明变量标记--var

在使用网页讲解某些知识时，为了统一地突出变量，常常将其设置为斜体。在HTML中专门提供了一种标记，设置变量的效果。在我看来，与斜体很像（em）。

语法：<var>变量</var>

3，忽视HTML标签标记--plaintext、xmp

两个标记中的任何一个加入到HTML中，都会是HTML标记失去作用。

语法：

<plaintext>

<xmp>

posted @ 2018-11-07 16:26  #小柒#  阅读(373)  评论(0)    收藏  举报