2.1 文字与段落排版
在网页制作过程中，通过文字与段落的基本排版即可制作出简单的网页。以下讲解常用的文字与段落排版所使用的标签。
2.1.1 段落标签
由于浏览器忽略用户在HTML编辑器中输人的回车符，为了使文字段落排列得整齐、清晰，常用段落标签<p>…</p>实现这一功能。段落标签<p>是HTML格式中特有的段落元素，在HTML格式里不需要在意文章每行的宽度，不必担心文字是不是太长了而被截掉，它会根据窗口的宽度自动转换到下一行。
<!--段落标签-->
<p align="center"> 第一段</p><!--居中-->
<p align="left">第二段</p><!--左对齐-->
<P align="right">第三段</P><!--右对齐-->
<!--文段默认为左对齐-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--段落标签-->
<p align="center"> 第一段</p><!--居中-->
<p align="left">第二段</p><!--左对齐-->
<P align="right">第三段</P><!--右对齐-->
<!--文段默认为左对齐-->
</body>
</html>
2.1.2 标题标签
在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题，HTML会自动在标题前后添加一个额外的换行。
<!-- 标题标签 -->
<h1>一级标题</h1>
<h2 align="center">二级标题</h2>
<h3 align="left">三级标题</h3>
<h4 align="right">四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标题</h1>
<h2 align="center">二级标题</h2>
<h3 align="left">三级标题</h3>
<h4 align="right">四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</html>
2.1.3 换行标签
网页内容并不都是像段落那样，有时没有必要用多个<p>标签去分割内容。如果编辑网页设计与制作教程页内容只是为了换行，而不是从新段落开始，可以使用<br/>标签,
J号>标签将打断HTML文档中正常段落的行间距和换行。<b/>放在任意一行中&A使该行换行，如果<br/>放在一行的末尾，可以使后面的文字、图像、表格等显示于下而又不会在行与行之间留下空行，即强制文本换行。
<!--换行标签-->
<br/>
<P>
爱国明志<br/>
敢为人先
</P>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--换行标签-->
<br/>
<P>
爱国明志<br/>
敢为人先
</P>
</html>
2.1.4水平线标签
水平线可以作为段落与段落之间的分隔线，使文档结构清晰，层次分明。当浏览器解释到 HTML 文档中的<hr/>标签时，会在此处换行，并加入一条水平线段。
水平线标签的格式为:
<hr aligm="lef lcenterlright"size="横线粗细" width="横线长度" color="横线色彩" noshade ="noshade" />
属性size:设定线条粗细，以像素为单位，默认值为2。
属性 wdth:设定线段长度，可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。所谓绝对值，是指线段的长度是固定的，不随窗口尺寸的改变而改变。所谓相对值，是指线段的长度相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，默认值为100%，即始终当前窗口。
属性 color:设定线条色彩，默认为黑色。色彩可以用相应的英文名称或以“#”引导的个十六进制代码来表示。
<!--水平标签-->
<!-- size(设置水平线的粗细) width(设置水平的长度) -->
<br/>
<hr color="#ffc0cb"/>
<hr size="20px" color="#ccccff"/>
<!DOCTYPE html>
<html>
<body
<!--水平标签-->
<!-- size(设置水平线的粗细) width(设置水平的长度) -->
<br/>
<hr color="#ffc0cb"/>
<hr size="20px" color="#ccccff"/>
</body>
</html>
2.1.5预格式标签
<pre>标签可定义预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和符，而文本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代。预格式化标签的语法为:
<pre>文本块</pre>
2.1.6 缩排标签
<blockquote>标签可定义一个块引用。<blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
<blockquote>文本</blockquote>
2..2 超链接
一个网站是由多个页面组成的，创建超链接有利于项面与页旺这问的跳转，从而粉同站中的贸品是由彭金贵思渠成也是网贡中至关重婴的元素。链接在本质上属于网资务部分，通过超链接将各个网页链接在一起后，才能真正构成一个网站。
2.2.1 超链接简介
所清期鞋楼(pyedink)，是指从一个网页指向一个目标的连接关系，这个目标可W另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址
1.超链接的定义
标签
文册继接除子可链接文本外，也可链接各种媒体，如声音、图像和动画等，通过它们可个文件，甚至是一个应用程序。将网造建设成一个丰富多彩的多媒体世界。当网页中包含超链接时，其外观形式为彩。将服为蓝色)且带下划线的文字或图像。单击这些文本或图像，可跳转到相应位置。能指针指向超链接时，将变成手形。
2.超链接的分类
根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接和电子邮件超链等;根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接和图像映射等
3.路径
URL--统一资源定位器，指的就是每一个网站都具有的独立的地址。同一个网站下的每一个网页都属于同一个地址下，但是，当创建网页时，不可能也不需要为每一个链接都人完全的地址。用户只需要确定当前文档同站点根目录之间的相对路径关系。创建超链接时必须了解链接与被链接文本的路径。在一个网站中，路径通常有3种表方式:绝对路径、根目录相对路径和文档日录相对路径。
(1)绝对路径。绝对路径就是主页上的文件或目录在硬盘上真正的路径(URL和物理路径)。例如，D:\web\index.htm代表了index.html文件的物理绝对路径;http:/www.hao123.com/index.html代表了一个URL绝对路径。
(2)根目录相对路径。根目录相对路径是指从站点根文件夹到被链接文档经过的路径站点上所有公开的文件都存放在站点的根目录下。站点根目录相对路径以一个正斜村(/)开始。例如，/support/tips.htm是文件(ps.htm)的站点根目录相对路径，该文件位于站点根文件夹的support 子文件夹中。
（3）文档目录相对路径。它是相对于某个基准目录的路径，以当前文件所在的路径为起点，进行相对文件的查找。相对路径适合于创建网站内部链接。
2.2.2超链接的应用
超链接的另外一个叫法称为锚，它是使用<a>标签标记的，可以用两种方式表示，一是通过使用<a>标签的hzef属性来创建超文本链接，以链接到同一文档的其他位置或其他文档中，在这种情况下，当前文档就是链接的源，href属性的值就是URL的目标;二是通过使用<a>标签的 name 属性或id属性在文档中创建一个文档内部的书签。
1.锚点标签<a>…</a>
HTML,使用<a>标签来建立一个链接，通常<a>标签又称为锚。建立超链接的标签以<a>开始，以</a>结束。锚可以指向网络上的任何资源:一张 HTML页面、一幅图像、一个声音或视频文件等。<a>标签的语法:
文本文字
用户可以单击<a>和</a>标签之间的文本文字来实现网页的浏览访问，通常<a>和</a>标签之间的文本文字用颜色和下划线加以强调。
建立超链接时，href属性定义了这个超链接所指的目标地址，也就是路径。如果要创建个不链接到其他位置的空超链接，可用“#”代替URL。属性target:设定链接被单击后所要开始窗口的方式有以下4种:
(1)blank。在新窗口中打开被链接的文档。
(2)sef。默认值。在相同的框架中打开被链接的文档。
(3)parent。在父框架集中打开被链接的文档。
(4)top。在整个窗口中打开被链接的文档。
2.指向其他页面的超链接
创建指向其他页面的超链接，就是在当前页面与其他相关页面之间建立超链接。根据目文件与当前文件的目录关系，有4种写法。注意，应该尽量采用相对路径。
(1)链接到同一目录内的网页文件，语法:
热点文本中，“目标文件名”是链接所指向的文件。
(2)链接到下一级目录中的网页文件，格式:热点文本
(3)链接到上一级目录中的网页文件，语法:
热点文本口，“../”表示退到上一级目录中
(4)链接到同级目录中的网页文件，格式:热点文本表示先退到上一级目录中，然后再进入目标文件所在的目录。
3.指向书签的超链接
在浏览页面时，如果页面篇幅很长，要不断地拖动滚动条，就给用户浏览带来不便。览者需要既可以从头阅读到尾，又可以很快寻找到自己感兴趣的特定内容进行部分阅读时就可以通过书签链接来实现。当浏览者单击页面上的某一“标签”，就能自动跳到网页相应的位置进行阅读，给浏览者带来方便。
书签就是用<a>标签对网页元素作一个记号，其功能类似于用于固定船的锚，所以书签也称锚记或锚点。如果页面中有多个书签链接，对不同目标元素要设置不同的书签名。
名在<a>标签的 name 属性中定义，语法:
<a name="记号名">目标文本附近的内容</a>
指向页面内书签的超链接。要在当前页面内实现书签超链接，需要定义两个标签个为超链接标签，另一个为书签标签。超链接标签的格式:热点文本即单击“热点文本”，将跳转到“记号名”开始的网页元素。
<a href="http://www.baidu.com"/>百度一下</a>
<a href="../register.html">注册</a>
<a href="../login.html">登入</a>
<!--指向书签的超链接-->
<!-- 先设置一个书签，用 <a></a>来标记-->
<a href="#p">段落</a>
<!--指向下载文件的超链接-->
<a href="文件名.zip">下载</a>
<!--指向电子邮件的超链接 -->
<a href="mailto:123456@qq.com">联系我</a>
<!DOCTYPE html>
<html>
<body
<a href="http://www.baidu.com"/>百度一下</a>
<a href="../register.html">注册</a>
<a href="../login.html">登入</a>
<!--指向书签的超链接-->
<!-- 先设置一个书签，用 <a></a>来标记-->
<a href="#p">段落</a>
<!--指向下载文件的超链接-->
<a href="文件名.zip">下载</a>
<!--指向电子邮件的超链接 -->
<a href="mailto:123456@qq.com">联系我</a>
</body>
</html>
注册
登入
2.3图像
2.3.1 网页图像的格式及使用要点
2.3.1.1 常见的网页图像格式
2.3.1.2 使用网页图像的要点
2.3.2图像标签
1.图像的替换文本说明
2.设置图像大小
3.图像的边框
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body><!--图像标签-->
<img src="img/1.2.jpg" title="谢谢" width="350px" height="200px" border="100px"/>
<!-- width代表宽度 height代表高度 title代表名字 border代表图片边框- -->
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body><!--图像标签-->
<img src="img/1.2.jpg" title="谢谢" width="350px" height="200px" border="100px"/>
<!-- width代表宽度 height代表高度 title代表名字 border代表图片边框- -->
</body>
</html>
2.3.3图像超链接
<!--图像超链接-->
<a href="http://www.baidu.com">
<img src="img/微信图片_20240913094852.jpg"/>
</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--图像超链接-->
<a href="http://www.baidu.com">
<img src="img/微信图片_20240913094852.jpg"/>
</a>
</body>
</html>
点击图片跳转链接
2.3.4 设置网页背景图像
在网页中可以利用图像作为背景，但是要注意不要让背景图像影响网页内容的显示，因为背景图像只是起到渲染网页的作用。此外，背景图片最好不要设置边框，这样有利于生成无缝背景。
背景属性将背景设置为图像。属性值为图片的URL。如果图像尺寸小于浏览器窗口那么图像将在整个浏览器窗口进行复制。格式:
<body background="背景图像路径">
设置网页背景图像应注意以下要点:
(1)背景图像是否增加了页面的加载时间，背景图像文件大小不应超过10KB(2)背景图像是否与页面中的其他图像搭配良好。
(3)背景图像是否与页面中的文字颜色搭配良好。
2.3.5 图文排版
<head>
<meta charset="utf-8">
<title>图文混排</title>
</head>
<body>
<h1 align="center">商品描述</h1>
<hr color="#ff0000" size="15px"/>
<img src="../img/a.png" align="right"/>
<p>
立言立文目的在于明确目标、引领方向、凝聚人心、启发行动，科学的世界观、人生观、价值观是文章生命力的内核。<br />
对党员干部而言，只有坚持马克思主义世界观，善于运用辩证唯物主义和历史唯物主义认识、改造世界，才能无私无畏地直面问题。<br />
客观深刻地分析问题，科学务实地解决问题，全面真实地反映问题；只有坚持马克思主义人生观，才能把初心使命镌刻在字里行间。<br />
方寸之间展现大格局、大情怀、大担当；只有坚持马克思主义价值观，才能力戒形式主义官僚主义，彻底摒弃华而不实的文风，确保言之有物、感人肺腑。<br />
</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图文混排</title>
</head>
<body>
<h1 align="center">商品描述</h1>
<hr color="#ff0000" size="15px"/>
<img src="../img/a.png" align="right"/>
<p>
立言立文目的在于明确目标、引领方向、凝聚人心、启发行动，科学的世界观、人生观、价值观是文章生命力的内核。<br />
对党员干部而言，只有坚持马克思主义世界观，善于运用辩证唯物主义和历史唯物主义认识、改造世界，才能无私无畏地直面问题。<br />
客观深刻地分析问题，科学务实地解决问题，全面真实地反映问题；只有坚持马克思主义人生观，才能把初心使命镌刻在字里行间。<br />
方寸之间展现大格局、大情怀、大担当；只有坚持马克思主义价值观，才能力戒形式主义官僚主义，彻底摒弃华而不实的文风，确保言之有物、感人肺腑。<br />
</p>
</body>
</html>
2.4列表
2.4.1 无序列表
<li>无序列表第一项</>
<li>无序列表第二项</>
<li>无序列表第三项</>
2.4.2 有序列表
有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。使用<ol>标签可以建立有序列表，表项的标签仍为<i>，格式:
<oltpe-”符子类型”>
<iitype=”符号类型1”>表项1
<li tpe=”符号类型2”>表项2
</ol>
在浏览器中显示时，有序列表整个表项与上下段文本之间各有一行空白:列表项目向右缩进并左对齐;各表项前带顺序号。
有序的符号标识包括阿拉伯数字、小写英文字母、大写英文字母、小写罗马字母和大写罗马字母。<ol>标签的type属性用来定义一个有序列表的符号样式，在<ol>后指定符号的样式，可设定直到</ol>的表项加重记号。格式:
<oltype = " 1” > 序号为数字
<oltype= " A”>序号为大写英文字母
<oltype = " a” >序号为小写英文字母
<oltype =" 」”>序号为大写罗马字母
<oltype = " ¡” >序号为小写罗马字母
在<li>后指定符号的样式，可设定该表项前的加重几号。在格式上只需把上面的ol改我li。
2.4.3定义列表
定义列表又称为释义列表或字典列表，定义列表不是带有前导字符的列项目，而是一实物以及与其相关的解释。当创建一个定义列表时，主要用到3个HTML 标签:<dl>标<dt>和<dd>标签。可以使用 d创建自定义列表，使用dt和 dd 定义列表中具体的数据瑜一般情况下使用dt定义列表的二级列表项，也可以认为是dd的一个概要信息，使用dd来定义最底层的列表项。
格式：
<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>
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 />
适用面积:91 m'-150 m'<br />产品特色:除螨,HEPA 滤网<br />
线长:充电式(无线)<br/>吸嘴类型:圆毛刷<br/>
适用环境:厨房,地板,地毯,床铺,汽车,沙发,瓷砖,酒店<h />售后服务;海外进口商品不支铸国内联保,无法享受与产地同等售后服务<br />
品牌名称:Dyson<br />商品名称:我家那闺女Dyson V8 ahsolule 无线吸尘器<br/>
产地:马来西亚<br/>商品编号:V8absoluteUS<br /></p>
<li type ="square" style="color:deeppink">商品展示</i></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>过滤系统<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>
</hl>
</body>
</html>
扫一扫
867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
