Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML常用标签汇总
Blogger Information
Blog 40
fans 0
comment 0
visits 27868
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML常用标签汇总
初见
Original
560 people have browsed it

HTML常用标签

HTML文档结构

  • 文档类型 
  1. <!DOCTYPE html>
  2. 或
  3. <html>
  • 设置视口：可视窗口

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

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

<body></body>

常用布局标签

  • 经典模式
  1. <div id="header">header</div>
  2.     <div id="main">main</div>
  3.     <div id="footer">footer</div>
  • 常用模式
  1. <div class="header">header</div>
  2.     <div class="main">main</div>
  3.     <div class="footer">footer</div>
  • 语义布局
  1. <header>header</header>
  2.     <main>main</main>
  3.     <footer>footer</footer>

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

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

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

链接与图像

  • 跳到站外

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

  • 指定窗口
  1. <a href="https://tmall.com" target="tmall">天猫</a>
  2.     <iframe frameborder="2" name="tmall"></iframe>
  • 站内跳转（锚点）

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

  • 图片

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

列表与导航

  • 有序列表（用途不多）
  1. <h3>东京奥运奖牌榜</h3>
  2.     <ol>
  3.       <li>美国:113</li>
  4.       <li>中国:88</li>
  5.       <li>日本:58</li>
  6.     </ol>
  • 无序列表
  1. <h3>购物车</h3>
  2.     <ul>
  3.       <li>笔记本电脑一台</li>
  4.       <li>蓝牙耳机一副</li>
  5.       <li>卫生纸10卷</li>
  6.     </ul>
  • ul+li+a 导航
  1. <ul>
  2.       <li><a href="">导航1</a></li>
  3.       <li><a href="">导航2</a></li>
  4.       <li><a href="">导航3</a></li>
  5.       <li><a href="">导航4</a></li>
  6.       <li><a href="">导航5</a></li>
  7.       <li><a href="">导航6</a></li>
  8.     </ul>
  • nav+a 导航
  1. <nav>
  2.       <a href="">导航1</a><a href="">导航2</a><a href="">导航3</a
  3.       ><a href="">导航4</a><a href="">导航5</a><a href="">导航6</a>
  4.     </nav>

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

表格与布局

  • 表格总体结构

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

  • tr th td

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

  • 跨行和跨列

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

内链和后台

  • 内链标签
  1. <h2><a href="https://taobao.com" target="taobao">淘宝</a></h2>
  2.     <iframe
  3.       srcdoc="<em>点击上面的链接打开</em>"
  4.       frameborder="1"
  5.       width="400"
  6.       height="400"
  7.       name="taobao"
  8.     ></iframe>
  9.     <hr />
  10.     <button onclick="taobao.location='https://taobao.com'">打开淘宝</button>

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

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

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

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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post