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 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>

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

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

<a>标签

<img>标签

<ul>标签

<table>标签

<iframe>标签