HTML编程(2)-学习

HTMl图像
在HTML中,图像由<img>标签定义。
<img>是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。src指“source”。源属性的值是图像的URL地址。
定义图像的语法是:<img src="url" />
URL指存储图像的位置,如果名为"boat.gif"的图像位于www.w3school.com.cn的images目录中,那么其URL为
http://www.w3school.com.cn/images/boat.gif。
示例:
1)背景图片:

<html>

<body background="/i/eg_background.jpg">

<h3>图像背景</h3>

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>

<p>如果图像小于页面,图像会进行重复。</p>

</body>
</html>

结果如下:

图像背景

gif 和 jpg 文件均可用作 HTML 背景。

如果图像小于页面,图像会进行重复。

2)排列图片:

<html>

<body>

<h2>未设置对齐方式的图像:</h2>

<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>

<h2>已设置对齐方式的图像:</h2>

<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>

<p>请注意,bottom 对齐方式是默认的对齐方式。</p>

</body>
</html>

结果如下:

未设置对齐方式的图像:

图像 HTML编程(2)-学习 在文本中

已设置对齐方式的图像:

图像 HTML编程(2)-学习 在文本中

图像 HTML编程(2)-学习 在文本中

图像 HTML编程(2)-学习 在文本中

请注意,bottom 对齐方式是默认的对齐方式。

3)浮动图像:

<html>

<body>

<p>
<img src ="/i/eg_cute.gif" align ="left"> 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>

<p>
<img src ="/i/eg_cute.gif" align ="right"> 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>

</body>
</html>

结果:

HTML编程(2)-学习 带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。

HTML编程(2)-学习 带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。

4)调整图像大小:

<html>

<body>

<img src="/i/eg_mouse.jpg" width="50" height="50">

<br />

<img src="/i/eg_mouse.jpg" width="100" height="100">

<br />

<img src="/i/eg_mouse.jpg" width="200" height="200">

<p>通过改变 img 标签的 "height" 和 "width" 属性的值,您可以放大或缩小图像。</p>

</body>
</html>

结果:

HTML编程(2)-学习
HTML编程(2)-学习
HTML编程(2)-学习

通过改变 img 标签的 "height" 和 "width" 属性的值,您可以放大或缩小图像。

5)为图片显示替换文本:

<html>

<body>


<p>仅支持文本的浏览器无法显示图像,仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里,"alt" 的文本是“向左转”。</p>

<p>请注意,如果您把鼠标指针移动到图像上,大多数浏览器会显示 "alt" 文本。</p>

<img src="/i/eg_goleft.gif" alt="向左转" />

<p>如果无法显示图像,将显示 "alt" 属性中的文本:</p>

<img src="/i/eg_goleft123.gif" alt="向左转" />

</body>
</html>

结果:

仅支持文本的浏览器无法显示图像,仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里,"alt" 的文本是“向左转”。

请注意,如果您把鼠标指针移动到图像上,大多数浏览器会显示 "alt" 文本。

HTML编程(2)-学习

如果无法显示图像,将显示 "alt" 属性中的文本:

HTML编程(2)-学习

6)制作图像链接

<html>

<body>
<p>
您也可以把图像作为链接来使用:
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

</body>
</html>

结果:

您也可以把图像作为链接来使用: HTML编程(2)-学习

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

<html>

<body>

<h4>这个表格没有边框:</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>这个表格也没有边框:</h4>
<table border="0">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

结果:

这个表格没有边框:

100 200 300
400 500 600

这个表格也没有边框:

100 200 300
400 500 600

2)表格中的表头:

<html>

<body>

<h4>表头:</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th>电话</th>
  <th>电话</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>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

结果:

表头:

姓名 电话 电话
Bill Gates 555 77 854 555 77 855

垂直的表头:

姓名 Bill Gates
电话 555 77 854
电话 555 77 855
3)跨行或跨列的表格单元格:
<html>

<body>

<h4>横跨两列的单元格:</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</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>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

结果:

横跨两列的单元格:

姓名 电话
Bill Gates 555 77 854 555 77 855

横跨两行的单元格:

姓名 Bill Gates
电话 555 77 854
555 77 855
4)表格内的标签:
<html>

<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落。</p>
   <p>这是另一个段落。</p>
  </td>
  <td>这个单元包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元包含一个列表:
   <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

结果:

这是一个段落。

这是另一个段落。

这个单元包含一个表格:
A B
C D
这个单元包含一个列表:
  • 苹果
  • 香蕉
  • 菠萝
HELLO

5)单元格边距:

<html>

<body>

<h4>没有 cellpadding:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellpadding:</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

结果:

没有 cellpadding:

First Row
Second Row

带有 cellpadding:

First Row
Second Row

6)单元格间距

<html>

<body>

<h4>没有 cellspacing:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellspacing:</h4>
<table border="1" 
cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

结果:

没有 cellspacing:

First Row
Second Row

带有 cellspacing:

First Row
Second Row

7)向表格添加背景颜色或背景图像

<html>

<body>

<h4>背景颜色:</h4>
<table border="1" 
bgcolor="red">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>背景图像:</h4>
<table border="1" 
background="/i/eg_bg_07.gif">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

结果:

背景颜色:

First Row
Second Row

背景图像:

First Row
Second Row

8)在表格单元中排列内容:

<html>

<body>

<table width="400" border="1">
 <tr>
  <th align="left">消费项目....</th>
  <th align="right">一月</th>
  <th align="right">二月</th>
 </tr>
 <tr>
  <td align="left">衣服</td>
  <td align="right">$241.10</td>
  <td align="right">$50.20</td>
 </tr>
 <tr>
  <td align="left">化妆品</td>
  <td align="right">$30.00</td>
  <td align="right">$44.45</td>
 </tr>
 <tr>
  <td align="left">食物</td>
  <td align="right">$730.40</td>
  <td align="right">$650.00</td>
 </tr>
 <tr>
  <th align="left">总计</th>
  <th align="right">$1001.50</th>
  <th align="right">$744.65</th>
 </tr>
</table>

</body>
</html>

结果:

消费项目.... 一月 二月
衣服 $241.10 $50.20
化妆品 $30.00 $44.45
食物 $730.40 $650.00
总计 $1001.50 $744.65

HTML列表:
无序列表是一个项目的列表,此列表项目使用粗体圆点进行标记。
无序列表始于<ul>标签。每个列表项始于<li>
有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于<ol>标签,每个列表项始于<li>标签。
示例:
1)不同类型的无序列表:

<html>
<body>

<h4>Disc 项目符号列表:</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 项目符号列表:</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 项目符号列表:</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

</body>
</html>

结果:

Disc 项目符号列表:

  • 苹果
  • 香蕉
  • 柠檬
  • 桔子

Circle 项目符号列表:

  • 苹果
  • 香蕉
  • 柠檬
  • 桔子

Square 项目符号列表:

  • 苹果
  • 香蕉
  • 柠檬
  • 桔子

2)不同类型的有序列表:

<html>
<body>

<h4>数字列表:</h4>
<ol>
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>字母列表:</h4>
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写字母列表:</h4>
<ol type="a">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>罗马字母列表:</h4>
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写罗马字母列表:</h4>
<ol type="i">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

</body>
</html>

结果:

数字列表:

  1. 苹果
  2. 香蕉
  3. 柠檬
  4. 桔子

字母列表:

  1. 苹果
  2. 香蕉
  3. 柠檬
  4. 桔子

小写字母列表:

  1. 苹果
  2. 香蕉
  3. 柠檬
  4. 桔子

罗马字母列表:

  1. 苹果
  2. 香蕉
  3. 柠檬
  4. 桔子

小写罗马字母列表:

  1. 苹果
  2. 香蕉
  3. 柠檬
  4. 桔子

3)嵌套列表:

<html>

<body>

<h4>一个嵌套列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

</body>
</html>

结果:

一个嵌套列表:

  • 咖啡
    • 红茶
    • 绿茶
  • 牛奶

4)定义列表:

<html>

<body>

<h2>一个定义列表:</h2>

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

</body>
</html>

结果:

一个定义列表:

计算机
用来计算的仪器 ... ...
显示器
以视觉方式显示信息的装置 ... ...

列表标签:

标签	描述
<ol>	定义有序列表。
<ul>	定义无序列表。
<li>	定义列表项。
<dl>	定义定义列表。
<dt>	定义定义项目。
<dd>	定义定义的描述。
<dir>	已废弃。使用 <ul> 代替它。
<menu>	已废弃。使用 <ul> 代替它。

HTML块元素:
大多数HTML元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束),
例子:<h1>,<p>,<ul>,<table>
HTML内联元素:
内联元素在显示时通常不会以新行开始,如<b>,<td>,<a>,<img>
HTML<div>元素:
<div>元素是块级元素,它是可用于组合其他HTML元素的容器。
<div>元素,没有特定的含义,除此之外,由于它数于块级元素,浏览器会在其前后显示折行。
如果与CSS一同使用,<div>元素可用于对大的内容块设置样式属性。
<div>元素的另一个常见的用途是文档布局。它取代了使用定义布局的老式方法。
使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。
HTML<span>元素:
<span>元素是内联元素,可用作文本的容器。
<span>元素也没有特定的含义。
当与CSS一同使用时,<span>元素可用于为部分文本设置样式属性。

HTML编程(2)-学习HTML编程(2)-学习 残心花 发布了18 篇原创文章 · 获赞 6 · 访问量 1476 私信 关注
上一篇:Oracle - v$lock查询慢原因分析


下一篇:Linux下运行SuperSocket记录