2.1 文字与段落排版
2.1.1 段落标签
<body>
<p align="left"></p>
<p align="center"></p>
<p align="right"></p>
</body>属性align ：left（左对齐） center（居中） right（右对齐）默认：左对齐
2.1.2 标题标签
<h1>一级标题</h1>
<h2 align="center">2级标题</h2>
<h3>三级标题></h3>
<h4 align="left">四级标题</h4>同样可以加属性align：left（左对齐） center（居中） right（右对齐）
2.1.3 换行标签
<p>
江西 <br/>
爱国明治 敢为人先
</p><br/>:标签换行标签
2.1.4 水平线标签
<hr color="#ff0000"/>
<hr color="#ff0000" size="100px"/>属性size：设置粗细 默认2
属性color：设置颜色 默认100% 黑色
属性width：设置长短
2.1.5 预格式化标签
<pre>
爱 国 明 治 敢 为 人 先
</pre><pre>...<pre>:在pre中间所有换行和空格都会保留
2.1.6 缩排标签
<blockquote>文本</blockquote>：左边和右边都会有空格
2.1.7 案例
2.2 超链接
herf="http://www.baidu.com">百度一下</a>
2.2.1.1 指向书签的超链接
用#指向跳入网址
2.2..1.2 指向下载文件的超链接
2.2.1.3 指向电子邮件的超链接
mailto：指向电子邮件
2.3 图像
2.3.1 网页图像的格式及使用要点
图片尽量控制在8kb以下
动画不能太多主体是文字正文
在同一文件中多次使用相同的图像，最好是使用相当路径查找该路径
2.3.1.1 常见的网页图像格式
2.3.1.2 使用网页图像的要点
<img src="img/f6df682b7d81a2301b201f4bb592e24.jpg" title="周杰伦"/>
title：当我们鼠标移动到图片就会显示名字
<img src="img/f6df682b7d81a2301b201f4bb592e24.jpg" width="200px" height="200px"/>200px是200个像素
width：宽
height：高
<img src="img/f6df682b7d81a2301b201f4bb592e24.jpg" border="150px"/>border：加边框
<img src="img/f6df682b7d81a2301b201f4bb592e24.jpg" border="150px" width="200px" height="200px"/>属性可以全部加在一起没有顺序要求
2.3.3 图像超链接
<a herf="http://www.baidu.com"><img src="img/5b1ed666a9dbef4c9358771d76afd3b.jpg"></a>
2.3.4 设置网页背景图像
<body background="img/5b1ed666a9dbef4c9358771d76afd3b.jpg"
background：设置网页背景
2.3.5 图文混排
<body>
<h1 align="center"> 江西应用工程职业学院</h1>
<hr color="#ff0000" size="10px"/>
<img src="img/school.jpg" align="right"/>
<p>
江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。
办学宗旨：以人为本 培养高素质高技能人才<br />
校训：爱国明志 敢为人先<br />
校园精神：诚朴坚卓 达谦智勇<br />
</p>
</body>
</html>
2.4 列表
2.4.1 无序列表
特点：列表项目作为一个整体，与上下段文本间各有一行空白
2.4.1.1 在<ul>后指定符号的样式
<ul type=" disc" > 符号为实心圆点●
<ul type="cirecle" > 符号为空心圆点○
<ul type="square"> 符号为方块
<ul img sre = " graph , gif" >符号为指定文件
2.4.1.2 在<li>后指定符号的样式
<li type=" disc" > 符号为实心圆点
<li type="circle" > 符号为空心圆点O
<li type=" square" > 符号为方块
<li img sre = " graph , gif" > 符号为指定文件
2.4.2 有序列表
<ol type="符号类型">
<li type="符号类型">表项1
<li 唐渝鹏="符号类型">表项2
</ol>type：符号
2.4.3 定义列表
<dl>
<dt>省份：</dt>
<dd>江西</dd>
<dt>校训</dt>
<dd>爱国明志 敢为人先</dd>
</dl><dl>：列表1级项
<dt>：列表2级项
<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>货到付款</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>[email protected]</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 />功率:500W<br />储尘类型:旋风尘盒/尘桶<br />吸尘类型:干/湿吸均可<br />
适用面积:91m2-150m’<br />
产品特色:除螨,HEPA滤网<br />
线长:充电式(无线)<br/>
吸嘴类型:圆毛刷<br />
适用环境:厨房,地板,地毯,床铺,汽车,沙发,瓷砖,酒店<br />
售后服务:海外进口商品不支持国内联保,无法享受与产地同等售后服务<br />
品牌名称:Dyson<br />
商品名称:我家那闺女 Dyson V8 absolute 无线吸尘器<br />
产地:马来西亚<br />
商品编号:V8absolueUS<br /></p >
<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 />
品名:无线手持吸尘器美版<br />
型号:V8 Absolute<br/>
吸力:高达115空气瓦特<br />
使用时间:普通模式约40分钟、MAX模式约7分钟<br />
(电动驱动吸头在非MAX模式下运行约25分钟)<br/>
充电时间:约5小时<br />
产品尺寸:长124.4厘米,宽18厘米,高22.4厘米<br />
重量:2.61公斤<br />
容量:0.54 升<br />
吸头配件:软绒滚筒吸头、升级版直驱吸头、缝隙吸头、<br/>
电动床褥吸头、二合一吸头、软除尘毛吊<br />
产品特点:电力升级、新形式集尘桶、双层放射式气旋、HEPA<br />
过滤系统、噪声分贝更小<br />
</p >
<h2>产品特点</h2>
< img src="img/zxc.JPG" width="750" height="450"/>
<h2>戴森科技,英国品质</h2>
<p style="font-size:25px">戴森 V8 美版无绳吸尘器高配版,新的动力设计。<br />
有助吸除家中四处的过敏原,吸附99.97%小至0.3微米的微尘,<br />
运行时间高达40分钟,2款地板吸头及4款配件吸头,清洁空间高达291平米。</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/lbxx.jpg">
<blockquote style="font-size:25px">官网地址:http://shop.dyson.cn/</blockquote>
</h1>
<p align="center">网页制作Copyright©暴龙战士</p >
</body>
</html>