2.1 文字与段落排版
1.段落标签 <p>文字（一个段落）</p>
对齐方式
左对齐 <p align="left">文字（一个段落）</p>
右对齐 <p align="right">文字（一个段落）</p>
居中对齐 <p align="center">文字（一个段落）</p>
2.标题标签 <h1>标题文字</h1>
对齐方式
左对齐 <h1 align="left">标题文字</h1>
右对齐 <h1 align="right">标题文字</h1>
居中对齐 <h1 align="center">标题文字</h1>
3.换行标签 文字<br />
4.水平线标签 <hr />
<hr align="left（左）|center（中）|right（右）" size="横线粗细" width="横线长度" color="横线色彩" noshade="noshade"/>
size属性：设定线条粗细，以像素为单位，默认为2
width属性：设定线段长度，可以是绝对值也可以是相对值，以像素为单位，默认值为100%
color属性：设定线条色彩，默认为黑色，由色彩相对应的英文或‘#’引导的16进制代码
5.预格式标签 <pre>文本块</pre>
文本块中的内容会保留空格和换行符，呈现等宽字体
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>pre标签示例</title>
</head>
<body>
<pre>
这是
预格式文件。
它保留了空格和换行。
</pre>
</body>
</html>
显示效果
6.缩排标签 <blockquote>文本</blockquote>
文本会从常规的文本分离出来，经常会左右两边缩进，有时会使用斜体
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>blockquote标签实例</title>
</head>
<body>
这里有一段长文本引用
<blockquote>江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。
办学宗旨：以人为本 培养高素质高技能人才校训：爱国明志 敢为人先校园精神：诚朴坚卓 达谦智勇
</blockquote>
</body>
</html>
显示效果
2.2 超链接
1.超链接的简介
定义:从一个网页到一个目标（图片，网页，文本，声音等）的连接关系
分类：
目标文件不同：页面超链接，锚点超链接，电子邮件超链接
单击对象不同：文字超链接，图像超链接和图像映射
路径：
URL————统一资源定位器：每一个网站都具有的独立的地址
绝对路径：主页文件或目录在硬盘的真正路径
例如：D:\web\index.html代表了index.html文件的物理绝对路径；
http://www.hao123.com/index代表了URL绝对路径
根目录相对路径：站点根文件夹到链接文件经过的路径。站点根目录以相对路径（/）开始
例如：/support/tips.htm是文件（tips.htm）的站点根目录相对路径，该文件位于站点根文件的support子文件夹中
文档目录相对路径：相对于某个基准目录的路径，以当前文件路径为起点，进行相对文件查找
2.超链接的运用 <a href=""></a>
1锚点标签 <a></a>
<a href="ur1" title="指向链接显示的文字" target="窗口名称">文本文字</a>
href属性定义为这个超链接所指的目标地址
target属性（1）blank 在新窗口中打开被来链接的文档
（2）self 默认值 在相同的框架中打开被链接的文档
（3）parent 在父框架中打开被链接的文档
（4）top 在整个窗口中打开被链接的文档
2.指向其他页面的超链接
链接到同一目录内的网页文件
<a href="目录文件名.html">热点文本</a>其中“目标文件名”是链接所指向的文件
链接到下一级目录中的网页文件
<a href="子目录名/目标文件名.html">热点文本</a>
链接到上一级目录中的网页文件
<a href="../目标文件名.html">热点文本</a>其中“../”表示退到上一级目录中
链接到同级目录中的网页文件
<a href="../子目录名/目标文件名.html">热点文本</a>
表示先退回上一级目录中，然后再进入目标文件所在的目录
3.指向书签的超链接
书签名在<a>标签的name属性中定义
<a name="记号名">目标文本附近的内容</a>
（1）指向页面内书签的超链接
<a href="记号名">热点文本</a>单击“热点文本”，跳转到记号名开始的网页
（2）指向其他页面书签的超链接
<a href="目标文件名.html#记号名">热点文本</a>单击“热点文本”，跳转到目标记号名开始的网页
4.指向下载文件的超链接
<a href="下载文件名">热点文本</a> 下载文件名输入文件所在的位置
5.指向电子邮件的超链接
<a href="mailto:E-mail地址">热点文本</a> E-mail地址输入邮箱地址
2.3 图像
1.网页图像的格式及使用要点
格式
GIF：体积小，支持小型翻页型动画，可以使用256种颜色 适合做图标，徽标等
JPEG：体积合适，可以使用多达百万种颜色 适合摄影或连续色调图像
PNG：显示速度快，无专利权限的图像格式，兼有GIF,JPG的优点 适合网络传输
要点
体积不能太大，太大不适合网络传输。图像不超过8kb
网页动画要合理适当
如果在同一文件多次使用，最好使用相对路径来查找图像
2.图像标签
<img src="图像文件名" alt="替代文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度" border="边框宽度" align="环绕方式|对齐方式"/>
3.图像超链接
<a href="URL"><img src="图像文件名"/></a>
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像超链接</title>
</head>
<body>
<img src="img/kunkun.png" width="100px" height="300px"/>
<!--设置图像大小-->
<img src="img/kunkun.png" border="50px"/>
<!--设置图像边框-->
<a href="http://www.baidu.com"><img src="img/kunkun.png"/></a>
<!--图片超链接-->
</body>
</html>
显示效果
4.设置网页背景图像
<body background="背景图像路径"> 在正文中设置背景
设置网页背景图像要点文件不能太大，与其他图像和其他文字搭配良好
5.图文混排
图文混排技术是指设置图像与同一行的文本，图像，插件或其他元素的对齐方式
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图文混排</title>
</head>
<body>
<h1 align="center">江西运用工程职业学院</h1>
<hr />
<img src="img/6da863db28aab1476066a77846efd1a.png" width="600" height="400" align="right"/>
江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。
办学宗旨：以人为本 培养高素质高技能人才<br />
校训：爱国明志 敢为人先<br />
校园精神：诚朴坚卓 达谦智勇<br />
</body>
</html>
显示效果
2.4列表
1.无序列表
无序列表：列表中列表项的前导符号没有一定的次序，而是黑点，圆圈，方框等特殊符号标识
<ul type="符号类型">
<li type="符号类型">第一个列表表</li>
<li type="符号类型">第二个列表表</li>
.......
</ul>
在<ul>后指定符号样式
<ul type="disc"></ul> 符号为实心圆点
<ul type="circle"></ul> 符号为空心圆点
<ul type="square"></ul> 符号为方块
<ul img src="图片文件"></ul> 符号为指定的图片文件
在<li>后指定符号样式
<li type=""></li> 符号为实心圆点
<li type=""></li> 符号为空心圆点
<li type=""></li> 符号为方块
<li type=""></li> 符号为指定的图片文件
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<ul type="disc">
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
<ul type="circle">
<li>无序列表第一项</li>
<li type="square">无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
</body>
</html>
显示效果
2.有序列表
有序列表：一个有特定顺序的列表项的集合
<ol type="符号类型">
<li type="符号类型1">表项1</li>
<li type="符号类型2">表项2</li>
</ol>
在<ol>后指定符号的样式
<ol type="1"> 序号为数字
<ol type="A"> 序号为大写英文字母
<ol type="a"> 序号为小写英文字母
<ol type="I"> 序号为为大写罗马字母
<ol type="i"> 序号为小写罗马字母
在<li>后指定符号样式
只需要把<ol>改成<li>
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<ol type="i">
<li>有序列表第一项</li>
<li>有序列表第二项</li>
<li>有序列表第三项</li>
</body>
</html>
显示效果
3.定义列表
定义列表不是带有前导字符的列项目，而是一列实物以及与其的相关解释
<dl>dl用来创建自定义列表；<dt><dd>标签定义列表具体的数据项
格式
<dl>
<dt>...第一标题项...</dt>
<dd>...对第一个标题项的解释文字...</dd>
<dt>...第二标题项...</dt>
<dd>...对第二个标题项的解释文字...</dd>
</dl>
4.嵌套列表
嵌套列表是无序列表和有序列表嵌套混合使用
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>列表</title>
</head>
<body>
<ul type="符号类型">
<li type="符号类型1">第一个无序列表项</li>
<li type="符号类型2">第二个无序列表项</li>
</ul>
<ol oltyoe="1">
<li>有序列表第一项</li>
<li>有序列表第二项</li>
<li>有序列表第三项</li>
</ol>
<dl>
<dt>办学宗旨:</dt>
<dd>以人为本 培养高素质人才</dd>
<dt>校训:</dt>
<dd>爱国明治 敢为人先</dd>
<dt>校园精神:</dt>
<dd>诚朴兼卓 达谦智勇</dd>
</dl>
</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" >
<hype="square" style="color:deeppink">商品参数</li>
<p siyle="font-size:25px">吸尘器类别:手持式吸尘器<br/>
功率:500 W<br/>
错尘类型:旋风尘盒/尘桶<br/>
吸尘类型:干/湿吸均可<br/>
适用面积:91 m'-150 m'<br />产品特色:除螨,HEPA 滤网<br />
线长:充电式(无线)<br />吸嘴类型:圆毛刷<br />
适用环境:厨房,地板,地毯,床铺,汽车,沙发,瓷砖,酒店<br />
售后服务:海外进口商品不支持国内联保,无法享受与产地同等售后服务<br />
品牌名称:Dyson<br />商品名称:我家那闺女 Dyson V8 absolute 无线吸尘器<br />
产地:马来西亚<br />商品编号:V8absoluteUS<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/tedian.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/canbin.jpg"/>/>
<blockquote style = " font - size ; 25px">官网地址:https ://shop. dyson. cn/</blockquote>
</hl>
</body>
</html>
显示效果
