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>

结果如下：

未设置对齐方式的图像：

图像在文本中

已设置对齐方式的图像：

图像在文本中

请注意，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>

结果：

带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。

带有图像的一个段落。图像的 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>

结果：

通过改变 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" 文本。

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

6）制作图像链接

<html>

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

</body>
</html>

结果：

您也可以把图像作为链接来使用：

表格：
表格由<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>

结果：

数字列表：

苹果
香蕉
柠檬
桔子

字母列表：

苹果
香蕉
柠檬
桔子

小写字母列表：

苹果
香蕉
柠檬
桔子

罗马字母列表：

苹果
香蕉
柠檬
桔子

小写罗马字母列表：

苹果
香蕉
柠檬
桔子

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>元素可用于为部分文本设置样式属性。

来源：CSDN

作者：残心花

链接：https://blog.csdn.net/weixin_43979090/article/details/104092548

标签

html表格

border

table