2.1 文字与段落排版
2.1.1 段落标签
align：设置文字对齐方式（left（左对齐）、center（居中）、right（右对齐）），默认为left
语法：<p align = " left | center | right">文字</p >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p align="left">左对齐</p>
<p align="center">居中对齐</p>
<p align="right">右对齐</p>
<p>默认对齐</p>
</body>
</html>运行结果：
2.1.2 标题标签
语法：<h# align = " left | center | right">标题</h# >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 align="left">一级标题</h1>
<h2 align="center">二级标题</h2>
<h3 align="right">三级标题</h3>
<h4>四级标题</h4>
</body>
</html>运行结果：
2.1.3 换行标签
语法：文字<br/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
第一行
第二行
<p>第一行</p>
<p>第二行</p>
第一行<br />
第二行<br />
</body>
</html>运行结果：
2.1.4 水平线标签
<hr>标签会强制执行一个简单的换行，将导致段落的对齐方式重新回到默认值设置（左对齐）。
语法：<hr align="left | center | right" size="横线粗细" width="横线长度" color="横线色彩" noshada="boshade"/>
属性 size：设定线条粗细，以像素为单位，默认值为2。
属性 width：设定线条长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。绝对值：不随窗口尺寸的改变而改变；相对值：线条长度相对于当前窗口的宽度而定，窗口的宽度改变时，线条的长度也随之增减，默认值为100%，即始终当前窗口。
属性 color：设定线条色彩，默认为黑色。可用相对应英文名或以 “#” 引导的一个十六进制代码来表示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<hr align="left" size="10px" color="#991aad" width="100"/>
</body>
</html>运行结果：
2.1.5 预格式化标签
语法：<pre>文本块<pre/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<pre>
第一段
第 二 段
第三段
</pre>
</body>
</html>运行结果：
2.1.6 缩排标签
语法：<blockquote>文本<blockquote/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
原例：<br />
全球直采:货源保障，全球布局 直采全世界好货。<br />
入仓全检:质检保障，独立自理仓库 坚持入仓全检验,<br />
自营物流:物流保障，自营物流封闭操作 全程可溯。<br />
假货必赔:第三方保障，中国人保正品保险，假货必赔。<br />
<blockquote>
全球直采:货源保障，全球布局 直采全世界好货。<br />
入仓全检:质检保障，独立自理仓库 坚持入仓全检验,<br />
自营物流:物流保障，自营物流封闭操作 全程可溯。<br />
假货必赔:第三方保障，中国人保正品保险，假货必赔。<br />
</blockquote>
</body>
</html>运行结果：
2.1.7 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全球汇商城简介</title>
</head>
<body>
<h1><p align="center">100%正品 十重保障<p/><h1/>
<hr size="5px" color="#000000"/>
<pre>
全球汇成立于2008年,10年来,凭借独创的特卖模式,精选全球正品好货,深度折扣,在
电子商务研究中心2018年6月发布的“2017年度中国网络零售市场数据监测报
告”中,全球汇在B2C市场交易份额方面发展势头良好,继续保持第三位。
唯品会是全球最大的特卖电商,以及中国第三大电商。
<p></p>
全球汇承诺:<br />
全球直采:货源保障，全球布局 直采全世界好货。
入仓全检:质检保障，独立自理仓库 坚持入仓全检验,
自营物流:物流保障，自营物流封闭操作 全程可溯。
假货必赔:第三方保障，中国人保正品保险，假货必赔。
</pre>
</body>
</html>运行结果：
2.2 超链接
创建超链接有利于页面与页面之间的跳转， 它是网页中至关重要的元素。超链接在本质上属于网页的一部分，通过超链接将各个网页链接在一起后，才能真正构成一个网站。
2.2.1 超链接简介
2.2.1.1 超链接的定义
超链接，是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，个文件，甚至是一个应用程序。
超链接除了可链接文本外，也可链接各种媒体，如声音、图像和动画等。当网页中包含超链接时，其外观形式为彩色(一般为蓝色)且带下划线的文字或图像。单击这些文本或图像，可跳转到相应位置。鼠标指针指向超链接时，将变成手形。
2.2.1.2 超链接的分类
根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接和电子邮件超链接
等;根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接和图像映射等。
2.2.1.3 路径
每一个网页都属于同一个地址下，但是，当创建网页时，不可能也不需要为每一个链接都输
人完全的地址。用户只需要确定当前文档同站点根目录之间的相对路径关系 其中,
创建超链接时必须了解链接与被链接文本的路径。在一个网站中，路径通常有3种表示方式:绝对路径、根目录相对路径和文档目录相对路径。
(1)绝对路径。绝对路径就是 URL和物理
路径 。例如，D:\ web \index.html 代表了index.html文件的物理绝对路径;http:// 其中
www.hao123.com/index.html 代表了一个URL绝对路径。
(2)根目录相对路径。根目录相对路径是指从站点根文件夹到被链接文档经过的路径。 以一个正斜杠(/)开始。例如，/support/tips.htm 是文件(tips.htm)的站点根目录相对路径，该文件位
于站点根文件夹的 support 子文件夹中。
(3)文档目录相对路径。它是相对于某个基准目录的路径，以当前文件所在的路径为起点，进行相对文件的查找。相对路径适合于创建网站内部链接。
2.2.2 超链接的应用
2.2.2.1 锚点标签<a>···</a >
<a>标签的语法:<a href="url"tite="指向链接显示的文字" target="窗口名称">文本文字</a>
建立超链接时，href属性定义了这个超链接所指的目标地址，也就是路径。如果要创建
一个不链接到其他位置的空超链接，可用“#”代替 URL。
属性 target:设定链接被单击后所要开始窗口的方式有以下4种:
(1) blank。在新窗口中打开被链接的文档。
(2)self。默认值。在相同的框架中打开被链接的文档。
(3)parent。在父框架集中打开被链接的文档。连接、锚点超链接和电子邮件超销器
(4)top。在整个窗口中打开被链接的文档。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="p"></a>
<a name="h"></a>
<a href="http://www.baidu.com">百度一下</a>
<a href="login.html">登录</a>
<a href="register.html">注册</a>
<a href="#p">段落</a>
<a href="#h">标题</a>
<a href="文件名.zip">下载</a>
<a href="mailto:3236...55@qq.com">联系我</a>
<p></p>
</body>
</html>运行结果：
2.2.2.2 指向其他页面的超链接
创建指向其他页面的超链接，就是在当前页面与其他相关页面之间建立超链接。根据目标文件与当前文件的目录关系，有4种写法。注意，应该尽量采用相对路径。
(1)链接到同一目录内的网页文件，语法:热点文本
<a href="子目录名/目标文件名.html">热点文本</a>
(2)链接到下一级目录中的网页文件，格式:
<a href="子目录名/目标文件名.html">热点文本</a>
(3)链接到上一级目录中的网页文件，语法:
<a href="../目标文件名.html”热点文本</a >
其中,“../”表示退到上一级目录中
(4)链接到同级目录中的网页文件,格式:
<a href="../子目录名/目标文件名.html"> </a>
表示先退到上一级目录中，然后再进入目标文件所在的目录。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="login.html">登录</a>
<a href="register.html">注册</a>
</body>
</html>运行结果：
2.2.2.3 指向书签的超链接
“ # ”→书签名
书签名在<a>标签的 name 属性中定义，语法:
<a name="记号名">目标文本附近的内容</a >
(1)指向页面内书签的超链接。 <a href="记号名" >热点文本</a>
即单击“热点文本”，将跳转到“记号名”开始的网页元素。
(2)指向其他页面书签的超链接。<a href="目标文件名.html #记号名" >热点文本</a>
单击“热点文本”，将跳转到目标页面“记号名”开始的网页元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="p"></a>
书签p
<a name="h"></a>
书签h
<a href="#p">段落</a>
<a href="#h">标题</a>
</body>
</html>运行结果：
2.2.2.4 指向下载文件的超链接
语法：<a href="下载文件名">热点文本</a>
<a href="文件名.zip">下载</a>运行结果：
2.2.2.5 指向电子邮件的超链接
语法：<a href="电子邮箱地址">热点文本</a>
<a href="mailto:3236...55@qq.com">联系我</a>运行结果：
2.3 图像
2.3.1 网页图像的格式及使用要点
2.3.1.1 常见的网页图像格式
（1）GIF。GIF是Internet上应用最广泛的图像文件格式之一， 它的特点是体积小，支持小型翻页型动画，GIF图像最多可以使用256种颜色，最适合制作徽标、图标、按钮和其他颜色、风格比较单一的图片。
（2）JPEG。JPEG是Internet上应用最广泛的图像文件格式之一， JPG格式的文件体积较大，图片质量较佳，通常可以通过压缩JPG文件在图像品质和文件大小之间取得良好的平衡。当网页中对图像的质量有要求时，建议使用此格式。
（3）PNG。
PNG是一种新型的无专利权限的图像格式，兼有GIF和JPG的优点。它的显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像。它可以用来代替GIF格式，同样支持透明层，在质量和体积方面都具有优势，适合在网络中传输。
2.3.1.2 使用网页图像的要点
(1)高质量的图像因其图像体积过大，不太适合网络传输。一般在网页设计中选图像不要超过8KB,如必须选用较大图像时，可先将其分成若干小图像，显示时再通过将这些小图像拼合起来。
(2)网页中的动画并非越多越好，页面中应合理使用动画，太炫酷的动画会分散网站访客的注意力。
(3)如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。相对路径是相对于文件而言的，从相对文件所在目录依次往下直到文件所在的位置。例如，文件
送给电 X.Y与A文件夹在同一目录下，那么文件B.A在目录A下的B文件夹中，它对于文件X.Y
的相对路径则为A/B/B.A 。
2.3.2 图像标签
格式:
<imgsre="图像文件名" alt="替代文字 ite="鼠标悬停提示文字"width="图像宽度"height="图像高度"border="边框宽度"align="环绕方式|对齐方式"/>
需要注意的是，在 width 和height 属性中，如果只设置了其中的一个属性，则另一个属性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置，且其比例和原图大小的比例不一致，那么显示的图像会相对于原图变形或失真。
2.3.2.1 图像的替换文本说明
2.3.2.2 设置图像大小
<img src="img/wjk.jpg" title="王俊凯"/>
<img src="img/wjk.jpg" width="400" height="850"/>运行结果：
2.3.2.3 图像的边框
<img src="img/wjk.jpg" border="20"/>运行结果：
2.3.3 图像超链接
语法：<a href="URL">< img src="图像文件名"/></a>
<a href="http://www.baidu.com">
<img src="img/baidu.png" title="百度一下"/></a>运行结果：
2.3.4 设置网页背景图像
语法：<body background="背景图像路径">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body background="img/baidu.png">
</body>
</html>运行结果：
2.3.5 图文混排
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 align="center">江西应用工程职业学院</h1>
<hr color="#45c4df" size="5"/>
<img src="img/school.png" align="right" width="550"/>
江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。<br />
办学宗旨：以人为本 培养高素质高技能人才<br />
校训：爱国明志 敢为人先<br />
校园精神：诚朴坚卓 达谦智勇<br />
</body>
</html>运行结果：
2.4 列表
2.4.1 无序列表
格式:
<ul type="符号类型">
<li type="符号类型 1">第一个列表项 </li>
<li type="符号类型 2">第二个列表项</li>
</ul>
设置type属性的方法有两种。
<ol>
<li>有序列表第一项</li>
<li>有序列表第二项</li>
</ol>
<ol type="i">
<li>有序列表第一项</li>
<li>有序列表第二项</li>
</ol>运行结果：
2.4.2 有序列表
格式:
<ol type=”符号类型”><li type=”符号类型 1”>表项1
<li type=”符号类型 2”>表项2
......</ol>
在浏览器中显示时，有序列表整个表项与上下段文本之间各有一行空白;列表项缩进并左对齐;各表项前带顺序号。
有序的符号标识包括阿拉伯数字、小写英文字母、大写英文字母、小写罗马字母罗马字母。<ol>标签的type属性用来定义一个有序列表的符号样式，在<ol>后指定符号的样式，可设定直到</ol>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>无序列表第一项</li>
</ul>
<ul type="circle">
<!-- type="square" -->
<li>无序列表第一项</li>
<li type="square">无序列表第二项</li>
<!-- 就近原则 -->
<li>无序列表第三项</li>
</ul>
</body>
</html>运行结果：
2.4.3 定义列表
格式:
<dl>
<dt>....第一个标题项..</dt>
<dd>.....对第一个标题项的解释文字......</dd>
<d>....第二个标题项....</d>
......
<dd>...….对第二个标题项的解释文字......</dd>
</dl>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<dl>
<dt>院校名称：</dt>
<dd>江西应用工程职业学院</dd>
<dt>办学宗旨：</dt>
<dd>以人为本 培养高素质高技能人才</dd>
<dt>校训：</dt>
<dd>爱国明志 敢为人先</dd>
<dt>校园精神：</dt>
<dd>诚朴坚卓 达谦智勇</dd>
</dl>
</body>
</html>运行结果：
2.4.4 嵌套列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<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>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--head begin-->
<div id="head">
<div class="nav">
<ul>
<li>网站首页</li>
<li>文创产品</li>
<li>新闻中心</li>
<li>关于我们</li>
<li class="search">输入商品名称</li>
</ul>
</div>
</div>
<!--head end-->
<!--产品信息 begin-->
<div id="newInfo">
<div class="new_info">产品信息</div>
<div class="new_con">
<img src="images/news1.jpg" />
<h2 class="one">文创万里长城积木</h2>
<p class="two">文创万里长城积木，为孩子搭建一个认识万里长城的桥梁，在拼积木中探索真实的万里长城，在玩乐中成长！</p>
<p class="shadow"></p>
</div>
<div class="new_con">
<img src="images/news2.png" />
<h2 class="one">东方红国潮鼠标垫</h2>
<p class="two">当代消费潮流化审美和中华传统文化的碰撞，用“中国风+时尚”产品，讲好中国故事。国潮文创产品，满足你感受文创的魅力。</p>
<p class="shadow"></p>
</div>
<div class="new_con">
<img src="images/news3.jpg" />
<h2 class="one">文创东方红新年礼盒</h2>
<p class="two">东方红新年礼盒外观典雅大气，采用红色基调，寓意吉祥如意。礼盒上点缀着精致的金色图案，彰显尊贵品质。整体设计既传统又现代，是新年送礼的不二之选。</p>
<p class="shadow"></p>
</div>
</div>
<!--产品信息 end-->
<!--热门推荐产品 begin-->
<div id="exhibition">
<h3 class="title">热门推荐</h3>
<div class="pic">
<div>
<img src="images/img1.png" />
<p class="info">文创水杯</p>
</div>
<div>
<img src="images/img2.png" />
<p class="info">文创挂坠</p>
</div>
<div>
<img src="images/img3.png" />
<p class="info">文创东方红钢笔</p>
</div>
</div>
</div>
<!--热门推荐产品 end-->
<!--footer begin-->
<div id="footer">红色文创产品网站©版权所有 2020-2026 赣ICP备20240301号-1</div>
<!--footer end-->
<!--tree begin-->
<div class="tree">
<img src="images/xfc.png" />
</div>
<!--tree end-->
</body>
</html>运行结果：
扫一扫
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
