HTML常用标签的用法示例

HTML常用标签的用法示例

a 标签-超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签

HTML 链接语法

链接的 HTML 代码很简单。它类似这样：

<a href="url">Link text</a>

示例

<a href="https://www.php.cn/">PHP中文网</a>

上面这行代码显示为：PHP中文网

HTML 链接 - target 属性

属性	值	描述
target	_blank	在新窗口中打开
target	_parent	使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与 _self 等效
target	_self	在本窗口打开，默认值
target	_top	假如你的页面被固定在框架之内，用该属性可以跳出框架
target	framename	指定框架中打开framename为框架名
target	#标记	对应跳转到锚点（也叫书签）<a name="标记">标记</a>

img 图片标签

图像标签（<img>）和源属性（Src）

在 HTML 中，图像由 <img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />

替换文本属性（Alt）

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

<img src="php.gif" alt="php" />

当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

ol、ul 有序和无序列表标签

搭配<li>列表项</li>标签使用

ol 有序列表

<ol>
   <li>牛奶</li>
   <li>咖啡</li>
   <li>柠檬茶</li>
</ol>

ul 无序列表

<ul>
   <li>牛奶</li>
   <li>咖啡</li>
   <li>柠檬茶</li>
</ul>

上面两部分代码显示为：

table 表格标签

标签	名称	说明
<table></table>	表格标签	必须
<caption></caption>	表格标题	标题
<thead></thead>	表格表头	表头
<tbody></tbody>	表格表体	一个table可以有多个表体
<tr></tr>	行	包含单元格
<td></td>	单元格	最小组成部分
<tfoot></tfoot>	表格表尾	表格底部

代码示例

<table width="600" border="1">
      <!-- 标题 -->
      <caption>
        表格标题
      </caption>
      <!-- 表头 -->
      <thead>
        <tr bgcolor="lightgreen">
          <td>表头项目1</td>
          <td>表头项目2</td>
          <td>表头项目3</td>
          <td>表头项目4</td>
          <td>表头项目5</td>
          <td>表头项目6</td>
        </tr>
      </thead>
      <!-- 表格中的所有数据必须放在单元格td的元素中,必须写到tr中 -->
      <!-- 表格主体 -->
      <tbody>
        <tr>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
        <tr>
          <td>x</td>
          <td>x</td>
          <!-- 从表体2行3列开始水平方向合并3列 -->
          <td bgcolor="red" colspan="3">x</td>
          <!-- <td>x</td>1
          <td>x</td>2 -->
          <td>x</td>
        </tr>
        <tr>
          <td>x</td>
          <!-- 在第3行进行垂直方向/行方向合并2个单元格 -->
          <td bgcolor="violet" rowspan="2">x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
        <!-- 注意2点: 合并操作一定是发生在单元格上td元素,  -->
        <!-- 合并属性colspan,rowspan,一定要写到被合并的起始单元格上 -->
        <tr>
          <td>x</td>
          <td>x</td>
          <!-- 这一个单元格应该被注释或删除 -->
          <!-- <td>x</td> -->
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
      </tbody>
      <!-- 可以有多个tbody表格主体 -->
      <!-- 表尾 -->
      <tfoot>
        <tr>
          <td bgcolor="yellow" colspan="6">表尾，备注...</td>
        </tr>
      </tfoot>
    </table>

上方代码显示为：

iframe 内联框标签

定义和用法

iframe 元素会创建包含另外一个文档的内联框架（即行内框架），在不改变当前网址的情况下在页面中打开另外一个页面。

代码示例

<h2><a href="https://taobao.com" target="taobao">淘宝</a></h2>
<iframe srcdoc="<em>点击上面的链接打开</em>" frameborder="1" width="400" height="400" name="taobao"></iframe>

上方代码显示为：

上图为点击“淘宝”链接前

上图为点击“淘宝”链接后