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>表示最低级别的标题。
2.1.3 换行标签
在HTML中，换行标签用于在文本中插入换行。换行标签是一个自闭合标签，表示文本的换行而不需要结束标签。换行标签的名称是<br>。
- 基本用法：在需要插入水平线的地方插入
<hr>标签。
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 案例
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)链接到同级目录中的网页文件，格式:热点文本
2.2.2.3 指向书签的超链接
(1)指向页面内书签的超链接。要在当前页面内实现书签超链接，需要定义两个标签:一个为超链接标签，另一个为书签标签。超链接标签的格式:<a href="记号名">热点文本</a>
(2)指向其他页面书签的超链接。书签超链接还可以在不同页面间进行链接。当单击书签超链接标题，页面会根据超链接中的href属性所以定的地址，将网页跳转到目标地址中书签名称所表示的内容。要在其他页面内实现书签链接，需要定义两个标签:一个为当前页面的超链接标签，另一个为跳转页面的书签标签。当前页面的超链接标签的语法:<a href="目标文件名 .html #记号名”>热点文本</a>
2.2.2.5 指向电子邮件的超链接
<a href=mailto:E-mail地址>热点文本</a>
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 图像超链接
2.3.4 设置网页背景图像
<body background="img/4c18ee0f68f6bcc62e4d3f13f95f2b3.png"> 这个是设置网页背景
2.3.5 图文混排
2.4 列表
2.4.1 无序列表
无序列表在 HTML 中使用 <ul> 标签来创建，表示一组没有特定顺序的项目。每个列表项使用 <li> 标签来定义。无序列表通常以圆点（或其他样式）作为项目符号显示。
常用的 list-style-type 属性值
disc：默认的圆点项目符号。
circle：空心圆项目符号。
square：方形项目符号。
none：无项目符号。
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>
2.5 综合案例——无线吸尘器说明书
扫一扫
862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
