2.1 文字与段落排版
以注释为基准 认识常用的文字与段落排版所使用的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p align="center">居中</p>
<p align="left">居左</p>
<p align="right">居右</p>
<!--段落-->
<h1 align="center">标题一（居中版）</h1>
<h2 align="left">标题二（居左版）</h2>
<h3 align="right">段落三（居右版）</h3>
<!--标题-->
我好饿我好饿我好饿<br/>
我真的好饿我真的好饿我真的好饿<br/>
好饿好饿好饿好饿好饿<br/>
<!--换行-->
<pre>
这是预格式化文件 他 保 留 空 <br/>
格
</pre>
<!--预格式文件-->
<hr color="#70901f">
<p>关于2016界信息与计算机学院优秀毕业生的名单</p>
<!--分割线-->
13软件技术1班（9名）：巧克力，癞克宝，粑粑人，大香蕉，四喜丸子，吮指原味鸡，三只老鼠，米雪新城，黄焖鸡
<blockquote>“你爱我，我爱你，米雪编程，甜蜜蜜.”</blockquote>
<!--缩排标签-->
</body>
</html>
效果如下
具体格式
2.1.1 段落标签
段落语法标签为
<p align="left|center|right">文字</p> （|是用来作分割的 表示或者）
段落标签会在段落前后加上额外的空行，不同段落间的间距等于连续加了两个换行标签<br/>，用以区别文字的不同段落
2.1.2 标题标签
标题文字标签的格式为：
<h #align="left|center|right">标题文字</h#>
2.1.3 换行标签
文字<br/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>换行标签</title>
</head>
<body>
<h3>联系我们</h3>
联系地址：广东省江门市五一路325号<br />
联系电话：+86-750-3966333<br />
传真电话：+86-750-3073898<br />
网址：www.GDNFU.com<br />
</body>
</html>
2.1.4 水平线标签
<hr align="left | center | right" size="横线粗细" width ="横线长度" color="横线色彩" noshade ="noshade"/>
2.1.5 预格式化标签
<pre>文本块</pre>
2.1.6 缩排标签
<blackquote>文本</blockquote>
2.2 超链接
3.路径
（1）绝对路径 （2）根目录相对路径 （3）文档目录相对路径
2.2.2 超链接的应用
1.锚点标签<a>...</a>
锚可以指向网络上的任何资源：一张HTML页面，一副图像，一个声音或视频文件等。语法如下
<a href="ur1" title="指向链接显示的文字"target="窗口名称">文本文字</a>
建立超链接时，href属性定义了这个超链接所指的目标地址，也就是路径。如果要创建
一个不链接到其他位置的空超链接，可用“#”代替URL。
属性 target：设定链接被单击后所要开始窗口的方式有以下4种：
（1)blank。在新窗口中打开被链接的文档。
（2)self。默认值。在相同的框架中打开被链接的文档。
（3)parent。在父框架集中打开被链接的文档。
（4）top。在整个窗口中打开被链接的文档。
2.指向其他页面的超链接
创建指向其他页面的超链接，就是在当前页面与其他相关页面之间建立超链接。根据目
标文件与当前文件的目录关系，有4种写法。注意，应该尽量采用相对路径。
（1）链接到同一目录内的网页文件，语法：
<a href="目标文件名.html“>热点文本</a>
其中，“目标文件名”是链接所指向的文件。
（2）链接到下一级目录中的网页文件，格式：
<a href=“子目录名/目标文件名，html">热点文本</a >
（3）链接到上一级目录中的网页文件，语法：
<a href="../目标文件名.html">热点文本</a>
其中，“/”表示退到上一级目录中
（4）链接到同级目录中的网页文件，格式：
<a href="../子目录名/目标文件名.html">热点文本</a>
表示先退到上一级目录中，然后再进入目标文件所在的目录。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="register.html">免费注册</a>
<a href="login.html">账号登录</a>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>账户登录</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="img/a.png" width="600" height="195" /></td>
</tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" align="right">用户名：</td>
<td><input name="textfield" type="text" id="textfield" value="请输入手机号码" /></td>
</tr>
<tr>
<td width="200" align="right">密码：</td>
<td><input type="password" name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td width="200" align="right"><input type="checkbox" name="checkbox" id="checkbox" />记住用户名</td>
<td><input type="submit" name="button" id="button" value=" 提 交 " /></td>
</tr>
</table>
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会员注册</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="img/a.png" width="600" height="195" /></td>
</tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" align="right">用户名：</td>
<td><input name="textfield" type="text" id="textfield" value="请输入手机号码" /></td>
</tr>
<tr>
<td width="200" align="right">密码：</td>
<td><input type="password" name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td width="200" align="right">确认密码：</td>
<td><input type="password" name="textfield3" id="textfield3" /></td>
</tr>
<tr>
<td width="200" align="right">性别：</td>
<td><input name="radio" type="radio" id="radio" value="radio" checked="checked" />
男<img src="images/Male.gif" width="22" height="21" align="absmiddle" />
<input type="radio" name="radio" id="radio2" value="radio2" />
女<img src="images/Female.gif" width="23" height="21" align="absmiddle" /></td>
</tr>
<tr>
<td width="200" align="right">出生日期：</td>
<td><input name="textfield4" type="text" id="textfield4" size="12" />
年
<select name="select" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
月
<select name="select2" id="select2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
日</td>
</tr>
<tr>
<td width="200" align="right">业余爱好：</td>
<td><input type="checkbox" name="checkbox" id="checkbox" />
看书
<input type="checkbox" name="checkbox2" id="checkbox2" />
上网
<input type="checkbox" name="checkbox3" id="checkbox3" />
打球</td>
</tr>
<tr>
<td width="200" align="right">头像：</td>
<td height="25"><input type="file" name="fileField" id="fileField" /></td>
</tr>
<tr>
<td width="200" align="right">意见或建议：</td>
<td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="button" id="button" value="提交" />
<input type="reset" name="button2" id="button2" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>
3.指向书签的超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>杜甫诗词全集</h1>
<a href="#one">1.绝句</a>
<a href="#two">2.登高</a>
<hr color="#ffc0cb"/>
<a name="one">绝句</a>
<p>两个黄鹂鸣翠鸟</p>
<a name="two">登高</a>
<p>风急天高猿啸哀</p>
</body>
</html> 
<a name="记号名">目标文本附近的内容</a >
（1）指向页面内书签的超链接。要在当前页面内实现书签超链接，需要定义两个标签：
个为超链接标签，另一个为书签标签。超链接标签的格式：
<a href="记号名">热点文本</a>
即单击“热点文本”，将跳转到“记号名”开始的网页元素。
2.3 图像
1.GIF 2.JPEG 3.PNG
要点：高质量图像体积过大不适合网络传输。不要超过8kb，如有需要可分成若干个小图像拼合
如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。相对路径是相对于文件而言的，从相对文件所在目录依次往下直到所在的位置。
2.3.2 图像标签
图像标签的格式：
<img src="图像文件名" alt="替代文字title="鼠标悬停提示文字" width="图像宽度" height="图像高度" border="边框宽度" align=”环绕方式|对齐方式"/>
src 指定图像源，即图像的URL路径
alt 如果图像无法显示，代替图像的说明文字
title 为浏览者提供额外的提示或帮助信息，方便用户使用
width 指定图像的显示宽度（像素数或百分数），通常只设为图像的真实大小以免失真。若髓要改变图像大小，最好事先使用图像编辑工具进行修改。百分数是指相对于当前浏览器窗口的百分比
height 指定图像的显示高度（像素数或百分数）
border 指定图像的边框大小，用数字表示，默认单位为像素，默认情况下图片没有边框，即
border=0
align 指定图像的对齐方式，设定图像在水平（环绕方式）或垂直方向（对齐方式）上的值置，包括left图像居左，文本在图像的右边）、right（图像居右，文本在图像的左边）、唧（文本与图像在顶部对齐）、middle（文本与图像在中央对齐）或botom（文本与图像在能部对齐）
2. 设置图像大小
< img src ="images/waitao.jpg" width="150" height="174">
3. 图像的边框
border=
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 />
<img src="img/school.png" width="350" height="350" align="right" alt="江西应用工程职业学院"/>
江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。<br />
办学宗旨：以人为本 培养高素质高技能人才<br />
校训：爱国明志 敢为人先<br />
校园精神：诚朴坚卓 达谦智勇<br />
</body>
</html> 
2.4 列表
2.4.1 无序列表
<ul type="符号类型">
<li type="符号类型1">第一个列表项 </li>
<li type="符号类型2">第二个列表项 </li>
1. 在<ul>后指定符号的样式
2. 在<li>后指定符号的样式
2.4.2 有序列表
<ol type="符号类型">
<li type="符号类型1">表项1
<li type="符号类型2">表项2
2.4.3 定义列表
<dl>
<dt>......第一个标题项......</dt>
<dd>......对第一个标题项的解释文字......</dd>
2.4.4 嵌套列表
2.5 综合案例——无线吸尘器说明书
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无线吸尘器说明书</title>
</head>
<body>
<h1>Dyson V8 absolute 马嘉祺超绝无尘吸尘器</h1>
<hr color="#0000ff" />
<ul style="font-size:25px">
<li type="square" style="color:#0000ff">商品参数</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/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">官网地址:<a href="http://shop.dyson.cn/">http://shop.dyson.cn/</a></blockquote>
</h1>
</body>
</html> 
扫一扫
820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
