第二章代码总结（运行结果在文末）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>段落p标签示例</title>
</head>
<body background="img/baidu.jpg"><!--设置网页背景图像-->
<a name="p"></a>
<!--段落标签-->
<p align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>
<p>第四段</p>
<!--标题标签-->
<h1>一级标题</h1>
<!--一个一级标题下可以有多个二级标题,以此类推,标题一样有对齐方式-->
<h2 align="center">二级标题</h2>
<h3 align="left">三级标题</h3>
<h4 align="right">四级标题</h4>
<!--以此类推，一共有六级,所有标题默认有加粗效果-->
<!--换行标签-->
<p>
江西应用工程职业学院<br/>
校训：爱国明志，敢为人先
</p>
<!--水平线标签-->
<hr/ color="#cc00ff">
<hr/ size="10px" color="#00ccff">
<!--预格式化标签-->
<pre>
棉花
行走
</pre>
<!--缩排标签（缩排标签）-->
<p>
春秋时期，吴越两国相邻，经常打仗，
有次吴王领兵攻打越国，被越王勾践的大将灵姑浮砍中了右脚，
最后伤重而亡。吴王死后，他的儿子夫差继位。三年以后，
夫差带兵前去攻打越国，以报杀父之仇。
春秋时期，吴越两国相邻，
经常打仗，有次吴王领兵攻打越国，
被越王勾践的大将灵姑浮砍中了右脚，
最后伤重而亡。吴王死后，他的儿子夫差继位。
三年以后，夫差带兵前去攻打越国，以报杀父之仇。
春秋时期，吴越两国相邻，
经常打仗，有次吴王领兵攻打越国，
被越王勾践的大将灵姑浮砍中了右脚，
最后伤重而亡。吴王死后，他的儿子夫差继位。
三年以后，夫差带兵前去攻打越国，以报杀父之仇。
</p>
<blockquote>
春秋时期，吴越两国相邻，
经常打仗，有次吴王领兵攻打越国，
被越王勾践的大将灵姑浮砍中了右脚，
最后伤重而亡。吴王死后，他的儿子夫差继位。
三年以后，夫差带兵前去攻打越国，以报杀父之仇。
被越王勾践的大将灵姑浮砍中了右脚，
最后伤重而亡。吴王死后，他的儿子夫差继位。
三年以后，夫差带兵前去攻打越国，以报杀父之仇。
春秋时期，吴越两国相邻，
经常打仗，有次吴王领兵攻打越国，
被越王勾践的大将灵姑浮砍中了右脚，
最后伤重而亡。吴王死后，他的儿子夫差继位。
三年以后，夫差带兵前去攻打越国，以报杀父之仇。春秋时期，吴越两国相邻，
经常打仗，有次吴王领兵攻打越国，
被越王勾践的大将灵姑浮砍中了右脚，
最后伤重而亡。吴王死后，他的儿子夫差继位。
三年以后，夫差带兵前去攻打越国，以报杀父之仇。
</blockquote>
<!--超链接-->
<!--锚点标签-->
<a href="register.html">注册</a>
<a href="login.html">登录</a>
<!--指向书签的超链接-->
<a href="#p">段落</a>
<a href="文件名.zip">下载</a>
<!--指向电子邮件的超链接-->
<a href="mailto:120...@qq.com">联系我</a>
<!--图像的替换文本说明-->
<!--设置图像大小,图像标签,图像的边框-->
<img src="img/莎莎.jpg"/ title="孙颖莎"width="350px"height="200px" border="100px"/>
<!--无序列表-->
<ul>
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
<!--在<ul>和<li>后指定符号的形式-->
<ul type="circle">
<li>无序列表第一项</li>
<li type="square">无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
<!--有序列表-->
<ol>
<li>有序列表第一项</li>
<li>有序列表第二项</li>
<li>有序列表第三项</li>
</ol>
<!--定义列表-->
<dl>
<dt>院校名称：</dt>
<dd>江西应用工程职业学院</dd>
<dt>办学宗旨：</dt>
<dd>以人为本 培养高素质高技能人才</dd>
<dt>校训：</dt>
<dd>爱国明志 敢为人先</dd>
<dt>校园精神：</dt>
<dd>诚朴坚卓 达谦智勇</dd>
</dl>
</body>
</html>
2.1 文字与段落排版
2.1.1 段落标签
由于浏览器忽略用户在在HTML编辑器中的回车符，为了使文字段落排列整齐、清晰，常用段落标签<p>…<p>实现这一功能。
段落标签语法为：<p align="left/center/right">文字</p>
属性：align：设置段落文字在网页上的对齐方式，包括left（左对齐）、center（居中）、right（右对齐），值得注意的是默认的对齐方式为left
2.1.2 标题标签
标题使用<h1>至<h6>标签进行定义。<h1>定义最大便签，<h2>次之，以此类推，且标题默认加粗，HTML会自动在标题前后添加一个额外换行。标题文字标签的格式为：
<h(1~6) align="left/center/right">标题文字<h(1~6)>
属性解释与上2.1.1一致，默认对齐方式也依旧为left
2.1.3 换行标签
<br>标签将打断HTML文档中正常段落的行间距与换行。<br/>放在任意一行中都会使该行换行。如果<br/>放在一行的末尾，可以使后面的文字、图像、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。换行标签如下：
文字<br/>
注：与段落标签使用后区别在于行间距不同，换行标签没行距
2.1.4 水平线标签
当浏览器解释道HTML文档中的<hr/>标签时，会在此处换行，并加入一条水平线段
水平线标签的格式为：
<hr align="left/center/right" size="横线粗细" width="横线长度" color="横线色彩" />
color: 用来更改线条颜色，默认为黑色（在使用过程中不建议直接使用英文单词，而建议写颜色的具体rgb编码）
size :设置水平线粗细，单位为像素，默认值为2（设置粗细的同时建议也设置颜色）
width:设定横线长度，可以为绝对值（以像素为单位）也可以是相对值（相对于当前窗口的百分比）
2.1.5 预格式化标签
被包围在预标签中不但换行有效果，tab,空格键都有效果，计算机源代码一般都会写在预格式化标签中，预格式化标签的语法为：
<pre>文本块</pre>
2.1.6 缩排标签
块引用标签，被所拍标签包围的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。语法为：
<blockquote>文本<blockquote/>
经常用来引用一些东西，例如名人名言
2.1.7案例
使用文字与段落的基本排版知识制作“全城汇商城简介页面”
代码及运行结果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全球汇商城简介</title>
</head>
<body>
<h1 align="center">100% 正品 十重保障</h1>
<hr color="deeppink"/>
<p> 全球汇成立于2008年，10年来，凭借独创的特卖模式，精选全球正品好货<br/>
唯品会时全球最大的特卖商<br>
</p><br>
全球汇承诺：
<blockquote>
全球直采：货源保障<br/>
入仓全检：质检保障<br/>
自营物流：物流保障<br/>
</blockquote>
</body>
</html>
2.2 超链接
2.2.1超链接简介
1.超链接的定义
所谓超链接就是从一个网页指向另一个目标的连接关系，这个目标可以说很多东西，可以说一个网页、图片、应用程序……
2.2.2超链接的应用
1.锚点标签
HTML用<a>标签建立一个链接，以<a>开始，以</a>结束
语法：
<a href="url" title="指向链接显示的文字"target="窗口名称">文本文字</a>
href 指定跳到那里去
2.指向其他页面的超链接
（1）链接到同一目录内的网页文件，语法：
<a href="目标文件名.html">热点文本</a>
其中“目标文件名”是链接所指向的文件
（2）链接到下一级目录的网页文件，语法：
<a href="子目录名/目标文件名.html">热点文本</a>
（3）链接到上一级目录的网页文件，语法：
<a href="…目标文件名.html">热点文本</a>
3.指向书签的超链接
书签就是用<a>标签在网页元素中做一个记号用name来打标签
然后用#号来告诉浏览器我们要跳转的是一个标签
格式：<a href="#记号名">热点文本</a>
2.3 图像
2.3.1 网页格式及使用要点
1.常用的网页图像格式
（1）GIF是Internet上应用最广泛的图像文件格式之一，它的特点是体积较小，最适合制作徽标、图标和按钮和其他颜色、风格比较单一的图片
（2）JPEG适用于摄影或连续色调图像
（3）PNG是一种新型的无专利权限的图像格式，它的显示速度很快
2.使用网页图像的要点
（1）一般在网页设计中国选图像不要超过8KB
（2）网页中的动画并不是越多越好，页面中应合理使用动画，太炫酷的动画会分散网站方可的注意力
（3）如果在文件中多次使用相同的图像时，最好使用相对路径查找该图像
2.3.2 图像标签
图像是以嵌入的方式添加到网页中的
格式：<img src="图像文件名" alt="替代文字" title="鼠标悬停提示文字" width="图像宽度"
height="图像高度" border="边框高度"align="环绕方式|对其方式"/>
属性：
scr：指定图像源，即它的路径
alt：如果图像无法显示，代替图像说明文字
width：指定图像的显示宽度，百分比指的是相对于当前浏览器窗口的百分比
height：指定图像的显示高度
border：指定图像的边框大小
align：指定图像的对齐方式
2.3.3 图像超链接
图像也可以作为超链接热点
语法：<a href="URL"<img src="图像文件名"/></a>
2.3.4 设置网页背景图像
格式：<body background="背景图像路径">
2.3.5 图文混排
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图文混排</title>
</head>
<body>
<h1 align="center">江西应用工程职业学院</h1>
<hr color="#ff0000"size="15px"/>
<img src="img/school.jpg" align="right"/>
<p>
江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。
办学宗旨：以人为本 培养高素质高技能人才<br/>
校训：爱国明志 敢为人先<br/>
校园精神：诚朴坚卓 达谦智勇<br/>
</p>
</body>
</html>
2.4 列表
2.4.1 无序列表
无序列表，就是列表中列表项的前导符号没有一定的次序，而是用黑点、源泉和方框等一些特殊符号标识。
<ul type="符号类型">
<li type="符号类型1">第一个列表项</li>
<li type="符号类型2">第二个列表项</li>
……
</ul>
2.4.2 有序列表
有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记
格式：
<ol type="符号类型">
<li type="符号类型1">第一个列表项</li>
<li type="符号类型2">第二个列表项</li>
……
</ol>
2.4.3 定义列表
定义列表又称为释义列表或字典列表，定义列表不是带有前导字符的列表项，而是一列实物以及其相关的解释。格式：
<dl>
<dl>标题<dl>
<dd>对标题解释的文字<dd>
</dl>
默认情况下，浏览器一般会在左边界面显示条目名称，并在下一行缩进显示其定义或解释。如果<dd>标签中内容很多，可以嵌套<p>标签使用
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>货到付款</li>
<li>微信支付</li>
<li>支付宝</li>
<li>网银在线</li>
</ul>
<hr/>
<li>网银在线支付步骤：</li>
<ol>
<li>选择您要使用的网上银行；</li>
<li>显示您的应付总价，单击"确认无误，付款"；</li>
<li>确认您在银行的预留信息，单击"确定"按钮；</li>
<li>输入您的网银账号，登陆密码，验证码；</li>
<li>支付成功，提示"已完成付款"</li>
</ol>
<hr/>
<li>联系我们</li>
<dl>
<dt>E-mail:</dt>
<dd>worldall@163.com</dd>
<dt>传真：</dt>
<dd>0750-3118888</dd>
<dt>地址：</dt>
<dd>广东省江门市</dd>
</dl>
</ul>
</body>
</html>
2.5 综合案例——无尘吸尘器说明书
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无线吸尘器说明书</title>
</head>
<body>
<h1>Dyson V8 absolute</h1>
<hr color="deeppink"/>
<ul style="font-size:25px">
<li type="square" style="color: deeppink">商品参数</li>
<p style="font-size: 25px">吸尘器类型：手持式吸尘器<br/>功率：500 W<br/>
储存类型：旋风尘盒<br/>吸尘类型：干/湿吸均可<br/>线长：充电式（无线）<br/>
适用环境：厨房，地板，地毯，酒店<br/>
售后服务：海外进口商品不支持国内联保<br/>
品牌名称：Dyson<br/>商品名称：Dyson V8 absolute 无线吸尘器<br/>
产地：马来西亚<br/>
<li type="square" style="color:deeppink">商品展示</li></ul>
<img src="img/1.jpg" title="无线手持吸尘器"/ align="middle">
<h2>产品信息</h2>
<p style="font-size:25px;">品牌：Dyson 戴森<br/>
吸力：高达115空气瓦特<br/>
使用时间：普通模式约40分钟<br/>
充电时间：约5小时<br/>
</p>
<h2>产品特点</h2>
<img src="img/tedian.JPG" width="750" height="450"/>
<h2>戴森科技，英国品质</h2>
<p style="font-size: 25px">戴森V8，新的动力设计<br/>
有助于吸除家中四处的过敏原<br />
运行空间高达40分钟，
清洁空间高达290平米</p>
<img src="img/left.JPG" align="left" width="350" height="290"/><br/><br/>
<h1>HEPA过滤系统<br/>
吸附微尘99.97%小至0.3微<br/>
米的微尘，减少过敏原回流空至<br/>
气中。<br/></h1>
<br/>
<br/>
<img src="img/canbin.jpg"/>
<blockquote style="font-size:25px">官网地址：<a href="https://shop.dyson.cn/">
https://shop.dyson.cn/</a></blockquote>
</h1>
</body>
</html>运行结果
本章代码总结的运行结果：
扫一扫
1283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
