2.1 文字与段落排版
2.1.1 段落标签
段落标签<p>是HTML中用于定义文本段落的基本标签，能够帮助组织和格式化文本内容，使网页更加易读和美观。
<p align="left | center | right ">文字</p>
属性 align : 设置段落文字在网页上的对齐方式，包括left (左对齐) 、right （右对齐）、center （居中对齐），默认左对齐。
2.1.2 标题标签
在HTML中，标题标签用于定义不同级别的标题，帮助组织和结构化网页内容。标题标签从<h1>到<h6>，其中<h1>表示最高级别的标题，<h6>表示最低级别的标题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题示例</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
</body>
</html>
2.1.3 换行标签
在HTML中，换行标签用于在文本中插入换行。换行标签是一个自闭合标签，表示文本的换行而不需要结束标签。换行标签的名称是<br>。
基本用法：在需要插入水平线的地方插入<hr>标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>换行标签</title>
</head>
<body>
<h3>联系我们</h3>
联系地址：广东省江门市五一路325号<br />
联系电话：+86-750-3966333<br />
传真电话：+86-750-3073898<br />
网址：www.GDNFU.com<br />
</body>
</html>
2.1.4 水平线标签
在HTML中，水平标签用于创建水平线，以分隔内容或视觉上组织页面。水平标签的名称是<hr>，它是一个自闭合标签。
-
基本用法：在需要插入水平线的地方插入
<hr>标签。
2.1.5 预格式化标签
在HTML中，预格式化标签用于显示预先格式化的文本，保持文本中的空格和换行。预格式化标签的名称是<pre>。
- 基本用法：将需要预格式化的文本放在
<pre>标签内
2.1.6 缩排标签
在HTML中，缩排标签通常是通过使用<blockquote>标签来实现的。<blockquote>标签用于表示引用的内容，通常会在视觉上缩进文本。
-
基本用法：将需要缩排的文本放在
<blockquote>标签内。 -
<blockquote> “生活就像一盒巧克力，你永远不知道你会得到什么。”<br> — 福雷斯特·甘普 </blockquote>
2.1.7 案例
上面的标签都用到了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1 align="center">一级标题<h1>
<h2 align="left">>二级标题<h2>
<h3 align="right">>三级标题<h3>
<p align="center">派大星</p>
软件1班名单
<hr color="#0000ff"/>
班干：xxx aaa ddd <br/>
学生：sss eee www <br/>
<pre>
这是
预格式文件
它保留了 空格和换行
<pre>
<blockquote>昨夜星辰昨夜风，画楼西畔桂堂东。
身无彩凤双飞翼，心有灵犀一点通。
隔座送钩春酒暖，分曹射覆蜡灯红。
嗟余听鼓应官去，走马兰台类转蓬。</blockquote>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全球汇商城简介</title>
</head>
<body>
<h1 align="center">100%正品 十重保障</h1>
<hr color="deeppink"/>
<p>页面内容......</p>
<p>页面内容......</p>
<p>页面内容......</p>
<p>页面内容......</p>
<p>页面内容......</p>
<a name="intro"></a><p> 全球汇成立于2008年,10年来,凭借独创的特卖模式,精选全球正品好货,深度折扣,在电子商务研究中心2018年6月发布的“2017年度中国网络零售市场数据监测报告”中,全球汇在B2C市场交易份额方面发展势头良好,继续保持第三位。<br/>
唯品会是全球最大的特卖电商,以及中国第三大电商。<br />
</p><br />
全球汇承诺：
<blockquote>
全球直采：货源保障，全球布局 直采全世界好货。<br />
入仓全检：质检保障，独立自理仓库 坚持入仓全检验。<br />
自营物流：物流保障，自营物流封闭操作 全程可溯。<br />
假货必赔：第三方保障，中国人保正品保险，假货必赔。<br />
</blockquote>
</body>
</html>
2.2 超链接
2.1.1.1 超链接的定义
超链接是指在网页中创建的链接，允许用户在不同的网页或同一网页的不同部分之间导航。超链接通常使用HTML中的<a>标签来实现，其基本结构如下：
<a href="目标网址">链接文本</a>
2.1.1.2 超链接的分类
超链接可以根据不同的标准进行分类，以下是几种常见的分类方式：
-
根据链接目标的类型：
- 外部链接：指向其他网站或域名的链接。例如，链接到
https://www.example.com。 - 内部链接：指向同一网站内其他页面的链接。例如，链接到
/about.html。
- 外部链接：指向其他网站或域名的链接。例如，链接到
-
根据链接的功能：
- 导航链接：用于网站的导航，帮助用户在不同页面之间移动。
- 锚链接：链接到同一页面的特定部分，通常使用
#符号。例如，<a href="#section1">跳转到第一部分</a>。 - 下载链接：指向文件（如PDF、图片、文档等）的链接，用户点击后可以下载该文件。
-
根据链接的表现形式：
- 文本链接：使用文本作为链接，通常是可点击的文字。
- 图像链接：使用图像作为链接，用户点击图像后会跳转到指定的目标。
- 按钮链接：使用按钮样式的元素作为链接，通常通过CSS样式进行美化。
-
根据链接的状态：
- 活动链接：用户可以点击的链接。
- 禁用链接：虽然显示为链接，但用户无法点击，通常用于表示不可用的功能。
2.2.2 超链接的应用
-
网站导航：
- 超链接用于网站的主导航菜单，帮助用户在不同页面之间快速切换，例如首页、关于我们、服务、联系等页面。
-
内容链接：
- 在文章或博客中，超链接可以指向相关的内容或参考资料，提供更多信息，增强用户体验。例如，链接到相关研究、其他文章或外部资源。
2.2.2.1 锚点标签<a>···</a >
<a href="https://www.example.com">访问示例网站</a>
2.2.2.2 指向其他页面的超链接
创建指向其他页面的超链接，就是在当前页面与其他相关页面之间建立超链接。根据目标文件与当前文件的目录关系，有4种写法。注意，应该尽量采用相对路径。
(1)链接到同一目录内的网页文件，语法:热点文本其中,“目标文件名”是链接所指向的文件。
(2)链接到下一级目录中的网页文件，格式:热点文本(3)链接到上一级目录中的网页文件，语法:
热点文本其中，“../”表示退到上一级目录中
(4)链接到同级目录中的网页文件，格式:热点文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="register.html">免费注册</a>
<a href="login.html">账号登录</a>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>账户登录</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="img/a.png" width="600" height="195" /></td>
</tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" align="right">用户名：</td>
<td><input name="textfield" type="text" id="textfield" value="请输入手机号码" /></td>
</tr>
<tr>
<td width="200" align="right">密码：</td>
<td><input type="password" name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td width="200" align="right"><input type="checkbox" name="checkbox" id="checkbox" />记住用户名</td>
<td><input type="submit" name="button" id="button" value=" 提 交 " /></td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会员注册</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="img/a.png" width="600" height="195" /></td>
</tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" align="right">用户名：</td>
<td><input name="textfield" type="text" id="textfield" value="请输入手机号码" /></td>
</tr>
<tr>
<td width="200" align="right">密码：</td>
<td><input type="password" name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td width="200" align="right">确认密码：</td>
<td><input type="password" name="textfield3" id="textfield3" /></td>
</tr>
<tr>
<td width="200" align="right">性别：</td>
<td><input name="radio" type="radio" id="radio" value="radio" checked="checked" />
男<img src="images/Male.gif" width="22" height="21" align="absmiddle" />
<input type="radio" name="radio" id="radio2" value="radio2" />
女<img src="images/Female.gif" width="23" height="21" align="absmiddle" /></td>
</tr>
<tr>
<td width="200" align="right">出生日期：</td>
<td><input name="textfield4" type="text" id="textfield4" size="12" />
年
<select name="select" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
月
<select name="select2" id="select2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
日</td>
</tr>
<tr>
<td width="200" align="right">业余爱好：</td>
<td><input type="checkbox" name="checkbox" id="checkbox" />
看书
<input type="checkbox" name="checkbox2" id="checkbox2" />
上网
<input type="checkbox" name="checkbox3" id="checkbox3" />
打球</td>
</tr>
<tr>
<td width="200" align="right">头像：</td>
<td height="25"><input type="file" name="fileField" id="fileField" /></td>
</tr>
<tr>
<td width="200" align="right">意见或建议：</td>
<td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="button" id="button" value="提交" />
<input type="reset" name="button2" id="button2" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>
2.2.2.3 指向书签的超链接
(1)指向页面内书签的超链接。要在当前页面内实现书签超链接，需要定义两个标签:一个为超链接标签，另一个为书签标签。超链接标签的格式:<a href="记号名">热点文本</a>
(2)指向其他页面书签的超链接。书签超链接还可以在不同页面间进行链接。当单击书签超链接标题，页面会根据超链接中的href属性所以定的地址，将网页跳转到目标地址中书签名称所表示的内容。要在其他页面内实现书签链接，需要定义两个标签:一个为当前页面的超链接标签，另一个为跳转页面的书签标签。当前页面的超链接标签的语法:<a href="目标文件名 .html #记号名”>热点文本</a>
2.2.2.5 指向电子邮件的超链接
<a href=mailto:E-mail地址>热点文本</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>
<hr color="#ffc0cb"/>
<a name="one">绝句</a>
<p>两个黄鹂鸣翠鸟</p>
<a name="two">登高</a>
<p>风急天高猿啸哀</p>
</body>
</html>
2.3 图像
2.3.1 网页图像的格式及使用要点
(1) GIF GIF是Interet上应用最广泛的图像文件格式之一，是一种索引颜色的图像格式，此格式在网页中使用较多。它的特点体积小，支持小型翻页型动画，GIF图像最多可以使用 256种颜色，最适合制作徽标、图示、按钮和其他颜色、风格比较单一的图片。
(2) JPEG JPEG是Intermet上应用最广泛的图像文件格式之一，适用于摄影或连续色调图像。IPEG文件可以包含多达数百万种颜色，因此JPG格式的文件体积较大，图片质量较佳，通常可以通过压缩JPG文件在图像品质和文件大小之间取得良好的平衡。当网页中对图像的质量有要求时，建议使用此格式。
(3) PNG PNG是一种新型的无专利权限的图像格式，兼有GF和JPG的优点。它的显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像。它可以用来代替CIF格式，同样支持透明层，在质量和体积方面都具有优势，适合在网络中传输。
2.3.2 图像标签
图像标签是在 HTML 中用于插入和显示图像的元素，使用 <img> 标签。该标签是自闭合的，即不需要结束标签。以下是关于 <img> 标签的基本结构、属性及其用法的详细介绍。
基本结构
<img src="图像URL" alt="图像描述">
主要属性
-
src：指定图像文件的 URL。必须提供此属性，否则图像无法显示。
<img src="image.jpg" alt="示例图像"> -
alt：提供图像的替代文本（alternative text），用于描述图像内容，尤其在图像无法加载或用于屏幕阅读器时会显示。这个属性是重要的无障碍功能。
<img src="image.jpg" alt="这是一张美丽的风景图"> -
width：指定图像的宽度，可以使用像素或百分比。
<img src="image.jpg" alt="风景" width="300"> -
height：指定图像的高度，可以使用像素或百分比。
<img src="image.jpg" alt="风景" height="200"> -
title：提供关于图像的附加信息，通常会在鼠标悬停时显示。
<img src="image.jpg" alt="风景" title="风
2.3.3 图像超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body background="img/4c18ee0f68f6bcc62e4d3f13f95f2b3.png">
<img src="img/kunkun.png">
<!--设置图像大小-->
<img src="img/kunkun.png" width="220px" height="300px" title="蔡徐坤"/>
<!--设置图像边框-->
<img src="img/kunkun.png" border="50px">
<!--图片超链接-->
<a href="http://www.baidu.com"><img src="img/kunkun.png" /></a>
</body>
</html>
2.3.4 设置网页背景图像
<body background="img/4c18ee0f68f6bcc62e4d3f13f95f2b3.png"> 这个是设置网页背景
2.3.5 图文混排
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图文混排</title>
</head>
<body>
<h1 align="center">江西应用工程职业学院</h1>
<hr />
<img src="img/school.png" width="350" height="350" align="right" alt="江西应用工程职业学院"/>
江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。<br />
办学宗旨：以人为本 培养高素质高技能人才<br />
校训：爱国明志 敢为人先<br />
校园精神：诚朴坚卓 达谦智勇<br />
</body>
</html>
2.4 列表
2.4.1 无序列表
无序列表在 HTML 中使用 <ul> 标签来创建，表示一组没有特定顺序的项目。每个列表项使用 <li> 标签来定义。无序列表通常以圆点（或其他样式）作为项目符号显示。
常用的 list-style-type 属性值
-
disc：默认的圆点项目符号。 -
circle：空心圆项目符号。 -
square：方形项目符号。 -
none：无项目符号。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无序列表</title> </head> <body> <ul type="符号类型"> <li type="符号类型1">第一个列表项</li> <li type="符号类型2">第二个列表项</li> </ul> </body> </html>
2.4.2 有序列表
有序列表在 HTML 中使用 <ol> 标签来创建，表示一组有特定顺序的项目。每个列表项使用 <li> 标签来定义。有序列表通常以数字或字母作为项目符号显示。
常用的 list-style-type 属性值
-
decimal：默认的数字项目符号（1, 2, 3, ...）。 -
lower-alpha：小写字母项目符号（a, b, c, ...）。 -
upper-alpha：大写字母项目符号（A, B, C, ...）。 -
lower-roman：小写罗马数字项目符号（i, ii, iii, ...）。 -
upper-roman：大写罗马数字项目符号（I, II, III, ...）。 -
none：无项目符号。
2.4.3 定义列表
定义列表在 HTML 中使用 <dl> 标签来创建，通常用于展示术语及其定义。每个术语使用 <dt> 标签定义，而对应的定义使用 <dd> 标签定义。
基本结构
<dl>
<dt>术语 1</dt>
<dd>术语 1 的定义。</dd>
<dt>术语 2</dt>
<dd>术语 2 的定义。</dd>
</dl>
2.4.4 嵌套列表
嵌套列表是在 HTML 中将一个列表放置在另一个列表内部的结构。这可以是无序列表（<ul>）、有序列表（<ol>）或定义列表（<dl>）的组合。嵌套列表通常用于表示层级关系或分类信息。
嵌套无序列表示例:
<ul>
<li>水果
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>胡萝卜</li>
<li>西兰花</li>
</ul>
</li>
</ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>列表</title>
</head>
<body>
<ul type="符号类型">
<li type="符号类型1">第一个无序列表项</li>
<li type="符号类型2">第二个无序列表项</li>
</ul>
<ol oltyoe="1">
<li>有序列表第一项</li>
<li>有序列表第二项</li>
<li>有序列表第三项</li>
</ol>
<dl>
<dt>办学宗旨:</dt>
<dd>以人为本 培养高素质人才</dd>
<dt>校训:</dt>
<dd>爱国明治 敢为人先</dd>
<dt>校园精神:</dt>
<dd>诚朴兼卓 达谦智勇</dd>
</dl>
</body>
</html>
<!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>211324555533</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" >
<hype="square" style="color:deeppink">商品参数</li>
<p siyle="font-size:25px">吸尘器类别:手持式吸尘器<br/>
功率:500 W<br/>
错尘类型:旋风尘盒/尘桶<br/>
吸尘类型:干/湿吸均可<br/>
适用面积:91 m'-150 m'<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.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/><h1>HEPA 过滤系统<br />
吸附微尘 99.97%小至 0.3 微米<br />
米的微尘,减少过敏原回流空至<br />
气中。<br /></h1>
<br />
<br />
<img src="img/canbin.jpg"/>
<blockquote style = " font - size ; 25px">官网地址:https ://shop. dyson. cn/</blockquote>
</hl>
</body>
</html>
扫一扫
1407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
