2.1 文字与段落排版
2.1.1 段落标签
< p align="center" > 内容 </p> 段落内容居中
< p align="left" > 内容 </p> 段落内容左对齐
< p align="ringht" > 内容 </p> 段落内容右对齐
< p> 内容 </p>
2.1.2 标题标签
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
2.1.3 换行标签
<p>
明月几时有 <br/>
把酒问青天
</p>
2.1.4 水平线标签
<hr ..... />
color可以设置颜色
2.1.5 预格式化标签
<pre>文本</pre>
2.1.6 缩排标签
<blockquote> 文本</blockquote>
2.2 超链接
2.1.1 超链接简介
HTML 使用超级链接与网络上的另一个文档相连。HTML中的链接是一种用于在不同网页之间导航的元素。链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。
2.1.1.1 超链接的定义
可以从一个网页转跳到另外一个网站
2.1.1.2 超链接的分类
1.内部链接:内部连接所链接的目标一般位于同一个网站中，对于内部链接来说，可以使用相对路径和绝对路径
2.外部链接:外部链接所链接的目标一般为外部网站目标，当然也可以是网站内部目标。外部链接一般要指定所使用的协议和网站地址。
2.1.1.3 路径
超链接有两个路径，分别是绝对路径和相对路径。
2.2.2 超链接的应用
2.2.2.1 锚点标签<a>···</a >
HTML <a> 元素（或称 锚 元素）可以通过 它的 href 属性 创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。 <a> 中的内容 应该 指明链接的目标。 如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。
2.2.2.2 指向其他页面的超链接
所谓超链接是指从一个网页指向一个目标连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接文字或图片后，链接目标将显示在浏览器上，并且根据目标类型来打开或运行
2.2.2.3 指向书签的超链接
a href="链接路径" target="目标窗口位置">链接文本或图像</a>
1、 <a>标签中href属性值是链接的路径，当href="#"时表示一个空连接；
2、<a>标签中target属性值表示的是链接在哪个窗口打开，它的常用值是“_self”和"_blank"，当target="_self"时表示链接在当前窗口打开target 的默认值是“_self”，当target="_blank"时表示链接在新出窗口打开
2.2.2.4 指向下载文件的超链接
定义和用法 download 属性规定当用户单击超链接时将下载目标（href 属性 中规定的文件）。 download 属性的可选值将成为文件下载后的新名称。 允许使用任何值，浏览器会自动检测正确的文件扩展名并将其添加到文件中（例如.img、.pdf、.txt、.html 等）
2.2.2.5 指向电子邮件的超链接
电子邮件链接允许我们创建指向电子邮件地址的超链接。 你可以使用 HTML <a></a> 标签创建这些链接——但在这种情况下，我们传递收件人的电子邮件地址而不是传递 URL。 你可以使用 mailto 属性在锚标记中指定电子邮件地址
2.3 图像
2.3.1 网页图像的格式及使用要点
高质量图片体积过大，不适合网络传输，一般的网页设计图像不会大于8kb
2.3.1.1 常见的网页图像格式
2.3.1.2 使用网页图像的要点
2.3.2 图像标签
2.3.2.1 图像的替换文本说明
有时，由于网速过慢或者用户在图片还没有下载完全就单击了浏览器的停止键，在浏览器中就看不到要看到图片，这时替换文本说明就十分有必要了。
2.3.2.2 设置图像大小
通过 img 标签的属性 width 和 height来调整图像大小
2.3.2.3 图像的边框
可以通过img 标签的 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/649ec2bc4c23ca1c5b961fe2bd642ba.jpg" align="right"/>
<p>
江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。<br/>
办学宗旨：以人为本 培养高素质高技能人才<br/>
校训：爱国明志 敢为人先<br/>
校园精神：诚朴坚卓 达谦智勇<br/>
</p>
</body>
</html>
2.4 列表
2.4.1 无序列表
<ul>
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
2.4.1.1 在<ul>后指定符号的样式
</ul>
<ul type="circle">
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
2.4.1.2 在<li>后指定符号的样式
<ul>
<li type="disc">无序列表第一项</li>
<li type="square">无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
2.4.2 有序列表
<ol>
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ol>
2.4.3 定义列表
<ol type="1">
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ol>
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-mail:</dt>
<dd>worldall@163.com</dd>
<dt>传真:</dt>
<dd>0750-3118888</dd>
<dt>地址:</dt>
<dd>广东省江门市江海区五邑路</dd>
</dl>
</ul>
</body>
</html>
2.5 综合案例——无线吸尘器说明书
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无线吸尘器说明书</title>
</head>
<body>
<h1>DysemW8 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/>
适用面积：91m2-150 m2<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/吸尘.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/图2.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/图3.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/图4.jpg"/>
<blockquote style="font-size:25px">官网地址：<a href="https:/shop.dyson.cn/">
https:/shop.dyson.cn/</a ></blockquote>
</h1>
</body>
</html>
扫一扫
874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
