《html — 图像》

1.图像

  在 HTML 中,图像由<img> 标签定义。

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

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

语法:

<img src="url" alt="some_text">

  URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中,那么其 URL 为 http://www.runoob.com/images/pulpit.jpg

alt属性:

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

<img src="boat.gif" alt="Big Boat">

  在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

设置图像的高度和宽度:

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

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

  提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。

2. 表格

  表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

实例:

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

  在浏览器显示如下::

  《html — 图像》

表格边框属性:

  border就是让表格带有边框。

表格表头:

  表格的表头使用 <th> 标签进行定义。

  大多数浏览器会把表头显示为粗体居中的文本:

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

  在浏览器显示如下:

  《html — 图像》

 

3. 列表

3.1 html无序列表

  无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

  无序列表使用 <ul> 标签:

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

  浏览器显示如下:

  • Coffee
  • Milk

3.2 有序列表

  同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

  列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

  浏览器中显示如下:

  1. Coffee
  2. Milk

4. 区块

  <div>:定义了文档的区域,块级 (block-level)

  <span>:用来组合文档中的行内元素, 内联元素(inline)

4.1 div元素  

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

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

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

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

4.2 span元素 

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

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

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

 

5.布局

 

《html — 图像》

上一篇:jQuery插件实现多图片和单图片上传


下一篇:mybatis中app的查询语句