2.1文字与段落排版
2.1.1段落标签
在网页制作中，段落是通过<p>标签来定义的。这个标签用于包裹文本内容，创建一个段落
align属性作用是对齐方式，left(左对齐),center(居中),right(右对齐)
<p align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>2.1.2标题标签
在HTML中，标题标签用于定义文档的标题或部分内容的标签。标题标签从<h1>到<h6>，共六个级别，其中<h1>表示最高级别的标题，通常用于页面的主标题，而<h6>表示最低级别标签
<h1 align="center">标题一</h1>
<h2 align="left">标题二</h2>
<h3 align="right">标题三</h3>
<h4>标题四</h4>
<h5align="right">标题五</h6>2.1.3换行标签
在HTML中，换行标签用于在文本中创建一个新行，最常用的换行标签是<br/>，它是一个自闭和标签，意味着它没有结束标签
<p>这是第一行文字。<br>这是第二行文字。</p>2.1.4水平线标签
在HTML中，水平线标签<hr>用于创建一条水平线，它可以用来分隔内容，或者表示文档中的一个主题变化。<hr>标签有几个属性可以用来控制线条的外观：size(设置线条的高度),color(设置线条的颜色),width(设置线条的宽度),aling(设置线条的对齐方式)
<hr/>
<hr color="#ffc0cb"/>
<hr size="20px color="#ccccff"/>2.1.5预格式化标签
在HTML中，<pre>标签用于显示预格式化的文本
<pre>江西应用工程学院</pre>2.1.6缩排标签
<blockquote>标签在HTML中表示缩进的文本块
<blockquote>文本</blockquote>
2.1.7案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>全球汇商城简介</title>
</head>
<body>
<h1 align="center">100%正品 十重保掌</h1>
<hr color="deeppink"/>
<p> 全球汇成立于2008年，十年来，凭借独创的特卖模式，精选全球正品好货，深度折扣，在电子商务研究中心
年6月发布“2017年度中国网络零售市场数据监测报告”中全球汇在B2C市场交易份额方面发展势头良好，继续保持第三位。<br/>
唯品会是全球最大的特卖电商，以及中国第三大电商。<br/>
</p><br/>
全球汇承诺：
<blockquote>
全球直采：货源保障，全球布局，直采全世界好货。<br/>
入仓全检：质检保障，独立自理仓库坚持入仓全检验。<br/>
自营物流：物流保障，自营物流封闭操作全程可溯。<br/>
假货必赔：第三方保障，中国人保正品保险，假货必赔<br/>
</blockquote>
</body>
</html>
2.2超链接
2.2.1超链接简介和应用
超链接是 HTML 中的一个基本元素，它允许你将文本或图像与其他页面或页面上的特定部分链接起来。超链接是互联网的基础，因为它们允许用户从一个页面跳转到另一个页面，从而浏览和访问网络上的信息。
超链接的基本语法
超链接在 HTML 中使用 <a> 标签创建，其基本语法如下：
<a href="URL">超链接</a>chref 属性：这是超链接的核心属性，它指定了链接的目标地址。这个地址可以是内部页面、外部网站、电子邮件地址、文件或其他资源。
链接文本：这是用户点击时会激活链接的文本。
<a href="http://www.baidu.com">百度一下</a>
<a href="register.html">注册<a/>
<a href="login.html">登录</a>
<a href="#p">段落</a>
<a href="h">标题</a>
<a href="文件名.zip">下载</a>超链接的类型
内部链接：链接到同一网站内的其他页面。
外部链接：链接到其他网站上的页面。
锚点链接：链接到同一页面上的不同部分（使用 # 后跟锚点的 ID）。
电子邮件链接：允许用户通过点击链接发送电子邮件。
下载链接：允许用户下载文件。
超链接的属性
除了 href 属性外，<a> 标签还支持其他一些属性，
target：指定在何处打开链接的文档。
download：提示浏览器下载而不是导航到链接的 URL
title：提供关于链接的额外信息，通常在鼠标悬停时显示。
rel：定义链接和当前文档之间的关系。
超链接是 HTML 和互联网导航的核心组成部分，它们为用户提供了一种快速、直观的方式来探索和访问在线内容
2.3图像
2.3.1网页图像的格式及使用要点
在网页设计中，图像是增强用户体验和传达信息的重要元素。选择合适的图像格式和使用正确的技术对于优化网页性能和视觉效果至关重要。
常用图像格式
JPEG (Joint Photographic Experts Group)
用途：适用于照片和复杂的图像，如风景、人物和艺术作品。
特点：有损压缩，可以调整压缩率，压缩率高时图像质量下降。
优点：文件大小较小，适合网络传输。
缺点：压缩可能导致图像质量损失。
PNG (Portable Network Graphics)
用途：适用于需要透明度的图像，如图标、徽标和按钮。
特点：无损压缩，支持透明度（alpha transparency）。
优点：提供高质量的图像，保留透明度信息。
缺点：文件大小通常比 JPEG 大。
GIF (Graphics Interchange Format)
用途：适用于简单图形、图标和动画。
特点：无损压缩，支持动画和透明背景。
优点：支持动画，文件大小较小。
缺点：颜色限制（256色），不适合复杂图像。
使用要点
选择合适的格式：根据图像的内容和用途选择合适的格式。
优化图像大小：使用图像编辑软件或在线工具压缩图像，以减少文件大小而不显著损失质量。
考虑响应式设计：为不同设备和屏幕尺寸提供不同尺寸的图像，或使用 CSS 媒体查询来调整图像大小。
2.2.3图像标签
在HIML中，用<ing>标签在网页中添加图像，图像是嵌入的方式添加到网页中
<img src="img/1297413e3b75ba1d8e3f1932e25fdd2.jpg" width="200" border="20" height="600" />2.3.3图像超链接
图像也可以为超链接热点，单击图像跳转到被链接的文本或其他文件
<img src="img/baidu.png" title="百度一下">2.3.4设置网页背景图像
在翁也中可以利用图像作为背景，属性值为图片的URL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>江西应用工程学院</h1>
<img src="c251865eb9d333b10d1627b7c30a7d5.png" align="right"/>
<p>
江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。<br />
办学宗旨：以人为本 培养高素质高技能人才<br />
校训：爱国明志 敢为人先<br />
校园精神：诚朴坚卓 达谦智勇<br />
</p>
</body>
</html>
2.4列表
2.4.1无序列表
无序列表就是列表中列表的前向符号没有一定的次序，而是用黑点、圆圈和方框等特殊的符号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul type="circle">
<li>无需列表第一项</li>
<li type="square">无需列表第二项</li>
<li>无需列表第三项</li>
</body>
</html>
2.4.2有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol type="1">
<li>有需列表第一项</li>
<li >有需列表第二项</li>
<li>有需列表第三项</li>
</body>
</html>2.4.3定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<dt>学院名称</dt>
<dd>以人为本 培养高素质高技能人才</dd>
<dt>办学宗旨</dt>
<dd>以人为本 培养高素质高技能人才</dd>
<dt>校训</dt>
<dd>以人为本 培养高素质高技能人才</dd>
<dt>校园精神</dt>
<dd>诚朴坚卓 达谦智勇</dd>
</body>
</html>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-mali:</dt>
<dd>worldall@163.com</dd>
<dt>传真：</dt>
<dd>0750-3118888</dd>
<dt>地址：</dt>
<dd>广东省江门市江海区五邑路</dd>
</dl>
</ul>
</body>
</html>
2.5综合案例
<!DOCTYPE hml>
<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="fou-size:25px">吸尘器类别:手持式吸尘器<br/>功率:50W<br/>
储尘类型:旋风尘金/尘桶<br />吸尘类型:干/湿吸均可<br/>
适用面积:91㎡-150 ㎡'<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="middlle"/>
<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">
</h1>
<blockquote style="fomt-size;25px">官网地址:<a href ="https://shop.dyso.cn/">
https://shop. dyson.cn/</a></blockquote>
</h1>
</body>
</html>
扫一扫
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
