a,img,ul,table,iframe标签

HTML(<a>,<img><ul>,<table>,<iframe>)标签的使用

<a>标签

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

• 站外跳转
  <a href="https://www.php.cn/">php中文网</a> —- <a href="https://www.php.cn/">php中文网</a>

• 指定窗口打开
  代码：

通过target属性指向指定的相同iframe标签name属性的名字的窗口打开连接

  <a href="https://www.baidu.com/" class="" target="taobao"></a>
  <iframe src="" frameborder="5" name="taobao "></iframe>

<a>标签的 target 属性规定在何处打开链接文档。
如果在一个 <a>标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。

name 属性规定 iframe 的名称。
iframe 元素的 name 属性用于在 JavaScript 中引用元素，或者作为链接的目标。

• 站内跳转（锚点跳转）
  通过<a>标签与ID选择器实现
  代码示例：
  ```html
  <a href="#maodian" id="back">点击跳转到下面的站内锚点</a>
  <h2 id="maodian" style="margin-top: 2000px;"><a href="#back">点击跳转回去</a></h2>
  <a href="#">点击跳转回网页顶部</a>

---

<iframe>标签

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。即可以在网页内再创建出一个网页窗口。
代码：
<iframe style= "width:90%;height:600px;" src="https://www.bilibili.com/" frameborder="5" ></iframe>
效果：

<iframe style= "width:90%;height:600px;" src="https://www.bilibili.com/" frameborder="5" ></iframe>

---

<img>标签

• 定义：
  img 元素向网页中嵌入一幅图像。

请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

<img>标签有两个必需的属性：src 属性 和 alt 属性。

alt 规定图像的替代文本。
src 规定显示图像的 URL。

代码：

<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.HDvJ3oLBD111PvnSJFmjOQHaKE?w=129&h=180&c=7&r=0&o=5&pid=1.7" alt="迪迦奥特曼" />

• 图片超链接
  可以通过标签来设置超链接，通过href设置所要跳转的链接，然后在a标签下设置标签用来添加图片，当点击图片时就会跳转到目标链接中

代码：

<a href="https://www.baidu.com" class=""><img src="https://tse1-mm.cn.bing" alt="baidu"></a>

---

<ul>标签

ul标签用于定义无序列表。
代码：

   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
    </ul>

效果：

• 1
• 2
• 3

---

<table>标签

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

• colspan属性：用于水平合并单元格
• rowspan属性：用于垂直合并单元格

复杂表格的标签元素：

• 表格标题
  <caption></caption>
• 表格表头
  <thead></thead>
• 表格主体
  <tbody></tbody>
• 表格表足
  <tfoot></tfoot>

代码：

<table style="width: 300px;height:300px;text-align: center;" border="3">
        <caption>表格标题</caption>
        <thead>
            <tr>
                <td>表头1</td>
                <td>表头1</td>
                <td>表头1</td>
                <td>表头1</td>
            </tr>
        </thead>
        <th>表头2</th>
        <th>表头2</th>
        <th>表头2</th>
        <th>表头2</th>
        <tbody>
            <tr>
                <td>x</td>
                <td>x</td>
                <td>x</td>
                <td>x</td>
            </tr>
            <tr>
                <td>x</td>
                <td>x</td>
                <td>x</td>
                <td>x</td>
            </tr>
            <tr>
                <td>x</td>
                <td>x</td>
                <td>x</td>
                <td>x</td>
            </tr>
            <tr>
                <td>x</td>
                <td>x</td>
                <td>x</td>
                <td>x</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">表足</td>
            </tr>
        </tfoot>
    </table>

---

---