第二章网页制作的排版方法

2.1 文章与段落排版

2.1.1段落标签

由于浏览器忽略用户在HTML编辑器中输入的回车符，为了使文字段落排列地整齐，清晰，常用段落标签<p>...<p>实现这一功能。段落标签<p>是HTML格式中特有的段落元素在HTML格式里不需要在意文章每行的宽度，不必担心文字太长了而被截掉，它会根据窗口的宽度自动转换到下一行。

2.1.2 标题标签

在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题，HTML会自动在标题前后添加一个额外的换行。标题标签的格式为：<h #align="left |center |right">标题文字</h#>

属性 align: 设置标题在页面中对齐方式，包括left(左对齐），center(居中）或right(右对齐），默认为left 。

2.1.3 换行标签     

在HTML中，换行标签通常指的是<br>标签（代表“break”的缩写）。这个标签用于在文本中插入一个简单的换行（即，不进行段落的分隔，只是换行），而不是开始一个新的段落。<br>标签是一个空元素，意味着它不需要结束标签。换行标签的语法：

文字<br />

2.1.4 水平线标签 

在HTML中，用于创建水平线的标签是<hr>。这个标签主要用于在文档中插入一条水平线，通常用于分隔文档中的不同部分，如章节、段落或内容块。<hr>标签是一个空元素，意味着它不需要结束标签（即不需要</hr>）。

2.1.5 预格式化标签
在HTML中，用于预格式化的标签是<pre>。<pre>标签会保留文本中的空格、制表符（tab）和换行符，正如文本在源代码中所写的那样显示在页面上。这对于显示程序代码、ASCII艺术或任何需要精确格式控制的文本非常有用。

<pre>标签内的文本通常显示为等宽字体（monospaced font），这有助于保持字符之间的对齐，使得代码或文本更容易阅读。

<pre>标签的基本用法。

 2.1.6 缩排标签

<blockquote>标签通常包含来自另一个源的引用，如书籍、报纸、网站等。它可以帮助读者区分原始内容和引用内容，并且有时浏览器会默认添加一些样式（如引号、缩进或不同的字体）来突出显示这些内容。

标题标签的语法为：

<blockquote>文本</blockquote>

2.2 超链接
2.2.1 超链接简介
HTML（HyperText Markup Language，超文本标记语言）是用于创建网页和网页应用程序的标准标记语言。超链接（Hyperlinks）是HTML中一个非常重要的概念，它允许用户点击一个链接跳转到不同的页面或页面内的某个部分。超链接不仅限于文本，还可以是图片、按钮等元素。

超链接的基本语法

超链接主要通过<a>标签来定义，其基本语法如下：

<a href="URL">链接文本或图片</a>

• href属性指定了链接的目标地址（URL）。它可以是同一网站内的页面地址，也可以是另一个网站的地址。
• 链接文本或图片是用户点击的部分，可以是普通的文本，也可以是<img>标签定义的图片等

   2.2.2 超链接的应用

  1.锚点标签

  在HTML中，锚点（Anchor）标签通常指的是<a>标签的一种特殊用法，它不仅可以用来创建指向其他网页或网站的超链接，还可以用来创建指向同一页面内某个部分的链接。这种在同一页面内部进行跳转的链接，通常被称为页面内的锚点链接。

  2.指向其他页面的超链接

  在HTML中，指向其他页面的超链接是通过<a>标签（anchor标签）实现的。<a>标签的href属性用于指定链接的目标URL。当用户在网页中点击这个链接时，浏览器会加载并显示href属性中指定的URL所指向的页面。

  代码如下：

  <a href="about.html">关于我们</a>

  3.指向书签的超链接 

  在HTML中，指向书签（也称为锚点）的超链接允许用户点击链接后直接跳转到同一页面上的特定部分。要实现这一点，你需要在目标元素上使用id属性作为书签的标识符，并在<a>标签的href属性中使用#后跟该id值来创建指向该书签的链接。

  4.指向下载文件的超链接 

  在HTML中，指向下载文件的超链接与指向网页的超链接类似，但href属性中包含了要下载文件的URL。当用户点击这样的链接时，浏览器会尝试下载指定的文件，而不是在浏览器中打开它（这取决于文件的类型以及浏览器的设置）。

  5.指向电子邮件的超链接 
  在HTML中，指向电子邮件的超链接并不是直接通过<a>标签的href属性中的URL来实现的，因为电子邮件不是一个网页地址。但是，你可以使用mailto:协议来创建一个指向电子邮件的超链接。当用户点击这样的链接时，他们的默认邮件客户端（如Outlook、Gmail的网页版或Apple Mail）会被打开，并创建一个新的邮件，邮件的收件人地址已经预先填写好了。

  .3 图像
  2.3.1 网页图像的格式及使用要点
  1、常见网页图像格式
  JPEG（JPG）
  特点：JPEG格式对色彩的信息保留较好，支持丰富的色彩和渐变效果，适用于照片和其他具有复杂色彩和细节的图像。
  使用要点：JPEG采用有损压缩技术，可以在保证一定质量的前提下减小文件大小，适合在网页上展示高质量的图片，但需要注意避免过度压缩导致图像质量下降。

  PNG
  特点：PNG格式支持无损压缩，适用于需要清晰边缘的图像，如图标、按钮等。PNG-24还支持真彩色和透明度，非常适合需要透明背景的图像。
  使用要点：PNG格式的文件通常比JPEG大，因此在选择使用PNG格式时需要考虑网页的加载速度。对于需要透明背景的图像，PNG是首选格式。

  GIF

  特点：GIF格式最多只能存储256色，因此色彩表现不如JPEG和PNG丰富。但其优势在于可以保存透明背景和动画效果，非常适合用于简单的动画图像或表情包。                                     使用要点：GIF格式的文件通常较小，适合在网络上快速传输。但由于色彩限制，它不适合用于色彩丰富的图像。

  SVG
  特点：SVG是可缩放矢量图形，与像素图像不同，SVG文件的大小不会因放大而失真。它非常适合用于图标、标志等需要清晰呈现的图像。
  使用要点：SVG格式的文件可以通过文本编辑器进行编辑，具有高度的可编辑性和可访问性。在响应式设计中，SVG能够保持图像的清晰度，提升用户体验。
  PSD
  特点：PSD是Photoshop的专用格式，里面可以存放图层信息、通道、遮蔽等多种设计稿。对于前端开发人员来说，可以直接从上面复制文字、获得图片，还可以测量大小距离。
  使用要点：PSD格式主要用于设计过程中的图像编辑和保存设计稿，不建议直接在网页中使用。如果需要在网页上展示PSD格式的图像，需要先将其导出为其他适合网页的格式。

  、使用要点
  选择合适的格式：根据图像的类型和用途选择合适的格式。例如，对于照片和复杂图像，JPEG是较好的选择；对于需要透明背景的图像，PNG或SVG更合适；对于简单的动画或表情包，GIF是不错的选择。

  优化图像：在将图像上传到网页之前，需要对其进行优化以减小文件大小，提高加载速度。这包括调整图像尺寸、压缩图像质量、去除不必要的元数据等。

  遵守版权法规：在使用图像时，需要确保拥有合法的使用权，避免侵犯他人的版权。如果需要使用他人的图像，应事先获得授权或购买合法授权的图像。

  考虑响应式设计：在响应式网页设计中，需要确保图像能够适应不同设备和屏幕尺寸的显示需求。这可以通过使用CSS媒体查询、图片懒加载等技术来实现。

  2.3.2 图像标签 
  HTML中用于插入图像的标签是<img>。这个标签允许你在网页上嵌入图片。<img>标签是一个空元素，意味着它不需要结束标签（即没有</img>）。相反，所有必要的信息都包含在标签的属性中。

  <img>标签的主要属性包括：

  src（必需）：指定图像的URL地址。这是图像文件的路径，可以是相对路径或绝对路径。

  alt（推荐）：为图像提供替代文本。如果图像因为某种原因无法显示（比如网络问题或用户使用了屏幕阅读器），alt属性中的文本将被显示或读出。这对于提高网站的可访问性非常重要。

  width 和 height：设置图像的宽度和高度。这些值可以是像素值（如width="100"）或百分比（如width="50%"）。虽然这些属性不是必需的，但指定它们可以帮助浏览器更好地布局页面，因为浏览器可以在图像加载之前预留出空间。

  title：提供图像的额外信息，当鼠标悬停在图像上时，这些信息会以工具提示的形式显示

  1.图像的替换文本说明 

• 在HTML中，图像的替换文本（Alternative Text）是通过<img>标签的alt属性来提供的。这个属性对于图像无法显示的情况特别重要，因为它为图像提供了替代的文本说明。这些情况可能包括：

  图像文件不存在：如果指定的图像文件路径错误或文件本身不存在，浏览器将不会显示图像，而是显示alt属性中提供的文本。

  网络问题：如果用户的网络连接出现问题，导致图像无法加载，alt文本将作为图像的占位符显示。

  屏幕阅读器：对于使用屏幕阅读器的视障用户来说，alt文本是他们了解图像内容的重要途径。屏幕阅读器会读取alt属性中的文本，以便用户能够理解图像所传达的信息。

  搜索引擎优化（SEO）：搜索引擎无法直接“看到”图像，但它们可以读取alt文本。因此，为图像提供描述性的alt文本有助于搜索引擎理解图像的内容，并可能提高网站在搜索结果中的排名。

  2.设置图像大小

  在<img>标签中使用width和height属性来直接设置图像的大小。

  3. 图像的边框

  在<img>标签的style属性中直接使用CSS的border属性来添加边框。

  2.3.3 图像的超链接

  在HTML中，你可以将图像（<img>标签）包裹在超链接（<a>标签）内，以创建可点击的图像链接。当用户点击图像时，浏览器会导航到你在<a>标签的href属性中指定的URL。

  2.3.4 设置网页背景图像 
  在网页中可以利用图像作为背景，但是要注意不要让背景图像影响网页内容的显示，因为背景图像只是起到渲染网页的作用。此外，背景图片最好不要设置边框，这样有利于生成无缝背景。背景属性将背景设置为图像。属性值为图片的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

  2.3.5 图文混排

  在HTML中实现图文混排，主要涉及到<img>标签（用于插入图像）与文本内容的排列。图文混排可以通过CSS（层叠样式表）来控制图像和文本的相对位置、间距、对齐方式等，以达到预期的视觉效果。

  2.4 列表 
  2.4.1 无序列表
  HTML中的无序列表是通过<ul>（unordered list）标签来定义的，每个列表项则是通过<li>（list item）标签来定义的。无序列表中的项目默认以圆点（bullet points）作为标记，但你可以通过CSS来改变这些标记的样式。

   2.4.2 有序列表

   HTML中的有序列表（Ordered List）是通过<ol>标签来定义的，而列表中的每个项目则是通过<li>（list item）标签来指定的。与无序列表（<ul>）不同，有序列表中的项目会按照数字顺序（默认为1, 2, 3...）自动编号。

  2.4.3 定义列表
  HTML中的定义列表（Definition List）是一种用于展示术语及其定义或描述的列表。它通过使用<dl>（definition list）、<dt>（definition term）和<dd>（definition description）标签来创建。<dl>标签定义了一个定义列表，<dt>标签定义了列表中的术语（或名称），而<dd>标签则提供了该术语的定义或描述。

  2.4.4 嵌套列表 

  HTML中的嵌套列表允许你在一个列表内部创建另一个列表。这对于组织具有层次结构的信息非常有用，比如菜单、目录或任何需要分组的列表项。你可以在一个无序列表（<ul>）或有序列表（<ol>）内部嵌套另一个无序列表或有序列表。