【HTML】2.常用标签

来源：互联网发布：qq飞车剃刀数据编辑：程序博客网时间：2024/05/29 00:34

常用标签

字体标签：<font>
- 例：<font color="red" size="5">This is my HTML page</font>
- 这个标签已经很少使用，因为样式少，html5没有font，现在多用css处理样式。
标题标签：<h1><h2>…..<h6>
- 某个字号和粗体的组合
注释：只有一种，
特殊字符：如< > & 等

&lt;    <   &gt;    >   &amp;   &&quot;  “   &reg;   ®   &copy;  ©&trade; ™   &nbsp;  空格

示例

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title> MyHTML</title></head><body>    <font color="red" size="5">This is My HTML page</font>    <h1>标题1</h1>    <h2>标题2</h2>    <!-- 演示特殊字符 -->    1<2<br>    a&lt;b<br>    c&gt;a<br>    W        S<br><!-- 不管写多少空格或回车，页面只显示一个 -->    W&nbsp;S<!-- 需要多个空格可以写多个这个空格字符，不过用的不多 --></body></html>

这里写图片描述

列表标签

<!-- 演示列表标签      确定列表区域范围，用dl标签     列表内部有上层列表项dt和下层列表项dd(具有缩进效果)-->    <dl>        <dt>我喜欢的水果:</dt>        <dd>芒果</dd>        <dd>西瓜</dd>        <dd>苹果</dd>    </dl>

这里写图片描述

项目符号列表对应的标签

<ol>：数字标签（a A 1 i I），有序<ul>：符号标签（○●■），无序<li>：具体项目内容标签。此标签只在<ol> <ul>中有效。

通过type属性更改项目符号，如果想做出效果更好的列表，就要用到CSS。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title> MyHTML</title></head><body>    <font color="red" size="5">This is My HTML page</font>    <!-- 演示项目符号列表 (都具备缩进的效果)         有序的<ol> 无序的<ul>         其中列表项用<li>    -->    <ol type="A">        <li>有序项目类表</li>        <li>有序项目类表</li>        <li>有序项目类表</li>    </ol>       <ul type="circle">        <li>无序项目类表</li>        <li>无序项目类表</li>        <li>无序项目类表</li>    </ul></body></html>

这里写图片描述

图像标签
<img src="图片源" align="图片排列方式" boder="图片边框" alt="图片说明文字，图片未显示出时显示">

<img src="images/1.jpg" align=”middle” alt="123" border="3"/>

这里写图片描述

<img src="images/2.jpg" align=”middle” alt="123" border="3"/>

没有图片，加载不出来，看效果
图像地图：<map>
- 应用：当要在图像中选取某一部分作为超连接，去链接一个资源的时候，需要在图像上找寻坐标。
表格标签<table>
- 组成：
  - 标题标签：<caption>，给表格命名标题
  - 表头标签：<th>，一般对表格的第一行或者第一列进行格式化（粗体显示），不常用。
  - 行标签：<tr>
  - 单元格标签：<td>，加载在行标签的里面（先有行，在行中在加入单元格）。

<!-- border给表格加框线（有两层，单元格框线和表格框线）     cellspacing单元格之间空格距离     cellpadding单元格内边距     width表格宽度 --><table border="1" cellspacing="0" cellpadding="10" width="300">    <tr>        <td>姓名</td>        <td>年龄</td>        <td>性别</td>    </tr>    <tr>        <td>张三</td>        <td>20</td>        <td>男</td>    </tr></table>

这里写图片描述

小练习：图片库（两行四列）

<!-- colspan合并单元格 -->    <table border="1" cellspacing="0" cellpadding="10">        <tr>            <th colspan="4">图片库</th>        </tr>        <tr>            <td><img src="images/1.jpg" height="170" width="160"></td>            <td><img src="images/1.jpg" height="170" width="160"></td>            <td><img src="images/1.jpg" height="170" width="160"></td>            <td><img src="images/1.jpg" height="170" width="160"></td>        </tr>        <tr>            <td><img src="images/1.jpg" height="170" width="160"></td>            <td><img src="images/1.jpg" height="170" width="160"></td>            <td><img src="images/1.jpg" height="170" width="160"></td>            <td><img src="images/1.jpg" height="170" width="160"></td>        </tr>    </table>

这里写图片描述

表格体标签：<tbody></tbody>
- 表格体标签内部才是<tr><tb>标签
- 作用：可以控制表格分行解析，使包含在表格体内的代码不用在整个表格都解析后一起显示。
- 就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行，当表格内容很大时，比较实用，从而提高下载速度。
- 打开网页内容是分块加载出来的，先显示一部分，最后显示出整个页面，就是因为表格体。

0 0