网页设计与制作基础（HTML5+CSS3）课件 第4章 基本页面排版.pptx

第4章

基本页面排版单击此处添加副标题

目录长度单位与特殊符号01文本标签及样式设置02图片使用03背景设置04

4.1长度单位与特殊符号4.1.1长度单位与颜色设置绝对长度单位绝对单位是一个固定的值,反应了一个真实的物理尺寸。它不会受屏幕大小或者字体的影响。绝对单位主要包含以下几个：in（英寸）：使用最广泛的长度单位1in=2.54cmcm（厘米）mm(毫米）pt（点）：1pt=1/72inpx（像素）：1px=1/96in

4.1长度单位与特殊符号4.1.1长度单位与颜色设置2.相对单位相对单位与绝对单位相比，显示大小是不固定的，它所设置的对象受屏幕分辨率、可视区域、浏览器设置等相关因素影响。常见的相对单位有：em是相对单位，是一个相对长度单位。em单位是指相对于父元素的字体大小。通常1em=16px。

4.1长度单位与特殊符号4.1.1长度单位与颜色设置2.相对单位例如下面的例子中，设置body设置字体大小为62.5%，即10px，设置p字体大小为1.5em，span字体大小为2em，其中p和span这两个都是相对字体大小，相对于它们的父元素。

4.1长度单位与特殊符号body{font-size:62.5%;}p{font-size:1.5em}span{font-size:2em}/style/headbodyp引言span写在开头/span/pspan正文开始/span/body

4.1.2特殊符号的插入在网页文本处理中经常会用到一些特殊符号的输入，这些特殊符号主要包括：空格(nbsp;)通常情况下，HTML会自动删除文本中多余的空格。如果要在文本中插入空格，可以使用“nbsp;”表示空格。换行（/br）版权标记?（copy）大于(gt;)和小于号（lt;）已注册?（reg;）

4.2文本标签4.2.1标题网页中用于设置标题的标签是h1,h2,h3,h4,h5,h6。h1为一级小标题标签，字体最大，h6为级别最小的标签，字体最小。h1到h6级别是按照从大到小的顺序排列的。在网页中，应该尽量设计一个层次清晰，语义合理的结构。

4.2.2段落和引用文本p定义段落文本，在段落文本前后会创建一定距离的空白，即默认的段落格式。引用文本标签包括q和blockquote。两者的区别在于，q标签是行内元素，在内容的开始和结尾处会包有“”，而blockquote是块级元素，默认带有左右40px的外间距，不带“”。从语义上讲，q引用的是小段文字，blockquote引用的是大段的内容块。除此之外，还有cite/cite标签，也可以引用文本，引用的文本将以斜体显示。

下面的例子实现了q，blockquote，cite的应用。bodydivid=allh1现代诗欣赏/h1h2徐志摩专题/h2pq徐志摩是一道永远不停息的生命之泉,/qcite胡适/cite先生如是说。/ph3再别康桥-徐志摩/h3blockquotep轻轻的我走了/pp正如我轻轻的来/pp我轻轻的招手/pp作别西天的云彩/pp那河畔的金柳/pp是夕阳中的新娘/pp波光里的艳影/pp在我的心头荡漾/pp........./p/blockquotep——摘自cite《志摩的诗》/cite/p/div/body引用例子

4.2.3特殊格式标签强调标签em和strong：其中em用于强调文本，其包含的文字用斜体显示，strong标签强调程度更高一些，用粗体显示斜体字标签i：使用i标签定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。

pre标签可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。pre通常用于展示源代码，可以完整的保留tab、空格和换行。下面的例子使用pre标签保留诗句的排版：pre轻轻的我走了正如我轻轻的来我轻轻的招手作别西天的云彩/pre4.2.4预定义标签pre

4.3图片使用4.3.1插入图片图片是网页元素不可或缺的组成部分。网页中常见的图片类型有GIF,JPEG,PNG。在HTML中使用img标签来设置图片。插入图片代码的基本格式为：imgsrc=”images/1.jpg”alt=”风景图”align=”left”/（1）img元素用于向网页中嵌入图片，即从网页中链接图像；（2）src是必需的属性，用于指定图像源，即图像的URL路径，路径可以是相对路径，也可以是绝对路径；（3）alt属性规定图像的替代显示文本，当浏览器中的图片无法正常显示时，在图片位置显示该描述信息。

默认情况下，HTML显示图像原始的大小，如果要设置图像的大小，可以在CSS样式中设置宽度wid