第二章 网页制作的排版方式0

2.1  文字与段落排版

2.1.1段落标签

属性:center.right.left。 分别对应段落居中靠右靠左,主要格式为<p align="center" >文字</p> 

2.1.2标题标签

标题使用<h1>至<h6>标签进行定义,<h1>定义最大的标题,<h6>定义最小的标题
基本格式为:        <h #align=" left | center | right">标题文字</h#>
属性align:        设置标题在页面中的对齐方式,包括left左对齐 ,center居中,right右对齐
默认为left

2.1.3换行标签

<br/>标签会打断HTML文档中正常段落的行间距和换行。<br/>放在任意一行都会是该行换行,如果放在一行的末尾,可以后面的文字,图像,表格等显示于下一行。

基本格式为:        文字<br/>

2.1.4水平线标签

水平线可以作为段落与段落之间的分隔线,使文档结构清晰,层次分明。当浏览器解释到HTML 文档中的<h >标签时,会在此处换行,并加入一条水平线段。
水平线标签的基本格式为:       <hr align = " left l center l right" size ="横线粗细" width ="横线长度" color="横线色彩"  noshade="noshade"/>
属性size:设定线条粗细,以像素为单位,默认值为2
属性width:设定线段长度,可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。所谓绝对值,是指线段的长度是固定的,不随窗口尺寸的改变而改变。所谓相对值,是指线段的长度相对于窗口的宽度而定,窗口的宽度改变时,线段的长度也随之增减,默认值为100%,即始终当前窗口
属性color:设定线条色彩,默认为黑色。色彩可以用相应的英文名称或以“#”引导的一个十六进制代码来表示

2.1.5预格式化标签

<pre>标签可定义预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代码预格式化标签的语法为:        <pre>文本块</pre>

2.1.6缩排标签

<blockquote>与</ blockquote>之间的所有文本都<blockquote>标签可定义一个块引用,右两边进行缩进,而且有时会使用斜体。也就是会从常规文本中分离出来,经常会在左、右,块引用拥有它们自己的空间。

   2.2  超链接

   2.2.1超链接简介

(1)超链接的定义

超链接是指从一个网页指向一个目标的连接关系,这个目标可以是一个网页,也可以是相同网页不同的位置,还可以是一个图片等

(2)超链接的分类

根据超链接目标文件的不同,超链接可分为页面超链接,锚点超链接和电子邮件超链接等

根据超链接单击对象的不同,超链接可分为文字超链接,图像超链接和图像映射等。

(3)超链接的路径

路径分为三种为绝对路径,根目录相对路径和文档目录相对路径。
绝对路径:就是主页上的文件或目录在硬盘上的真正路径。
根目录相对路径:是指从站点根目录文件夹到链接文档经过的路径。
文档目录相对路径:它是相对于某个基准目录的路径,以当前文件所在的路径为起点,进行相对文件的查找。

锚点标签<a>···</a >

作用: 一种网页内部的超链接(不是网站内部), 在页面中一个位置设置锚点, 可从其他位置返回到这个锚点, 类似与常见的返回顶部的功能.

2.3  图像

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

当图像无法显示时,alt属性提供一个替代文件

2.3.2图像标签    2.3.2.1图像大小的设置  

<img src="img/图片名称"width=”200px“ height=”300px“/>后面为图像大小设置

2.3.2.3图像的替换文本说明

图像也可以作为超链接热点,单击图像则跳转到被连接到的文件或文本。

基本格式:<a href="URL"><img src="图像文件名"/></a>

2.3.3图像超链接

<a href="http://www.baidu.com">

<img src="img/图像”/></a> 

2.3.4设置网页背景图像

语法为 <body background = "背景图像路径">

2.3.5图文混排

图文混排技术是指设置图像与同一行中的文本,图像,插件或其他元素的对齐方式

2.4  列表

(1)无序列表

<ul>
<li></li>
<li></li>
<li></li>
</ul>

1 在<ul>后指定符号的样式
<ul type="disc">       符号为实心圆点
<ul type="circle">       符号为空心圆点
<ul type="square">       符号为方块
<ul type="graph,gif">       符号为指定的图片文件

2 在<li>后指定符号的样式
<li type="disc">       符号为实心圆点
<li type="circle">       符号为空心圆点
<li type="square">       符号为方块
<li type="graph,gif">       符号为指定的图片文件

(2)有序列表

<ol>
<li></li>
<li></li>
<li></li>
</ol>

(3)定义列表

<dl>
<dt>        第一个表题项        </dt>
<dd>        对第一个表题项解释的文字        </dd>
<dd>        第二个表题项        </dd>
<dd>        对第二个表题项解释的文字          </dd>
</dl>

(4)嵌套列表

格式为: 
<ul>
        <li>项目一
          <ul>
                <li>子项目一</li>
                <li>子项目二</li>
          </ul>
        </li>
        <li>项目二</li>
</ul>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值