5.1 在页面上对齐文本
5.1.1 使用属性
<!-- 属性(attribute)用于提供于HTML标签相关的附加信息 -->
<p style="text-align: left;">Text goes here.</p>
5.1.2 对齐块级别元素
<body>
<!-- Style属性的text-align部分被称为样式规则,这意味着它设置HTML元素的特定样式特征 -->
<div style = "text-align:center"></div>
<p style = "text-align:left">left</p>
<p style = "text-align:center">center</p>
<p style = "text-align:right">right</p>
</body>
5.2 三种HTML列表
<?xml version = "1.0" encoding = "UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en">
<head>
<title>How to Be Proper</title>
</head>
<body>
<h1>How to Be Proper</h1>
<h2>Basic Etiquette for a Gentlemen Greeting a Lady Aquaintance</h2>
<!-- 无序列表-每个列表项目前有一个项目符号或者其他符号的缩进列表 -->
<ul>
<li>Wait for her acknowledging bow before tipping your hat.</li>
<li>Use the hand farthest from her to raise the hat.</li>
<li>Walk</li>
<li>When walking</li>
</ul>
<h2>Recourse</h2>
<!-- 有序列表-在每个列表项目前有数字或者字母的缩进列表 -->
<ol>
<li>A simple</li>
<li>A cold</li>
<li>As a last</li>
</ol>
<h2>Proper Address of Royalty</h2>
<!-- 定义列表-项目及其含义的列表 -->
<dl>
<dt>Your Majesty</dt>
<dd>To the king or queen.</dd>
<dt>Your Royal</dt>
<dd>To the monarch‘s</dd>
<dt>Your Highness</dt>
<dd>To nephews</dd>
</dl>
</body>
</html>
5.3 将列表放在列表中
<?xml version = "1.0" encoding = "UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en">
<head>
<title>Vertebrates</title>
</head>
<body>
<h1>Vertebrates</h1>
<ul>
<li>
<span style = "font-weight: bold">Fish</span>
<ul>
<li>Barr</li>
<li>Kissing</li>
<li>Mummichog</li>
</ul>
</li>
<li>
<span style = "font-weight: bold">Amphibians</span>
<ul>
<li>
Anura
<ul>
<li>Goliath Frog</li>
<li>Poison Dart Frog</li>
<li>Purple Frog</li>
</ul>
</li>
<li>
Caudata
<ul>
<li>Hellbender</li>
<li>Mudpuppy</li>
</ul>
</li>
</ul>
</li>
<li>
<span style = "font-weight: bold">Retiles</span>
<ul>
<li>Nile Crocodile</li>
<li>KingCobar</li>
<li>Common Snapping Turtle</li>
</ul>
</li>
</ul>
</body>
</html>
5.4 总结
<!-- <div></div> 要格式化的区域
<dl></dl> 定义列表
<dt></dt> 定义项,作为定义列表的一部分
<dd></dd> 与定义项对应的定义,也是定义列表的一部分
<ol></ol> 有序(带编号的)列表
<ul></ul> 无序(带项目符号的)列表
<li></li> 用于<ol>或<ul>的列表项
style = "text-align: alignment" 将文本居中对齐,左对齐或右对齐
style = "list-style-type: numtype" 用于标记列表的编号类型
sytle = "list-style-type: bullettype" 用于标记列表项的项目符号类型
style = "list-style-type: type" 标记列表项的编号或项目符号
-->
时间： 2025-01-31 07:38:48