2.1 文字与段落排版
2.1.1 段落标签
<html>
<head>
<meta charset="UTF-8">
<title>段落P标签示例</title>
</head>
<body>
<p align="center">广东南方职业学院</p>
<p align="right">作者:信息与计算机学院</p>
<p align="left">信息与计算机学院开设了... 其中软件技术专业是我院重点建设专业。</p>
</body>
</html>
2.1.2 标题标签:
在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。标题使<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题，HTML会自动标题前后添加一个额外的换行。
2.1.3 换行标签:
<br/>标签将打断HTML文档中正常段落的行间距和换行。<br/>放在任意一行中都令文字<br/>而又不会在行与行之间留下空行，即强制文本换行。换行标签的语法:使该行换行，如果<br/>放在一行的末尾，可以使后面的文字、图像、表格等显示于下一行到HT水浏览器解释时，从该处换行。换行标签单独使用，可使页面清晰、整齐。
2.1.4 水平线标签:
水平线可以作为段落与段落之间的分隔线，使文档结构清晰，层次分明。当浏览器解释到HTML文档中的<hr/>标签时，会在此处换行，并加入一条水平线段。
2.1.5 预格式化标签:
<pre>标签可定义预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代码。
2.1.6 缩排标签:
<blockquote>标签可定义一个块引用。<blockquote>与</ blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
2.1.7 案例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8" >
<title>全球汇商城简介</title>
</head>
<body>
<h1 align="center">100%正品 十重保障</h1>
<hr color = "ffc0cb" />
<p> 全球汇成立于2008年,
10年来,凭借独创的特卖模式,精选全球正品好货,深度折扣,在电子商务研究中心 2018年6月发布的"2017年度中国网络零售市场数据监测报告"中,
全球汇在 B2C市场交易份额方面发展势头良好,继续保持第三位。
<br/> 唯品会是全球最大的特卖电商,以及中国第三大电商。<br/>
</p ><br />
全球汇承诺:
<blockquote>
全球直采:货源保障,全球布局直采全世界好货。<br />
入仓全检:质检保障,独立自理仓库 坚持入仓全检验。<br />
自营物流:物流保障,自营物流封闭操作 全程可溯。<br />
假货必赔:第三方保障,中国人保正品保险,假货必赔。<br/>
</blockquote>
</body>
</html>
2.2 超链接：
2.2.1 超链接简介：
超链接的定义:. 所谓超链接(Hyperlink)，是指从一个网页指向一个目标的连接关系，这个目标可以另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，个文件，甚至是一个应用程序。
2.2.2超链接的分类：
路径:URL统一资源定位器，指的就是每一个网站都具有的独立的地址。同一个网站下的
每一个网页都属于同一个地址下，但是，当创建网页时，不可能也不需要为每一个链接都输其中，“目标文件名”<a href="目标文件入完全的地址。用户只需要确定当前文档同站点根目录之间的相对路径关系。
2.2.3 超链接的应用:
2.2.2.1 锚点标签<a>···</a >:
HTML 使用<a>标签来建立一个链接，通常<a>标签又称为锚。建立超链接的标签以<a>开始，以</a >结束。锚可以指向网络上的任何资源:一张HTML页面、一幅图像、一个声音或视频文件等。
2.2.2.2 指向其他页面的超链接:
创建指向其他页面的超链接，就是在当前页面与其他相关页面之间建立超链接。根据目标文件与当前文件的目录关系，有4种写法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<pre>
P
</pre>
</body><p>P</p>
<blockquote>
块引用
</blockquote>
<a href="login.html">免费注册</a>
<a href="register.html">账户登录</a>
</html>
2.2.2.3 指向书签的超链接:
在浏览页面时，如果页面篇幅很长，要不断地拖动滚动条，就给用户浏览带来不便。 览者需要既可以从头阅读到尾，又可以很快寻找到自己感兴趣的特定内容进行部分阅读时就可以通过书签链接来实现。
2.2.2.4 指向下载文件的超链接:
如果希望制作下载文件的超链接，只需在链接地址处输入文件所在的位置，当浏览户击超链接后，浏览器会自动判断文件的类型，以做出不同情况的处理。
2.2.2.5 指向电子邮件的超链接:
网页中电子邮件地址的超链接，可以使网页浏览者将有关信息以电子邮件的形发送给电子邮件的接收者，通常情况下，接收者的电子邮件地址位于网页页面的底部。
2.3 图像
2.3.1 网页图像的格式及使用要点：
2.3.1.1 常见的网页图像格式:
主要有GIF,JPEG,PNG.
GIF:GIF是Internet上应用最广泛的图像文件格式之一，是一种索引颜色的图像格式，此格式在网页中使用较多。它的特点是体积小，支持小型翻页型动画，GIF图像最多可以使用256种颜色，最适合制作徽标、图标、按钮和其他颜色、风格比较单一的图片。
JPEG:JPEG是Internet上应用最广泛的图像文件格式之一，适用于摄影或连续色第三调图像。JPEG文件可以包含多达数百万种颜色，因此JPG格式的文件体积较大，图片质量较佳，通常可以通过压缩JPG文件在图像品质和文件大小之间取得良好的平衡。当网页中对图像的质量有要求时，建议使用此格式。
PNG:PNG是一种新型的无专利权限的图像格式，兼有GIF和JPG的优点。它的显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像。它可以用来代替CIF格式，同样支持透明层，在质量和体积方面都具有优势，适合在网络中传输。
2.3.1.2 使用网页图像的要点:
(1)高质量的图像因其图像体积过大，不太适合网络传输。一般在网页设计中选图像不要超过8KB，如必须选用较大图像时，可先将其分成若干小图像，显示时再通过将这些小图像拼合起来。
(2)网页中的动画并非越多越好，页面中应合理使用动画，太炫酷的动画会分散网站访客的注意力。
(3)如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。相对路径是相对于文件而言的，从相对文件所在目录依次往下直到文件所在的位置。
2.3.2 图像标签：
2.3.2.1 图像的替换文本说明:
有时，由于网速过慢或者用户在图片还没有下载完全就单击了浏览器的停止键，在浏览器中就看不到要看到图片，这时替换文本说明就十分有必要了。替换文本说明应该简洁而清晰，能为用户提供足够的图片说明信息，在无法看到图片的情况下也可以了解图片的内容信息。
2.3.2.2 设置图像大小:
在HTML 中，通过img标签的属性width和height来调整图像大小，其目的是通过图像的高度和宽度加快图像的下载速度。默认情况下，页面中显示的是图像的原始大小，如果不设置 width 和height 属性，浏览器就要等到图像下载完毕才显示网页，因此延缓其他页面元素的显示.width 和 height 的单位可以是像素，也可以是百分比。百分比表示显示图像大小为浏览器窗口大小的百 分比。
2.3.2.3 图像的边框:
在网页中显示的图像如果没有边框，会显得有些单调，可以通过img标签的border 属性为图像添加边框，添加边框后的图像显得更醒目、美观。
2.3.3 图像超链接:
图像也可作为超链接热点，单击图像则跳转到被链接的文本或其他文件。
2.3.4 设置网页背景图像:
在网页中可以利用图像作为背景，但是要注意不要让背景图像影响网页内容的显示，因为背景图像只是起到渲染网页的作用。此外，背景图片最好不要设置边框，这样有利于生成无缝背景。
2.3.5 图文混排:
图文混排技术是指设置图像与同一行中的文本、图像、插件或其他元素的对齐方式。在制作网页时往往要在网页中的某个位置插入一个图像，使文本环绕在图像的周围。img标签的 lign属性用来指定图像与周围元素的对齐方式，实现图文混排效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图文混排</title>
</head>
<body>
<h1 align="center">江西应用工程职业学院</h1>
<img src="../img/pilot.png" width="600" height="400" align="right" alt="学院图片">
<p>江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。</p>
<p>办学宗旨：以人为本 培养高素质高技能人才</p>
<p>校训：爱国明志 敢为人先</p>
<p>校园精神：诚朴坚卓 达谦智勇</p>
</body>
</html>
2.4 列表
2.4.1 无序列表:
就是列表中列表项的前导符号没有一定的次序，而是用黑点、圆圈和方框等一些特殊符号标识。无序列表并不是使列表项杂乱无章，而是使列表项的结构更清晰、更合理。
2.4.1.1 在<ul>后指定符号的样式:
在<ul>后指定符号的样式，可设定直到</ul>的加重符号。例如
<ul type=" disc"> 符号为实心圆点
<ul type=" circle" > 符号为空心圆点O
<ul type=" square" > 符号为方块
<u1 img src = " graph , gif" > 符号为指定的图片文件
2.4.1.2 在<li>后指定符号的样式:
在<li>后指定符号的样式，可以设置从该<li>起直到</ul>的项目符号。格式:
<li type= " disc" > 符号为实心圆点
<li type=" circle" > 符号为空心圆点O
<li type=" square" > 符号为方块
<li img src =" graph , gif" > 符号为指定的图片文件
2.4.2 有序列表:
有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。有序的符号标识包括阿拉伯数字、小写英文字母、大写英文字母、小写罗马字母和大写罗马字母。<ol>标签的type属性用来定义一个有序列表的符号样式，在<ol>后指定符号的样式，可设定直到</ol>的表项加重记号。格式:
<oltype="1"> 序号为数字
<oltype="A"> 序号为大写英文字母
<oltype="a"> 序号为小写英文字母
<oltype="I"> 序号为大写罗马字母
<oltype="i"> 序号为小写罗马字母
在<li>后指定符号的样式，可设定该表项前的加重记号。
2.4.3 定义列表:
定义列表又称为释义列表或字典列表，定义列表不是带有前导字符的列项目，而是一列实物以及与其相关的解释。当创建一个定义列表时，主要用到3个HTML 标签:<dl>标签、<d>和<dd>标签。可以使用d创建自定义列表，使用dt和 dd定义列表中具体的数据项。
2.4.4 嵌套列表:
所谓嵌套列表，就是无序列表与有序列表出嵌套混合使用。嵌套列表可以把页面分为多个层次，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。嵌套方式可分为无序列表中嵌套无序列表、有序列表中嵌套有序列表、无序列表中嵌套有序列表、在有序列表中嵌套无序列表等方式，读者需要灵活掌握。
<!DOCTYPE html><html>
<head> <meta charset ="UTF-8"> 系
<title>无线吸尘器说明书</title></head><body>
<hl>Dyson V8 absolute无线吸尘器</hl><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'-150m'<br />产品特色:除编,HEPA滤网<br/>线长:光电式(光线)<br />吸嘴类型;圆毛刷<br />
适用环境:厨房,地板、地毯、床销,汽车,沙发,瓷砖,酒店<hr />售后服务:海外进口商品不支持
国内联保,无法享受与产地同等售后服务<br/>
品牌名称:Dyon<hr />商品名称:我家那闺女 Dyson V8 absolute无线吸尘器<tr />严地:马来而亚<br />商品编号:V8aholuteU8<be/></p >
<li type="square"style = "calor:deeppink">商品展示</li></ul>
<img src="img/1.jpg" title="无线手持吸尘器" align="middle"/>
<h2>产品信息<h2>
<p style = "font-size:2Sps:">品牌:Dyson戴森<br />品名:无线手持吸尘器美版<hr/>型号:V8Absolute<br/>
吸力:高达 115空气瓦特<br/>
使用时间:普通模式约40分钟、MAX模式约7分钟<hr/>(电动驱动吸头在非MAX模式下运行约25分钟)<br/>充电时间:约5小时<br/>
产品尺寸:长124.4厘米,宽18厘米,高22.4厘米<hr />重量:2.61 公斤<br />容量:0.54升<br/>
吸头配件;软绒滚筒吸头、升级版直驱吸头、缝隙吸头、<hr/>电动床褥吸头、二合一吸头、软除尘毛吊<br/>
产品特点:电力升级、新形式集尘桶、双层放射式气旋、HEPA<br/>过滤系统、噪声分贝更小<br/><p>
<h2>产品特点</h2>
<img src="img/tedian.JPG " width="750" height="450"/>
<h2>戴森科技,英国品质</h2>
<pstyle="font-size:25px">戴森V8美版无绳吸尘器高配版,新的动力设计。<br/>有助吸除家中四处的过敏原,吸附99.97%小至0.3微米的微尘,<hr/>
运行时间高达40分钟,2款地板吸头及4款配件吸头,清洁空间高达291平米。</p >
<img src="img/left.JPG" align="left" width="350" height="290"/><br/><br/><h1>
HEPA过滤系统<hr/>
吸附微尘 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>
</hl></body></html>
扫一扫
1621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
