2.1 文字与段落排版
2.1.1 段落标签
<p>正文</p>
2.1.2 标题标签
<h1>为一级标题</h1>
<h2>为二级标题</h2>
以此类推
<h1 align="center">一级标签</h1> 其中align为对齐方式
2.1.3 换行标签
<br/>为换行标签
2.1.4 水平线标签
浏览器解释HTML文档中的<hr/>标签时，会在此处换行，并加入一条水平线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1 align="center">一级标题</h1>
<hr color="#ff0000"/>
<h2>二级标题</h2>
23届软件一班：XXX YYY<br />
23届软件二班：VVV MMM<br />
</body>
</html>
2.1.5 预格式化标签
<pre>标签中会保留空格和换行，适合放代码
2.1.6 缩排标签
<blockquote>标签是一个 块引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>这是p标签12111111111311111111111111111111113333</p>
<blockquote>11111111111111111111111111666666666666666666666666666661</blockquote>
<p>这是p标签11111111111111111666666666666666666666111111111</p>
</body>
</html>运行结果如下 
2.1.7 案例
2.2 超链接
2.2.1 超链接简介
2.2.1.1 超链接的定义
2.2.1.2 超链接的分类
指向下载文件的超链接
<a href="文件名.zip">下载</a>指向电子邮件的超链接
<a href="mailto:123...789@qq.com">联系我</a>2.2.1.3 路径
2.2.2 超链接的应用
2.2.2.1 锚点标签<a>···</a >
2.2.2.2 指向其他页面的超链接
2.2.2.3 指向书签的超链接
2.2.2.4 指向下载文件的超链接
2.2.2.5 指向电子邮件的超链接
2.3 图像
2.3.1 网页图像的格式及使用要点
2.3.1.1 常见的网页图像格式
2.3.1.2 使用网页图像的要点
图片尽量不要太大，尽量不要超过8k
图不是越多越好，也不需太杂，除非图片网
2.3.2 图像标签
title标签
2.3.2.1 图像的替换文本说明
2.3.2.2 设置图像大小
设置后图片不会被裁剪，只会被拉伸
2.3.2.3 图像的边框
2.3.3 图像超链接
点击对应图片后，即可跳转百度
2.3.4 设置网页背景图像
<body background="img/baidu.jpg"></body>
2.3.5 图文混排
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图文混排</title>
</head>
<body>
<h1 align="center">学校描述</h1>
<hr />
<img src="img/yygc.png" width="600" height="350" align="right" alt="学校描述"/>
江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。<br />
办学宗旨：以人为本 培养高素质高技能人才<br />
校训：爱国明志 敢为人先<br />
校园精神：诚朴坚卓 达谦智勇<br />
</body>
</html>运行结果
2.4 列表
2.4.1 无序列表
<ul>标签是一组列表，一个<ul>中可以有多个<li>标签
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>结果如下
2.4.1.1 在<ul>后指定符号的样式
<ul type="circle">
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul> 
2.4.1.2 在<li>后指定符号的样式
<ul type="circle">
<li>无序列表1</li>
<li type="square">无序列表2</li>
<li>无序列表3</li>
</ul> 
就近原则，什么近符号样式是什么。
2.4.2 有序列表
<ol>标签
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>运行结果如下
设置类型：
<ol type="i">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>运行结果
2.4.3 定义列表
<dt>标题项 <dd>对标题项解释
<dt>办学宗旨：</dt>
<dd>以人为本 培养高素质高技能人才</dd>
<dt>校训：</dt>
<dd>爱国明志 敢为人先</dd>
<dt>校园精神：</dt>
<dd>诚朴坚卓 达谦智勇</dd>运行结果
2.4.4 嵌套列表
<html>
<head>
<meta charset="utf-8">
<title>嵌套列表</title>
</head>
<body>
<h2>全球支付向导</h2>
<ul type="circle">
<li>全球汇支付方式</li>
<ul>
<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>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-150 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" align="left" width="350" height="290"/><br /><br />
<h1>
HEPA 过滤系统<br />
吸附微尘99.97%小至0.3微<br />
米的微尘,减少过敏原回流空至<br />
</h1>
<br />
<br />
<img src="img/canbin.jpg"/>
<blockquote style="font-size: 25px;">官网地址:<a href = "https://shop.dyson.cn"></a></blockquote>
</body>
</html>运行结果
扫一扫
1226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
