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

最新推荐文章于 2024-10-01 16:34:30 发布

等雨见

最新推荐文章于 2024-10-01 16:34:30 发布

阅读量597

点赞数 6

文章标签：前端

本文链接：https://blog.csdn.net/2402_87227376/article/details/142257304

版权

2.1 文字与段落排版

2.1.1 段落标签

<p align></p> align:设置对齐方式

<p align="center">......</p> 居中

<p align="left">......</p> 右

<p align="right">......</p> 左

2.1.2 标题标签

<h1> </h1> 一级标题，其中可以有多个二级标题

<h2> </h2> 二级标题，同上

<h3> </h3> 三级标题，同上

..........

标题同样有对齐方式

<h1align="center">一级标题</h1> 居中

<h2align="left">二级标题</h2> 右

<h3align="right">三级标题</h3> 左

2.1.3 换行标签

p标签中换行用<br/>标签

例子:{ <p>

江西<br/>

萍乡

</p>}

2.1.4 水平线标签

<hr/>

2.1.5 预格式化标签

<pre>标签中的文本通常会保留空格和换行，文本也会呈现宽字体

例子 { <pre>

悟已往之不见，

知来者之可追。

</pre>}

2.1.6 缩排标签

<blockquote>标签默认有一个边框，一般用来引入名人名言，比<p>标签

2.1.7 案例

2.2 超链接

2.1.1 超链接简介

2.1.1.1 超链接的定义

2.1.1.2 超链接的分类

根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接和电子邮件超链接等;根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接和图像映射等。

2.1.1.3 路径

URL--统一资源定位器，指的就是每一个网站都具有的独立的地址。同一个网站下的每一个网页都属于同一个地址下，但是，当创建网页时，不可能也不需要为每一个链接都输人完全的地址。用户只需要确定当前文档同站点根目录之间的相对路径关系。

2.2.2 超链接的应用

2.2.2.1 锚点标签

2.2.2.2 指向其他页面的超链接

href后面可以填写链接"http:/...com”亦或者html形式去的内部写的超文本代码链接(形式如上所示，)

2.2.2.3 指向书签的超链接

定义书签，给它打标签，然后跳转到打标签的位置(书签是一种标记)
<a name="p">..</a>:给这个代码打上p“标签”，之后使用..告诉浏览器我要转到书签去，转到p这个书签去

2.2.2.4 指向下载文件的超链接

2.2.2.5 指向电子邮件的超链接

2.3 图像

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

2.3.1.1 常见的网页图像格式

GIF 动图 JPEG 体积大图片质量佳 PNG 兼有gif jpeg的优点

2.3.1.2 使用网页图像的要点

图片体积要小方便传播

2.3.2 图像标签

用<img>标签在网页中添加图像

2.3.2.1 图像的替换文本说明

有时，由于网速过慢或者用户在图片还没有下载完全就单击了浏览器的停止键，在浏览器中就看不到要看到图片，这时替换文本说明就十分有必要了。替换文本说明应该简洁而清晰，能为用户提供足够的图片说明信息，在无法看到图片的情况下也可以了解图片的内容信息。

2.3.2.2 设置图像大小

2.3.2.3 图像的边框

2.3.3 图像超链接

2.3.4 设置网页背景图像

background放body里面

2.3.5 图文混排

2.4 列表

2.4.1 无序列表

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

在<ul>后指定符号的样式，可设定直到</ul>的加重符号。例如
符号为实心圆点●
<ul type =" disc" >符号为实心圆点
<ul type=" circle" >符号为空心圆点
<ul type= " square" >符号为方块

<ul img src = " graph , gif" > 符号为指定的图片文件，

2.4.1.2 在<li>后指定符号的样式

<li type =" disc" >符号为实心圆点
<li type=" circle" >符号为空心圆点
<li type= " square" >符号为方块

<li img src = " graph , gif" > 符号为指定的图片文件，

2.4.2 有序列表

<ol type="i">
            <li>有序列表1</li>
            <li>有序列表2</li>
            <li>有序列表3</li>
        </ol>v

2.4.3 定义列表

<dl>
            <dt>院校名称：江西应用工程职业学院</dt>
            <dt>办学宗旨：以人为本 培养高素质高技能人才</dt>
            <dt>校训：爱国明志  敢为人先</dt>
            <dt>校园精神：诚朴坚卓  达谦智勇</dt>
        </dl>