HTML5 标签划分 语义化标签

文档声明

声明HTML5文件

<!DOCTYPE html>

特殊格式

<abbr> 缩略词，title属性显示完整内容
<bdo dir="rtl/ltr"> 双向文本方向 配合全局属性dir实现文字正逆序

功能性标签

进度条标签

  • 定义度量衡。 定义进度条
<meter value="2" min="0" max="10">` `<meter value="0.6">`
  • 纯粹的进度条
<progress value="22" max="100">

添加拼音

<ruby>
  汉 <rp>(</rp><rt>han</rt><rp>)</rp>
</ruby>
汉 (han)

新的表单元素

选择列表

<select>
  <optgroup label="Swedish Cars"> <!-- 可以不设置组 -->
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

围绕表单项的边框

<form>
  <fieldset>
    <legend>Personalia:</legend>  <!-- 边框上标签 -->
  </fieldset>
</form>

显示input可能的输入项

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
</datalist>

计算结果output

<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>

内联框架

<iframe> 定义内联框架。 实现页面的嵌入

<iframe src="//www.baidu.com">
  <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

多媒体

图像

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap" id='plantmap'>
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<canvas> 创建画布，使用脚本绘制图形
<figure> 标签规定独立的流内容 如果被删除，则不应对文档流产生影响。
<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

音视频

<audio> 定义声音资源 目前支持MP3、Wav、Ogg

<audio controls>
  <source src="horse.ogg" >
  <source src="horse.mp3" >
您的浏览器不支持 audio 元素。
</audio>

<track> 为媒体( 和 )元素定义外部文本轨道。
<video> 定义一个音频或者视频

语义化标签

<blockquote cite="urlxxxx">定义块引用
<q> 定义短的引用
<cite> 定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题
<time> 定义一个日期/时间

结构约定

<main> 指定文档的主体内容
<article> 定义一个独立文章内容
<section> 定义了文档的某个区域 包含了一组内容及其标题
<aside> 定义主区域内容之外的内容，如侧边栏
<header> 定义一个文档头部部分 页眉
<nav> 定义导航栏
<footer> 定义一个文档底部 页脚

标签也可以嵌套

<figure> <figcaption> 定义图片标题

<figure>
  <img loading="lazy" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

<code> 定义计算机代码文本
<samp> 定义计算机代码样本
<dfn> 定义定义项目。
<kbd> 定义键盘文本。
<mark> 定义带有记号的文本
<var> 定义文本的变量部分

<wbr> 规定在文本中的何处适合添加换行符。

为了结构更加清晰，便于搜索引擎分析，支持版权和互联共享服务

零碎的标签

表格

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

链接

<base> 定义页面中所有链接的默认地址或默认目标。

脚本程序

<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<embed> 定义了一个容器，用来嵌入外部应用或者互动程序（插件）。 感觉有点多余

对话框

<dialog> 标签定义一个对话框、确认框或窗口。

折叠框

规定了用户可见的或者隐藏的需求的补充细节

<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
posted @   海胆Sur  阅读(5)  评论(0)  编辑  收藏  举报  
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳，地球，月球 运作规律
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae