2.1 文字与段落排版
2.1.1 段落标签
段落标签<p>是HTML格式中特有的段落元素,其其语法为:
<p align="left|center|right">文字</p>
属性 align:设置段落文字在网页上的对齐方式,包括left(左对齐)、center(居中)和right(右对齐),默认为left。
格式中的“|”表示或者,级多项选一项。
示例代码:
<p>2023级软件一班</p>
结果:
2.1.2 标题标签
在页面中,标题是一段文字内容的核心,所以总是用加强的效果来表示。标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题,<h6>定义最小的标题,HTML 会自动在标题前后加一个额外的换行。其格式为:
<h #align="left|center|right">标题文字</h#>
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords"content=""/>
<meta name="description" content=""/>
<link rel="stylesheet" href="css/index.css" type ="text/css"/>
<script type="text/javascript" src="/js/index.js"></script>
<title>第一个网页</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
我的第一个网页</br>
<p>2023级软件一班</p>
<a href="http://www.baibu.com">百度一下</a>
</body>
</html>
结果:
2.1.3 换行标签
网页内容并不都是像段落那样,有时没有必要用多个<p>标签去分割内容。如果编辑页内容只是为了换行,而不是从新段落开始,可以使用<br/>标签。
<br>标签将打断 HTTML文档中正常段落的行间距和换行。<br/>放在任意一行中都会使该行换行,如果<br/>放在一行的末尾,可以使后面的文字、图像、表格等显示于下一行,而又不会在行与行之间留下空行,即强制文本换行。换行标签的语法:
文字<br/>
示例代码:
<p>2023级软件一班</p></br>
我的第一个网页
结果:
2.1.4 水平线标签
水平线标签的格式为:
<hr align="left|center|right" size="横线粗细” width="横线长度“ color="横线色彩" noshade="noshade"/>
属性:size:设定线条粗细,以像素为单位
width:设定线条长度
color:设定线条颜色
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页学习</title>
</head>
<body bgcolor="#99ffff" text="blue">
<p>欢迎大家一起开始学习网页制作</p>
<!--水平线-->
<hr size="5" color="#ff3333"/>
</body>
</html>
结果:
2.1.5 预格式化标签
<pre> 标签可定义预格式化的文本。<pre> 标签的一个常见应用就是用来表示计算机的源代码,其语法为:
<pre> 文本块</pre>
2.1.6 缩排标签
<blokquote>标签可定义一个块引用。<blockquote>与</ blockquote>之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进,而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。缩排标签的语法为:
<blockquote>文本</blockquole>
2.1.7 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全球汇商城简介</title>
</head>
<body>
<h1 align="center">100%正品 十重保障</h1>
<hr color="depppink"/>
<p> 全球汇成立于2008年,10年来,凭借独创的特卖模式,精选全球正品好货,深度折扣,在电子商务研究中心2018年6月发布的"2017年度中国网络零售市场数据监测报告"中,全球汇在 B2C 市场交易份额方面发展势头良好,继续保持第三位。<br/>
唯品会是全球最大的特卖电商,以及中国第三大电商。<br/>
</p><br/>
全球汇承诺:
<blockquote>
全球直采:货源保障,全球布局 直采全世界好货。<br/>
入仓全检:质检保障,独立自理仓库 坚持入仓全检验。<br/>
自营物流:物流保障,自营物流封闭操作 全程可溯。<br/>
假货三赔:第三方保障,中国人保正品保险,假货必赔。<br/>
</blockquote>
</body>
</html>
结果:
2.2 超链接
2.2.2 超链接的应用
2.2.2.1 锚点标签<a>···</a >
2.2.2.2 指向其他页面的超链接
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面之间的链接</title>
</head>
<body>
<a href="register.html">免费注册</a><!--链接到同一目录内的网页文件-->
<a href="login.html">账户登录</a><!--链接到同一目录内的网页文件-->
</body>
</html>
结果:
2.2.2.3 指向书签的超链接
书签就是用<a>标签对网页元素做一个记号,其功能类似于用于固定船的锚。书签在<a>标签的name属性中定义,语法:
<a name="记号名">目标文本附近的内容</a>
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>指向页面内书签的超链接</title>
</head>
<body>
<h1>杜甫诗词全集</h1>
<a href="#one">1.《绝句》</a>
<a href="#two">2.《登高》</a>
<a href="#three">3.《望岳》</a><br/>
<a name="one">《绝句》</a>
<p>两个黄鹂鸣翠柳,<br/>一行白鹭上青天。<br/>窗含西岭千秋雪,<br/>门泊东吴万里船。<br/></p>
<a name="two">《登高》</a>
<p>风急天高猿啸哀, 渚清沙白鸟飞回。<br/>
无边落木萧萧下⑷, 不尽长江滚滚来。<br/>
万里悲秋常作客⑸,百年多病独登台⑹。<br/>
艰难苦恨繁霜鬓⑺, 潦倒新停浊酒杯⑻。</p>
<a name="three">《望岳》</a>
<p>
岱宗夫如何?齐鲁青未了。<br/>
造化钟神秀,阴阳割昏晓。<br/>
荡胸生曾(层)云,决眦入归鸟。<br/>
会当凌绝顶⑺,一览众山小。<br/>
</p>
</body>
</html>
结果:
2.2.2.4 指向下载文件的超链接
指向下载文件的超链接语法:
<a href="下载文件名">热点文本</a>
2.2.2.5 指向电子邮件的超链接
指向电子邮件超链接的语法:
<a href="malito:E-mail 地址">热点文本</a>
2.3 图像
2.3.1 网页图像的格式及使用要点
在网页设计中,选择合适的图像格式对于优化网页加载速度和视觉效果至关重要。常见的网页图像格式包括JPEG、PNG、GIF、SVG等,每种格式都有其特定的用途和优势。
-
JPEG:适用于照片和其他具有丰富色彩和渐变效果的图片。JPEG采用有损压缩技术,能在保证一定质量的前提下减小文件大小。这种格式普遍用于显示摄影图片和其他连续色调图像的高级格式,支持24位真彩色,适合对图像颜色要求较高的场景。
-
PNG:支持无损压缩,适用于需要清晰边缘的图像,如图标、按钮等。PNG格式的文件可以保留所有与图像品质有关的信息,同时支持透明度,因此在网页设计中应用广泛。PNG格式的图像适用于需要高清晰度和透明度的场景。
-
GIF:主要用于显示简单的动画图像或包含透明背景的图像。GIF格式支持256色,分为静态GIF和动画GIF两种,适合在网络上展示小一点的动画。GIF格式适用于需要展示动态效果或简单图形时使用。
-
SVG:可缩放矢量图形,适用于需要清晰呈现的图像,如图标和标志等。SVG文件的大小不会因放大而失真,适用于需要高度可伸缩性的场景。SVG格式适用于需要高度可定制和可缩放的图形设计。
选择正确的图片格式不仅能确保图片的显示效果达到最佳状态,还能提高网站的加载速度和性能。同时,使用这些格式时也需要注意遵守相关的版权法规和规定,避免侵犯知识产权
2.3.2 图像标签
2.3.2.1 图像的替换文本说明
在使用<img>标签时,最好同时使用alt属性和title属性,避免因图片路径错误带来的错误信息:同时,增加了鼠标提示信息也方便了浏览者使用。
2.3.2.2 设置图像大小
width和height的单位可以是像素,也可以百分比。百分比表示显示图像大小为浏览器窗口大小的百分比。例如:
<img src="images/waitao.jpg"width="150"height="174">
2.3.2.3 图像的边框
可通过img标签的border属性为图像添加边框,border属性的值用数字表示,单位为像素。
示例代码:
<!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/>
适用面积:91m2-150m2<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.5厘米,宽18厘米,高22.5厘米<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" >
<blockquote style = " font - size: 25px" >官网地址<a href = " https://shop. dyson. cn/" >
https://shop.dyson.cn/</a></blockquote>
</h1>
</body>
</html>
结果:
2.3.3 图像超链接
图像也可以作为超链接热点,单击图像则跳转到被链接的文本或其他文件。语法:
<a href="URL"><img src="图像文件名"/></a>
2.3.4 设置网页背景图像
背景属性将背景设置为图像。属性值为图片的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。格式:
<body background="背景图像路径">
设置网页背景图像应注意以下要点:
(1)背景图像是否增加了页面的加载时间,背景图像文件大小不应超过10 KB。
(2)背景图像是否与页面中的其他图像搭配良好。
(3) 背景图像是否与页面中的文字颜色搭配良好。
2.3.5 图文混排
2.4 列表
2.4.1 无序列表
设置type属性的方法有两种。
2.4.2 有序列表
有序列表是一个有特定顺序的列表项的集合。在有序列表中,各个列表项有先后顺序之分,它们之间以编号来标记。使用<ol>标签可以建立有序列表,表项的标签仍为<I>。
格式:
<ol type="符号类型”>
cli type="符号类型1”>表项1
cli type=”符号类型2”>表项2
</ol>
在浏览器中显示时,有序列表整个表项与上下段文本之间各有一行空白;列表项目向右缩进并左对齐;各表项前带顺序号。
有序的符号标识包括阿拉伯数字、小写英文字母、大写英文字母、小写罗马字母和大写罗马字母。<ol>标签的 type 属性用来定义一个有序列表的符号样式,在<o>后指定符号的样式,可设定直到</ol>的表项加重记号。格式:
<oltype =" 1"> 序号为数字
Coltype =" A"> 序号为大写英文字母
<oltype ="a" > 序号为小写英文字母
<oltype="|”> 序号为大写罗马字母
<oltype="i"> 序号为小写罗马字母
在<i>后指定符号的样式,可设定该表项前的加重记号。在格式上只需把上面的ol 改li.
2.4.3 定义列表
格式:
<dl>
<dt>••⋯第一个标题项⋯••••</dt>
<dd>•对第一个标题项的解释文字……<dd>
<dt>……第二个标题项⋯:</dt>
<dd>.••对第二个标题项的解释文字⋯.</dd>
<dl>
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>
</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/>功率:500W<br/>
储尘类型:旋风尘盒/尘桶<br/>吸尘类型:干/湿吸均可<br/>
适用面积:91m2-150m2<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.5厘米,宽18厘米,高22.5厘米<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" >
<blockquote style = " font - size: 25px" >官网地址<a href = " https://shop. dyson. cn/" >
https://shop.dyson.cn/</a></blockquote>
</h1>
</body>
</html>
结果: