2.1 文字与段落排版
在网页制作过程中，通过文字与段落的基本排版即可制作出简单的网页。
2.1.1 段落标签
<p> align="left|center|right"</p>，特点1：自动换行。特点2：可设计样式（用CSS）。特点3：美化排版 属性 align：设置段落文字在网页上的对齐方式，以上为 左、中、右。
2.1.2 标题标签
<h1-6>.....</h1-6>，同样可用align属性，标题之间会自动换行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p align="center">
hhhhhh
</p>
<p align="right">作者：一个大帅B</p>
<p align="left">hdhaiussadhifuehausihociawsoi</p>
</body>
</html>
2.1.3 换行标签
<br/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p align="center">
hh<br />
hh<br />
</p>
</body>
</html>
2.1.4 水平线标签
<hr align="left|center|right" size="横线粗细" width="横线长度" color="横线长度" color="横线色彩"/>，值得注意的是色彩代码可以用相应的英文名称或以“#”引导的十六位进制代码
#FF0000 - 红色
#00FF00 - 绿色
#0000FF - 蓝色
#FFFFFF - 白色
#000000 - 黑色
2.1.5 预格式化标签
<pre>文本块</pre>常见应用是展示代码。
2.1.6 缩排标签
<blockquote>文本</blockquote>块引用，浏览器在此标签前后添加了换行和外边框。
2.1.7 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全球汇商城简介</title>
</head>
<body>
<per>这是预格式标签</pre>
<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 路径
有3种路径链接方式：绝对路径、根目录相对路径、文档目录相对路径。
2.2.2 超链接的应用
用<a>标签
2.2.2.1 锚点标签<a>···</a >
语法：<a href="url" title="指向链接的文字" target="窗口名称">文本文字</a>
href 指向路径 url,空链接 属性target设定窗口打开方式有四种：
blank,在新窗口中打开。self，默认值在相同框架中打开。
parent，在父框中打开。top，在整个窗口中打开。
2.2.2.2 指向其他页面的超链接
有四种写法，注意ps：尽量使用相对路径
链接到同一目录的网页文件：<a href="目标文件名.html">xxx</a>
连接到下一级目录：<a href="子目录名/目标文件名,html">xxx</a>
链接上一级目录：<a href="../目标文件名.html">xxx</a>
链接同级目录：<a href="../子目录名/目标文件名.html">xxx</a>
<a href="register.html">注册</a>
<a href="login.html">登入</a>
2.2.2.3 指向书签的超链接
<a name="记号名">文本附近的内容</a>
<a name="P">哈哈哈</a>
<a href="#P">段落</a>
2.2.2.4 指向下载文件的超链接
<a href="下载文件名">下载</a>
2.2.2.5 指向电子邮件的超链接
<a href="mailto:2941489008@qq.com">联系我</a>
2.3 图像
2.3.1 网页图像的格式及使用要点
2.3.1.1 常见的网页图像格式
主要有GIF、JPGE、PNG。
2.3.1.2 使用网页图像的要点
选择合适的图像格式取决于图像的内容、用途和预期的性能目标。例如，对于需要快速加载的网页，可能会选择WebP或PNG格式；而对于需要高保真度的图像，可能会选择JPEG格式。此外，现代网页通常会使用多种图像格式，以平衡图像质量和加载速度。
2.3.2 图像标签
< img src="image_url" alt="description" width="size" height="size" />
src ：必填属性，指定图像的URL。
alt ：可选属性，提供图像的替代文本。当图像无法显示时，替代文本会显示在图像的位置。这对于可访问性非常重要，特别是在使用屏幕阅读器的情况下。
width ：可选属性，指定图像的宽度。
height ：可选属性，指定图像的高度。
2.3.2.1 图像的替换文本说明
<img src="image_url" alt="description" />alt ：必填属性，提供图像的替代文本。
src ：必填属性，指定图像的URL。
2.3.2.2 设置图像大小
< img src="image_url" alt="description" width="size" height="size" />width ：指定图像的宽度，单位可以是像素（px）、百分比（%）、点（pt）或英寸（in）。
height ：指定图像的高度，单位与 width 相同。
2.3.2.3 图像的边框
使用border属性，例子如下：
< img src="path/to/image.jpg" alt="描述图片的内容" border="2px solid black">这将在图像周围添加一个2像素宽、实线、黑色的边框。ps：一般使用CSS，所以这个了解就行。
2.3.3 图像超链接
以下是创建图像超链接的基本步骤：
选择一个图像，并确保它位于 <a> 标签内部。
为 <a> 标签设置 href 属性，指定链接的目标URL。
如果你希望点击图像时，链接在新标签页中打开，可以添加 target="_blank" 属性。
示例：
<a href=" " target="_blank">
< img src="path/to/image.jpg" alt="描述图片的内容" />
</a >
2.3.4 设置网页背景图像
<body background="../img/a.png">
2.3.5 图文混排
主要用img标签的align属性，
left：左对齐 right：右对齐 center：居中
top:顶部对齐 middle：中部对齐 bottom：底部对齐 Ps：一一对应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图文混排</title>
</head>
<body>
<h1 align="center">江西应用工程职业学院</h1>
<hr color="#ff0000" size="15px"/>
<img src="../img/xue.jpg" align="right"/>
<p>
一所很牛的学校<br />
你懂的<br />
</p>
</body>
</html>
2.4 列表
2.4.1 无序列表
<li>第1</li>
<li>第2</li>
<li>第3</li>
2.4.1.1 在<ul>后指定符号的样式
<ul type="disc">1</ul>
<ul type="circle">2</ul>
<ul type="square">3</ul>
<ul type="graph,gif"></ul>
2.4.1.2 在<li>后指定符号的样式
<li type="disc">第1</li>
<li type="circle">第2</li>
<li type="square">第3</li>
2.4.2 有序列表
在HTML中，有序列表（Ordered List）是一种列表类型，其中列表项使用 <li> 标签，并且每个列表项前都有一个数字作为默认的列表标记，表示列表项的顺序。有序列表使用 <ol> 标签来定义。
<ol type="1">
<li type="disc">第1</li>
<li type="circle">第2</li>
<li type="square">第3</li>
</ol>type的取值可选择1，A，a，I,i。分别对应数字，大小写，英文/罗马字母。
2.4.3 定义列表
HTML中，定义列表（Description List）是一种用于将术语和其定义放在一起的列表类型。定义列表使用 <dl> 标签来定义，其中术语使用 <dt> 标签，定义使用 <dd> 标签。
<dl>
<dt>苹果</dt>
<dd>一种水果，通常为红色或绿色。</dd>
<dt>香蕉</dt>
<dd>另一种水果，通常是黄色的，长而弯曲。</dd>
</dl>
2.4.4 嵌套列表
其实就是有序，无序，定义列表的混合应用。
2.5 综合案例——无线吸尘器说明书
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无线吸尘器说明书</title>
</head>
<body>
<hr color="deeppink"/>
<h1 align="center">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 />
适用面积:91m²-150 m²<br />
产品特色:除螨,HEPA滤网<bt/>
线长:充电式(无线)<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.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 >
<div style="font-size: 25px;font-weight: bold;">
<img src="../img/left.JPG" style="float: left" align=" left" width =" 350" height =" 290" />
<hl style="float: left">
<br /><br />
HEPA过滤系统<br />
吸附微尘 99.97%小至0.3 微米<br />
米的微尘,减少过敏原回流空至<br />气中。<br /></h1>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br />
<img src="../img/canbin.jpg"/>
<blockquote style="font-size: 25px;">官方地址：<a href=" ">
https://shop.dyson.cn/</a >
</blockquote>
</hl>
</ul>
</body>
</html>
扫一扫
728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
