第七节：图像、盒子模型(区块)、布局-EW帮帮网

第七节：图像、盒子模型(区块)、布局

文章目录

- 第七节：图像、盒子模型(区块)、布局

1、图像

在 HTML 中，图像由标签定义。是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

语法：<img src=“url” alt=“加载失败”> URL 指存储图像的位置 ,可以是绝对位置，可以是相对位置，如：./img/016.png

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。height（高度）与 width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素:

语法: <img src=“pulpit.jpg” alt=“Pulpit rock” width=“304” height=“228”> 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

1.1、图像标签

标签	描述
img	定义图像
map	定义图像地图
area	定义图像地图中的可点击区域

1.1.1、img 标签

标签定义 HTML 页面中的图像。标签有两个必需的属性：src 和 alt。从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。标签的作用是为被引用的图像创建占位符。通过在标签中嵌套标签，给图像添加到另一个文档的链接。

语法: <img src=“smiley-2.gif” alt=“Smiley face” width=“42” height=“42”>

属性：HTML5 中不支持以下属性：align、border、hspace、longdesc、vspace。在 HTML 4.01 中，以下属性：align、border、hspace、vspace 已废弃

属性值描述

$\color{#f00}{align}$ top、bottom、middle、left、right HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的文本来排列图像。

loading eager：立即加载、lazy：延迟加载指定浏览器是应立即加载图像还是延迟加载图像。

alt text 规定图像的替代文本。

$\color{#f00}{border}$ pixels HTML5 不支持。HTML 4.01 已废弃。规定图像周围的边框。

crossoriginNew anonymous、use-credentials 设置图像的跨域属性

height pixels 规定图像的高度。

$\color{#f00}{hspace}$ pixels HTML5 不支持。HTML 4.01 已废弃。规定图像左侧和右侧的空白。

ismap ismap 将图像规定为服务器端图像映射。

$\color{#f00}{longdesc}$ URL HTML5 不支持。HTML 4.01 已废弃。指向包含长的图像描述文档的 URL。

src URL 规定显示图像的 URL。

usemap #mapname 将图像定义为客户器端图像映射。

$\color{#f00}{vspace}$ pixels HTML5 不支持。HTML 4.01 已废弃。规定图像顶部和底部的空白。

width pixels 规定图像的宽度。

属性	值	描述
$\color{#f00}{align}$	top、bottom、middle、left、right	HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的文本来排列图像。
loading	eager：立即加载、lazy：延迟加载	指定浏览器是应立即加载图像还是延迟加载图像。
alt	text	规定图像的替代文本。
$\color{#f00}{border}$	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像周围的边框。
crossoriginNew	anonymous、use-credentials	设置图像的跨域属性
height	pixels	规定图像的高度。
$\color{#f00}{hspace}$	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像左侧和右侧的空白。
ismap	ismap	将图像规定为服务器端图像映射。
$\color{#f00}{longdesc}$	URL	HTML5 不支持。HTML 4.01 已废弃。指向包含长的图像描述文档的 URL。
src	URL	规定显示图像的 URL。
usemap	#mapname	将图像定义为客户器端图像映射。
$\color{#f00}{vspace}$	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像顶部和底部的空白。
width	pixels	规定图像的宽度。

1.1.2、map 标签

标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。中的 usemap 属性可引用中的 id 或 name 属性（取决于浏览器），所以我们应同时向添加 id 和 name 属性。area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。在 HTML5 中, 如果 id 属性在标签中指定, 则你必须同样指定 name 属性.在 XHTML 中，name 属性已经废弃，使用 id 属性替换它。在图像标签中 map 和 area 混搭使用不能分开使用

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="xiaoge-education">
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <title>xiaoge-education</title>

    <style>
        html,
        body {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>


<body>

    <p>点击不通区域看变化</p>

    <img src="./img/16.jpg" width="1500" height="800" alt="Planets" usemap="#planetmap">
    <!-- 
        map 设置宽为1500 分3个区 每个区 500px  高800
    -->
    <map name="planetmap">
        <!-- 第一个区 top:0;left:0;开始规划 left:500,top:800 结束  -->
        <area shape="rect" coords="0,0,500,800" alt="area1" href="01.html">
        <!-- 第二个区 top:0;left:500;开始规划 left:1000,top:800 结束  -->
        <area shape="rect" coords="500,0,1000,800" alt="area2" href="02.html">
        <!-- 第三个区 top:0;left:1000;开始规划 left:1500,top:800 结束  -->
        <area shape="rect" coords="1000,0,1500,800" alt="area3" href="03.html">
    </map>

</body>

</html>

2、盒子模型(区块)

css 盒模型（Box Model）,在html中任何一个元素都可以看作盒子，这里说的盒子与现实不太一样，css中盒子是二维的，盒子由内到外分四个部分：margin(外边距)、border(边框)、padding(内边距)、content(内容)。css通过margin、border、padding三个属性来控制盒子，content是html元素的内容。

2.1、盒子模型介绍

盒子模型知识点：

标准盒模型=内容的实际宽高+内边距+边框+外边距

内容大小

宽度 width

高度 height

就是实际存放内容的区域大小

内边距 padding 内边距不能放置内容,除非定位

内边距单样式写法：

上内边距 padding-top

右内边距 padding-right

下内边距 padding-bottom

左内边距 padding-left

内边距复合样式写法：

padding:0px 0px 0px 0px; 上右下左

padding:0px 0px 0px; 上左&右下

padding:0px 0px; 上&下左&右

padding:0px; 上&右&下&左

边框 border

三个属性值: 大小(width) 样式(style) 颜色(color)

width：边框大小

style:solid 实线、dashed 虚线、dotted 点状线、double 双线

color ：边框颜色

边框的单样式写法:

上边框 border-top

border-top-width 上边框大小

border-top-style 上边框样式

border-top-color 上边框颜色

右边框 border-right

border-right-width 右边框大小

border-right-style 右边框样式

border-right-color 右边框颜色

下边框 border-bottom

border-bottom-width 下边框大小

border-bottom-style 下边框样式

border-bottom-color 下边框颜色

左边框 border-left

border-left-width 左边框大小

border-left-style 左边框样式

border-left-color 左边框颜色

边框的复合样式写法:

border:; 上&右&下&左

外边距 margin 两个盒子之间的距离

外边距单样式写法：

上外边距 margin-top

右外边距 margin-right

下外边距 margin-bottom

左外边距 margin-left

外边距的复合样式写法:

margin:0px 0px 0px 0px; 上右下左

margin:0px 0px 0px; 上左&右下

margin:0px 0px; 上&下左&右

margin:0px; 上&右&下&左

怪异盒子模型

标准盒子模型数值:width+padding+border

标准盒子模型占据位置大小:width+padding+border+margin

怪异盒模型:保持整个盒子数值大小不变,内边距和边框往内容内部延伸

外边距合并现象

元素盒子自适应左右居中:

margin:auto;

外边距合并:

谁的值大就显示那一个

解决方法:

子级元素上外边距用父级元素上内边距替代

父级元素高度必须内容撑开

给父级元素加边框

给父级加一个overflow:hidden; 相当于隔离

2.2、元素类型

大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。内联元素在显示时通常不会以新行开始。HTML

元素是块级元素，它可用于组合其他 HTML 元素的容器。

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性。

元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用元素进行文档布局不是表格的正确用法。

元素的作用是显示表格化的数据。HTML 元素是内联元素，可用作文本的容器元素也没有特定的含义。当与 CSS 一同使用时，元素可用于为部分文本设置样式属性。

元素类型

块级元素标签:

标签

div,ul,ol,li,h1-h6,p,dl,dt,dd

特性

默认继承父级宽度

块级元素单独一行

支持内外边距

内联元素:(像文字)

标签

span,i,em,strong,a

特性

内容撑开宽度,不会默认继承父级宽度

内联元素是依次横排对齐

不支持宽度高度

支持左右外边距,不支持margin:auto;

支持内边距,上下不会撑开父级,也不会改变自身上下位置

注意事项

中间的空格、特殊符号是换行占位字符

文字属性

font-size 字体大小

text-align 文本左右对齐方式

center:居中

left:左对齐

right:右对齐

line-height 行高

总结：

文本标签被布局标签嵌套，内联元素被块级元素嵌套,内联元素不能嵌套块级，p 文本标签不能包裹块元素，a 超链接标签可以包裹块元素。

行内块:

元素类型转换:display

inline 内联元素

block 块级元素

inline-block 行内块

特性

支持宽高

横排显示

支持内外边距,不支持自适应居中

文本对齐方式

3、布局

网页布局对改善网站的外观非常重要。大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。大多数网站可以使用

或者元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。

3.1、使用`div` 元素

div 元素是用于分组 HTML 元素的块级元素。下面的例子使用五个 div 元素来创建多列布局：

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="xiaoge-education">
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <title>xiaoge-education</title>
    <style>
        #wrap {
            width: 500px;

        }

        #header {
            height: 50px;
            background-color: #FFA500;
            text-align: center;
        }

        #menu {
            background-color: #888;
            height: 300px;
            width: 20%;
            float: left;
        }

        #content {
            background-color: #EEEEEE;
            height: 300px;
            width: 80%;
            float: left;
        }

        #footer {
            background-color: #FFA500;
            clear: both;
            text-align: center;
        }
    </style>
</head>

  <div id="wrap">

      <div id="header">
          <h1>主要的网页标题</h1>
      </div>

      <div id="menu">
          菜单<br>
          功能1 <br>
          功能2 <br>
          功能3 <br>
          功能4 <br>
          ......
      </div>

      <div id="content">
          内容在这里</div>

      <div id="footer">
          版权 © runoob.com
      </div>

  </div>

3.2、表格布局

使用 HTML

标签是创建布局的一种简单的方式。大多数站点可以使用

或者

元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="xiaoge-education">
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <title>xiaoge-education</title>

</head>

<body>
    <table width="500" border="0">
        <tr>
            <td colspan="2" style="background-color:#FFA500;">
                <h1>主要的网页标题</h1>
            </td>
        </tr>

        <tr>
            <td style="background-color:#FFD700;width:100px;">
                菜单<br>
                功能1 <br>
                功能2 <br>
                功能3 <br>
                功能4 <br>
                ......
            </td>

            <td style="background-color:#eeeeee;height:200px;width:400px;">
                内容在这里
            </td>
        </tr>

        <tr>
            <td colspan="2" style="background-color:#FFA500;text-align:center;">
                版权 © runoob.com
            </td>
        </tr>
    </table>
</body>

</html>

总结： 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

第七节：图像、盒子模型(区块)、布局