Html常用标签与经典布局

a标签

属性
- href 规定链接指向的页面的 URL
- target 规定在何处打开链接文档
  - _blank 在新窗口中打开被链接文档
  - _self 默认。在相同的框架中打开被链接文档
跳转到站外 <a href="https://www.php.cn">php.cn</a>

在指定的窗口打开

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

注意这里 target="" 和 name="" 对应的值要一样

站内跳转

<a href="#hello">我要找到你</a>
<h2 id="hello" style="margin-top: 2000px">你发现我了吗?</h2>
<a href="#">回到顶部</a>

注意这里 href="#hello" 和 id="hello" 对应关系 href="#hello" 里要多加一个 #

img标签

属性
- src 规定显示图像的 URL
- alt 图像不显示的时候的替代文本

最常用在点击图片跳转 <a href="https://php.cn"><img src="php.jpg" alt="php.cn" /></a>

列表

有序列表 <ol><li></li></ol> 极少用

无序列表 <ul><li></li></ul>

ul + li + a 小案例

<ul class="menu" style="display: flex; place-content: space-around">
    <li class="item"><a href="">首页</a></li>
    <li class="item"><a href="">教学视频</a></li>
    <li class="item"><a href="">社区问答</a></li>
    <li class="item"><a href="">资源下载</a></li>
    <li class="item"><a href="">关于我们</a></li>
</ul>

nav + a 小案例

<nav class="menu" style="display: flex; place-content: space-around">
    <a href="">首页</a>
    <a href="">教学视频</a>
    <a href="">社区问答</a>
    <a href="">资源下载</a>
    <a href="">关于我们</a>
</nav>

自定义列表主要用在页脚

<dl>
    <dt>地址:</dt>
    <dd>政务新区蔚蓝商务港</dd>
    <dt>邮箱:</dt>
    <dd>admin@php.cn</dd>
</dl>

表格

<table width="300" border="1">
        <!-- 标题 -->
        <caption>
          表格标题
        </caption>
        <!-- 表头 -->
        <thead>
          <tr bgcolor="lightgreen">
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
          </tr>
        </thead>
        <!-- 表格中的所有数据必须放在单元格td的元素中,td元素又必须写到tr中 -->
        <!-- 表格主体 -->
        <tbody>
          <tr>
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
          </tr>
          <!-- 注意2点: 合并操作一定是发生在单元格上td元素,  -->
          <!-- 合并属性colspan,rowspan,一定要写到被合并的起始单元格上 -->
          <tr>
            <td>x5</td>
            <td bgcolor="red" colspan="2">x6</td>
            <!-- colspan  水平方向合并 合并 n 行 当前 tr 包裹的 td 就要少写 n-1 个 -->
            <!-- <td>x</td> -->
            <td>x1</td>
            <td>x2</td>
            <td>x3</td>
          </tr>
          <tr>
            <td>x</td>
            <!-- rowspan 垂直方向合并  合并 n 列  -->
            <td bgcolor="violet" rowspan="2">x</td>
            <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>
            <td>x</td>
            <td>x</td>
          </tr>
        </tbody>
        <!-- 可以有多个tbody表格主体 -->
        <!-- 表尾 -->
        <tfoot>
          <tr>
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
          </tr>
        </tfoot>
      </table>

iframe 标签

在指定的 iframe 窗口打开
- iframe 内联框架 <iframe src="https://tmall.com" width="100%"></iframe>

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

经典布局

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>常用布局标签</title>
  </head>
  <body>
    <!-- 语义化布局标签 -->
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
    <!-- 经典 -->
    <div id="header">header</div>
    <div id="main">main</div>
    <div id="footer">footer</div>
    <!-- id权重太大 -->
    <!-- 改进 -->
    <div class="header">header</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
    <!-- class权重小于id,有利于样式复用 -->
    <!-- 绝大多数程序员还是喜欢 div + class 模式 -->
    <!-- 1. 目前至少90%以上的项目是基于移动端,不依赖或不在乎搜索引擎 -->
    <!-- 2. 完全是个人习惯,主要原因是这种布局的语义化标签太少了,不如语义更明确的class -->
    <!-- 文章头部 -->
    <header>我是文章的头部</header>
    <!-- div + class  -->
    <div class="article-header">我是文章头部</div>
  </body>
</html>

a标签

img标签

列表

表格

iframe 标签

经典布局

相关文章