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

仔仔牛奶推销员

已于 2024-09-19 10:02:10 修改

阅读量1k

点赞数 30

分类专栏：网页设计与制作教程文章标签： html 前端 java javascript

于 2024-09-18 18:02:13 首次发布

本文链接：https://blog.csdn.net/2302_81015092/article/details/142252028

版权

网页设计与制作教程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

2.1 文字与段落排版

2.1.1 段落标签

<p>标签用于定义段落，可以通过属性设置对齐方式（如、、）。align center left right

<p align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>

2.1.2 标题标签

<h1>到标签用于定义标题，是最高级别，通常用作主标题，到依次表示子标题。<h6><h1><h2><h6>

<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>

2.1.3 换行标签

<br/>标签用于在文本中插入换行，通常在段落内使用。

<p>
江西应用工程职业学院<br/>
校训
</p>

2.1.4 水平线标签

<hr/>标签用于插入水平线，和属性可以用来调整颜色和线条的厚度。colorsize

<hr/>
<hr color="#ffc0cb"/>
<hr size="20px" color="#ffc0cb"/>

2.1.5 预格式化标签

<pre>标签用于显示预格式化文本，保留空格和换行，通常用于代码示例。

<pre>
          江西应用工程职业学院
               校训
</pre>

2.1.6 缩排标签

<blockquote>标签用于引用块级文本，通常用于引用其他人的话或文献。

<blockquote>
  这是一个引用的文本。
</blockquote>

2.2 超链接

超链接是可以点击的链接，通常用于导航到其他页面或资源

2.1.1 超链接的定义

超链接是可以点击的链接，通常用于导航到其他页面或资源。

2.1.1.2 超链接的分类

<a href="URL">链接文本</a>用于创建超链接，属性定义链接目标。href

2.1.1.3 路径

使用相对路径或绝对路径来链接

2.2.2 超链接的应用

<a href="http://www.baidu.com">百度一下</a>

2.2.2.1 锚点标签

用于页面内跳转，例如。<a href="#section">跳转到某部分</a>

<a href="#section"/a>

2.2.2.2 指向其他页面的超链接

如指向当前目录下的登录页面。<a href="login.html">登录</a>

<a href="login.html">登录</a>
<a href="register.html">注册</a>

2.2.2.3 指向书签的超链接

<a href="#p">段落</a>

2.2.2.4 指向下载文件的超链接

<a href="文件名.zip">下载</a>用于下载文件。

<a href="文件名.zip">下载</a>

2.2.2.5 指向电子邮件的超链接

使用协议，格式如。mailto:<a href="mailto:email@example.com">联系我</a>

<a href="mailto:2437490319@qq.com">联系我</a>

2.3 图像

2.3.1 网页图像的格式及使用要点

2.3.1.1常见的网页图像格式

常见格式包括 GIF、PNG 和 JPEG，分别适用于不同的用途（如动画、透明背景、照片等）。

GIF：适用于简单动画。
PNG：支持透明背景，适合图标。
JPEG：适用于照片，压缩比高

2.3.1.2 使用网页使用网页图像的要点

确保图像的加载速度，优化文件大小

2.3.2 图像标签

<img src="图片地址" title="图片说明"/>用于插入图像，属性指定图像路径，提供描述。srctitle

<img src="img/1.1.jpg" title="名字"/>

2.3.2.1 图像的替换文本说明

使用属性来提供替换文本。alt

<img src="img/1.1.jpg" alt="替代文本" title="名字"/>

2.3.2.2 设置图像的大小

<img src="img/1.1.jpg" width="100" height="900"

<img src="img/1.1.jpg" width="100" height="900"/>

2.3.2.3 图像的边框

<img src="img/1.1.jpg" style="border: 5px solid black;"/>

2.3.3 图像的超链接

可以将图像包裹在标签内，实现点击图像跳转。<a>

<a href="http://www.baidu.com">
  <img src="img/baidu.jpg" title="百度一下"/>
</a>

2.3.4 设置网页图像背景

使用来设置页面背景。<body background="图片地址">

<body background="img/baidu.jpg">

2.4 列表

2.4.1 无序列表

<ul>
  <li>无序列表第一项</li>
  <li>无序列表第二项</li>
  <li>无序列表第三项</li>
</ul>

2.4.1.1 在<ul>后指定符号的样式

使用标签定义无序列表，标签表示列表项，属性可设置项目符号样式。<ul><li>type

<ul type="circle">
  <li>无序列表第一项</li>
  <li>无序列表第二项</li>
  <li>无序列表第三项</li>
</ul>

2.4.1.2 在lil>后指定符号的样式

<ul>
  <li>无序列表第一项</li>
  <li type="square">无序列表第二项</li>
  <li>无序列表第三项</li>
</ul>

2.4.2 有序列表

使用标签定义有序列表，默认数字顺序，属性可自定义编号样式（如字母或罗马数字）。<ol>type

<ol>
  <li>有序列表第一项</li>
  <li>有序列表第二项</li>
  <li>有序列表第三项</li>
</ol>

<ol type="i">
  <li>有序列表第一项</li>
  <li>有序列表第二项</li>
  <li>有序列表第三项</li>
</ol>

2.4.3 定义列表

使用标签定义定义列表，定义术语，定义术语的描述。<dl><dt><dd>

<dl>
  <dt>学院名称：</dt>
  <dd>江西应用工程职业学院</dd>
</dl>

2.4.4 嵌套列表

<ul>
  <li>第一项
    <ul>
      <li>子项一</li>
      <li>子项二</li>
    </ul>
  </li>
  <li>第二项</li>
</ul>

这就是我的第二章笔记和总结，有不足可以一起讨论。