HTML--文字与段落--特殊符号--有序列表&无序列表

最新推荐文章于 2025-02-25 17:15:26 发布

原创最新推荐文章于 2025-02-25 17:15:26 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

这篇博客介绍了HTML中处理文字的标签，如标题、段落、换行、特殊符号等，并详细讲解了无序列表、有序列表和定义列表的使用方法，包括各种属性值和实际效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文字和段落标签

标题标签：

<h1>  </h1>
<h2>  </h2>
<h3>  </h3>
<h4>  </h4>
<h5>  </h5>
<h6>  </h6>

段落标签：

<p>  </p>

段落对齐属性
值	描述
left	左对齐内容
right	右对齐内容
center	居中对齐内容
justify	对行进行伸展,对行进行伸展

属性表现形式为：

<p align="left">今天也要加油鸭！</p>

换行标签：

<br/>

水平线：

<hr/>

水平线属性
值	描述
width	设置水平线宽度,可以像素或百分比
color	设置水平线颜色
align	设置水平线居中对齐
noshade	设置水平线无阴影

表现方式：

	<hr width="60%" color="eeeeee" align="left" />

文字斜体：

<i> </i>
<em> </em>

加粗：

<b> </b>
<strong> </strong>

上标：

<sup>

下标：

<sub>

插入内容：

<ins>

删除：

<del>

特殊符号

属性	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
®	®	已注册
©	©	版权
™	™	商标
	Space	不断行的空白

表现方式为

&lt;你好&gt;

无序列表

作为最经常用的无序列表，下面是他的使用方式：

<ul type="disc">
		<li>内容</li>
	<li>内容</li>
	<li>内容</li>
	<li>内容</li>
	</ul>

下面是type属性值：

属性值	描述
disc	圆点
square	正方形
circle	空心圆

有序列表

当需要给列表进行排列时使用，语法为：

<ol type="1">
	<li>内容</li>
	<li>内容</li>
	<li>内容</li>
	<li>内容</li>
</ol>

下面是type属性值：

属性值	描述
1	数字1,2......
a	小写字母a，b......
A	大写字母A，B......
i	小写罗马数字i
I	大写罗马数字I

定义列表

内容自动往后伸展，语法为：

<dl>
	<dt>定义列表项</dt>
	<dd>列表项描述</dd>
	<dd>列表项描述</dd>
	<dt>定义列表项</dt>
	<dd>列表项描述</dd>
	<dd>列表项描述</dd>
	......
	</dl>

*：<dl><dt><dd>组合使用。

针对无序列表&有序列表&定义列表的练习代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
		<body bgcolor="rosybrown">
		<h1>可惜我不是他</h1>
		<p>Xun易碩成</p>
	<ul type="disc">
		<li>可惜我不是他</li>
	<li>当他闭上眼吻你的脸颊</li>
	<li>这画面让我的心在一瞬间崩塌</li>
	<li>看你笑着拥抱他 我的泪水在挣扎</li>
	<li>屋檐下的风铃也笑我太傻</li>
	</ul>
	
	<ul type="square">
	<li>想变成他拿他送你的玫瑰花</li>
	<li>想变成他与你牵手走进月光下</li>
	<li>明知道你爱的是他 还在等你的回答</li>
	<li>我也能陪你走过春秋冬夏</li>
	<li>可惜我不是他 不能和你说话</li>
	<li>漫天的雪花是我对你的牵挂</li>
	<li>你和他还好吗 别再为烦恼而吵架</li>
	<li>只要你幸福我才能够放心得下</li>
	</ul>
	
	<ul type="circle">
	<li>我不是他 不能陪你玩耍</li>
	<li>恋人的烟花对我就像是风沙</li>
	<li>你和他走天涯 就请你将我忘了吧</li>
	<li>只要你幸福快乐就算我变不了他</li>
	<li>我不是他</li>
</ul>
<!--无序列表-->

<hr width="30%" align="left"/>

<ol type="1">
	<li>原来这童话属于你和他</li>
	<li>我在悲伤中融化退出你的年华</li>
	<li>未来沧桑的变化 经历风吹和雨打</li>
	<li>也许有了他你才不会害怕</li>
</ol>
<ol type="a">
	<li>想变成他在你耳边说悄悄话</li>
	<li>想变成他带你逛遍世界的繁华</li>
	<li>明知道你牵的是他 还在继续的装傻</li>
	<li>用思念伴你走过春秋冬夏</li>
</ol>
<ol type="A">
	<li>可惜我不是他 不能和你说话</li>
	<li>满天的雪花是我对你的牵挂</li>
	<li>你和他还好吗 别再为烦恼而吵架</li>
	<li>只有你幸福我才能够放心得下</li>
</ol>
<ol type="i">
	<li>我不是他 不能陪你玩耍</li>
	<li>恋人的烟花对我就像是风沙</li>
	<li>你和他走天涯 就请你将我忘了吧</li>
	<li>只要你幸福快乐就算我变不了他</li>
</ol>
<!--有序列表-->

<hr width="30%" align="left"/>
<dl>
	<dt>音乐人： Xun</dt>
	<dd>首张收录专辑： Xun单曲精选集</dd>
	<dt>发行时间： 2015 年</dt>
	<dd>流派： 流行</dd>
	</dl>
	<!--定义列表-->
	</body>
</html>

下面是实际效果：