html 的使用2(图像、区块和布局)

图像：

html 图像- 图像标签（ <img>）和源属性（Src）：

在 html 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址

html图像- Alt属性：

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

HTML 图像- 设置图像的高度与宽度：

height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片

区块：

<div>和<span>:

html可以通过 <div> 和 <span>将元素组合起来

html区块元素： 大多数 html 元素被定义为块级元素或内联元素

实例: <h1>, <p>, <ul>, <table>

html 内联元素：

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

html<div>元素：

html <div> 元素是块级元素，它可用于组合其他 html 元素的容器。

<div> 元素没有特定的含义。由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据

HTML <span> 元素：

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性

布局：

大多数网站会把内容安排到多个列中（就像杂志或报纸那样)

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

注：虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具 HTML 布局 - 使用<div> 元素：

div 元素是用于分组 HTML 元素的块级元素

HTML 布局 - 使用表格：

使用 HTML <table> 标签是创建布局的一种简单的方式。

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

注：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

参考：https://www.runoob.com/html/html-images.html