2.1 文字狱锻炼排版
2.1.1 段落标签
1.<p></p>标签：是html格式中特有的段落格式会根据窗口宽度自动装换为下一行
2.align属性：设置p标签中文字内容的对齐方式，（left左对齐、center居中对齐、right右对齐）默认为左对齐。
代码实例
<p align="center">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈
啊哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈
哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈</p>运行结果
2.1.2 标题标签
1.在页面中标题使用<h1>到<h6>标签进行定义，其中<h1>到<h6>定义标签级别由大变小。
代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1 align="center">一级标题</h1>
<h2 align="left">二级标题</h2>
<h3 >三级标题</h3>
<h4 align="right">四级标题</h4>
</body>
</html>运行结果
2.1.3 换行标签
1.<br>标签：会打断文档中正常换行和行间距，放在任意一行都会使其换行，放在一行末尾会使文字、图像、表格显示与下一行且行与行之间不会有空行。
代码实例
<p>
加油啊<br />
hhhhhhh<br />
</p>运行结果
2.1.4 水平线标签
1.<hr>标签：水平线，可作为段落与段落之间的分隔线，使用时会换行并加入一条水平线段。
color属性:设置线条颜色已相应的引文名称或以“#”引导的一个十六进制代价来表示。
width属性:设定线段长度，可以是绝对值（单位为像素）、也可以是相对值随窗口宽度改变而改变（默认值为100%，即始终当前窗口）。
size属性：设置线条粗细，以像素为单位，默认值为2。
代码实例
<hr color="#ffa500" width="100%" size="2"/>运行结果
2.1.5 预格式化标签
1.<pre>标签：可给文本定义预格式化，该标签中文本通常会保留空格和换行
代码实例
<pre>
江 西 应 用 工 程 职 业 学 院
校训：爱国明智 敢为人先
</pre>运行结果
2.1.6 缩排标签
<blockquote>:可将文档左右缩排
<blockquote>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
啊哈哈哈哈哈哈哈哈哈哈哈哈</blockquote>运行结果
2.1.7 案例
1.使用文字与段落的基本排版知 制作“全球汇商城简介页面”
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全球汇商城简介</title>
</head>
<body>
<h1 align =" center">100%正品十重保障</hl><hr color=" deeppink" />
<p> 全球汇成立于2008年,10年来,凭借独创的特卖模式,精选全球正品好货,深度折扣,在电子商务研究中心2018年6月发布的"2017年度中国网络零售市场数据监测报告”中,全球汇在B2C市场交易份额方面发展势头良好,继续保持第三位。<hr/>
唯品会是全球最大的特卖电商,以及中国第三大电商。<br/>
</p ><br/>全球汇承诺
<blockquote>全球直采:货源保障,全球布局直采全世界好货。<br />
入仓全检:质检保障,独立自理仓库坚持入仓全检验。<br />
自营物流:物流保障,自营物流封闭操作 全程可溯。<br />
假货必赔:第三方保障,中国人保正品保险,假货必赔。<br />
</blockquote>
</body>
</html>运行结果
2.2 超链接
1.<a></a>:锚点标签指向网上任何资源
2.target属性：设定链接被单击后所有开始窗口的四种方式(blank:再行窗口中打开被链接的文档、self：在相同窗口打开被链接文档、parent：再父框中打开被链接文档、top：在整个窗口中打开被链接文档）。
3.href属性：定义了这个超链接所指目的地，可跳转到网站页面和网站内部的其他页面。
作用：
1.链接同一目录中的网页文件
代码示例
<a href="login.html">登录</a>运行结果
2.跳转到指定超链接标签
代码示例
<a href="http://www.baidu.com">百度一下</a>运行结果
3.跳转书签(用name属性:标题书签.href属性:跳转书签 )
4.跳转指定下载文件的超链接
<a href="文件名.zip"
2.3图像
2.3.1图片格式
1.常用网页图像格式
（1）.GIF :属于动图,体积小,支持小型翻页型动画
（2）.JPEG:图片质量较好,文件体积较大
（3）.PNG:无专利权限,显示速度快
2.网页图像要点：
（1）高质量图像因其图像体积过大，不适合网络传输
（2）网页并非动画越多越好
（3）同一文件多次使用相同图像时，最好使用相对路径查找该图像
2.3.2 图像标签
1.图像标签:<img />(src属性;图片路径,title属性:图片标题标签,width属性:设图片宽度宽,height属性:设置图品高度,border属性:添加图像边框)
代码示例
<img src="img/a.png" title="全球精品" width="200px" height="200px" border="150px"/>运行结果
2.3.3 图像超链接
1.图像也做为超链接热点，单击图像则跳转到被链接的文本或其他文件（<a><img/></a>标签嵌套使用）
代码示例
<a href="http://www.baidu.com">
<img src="微信图片_20240912171104.png"/>
</a>
运行结果
2.3.4 设置网页背景
1.<body>标签（background属性）来添加网页整体背景
代码示例
<body background="img/微信图片_20240914084633.jpg">运行结果
2.3.5 图文混排
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图文混排</title>
<h1 align="center">江西应用工程职业学院</h1>
<hr color="#ff0000" size="8px"/>
<img src="img/微信图片_20240919110554.jpg" align="right"
/>
<p>
江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。<br />
办学宗旨：以人为本 培养高素质高技能人才<br />
校训：爱国明志 敢为人先<br />
校园精神：诚朴坚卓 达谦智勇
</p><br />
</head>
<body>
</body>
</html>运行效果
2.4 列表
2.4.1 无序列表
1.<ul></ul>标签:无序列表的开始(li标签:表示列表项)
代码示例
<ul type="disc">
<!-- 就近原则 -->
<li type="square">哈哈</li>
<li>芜湖</li>
<li>嘻嘻</li>
</ul>
运行结果
2.4.2 有序列表
1.<ol></ol>标签：表示是一个有顺序的特定集合（type：属性设置序号属性）
代码示例
<ol type="I">
<li>哈哈</li>
<li>芜湖</li>
<li>嘻嘻</li>
</ol>运行结果
2.4.3 定义列表
1. <dl></dl>标签：创建自定义列表
2. <dt></dt>标签：定义列表二级标题
3. <dd></dd>标签：定义最底层列表项
代码示例
<dl>
<!-- 标题 -->
<dt>院校名称:</dt>
<!-- 内容 -->
<dd>江西应用工程职业学院</dd>
<dt>办学宗旨:</dt>
<dd>以人为本 培养高素质高技能人才</dd>
<dt>校训：</dt>
<dd>爱国明志 敢为人先</dd>
<dt>校园精神:</dt>
<dd>诚朴坚卓 达谦智勇</dd>
</dl>运行结果
2.4.2 嵌套列表
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>嵌套列表</title>
</head>
<body>
<h2>全球汇支付向导</h2>
<ul>
<li type="circle">全球汇支付方式</li>
<ul type="disc">
<li>货到付款</li>
<li>微信支付</li>
<li>支付宝</li>
<li>网银在线</li>
</ul>
<hr size="3"/>
<li type="circle">网银在线支付步骤</li>
<ol>
<li></li>
<li>显示您的应付总价,单击"确认无误,付款”;</li>
<li>确定您在银行的预留信息,单击"确定"按钮;</li>
<li>输入您的网银账号,登录密码,验证码;</li>
<li>支付成功,提示"已完成付款"。</li>
</ol>
<hr size="3"/>
<li>联系我们</li>
<dl>
<dt>E-mail :</dt>
<dd>worldall@ 163. com</dd>
<dt>传真：</dt>
<dt>地址:</dt>
<dd>广东省江门市江海区五邑路</dd>
</dl>
</ul>
</body>
</html>
运行结果
2.5 案例
1.根据本章综合前面学习的网页制件排版知识，可以利用文字与段落排版、超链接、图像和则表设置
代码示例
<!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 />
适用面积:91m-150m<br />产品待色：除螨，HEPA 滤网<br/>
线长：充电式（无线）<br/>吸嘴类型：圆毛刷<br/>
适用环境：厨房、地板，地毯，床铺，汽车，沙发，瓷砖、酒店<br/>售后服务：海外进口商品不支持
国内联保，无法享受与产地同等售后服务<br/>
品牌名称：Dyson<br/>商品名称：我家那闺女 Dyson V8 absolute 无线吸尘器<br/>
产地：马来西亚<br/>商品编号：V8absolute US<br/></p >
<li type="square" style="color:decppink">商品展示</li></ul>
<img src="img/1.jpg" title="无线手特吸尘器" align="middle"/>
<h2>产品信息<h2>
<p siyle="fon-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-sive:25px">戴森V8美版无绳吸尘器高配版，新的动力设计。<br/>
有助吸除家中四处的过敏原，吸附99.97%小至0.3微米的微尘,<br />
运行时间高达40分钟，2款地板吸头及4款配件吸头，清洁空间高达291平米。<p>
<img src="img/left.JPG" align="left"width="350" height="310" /><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>运行结果
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
