HTML常用标签

HTML文档结构

文档类型

<!DOCTYPE html>
或
<html>

设置视口：可视窗口

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

文档主体（用户关注的焦点）

<body></body>

常用布局标签

经典模式

<div id="header">header</div>
    <div id="main">main</div>
    <div id="footer">footer</div>

常用模式

<div class="header">header</div>
    <div class="main">main</div>
    <div class="footer">footer</div>

语义布局

<header>header</header>
    <main>main</main>
    <footer>footer</footer>

div + class常用布局更符合开发人员布局习惯，同时可以精简标签。如：

<div class="article-header">我是文章头部</div>

表达更清晰，更容易理解。

链接与图像

跳到站外

<a href="https://www.jd.com">京东</a>

指定窗口

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

站内跳转（锚点）

<a href="#hello">我要找到你</a>

图片

<img src="dog.jpg" alt="dog" />

列表与导航

有序列表（用途不多）

<h3>东京奥运奖牌榜</h3>
    <ol>
      <li>美国:113</li>
      <li>中国:88</li>
      <li>日本:58</li>
    </ol>

无序列表

<h3>购物车</h3>
    <ul>
      <li>笔记本电脑一台</li>
      <li>蓝牙耳机一副</li>
      <li>卫生纸10卷</li>
    </ul>

ul+li+a 导航

<ul>
      <li><a href="">导航1</a></li>
      <li><a href="">导航2</a></li>
      <li><a href="">导航3</a></li>
      <li><a href="">导航4</a></li>
      <li><a href="">导航5</a></li>
      <li><a href="">导航6</a></li>
    </ul>

nav+a 导航

<nav>
      <a href="">导航1</a><a href="">导航2</a><a href="">导航3</a
      ><a href="">导航4</a><a href="">导航5</a><a href="">导航6</a>
    </nav>

说明：ul+li不仅可用于网站导航，还可以用于文章列表，图片列表等批量数据的排版布局。

表格与布局

表格总体结构

table<表格> + caption<标题> + thead<头部> + tbody<主题> + tfoot<尾部>

tr th td

tr：表示行
th：多用于thead中，表示列
td：表示列

跨行和跨列

colspan：水平快行
rowspan: 竖直跨列

内链和后台

内链标签

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

可以通过a或button打开内链标签。

后台

 <!-- 后台顶部 -->
    <div class="header">
      <h1>网站管理后台</h1>
      <div>
        <span>admin</span>
        <a href="">退出</a>
      </div>
    </div>
    <!-- 左侧导航 -->
    <ul class="nav">
      <li><a href="demo3.html" target="content">菜单项1</a></li>
      <li><a href="demo4.html" target="content">菜单项2</a></li>
      <li><a href="demo5.html" target="content">菜单项3</a></li>
    </ul>
    <!-- 右侧内容区 -->
    <iframe srcdoc="<p>请点击左边菜单栏打开</p>" frameborder="0" name="content"></iframe>

采用内链标签可以布局网站后台。

通过对html的常用标签的学习，可以快速掌握html的基础知识，为进一步学习打好基础。

HTML常用标签汇总