HTML中常用标签学习示例代码

HTML中<a><img><ul><table><iframe>学习示例代码

<a>标签

1 . <a> 标签用于链接跳转到指定的站外页面

• 代码示例：<a href="https://www.php.cn/">php中文网</a>

2 . <a>标签通过target属性默认在当前窗口中打开

• target=_self
• 案例：

  <a href="https://www.tmall.com/" target="_self">天猫</a>
    <iframe frameborder="5" name="tamll"></iframe>

  3 . <a>标签通过target属性跳转相同的iframe标签中name属性的名字标签
• target="tmall name="tamll"
• 代码示例：

  <a href="https://www.tmall.com/" target="tmall">天猫</a>
    <iframe frameborder="5" name="tamll"></iframe>

  4 . <a>标签通过锚点/书签来实现站内跳转
• href="#Hello" id="Hello"
• 代码示例：

  <a href="#Hello">我要要找到你</a>
    <h2 id="Hello" style="margin-top: 1000px">你发现我了吗？</h2>

  5 . <a>标签快速回到顶部
• 通过空的书签或者锚点 #
• 代码示例：
  <a href="#">回到顶部</a>

<img>标签

• <img>标签是在网页中齐插入图片,可通过结合<a>标签跳转到指定的url地址
• <img>标签两个重要属性： src属性和alt属性
• src属性：表示图片的url地址
• alt属性：表示图片损坏打不开所代替显示的文字
• 代码示例：
  <a href="https://www.taobao.com"><img src="cj.png" alt="插件" /></a>

  <ul>标签

• <ul>标签定义无序列表
• 代码示例：

  <ul>
      <li>笔记本</li>
      <li>收音机</li>
      <li>电脑</li>
    </ul>

• 通过<ul>+<li>+<a>标签一行代码写出导航内容代码
• ul.menu>li.item*5>a{item$}
• 代码示例：

  <ul class="menu">
        <li class="item"><a href="">item1</a></li>
        <li class="item"><a href="">item2</a></li>
        <li class="item"><a href="">item3</a></li>
        <li class="item"><a href="">item4</a></li>
        <li class="item"><a href="">item5</a></li>
    </ul>

• 通过<nav>+<a>标签一行代码写出导航内容代码
• nav>a{item$}*5
• 代码示例：

  <nav>
      <a href="">item1</a>
      <a href="">item2</a>
      <a href="">item3</a>
      <a href="">item4</a>
      <a href="">item5</a>
    </nav>

<table>标签

• <table> 标签定义HTML表格
• 表格标题：<caption></caption>
• 表头:`<thead></thead>
• 表格主体：` <tbody></tbody>
• 表格行：<tr></tr>
• 表格单元格：<td></td>
• 表尾：<tfoot></tfoot>
• 表格中合并列：colspan属性
• 表格中合并行：rowspan 属性
• 示例代码：

  <table width="300" border="2">
     <caption>
       表格标题
     </caption>
     <thead>
       <tr bgcolor="red">
         <td>item1</td>
         <td>item2</td>
         <td>item3</td>
         <td>item4</td>
         <td>item5</td>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td bgcolor="blue" rowspan="2">item1</td>
         <td>item2</td>
         <td>item3</td>
         <td>item4</td>
         <td>item5</td>
       </tr>
       <tr>
         <td>item1</td>
         <td bgcolor="green" colspan="3">item3</td>
       </tr>
       <tr>
         <td>item1</td>
         <td>item2</td>
         <td>item3</td>
         <td>item4</td>
         <td>item5</td>
       </tr>
     </tbody>
     <tfoot>
       <tr>
         <td>item1</td>
         <td>item2</td>
         <td>item3</td>
         <td>item4</td>
         <td>item5</td>
       </tr>
     </tfoot>
   </table>

<iframe>标签

• <iframe>标签是内联框架标签，可以在网页内再创建出一个网页窗口。
• 示例基础使用代码：

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

• 示例后台使用代码：

  <div class="heder">
      <h1>网站管理后台</h1>
      <div>
        <span>admin</span>
        <a href="">退出</a>
      </div>
    </div>
    <ul class="nav">
      <li><a href="demo1.html" target="content">菜单1</a></li>
      <li><a href="demo2.html" target="content">菜单2</a></li>
      <li><a href="demo3.html" target="content">菜单3</a></li>
    </ul>
    <iframe
      srcdoc="<p>请点击左侧菜单栏打开</p>"
      frameborder="0"
      name="content"
    ></iframe>