2.1 文字与段落排版
2.1.1 段落标签
段落标签的语法为：<p align="left|center|right">文字</p>
align：设置段落文字在页面上的对齐方式
2.1.2 标题标签
<h1>定义最大的标题，<h6>定义最小的标题
2.1.3 换行标签
<p> <br/>
2.1.4 水平线标签
HTML文档中的<hr/>标签时，会在此处换行，加入水平线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1 align="center">一级标题</h1>
<h2 align="left">二级标题</h2>
<h3 align="right">三级标题</h3>
<h4>四级标题</h4>
<hr color="#000000"/>
xx,xxx<br />
xxx,xx<br />
</body>
</html>
2.1.5 预格式化标签
<pre>文本块</pre> 保留换行和空格符
<pre>
qs ahuc
shbxcj
bshba
</pre>
2.1.6 缩排标签
<blockquote>块引用
<p>juefhfuefoiewhfourehueaigitorjirrif</p>
<blockquote>为持续深化“法治进校园”活动，加强青少年的法治教育，培育学生的法律素养，营造校园法治学习氛围，请各位参与答题，并将截图明天之前上传到接龙。 </blockquote>
<p>juefhfuefoiewhfourehueaigitorjirrif</p>2.1.7 案例
2.2 超链接
<a href="login.html">账号注册</a>
<a href="register.html">账号登录</a>2.1.1 超链接简介
2.1.1.1 超链接的定义
2.1.1.2 超链接的分类
2.1.1.3 路径
2.2.2 超链接的应用
2.2.2.1 锚点标签<a>···</a >
2.2.2.2 指向其他页面的超链接
<h1>杜甫诗词全集</h1>
<a href="#one">1.绝句</a>
<a href="#two">2.登高</a>
<hr color="chocolate"/>
<a name="one">绝句</a>
<p>两个黄鹂鸣翠柳</p>
<a name="two">登高</a>
<p>风急天高猿啸哀</p>2.2.2.3 指向书签的超链接
2.2.2.4 指向下载文件的超链接
<a herf="文件名.zip">下载</a>
2.2.2.5 指向电子邮件的超链接
<a herf="mailto:[email protected]">联系我</a>
2.3 图像
2.3.1 网页图像的格式及使用要点
2.3.1.1 常见的网页图像格式
2.3.1.2 使用网页图像的要点
2.3.2 图像标签
<img src="img/微信图片_20240918083130.png"/>
2.3.2.1 图像的替换文本说明
2.3.2.2 设置图像大小
<img src="img/微信图片_20240918083130.png" width="40px"height="300px"/>
2.3.2.3 图像的边框
<img src="img/微信图片_20240918083130.png"border="50px"/>
2.3.3 图像超链接
<a href="http://www.baidu.com"><img src="img/微信图片_20240918083130.png"/></a>
2.3.4 设置网页背景图像
<body background="img/baidu.jpg">
2.3.5 图文混排
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图文混排</title>
</head>
<body>
<h1 align="ceenter">商品描述</h1>
<hr />
<img src="img/milkpoeder.jpg"width="250"height="350"align="right"alt="商品描述"/>
产地<br />
包装<br />
供货渠道<br />
商品名称<br />
</body>
</html>
2.4 列表
2.4.1 无序列表
<ul>
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
2.4.1.1 在<ul>后指定符号的样式
2.4.1.2 在<li>后指定符号的样式
<ul type="circle">
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ul><ul type="circle">
<li>无序列表第一项</li>
<li type="square">无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
2.4.2 有序列表
<ol>
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ol> <ol type="I">
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ol>
2.4.3 定义列表
<dt>办学宗旨：</dt>
<dd>以人为本 培养高素质高技能人才</dd>
<dt>校训：</dt>
<dd>爱国明志 敢为人先</dd>
<dt>校园精神：</dt>
<dd>诚朴坚卓 达谦智勇</dd>
2.4.4 嵌套列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>嵌套列表</title>
</head>
<body>
<h2>全球汇支付向导</h2>
<ul type="circle">
<li>全球汇支付方式</li>
<ul type="disc">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<hr />
<li>支付步骤</li>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<hr />
<li>联系我们</li>
<dl>
<dt>E-mail:</dt>
<dd>[email protected]</dd>
</dl>
</ul>
</body>
</html>