2.1 文字与段落排版
2.1.1 段落标签
格式:<p align="xxx">xxx</p>
属性align(设置对齐方式,共3个属性):center:中心,left:左对齐,right:右对齐,默认左对齐
2.1.2 标题标签
<h>标签(6级标题),标题默认加粗
2.1.3 换行标签
<br/>标签,放在段落,和<p>标签对比间隔更小
2.1.4 水平线标签
<hr/>标签
color属性:不建议使用英文单词,建议使用十六进制代码设置颜色(好调色)
常用颜色:
size属性:设置宽度,以像素为单位,默认为2
width属性:设置长度,可以是绝对值(以像素为单位)或相对值(以百分比为单位),默认100%
2.1.5 预格式化标签
<pre>标签,可以使空格,tab键,换行键等全部格式都有,常用于表示计算机的源代码
2.1.6 缩排标签(快引用标签)
<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年,10年来,凭借独创的特卖模式,
精选全球正品好货,深度折扣,在电子商务研究中心2018年6月发布的"2017年度中国网络零售市场数
据监测报告"中,全球汇在B2C市场交易份额方面发展势头良好,继续保持第三位。<br/>
唯品会是全球最大的特卖电商,以及中国第三大电商。<br/>
</p><br />
全球汇承诺:
<!-- 缩排标签 -->
<blockquote>
全球直采:货源保障,全球布局 直采全世界好货。<br/>
入仓全检:质检保障,独立自理仓库 坚持入仓全检验。<br/>
自营物流:物流保障,自营物流封闭操作 全程可溯。<br/>
假货必赔:第三方保障,中国人保正品保险,假货必赔。<br/>
</blockquote>
</body>
</html>
图片展示:
2.2 超链接
2.1.1 超链接简介
2.1.1.1 超链接的定义
一个网页指向一个目标的连接关系
2.1.1.2 超链接的分类
根据目标文件的不同,分为页面超链接、锚点超链接、电子邮箱超链接
根据单击对象的不同,分为文字超链接、图像超链接、图像映射
2.1.1.3 路径
类似个人的地址
2.2.2 超链接的应用
2.2.2.1 锚点标签<a>···</a >
格式:<a href=链接(可内部,可外部)>文本内容</a>
2.2.2.2 指向其他页面的超链接
格式:<a href="目标文件.html">文本内容</a>
指向同一个根目录下的文件
2.2.2.3 指向书签的超链接(难点)
有书签(类似于打标记),才能指向书签
1.打标记、设置书签(用name属性取书签名字),格式:<a name="p"></a>
2.指向标签(用#号+书签名字),格式:<a href="#p">文本内容</a><br/>
2.2.2.4 指向下载文件的超链接
格式:<a href="wenjian.zip">下载文件</a><br/>
2.2.2.5 指向电子邮件的超链接
格式:<a href="mailto:12xxxxxx01@qq.com">联系我</a><br/>
2.3 图像
2.3.1 网页图像的格式及使用要点
2.3.1.1 常见的网页图像格式
格式:GIF、JPEG(JPG是JPEG压缩所得)、PNG
2.3.1.2 使用网页图像的要点
1.尽量使用小图(小于8kb),加载速度快
2.不能做为主线、重点,要为文本服务(不能)
3.用相对路径
2.3.2 图像标签
常用属性:
src:指定文件的路径
alt:图像无法显示时,代替图像的说明文字
title:设置图像悬停文字
width:设置宽度,单位:像素(px)
height:设置高度,单位:像素(px)
border:设置图像边框
align:设置对齐方式
2.3.2.1 图像的替换文本说明
当图像无法显示时,显示代替文字,使用alt属性进行设置
2.3.2.2 设置图像大小
示例代码:<img src="图像位置" width="350px" height="200px" />
2.3.2.3 图像的边框
使用border属性,边框颜色不能修改,默认黑色
2.3.3 图像超链接
设置图片作为超链接,点击即跳转
代码实例:<a href="http://www.baidu.com"> <img src="图片路径"/> </a>
2.3.4 设置网页背景图像
在body里面使用background属性进行设置
代码实例:<body background="图片路径">
2.3.5 图文混排
代码展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 align="center">江西应用工程职业学院</h1>
<hr color="#ff0000" size="15px"/>
<img src="img/jjyg.jpg" align="right"/>
<p>
江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校,隶属江西省教育厅。<br />
办学宗旨:以人为本 培养高素质高技能人才<br />
校训:爱国明志 敢为人先<br />
校园精神:诚朴坚卓 达谦智勇<br />
</p>
</body>
</html>
图片展示:
2.4 列表
2.4.1 无序列表
无序列表:<ul>标签
无序列表的每一项:<li>标签
2.4.1.1 在<ul>后指定符号的样式
2.4.1.2 在<li>后指定符号的样式
2.4.2 有序列表
有序列表:<ol>标签
type属性:修改前面符号,默认数字,“A”为大写英文字母、“a”为小写英文字母、“I”为大写罗马数字、“i”为小写罗马数字排序
2.4.3 定义列表
定义标签:<dl>标签
定义项:<dt>标签、定格写
定义内容:<dd>标签、空格写
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>xxxx@qq.com</dd>
<dt>传真:</dt>
<dd>0000-10086</dd>
<dt>地址:</dt>
<dd>地球村</dd>
</dl>
</ul>
</body>
</html>
图片展示:
2.5 综合案例——无线吸尘器说明书
代码展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无线吸尘器说明书</title>
</head>
<body>
<!-- 设置分割线 -->
<hr color="deeppink"/>
<!-- 设置标题 -->
<h1>Dyson V8 absolute 无线吸尘器</h1>
<!-- 设置分割线 -->
<hr color="deeppink"/>
<!-- 设置无序列表 -->
<!-- style是设置元素样式、font-size:设置最小规格字体 -->
<ul style="font-size: 25px">
<!-- 设置第一项的内容 -->
<li type="aquare" style="color:deeppink">商品参数</li>
<p style="font-size: 25px">
吸尘器类别:手持式吸尘器<br />
功率:500w<br />
储尘类型:旋风尘盒/尘桶<br />
吸尘类型:干/湿吸均可<br />
适用面积:91m-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>
<!-- align:对齐方式、src:设置突破路径、title:设置标题 -->
<p align="center"><img src="img/1.jpg" title="无线手持吸尘器"/></p>
<!-- 设置标题 -->
<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" width="350" height="290" align="left"/><br/><br/>
<h1>
吸附微尘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/</a ></blockquote>
</h1>
</body>
</html>
图片展示: