2.1 文字与段落排版
2.1.1 段落标签
段落标签<p>是HTML格式中特有的段落元素，在HTML格式里不需要在意文章每行的宽度。
语法为： <p align="left | center | right">文字<p>
属性align： 设置段落文字在网页上的对齐方式，包括left左对齐 ，center居中，right右对齐
默认为left。
2.1.2 标题标签
标题使用<h1>至<h6>标签进行定义，<h1>定义最大的标题，<h6>定义最小的标题，HTML会自动在标题前后添加一个额外的换行。
格式为： <h #align=" left | center | right">标题文字</h#>
属性align： 设置标题在页面中的对齐方式，包括left左对齐 ，center居中，right右对齐
默认为left。
2.1.3 换行标签
<br/>标签会打断HTML文档中正常段落的行间距和换行。<br/>放在任意一行都会是该行换行，如果放在一行的末尾，可以后面的文字，图像，表格等显示于下一行。
格式为： 文字<br/>
2.1.4 水平线标签
水平线可以作为段落与段落之间的分隔线，使文档结构清晰，层次分明。当浏览器解释到HTML 文档中的<h >标签时，会在此处换行，并加入一条水平线段。
水平线标签的格式为: <hr align = " left l center l right" size ="横线粗细" width ="横线长度" color="横线色彩" noshade="noshade"/>
属性size:设定线条粗细，以像素为单位，默认值为2。
属性width:设定线段长度，可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。所谓绝对值，是指线段的长度是固定的，不随窗口尺寸的改变而改变。所谓相对值，是指线段的长度相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，默认值为100%，即始终当前窗口。
属性color:设定线条色彩，默认为黑色。色彩可以用相应的英文名称或以“#”引导的一个十六进制代码来表示。
2.1.5 预格式化标签
<pre>标签可定义预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代码预格式化标签的语法为: <pre>文本块</pre>
2.1.6 缩排标签
<blockquote>与</ blockquote>之间的所有文本都<blockquote>标签可定义一个块引用,右两边进行缩进，而且有时会使用斜体。也就是会从常规文本中分离出来，经常会在左、右，块引用拥有它们自己的空间。
缩排标签的语法为: <blockquote>文本</blockquote>
2.2 超链接
超链接在本质上属于网页的一部分，通过超链接将各个网页链接在一起后，才能构成一个网站。
2.2.1 超链接简介
1 超链接的定义
超链接是指从一个网页指向一个目标的连接关系，这个目标可以是一个网页，也可以是相同网页不同的位置，还可以是一个图片等
2 超链接的分类
根据超链接目标文件的不同，超链接可分为页面超链接，锚点超链接和电子邮件超链接等
根据超链接单击对象的不同，超链接可分为文字超链接，图像超链接和图像映射等。
3 路径
路径分为三种为绝对路径，根目录相对路径和文档目录相对路径。
绝对路径：就是主页上的文件或目录在硬盘上的真正路径。
根目录相对路径：是指从站点根目录文件夹到链接文档经过的路径。
文档目录相对路径：它是相对于某个基准目录的路径，以当前文件所在的路径为起点，进行相对文件的查找。
2.2.2 超链接的应用
1 锚点标签<a>···</a >
释义： 指向网页上的任何元素。
语法：<a herf=" url" title="指向链接显示的文字" target="窗口名称">文本文字</a>
2 指向其他页面的超链接
链接到同一目录内的网页文件：<a href="目标文件名.html">热点文本</a>。
链接到下一级目录内的网页文件：<a href="子目录名/目标文件名.html">热点文本</a>。
链接到上一级目录内的网页文件：<a href="./目标文件名.html">热点文本</a>。
链接到同级目录内的网页文件：<a href="../子目录名/目标文件名.html">热点文本</a>。
3 指向书签的超链接
书签就是用<a>标签对网页元素做一个记号，其功能类似于固定船的锚，又称锚点。
语法： <a name="记号名">目标文本附近的内容</a>
（1） 指向页面内书签的超链接 ： <a href="记号名">热点文本</a>。
（2） 指向其他页面的超链接 ： <a href="目标文件名.html # 记号名">热点文本</a>
4 指向下载文件的超链接
语法为： <a href="下载文件名"> 热点文本</a>
5 指向电子邮件的超链接
语法为：<a href="mailto:E-mail地址">热点文本</a>
2.3 图像
2.3.1 网页图像的格式及使用要点
1 常见的网页图像格式
JPEG: 适合照片
PNG: 适合图形和背景
GIF; 支持动画
2 使用网页图像的要点
确保图片适中，加载速度快，并且有替代文本
2.3.2 图像标签
图像标签常用的属性
1 图像的替换文本说明
当图像无法显示时，alt属性提供一个替代文件。
2 设置图像大小
可以使用width和height属性来设置图像尺寸。
语法： <img src="images/waitao.jpg" width="150" height="200">。
3 图像的边框
可以用border属性为图像添加边框。单位为像素
2.3.3 图像超链接
图像也可以作为超链接热点，单击图像则跳转到被连接到的文件或文本。
语法：<a href="URL"><img src="图像文件名"/></a>
2.3.4 设置网页背景图像
语法为 <body background = "背景图像路径">
2.3.5 图文混排
图文混排技术是指设置图像与同一行中的文本，图像，插件或其他元素的对齐方式。
2.4 列表
2.4.1 无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
1 在<ul>后指定符号的样式
<ul type="disc"> 符号为实心圆点
<ul type="circle"> 符号为空心圆点
<ul type="square"> 符号为方块
<ul type="graph,gif"> 符号为指定的图片文件
2 在<li>后指定符号的样式
<li type="disc"> 符号为实心圆点
<li type="circle"> 符号为空心圆点
<li type="square"> 符号为方块
<li type="graph,gif"> 符号为指定的图片文件
2.4.2 有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
2.4.3 定义列表
格式为:
<dl>
<dt> 第一个表题项 </dt>
<dd> 对第一个表题项解释的文字 </dd>
<dd> 第二个表题项 </dd>
<dd> 对第二个表题项解释的文字 </dd>
</dl>
2.4.4 嵌套列表
格式为:
<ul>
<li>项目一
<ul>
<li>子项目一</li>
<li>子项目二</li>
</ul>
</li>
<li>项目二</li>
</ul>
案例综合
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>图文混排</tide>
</head>
<body>
<hl align="center">江西应用工程职业学院</hl>
<hr />
<img src="img/44.png" width="250" height=" 350" align=" right" alt="
江西应用工程职业学院"/>
产地:新西兰奶粉配方:常规配方<br/>
包装:罐装适用人群:婴幼儿<br/>
供货渠道:海外原装品牌名称:Aptamil<br/>
商品名称:澳洲 Aptamil 金装婴幼儿配方奶粉3段 900克
保质期:18个月<br/>
成分:矿物质(1.2%),维生素(0.10%),奶粉(全脂奶粉、益生元、鱼油)(98.7%)<br/>
生产日期:2018年4月(具体以收到实物为准)<br/>
规格:900 g/罐配件/备注:见详情<br/>
商品编号:9418783002844<br/>
储存方法:<br/>
1.请将奶粉存放在阴凉干燥处,开罐后密封保存,并请于开罐后四周内用完。<br/>
2.请在奶粉罐底部注明的日期前食用。<br/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<tidle>嵌套列表</tite>
概
网页制作的排版方法 章2
</head>
<body>
<h2>全球汇支付向导</h2>
<ul type = " circle" >
<li>全球汇支付方式</li>
<糘洪銼唼ら酔敢 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>
<d]>
<dt>E-mail : </dt>
<dd>worldall@ 163. com</dd>
<dt>传真:</dt>
<dd>0750-3118888</dd>
<dt>地址:</dt>
<dd>广东省江门市江海区五邑路</dd>
</dl>
</ul>
</body>
</html>
<!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 />
适用面积:91 m*m-150 m*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" 」PG" align=" left" width =" 200" height=" 250" /><br/><br/><hl>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>
</hl>
</body>
</html>
扫一扫
3857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
