主页

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

2023-03-02 09:14PM

图像:

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

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论