HTML学习02
学习参考来自 https://www.w3school.com.cn/
图像
| 标签 | 描述 |
|---|---|
<img> |
定义图像。 |
<map> |
定义图像地图。 |
<area> |
定义图像地图中的可点击区域。 |
实例：
<p>
一幅图像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅动画图像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>
<p>
来自另一个文件夹的图像：
<img src="/i/ct_netscape.jpg" />
</p>
<p>
来自 W3School.com.cn 的图像：
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
</p>
标签<img>和源属性Src
在 HTML 中，图像由 <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。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
提示：假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
背景图片
<body background="/i/eg_background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
</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>
浮动图像
<p>
<img src ="/i/eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
<img src ="/i/eg_cute.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>
图像尺寸
<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>
图像映射
<p>请点击图像上的星球，把它们放大。</p>
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
把图像转换为图像映射服务器端
<!DOCTYPE html>
<html>
<body>
<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>
<a href="/example/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />
</a>
</body>
</html>
img 属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | top bottom middle left right | 不推荐使用。规定如何根据周围的文本来排列图像。 |
| border | pixels | 不推荐使用。定义图像周围的边框。 |
| height | pixels**% | 定义图像的高度。 |
| hspace | pixels | 不推荐使用。定义图像左侧和右侧的空白。 |
| ismap | URL | 将图像定义为服务器端图像映射。 |
| longdesc | URL | 指向包含长的图像描述文档的 URL。 |
| usemap | URL | 将图像定义为客户器端图像映射。 |
| vspace | pixels | 不推荐使用。定义图像顶部和底部的空白。 |
| width | pixels**% | 设置图像的宽度。 |
JPEG 还是 GIF？
如果图像的来源或者你的工具软件更倾向于某一种格式，您可能只能使用 JPEG 或者 GIF 图像中的一种。现在，这两种格式都得到了浏览器的广泛支持，所以不会存在用户能否浏览的问题。
然而，我们还是建议您使用一定的工具去创建或者转换这两种格式，以充分利用它们各自的功能。例如，可以把 GIF 的透明特性应用在图标和小的装饰符号上。而利用 JPEG 来压缩那些较大的颜色丰富的图像，以加快下载速度。
表格
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<h4>两行三列：</h4>
<table border="1">
<tr>
<th>100</th>
<th>200</th>
<th>300</th>
</tr>
<tr>
<td>40000</td>
<td>50000</td>
<td>60000</td>
</tr>
<tr>
<td>70000</td>
<td>80000</td>
<td>90000</td>
</tr>
</table>
<h4>带有很粗的边框：</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
-
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
<table border="1"> -
表头使用
<th>标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。 -
空单元格问题，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。实验证明现在的Chrome、Edge浏览器都已经修复了这个bug，不在需要使用
占位符的方式解决这个问题了。
-
没有边框，没有border属性，或
<table border="0"> -
<th>表头、垂直表头<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> -
<caption>表格标题<h4>这个表格有一个标题，以及粗边框：</h4> <table border="6"> <caption>我的标题</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> -
表格背景颜色（table的bgcolor属性）、背景图片（table的background属性）
背景图片大小不够的时候，会一块一块的拼接起来。
<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>
-
单元格背景颜色（tr的bgcolor属性）、背景图片（tr的background属性）
-
th / td 属性align，取值left、right、center，调整的是单元格内容的位置。
th的align默认center；tr的align默认left。
table的align调整的是整个表格在页面中的位置。
-
table的frame属性，取值box、above、below、hsides、vsides
跨行或跨列的表格单元格
th / td 的 rowspan、colspan属性。
<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>
使用 table的cellpadding属性来创建单元格内容与其边框之间的空白
<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>
使用table的cellspacing属性增加单元格之间的距离
<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>
表格标签
| 表格 | 描述 |
|---|---|
<table> |
定义表格 |
<caption> |
定义表格标题。 |
<th> |
定义表格的表头。 |
<tr> |
定义表格的行。 |
<td> |
定义表格单元。 |
<thead> |
定义表格的页眉。 |
<tbody> |
定义表格的主体。 |
<tfoot> |
定义表格的页脚。 |
<col> |
定义用于表格列的属性。 |
<colgroup> |
定义表格列的组。 |
列表
<h4>一个无序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
-
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
-
分为：无序列表、有序列表、定义列表
-
定义列表
定义列表不仅仅是一列项目，而是项目及其注释的组合。
定义列表以
<dl>标签开始。每个定义列表项以<dt>开始。每个定义列表项的定义以<dd>开始。<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
不同类型的无序列表 ul的type属性
取值：disc、circle、square
不同类型的有序列表，ol的type属性
取值：A、a、I、i、无type属性（等效于type=""）。
嵌套
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
列表标签
| 标签 | 描述 |
|---|---|
<col> |
定义有序列表。 |
<ul> |
定义无序列表。 |
<li> |
定义列表项。 |
<dl> |
定义定义列表。 |
<dt> |
定义定义项目。 |
<dd> |
定义定义的描述。 |
