码迷,mamicode.com
首页 > Web开发 > 详细

HTML笔记(四) - 图像、表格、列表、区块

时间:2018-01-28 14:44:49      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:foo   class   div   页脚   数据   列表   通过   单位   apt   

一、图像

1、图像标签(<img>)和源属性(<Src>)

在HTML中,图像由<img>标签定义,<img>是空标签,它只包含属性,并且没有闭合标签。

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

定义图像的语法是:

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

2、Alt属性

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

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

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

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。

3、设置图像的高度和宽度

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

属性值默认单位为像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
4、创建图像映射

<body>

<p>点击太阳或其他行星,注意变化:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>

5、HTML图像标签

标签    描述

<img>  定义图像

<map>  定义图像地图

<area>  定义图像地图中的可点击区域

二、表格

1、HTML表格

标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚

技术分享图片

2、跨行或跨列的表格单元格

<body>

<h4>单元格跨两格:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>

三、列表

1、HTML无序列表

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

无序列表使用 <ul> 标签

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

2、HTML有序列表

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

列表项项使用数字来标记。

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

3、HTML自定义列表

<dl>
  <dt>Coffee</dt>
    <dd>- black hot drink</dd>
  <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

4、HTML列表标签

标签 描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义列表
<dt> 自定义列表项目
<dd> 自定义列表项的描述

四、区块

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

1、HTML区块元素

大多数 HTML 元素被定义为块级元素内联元素

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

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

2、HTML内联函数

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

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

3、HTML<div>元素

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

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

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

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

4、HTML<span>元素

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

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

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

5、HTML分组标签

标签 描述
<div> 定义了文档的区域,块级(block-level)
<span> 用来组合文档中的行内元素,内联元素(inline)

 

HTML笔记(四) - 图像、表格、列表、区块

标签:foo   class   div   页脚   数据   列表   通过   单位   apt   

原文地址:https://www.cnblogs.com/lichaoxiang/p/8370997.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!