网页制作02-html,css,javascript初认识のhtml的文字与段落标记

news2025/3/26 6:34:32

用一首李白的将进酒,对文字与段落标记进行一个简单的介绍演示：

一、标题字

1、标题字标记h

2、标题字对其属性align

二、文本基本标记

1、字体属性face

2、字号属性size

3、颜色属性 Color

三、文本格式化标记

1、粗体标记 b ，strong

2、斜体标记 i，em,cite

3、上标标记sup

4、下标标记sub

5、大字号标记big

6、小字号标记small

7、下划线标记u

四、段落标记

1、段落标记 P

2、换行标记br

3、不换行标记nobr

五、水平线

1、插入水平线hr

2、水平线宽度width

3、水平线高度size

4、水平线去掉阴影noshade

5、水平线颜色color

6、水平线排列align

六、其他标记

一般情况下特殊符号的代码组成为：&+字符名称+；

下表为部分符号：

HTML 代码	符号	描述	代码	符号	描述
&lt；	<	小于号	&sect	§	分节符
&gt；	>	大于号	&deg；	°	度
&amp；	&	与	+	+
&quot；	“	引号	-	-
&reg；	®	已注册	*	*
&trade；	™	商标	&divide	÷
©	©	版权标记	&ensp；		半个空白位
¥	¥	人民币	&emsp；		一个空白位
&euro；	€	欧元	&nbsp；		不断行的空白位

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>将进酒</title>
</head>
<!--ā á ǎ à ō ó ǒ ò ī í ǐ ì ū ú ǔ ù ǖ ǘ ǚ ǜ ń ň-->
<body>
<h1 align="center">将进酒</h1><!--设置标题的级别, H1到h6-->
<h2 align="right">---李白</h2><!--align属性设置对齐方式-->
	
<p><font face="Aa剑豪体">君不见黄河之水天上来，奔流到海不复回。</font></p><!--face属性设置字体属性-->

<p><font face="华文隶书">君不见高堂明镜悲白发，朝如青丝暮成雪。</font></p>

<p><font size="+3">人生得意须尽欢，莫使金樽空对月。</font></p><!--从-4~正4的整数,是相对于3号放大和缩小的字号-->

<p><font size="4">天生我材必有用，千金散尽还复来。</font></p><!--size字体绝对大小属性，由1-7的整数组成-->

<p><font color="#7E00EF">烹羊宰牛且为乐，会须一饮三百杯。</font></p><!--color属性设置字体颜色-->

<p><b>岑夫子</b>，丹丘生，<strong>将进酒，杯莫停。</strong></p><!--粗体标记strong,b-->

<p>与君<i>歌一曲</i>，<em>请君</em>为我<cite>倾耳听。</cite></p><!--斜体标记i,em,cite-->

<ruby>
<p>钟鼓馔玉不足贵，<rt>zhōng gǔ zhuàn yù bù zǔ guì </rt>
	但<rt>dàn</rt>愿<rt>yuàn</rt>长<sup>cháng</sup>醉<sub>zuì</sub>不复醒。</p>
</ruby><!--sub( SuperScript),sub(subscript)-->
	
<p><big>古</big>
	<big><big>来</big></big>
	<big><big><big>圣</big></big></big>
	<big><big><big><big>贤</big></big></big></big>
	<big><big><big><big><big>皆</big></big></big></big></big>
	<big><big><big><big><big><big>寂</big></big></big></big></big></big>
	<big><big><big><big><big><big><big>寞</big></big></big></big></big></big></big>,
	<small>惟</small>
	<small><small>有</small></small>
	<small><small><small>饮</small></small></small>
	<small><small><small><small>者</small></small></small></small>
	<small><small><small><small><small>留</small></small></small></small></small>
	<small><small><small><small><small><small>其</small></small></small></small></small></small>
	<small><small><small><small><small><small><small>名</small></small></small></small></small></small></small>
</p>

<p><u>	陈王昔时宴平乐，斗酒十千恣欢谑。</u></p><!--下划线标记u,p用来起始一个段落-->

主人何为言少钱，<br>径须沽取对君酌。<br><!--br在不另起一段的情况下将当前文本强制换行,一个br为1行-->
<br>
五花马，千金裘，呼儿将出换美酒，<br>
	<br><br>
与尔同销万古愁。<br><br>
<hr><!--插入水平线hr-->默认水平线
<hr noshade>无阴影水平线
<hr color="#000000" align="left">黑色左对齐水平线
<hr width="500" size="3"><br><center>长度为500像素，高度3像素水平线</center>
<hr>
<nobr>01ā á ǎ à ō ó ǒ ò ī í ǐ ì ū ú ǔ ù ǖ ǘ ǚ ǜ ń ň ā á ǎ à ō ó ǒ ò ī í ǐ ì ū ú ǔ ù ǖ ǘ ǚ ǜ ń ň </nobr><!--nobr不换行标记--><br>02ā á ǎ à ō ó ǒ ò ī í ǐ ì ū ú ǔ ù ǖ ǘ ǚ ǜ ń ň
<hr>
特殊符号：<br>
	&#33;!<br>
	&#35;#<br>
	&#36;$<br>
	&#37;%<br>
	&#39;'<br>
	&#40;(<br>
	&#41;)<br>
	&#42;*<br>
	&#43;+<br>
	&#44;,<br>
	&#45;-<br>
	&#46;.<br>
	&#58;:<br>
	&#59;;<br>
	&#61;=<br>
	&#63;?<br>
	&#64;@<br>
	
</body>
</html>

代码演示结果：