当前位置:首页 > 每日看点 > 正文内容

html最常用的标签是哪些?

卡卷网11个月前 (12-09)每日看点259

HTML 标签是构成 HTML 文档的基本元素,负责定义网页中的各个部分。HTML 标签通常成对出现,由开始标签和结束标签组成(如 <div></div>)。有些标签是单标签(例如 <img>),无需结束标签。

以下是一些常见的 HTML 标签,按功能和类型分类:

1. 文档结构标签

这些标签定义 HTML 文档的基本结构。

  • <html>:定义整个 HTML 文档。
  • <head>:包含页面的元数据(如文档标题、字符集、外部资源的链接等)。
  • <title>:定义文档的标题(在浏览器标签上显示)。
  • <body>:包含页面的可视内容。
  • <header>:定义文档的头部,通常包含导航、标题等信息。
  • <footer>:定义文档的页脚,通常包含版权信息、联系方式等。
  • <section>:定义页面的一个独立区域或章节。
  • <article>:定义独立的内容块,通常是可以独立存在的部分(例如文章、新闻等)。
  • <nav>:定义导航区域,用于包含链接。
  • <main>:定义文档的主体部分。
  • <aside>:定义侧边栏内容,通常是与主内容相关但不直接依赖的部分。

2. 文本格式化标签

这些标签用于格式化和修饰文本。

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>:定义六个不同等级的标题。
  • <p>:定义段落。
  • <b>:使文本加粗(语义上应使用 <strong>)。
  • <i>:使文本斜体(语义上应使用 <em>)。
  • <u>:使文本带下划线。
  • <strong>:表示强烈强调的文本,通常显示为加粗。
  • <em>:表示强调的文本,通常显示为斜体。
  • <mark>:标记文本,通常用于突出显示。
  • <small>:使文本显示为较小字体。
  • <sub>:定义下标文本。
  • <sup>:定义上标文本。
  • <del>:删除文本。
  • <ins>:插入文本。
  • <blockquote>:定义引用的文本。
  • <code>:表示计算机代码或命令。
  • <pre>:预格式化文本,通常保持空格和换行。

3. 列表标签

用于创建不同类型的列表。

  • <ul>:无序列表。
  • <ol>:有序列表。
  • <li>:列表项。
  • <dl>:定义描述列表(例如词汇与其描述)。
  • <dt>:定义描述列表的术语。
  • <dd>:定义描述列表中的描述部分。

4. 链接和嵌入标签

这些标签用于定义链接和嵌入外部资源。

  • <a>:定义超链接。
  • <img>:嵌入图片。
  • <audio>:嵌入音频。
  • <video>:嵌入视频。
  • <iframe>:嵌入一个独立的 HTML 页面。
  • <embed>:嵌入外部内容(例如 Flash、Java Applets 等)。
  • <object>:定义对象元素,通常用于嵌入其他文件(如 PDF)。
  • <link>:定义外部资源的链接(通常用于链接 CSS 文件)。
  • <script>:定义 JavaScript 脚本。
  • <style>:包含 CSS 样式。

5. 表格标签

这些标签用于定义表格结构。

  • <table>:定义表格。
  • <tr>:定义表格行。
  • <th>:定义表格头单元格(通常是加粗和居中)。
  • <td>:定义表格数据单元格。
  • <thead>:定义表格头部。
  • <tbody>:定义表格主体。
  • <tfoot>:定义表格脚部。
  • <caption>:定义表格的标题。

6. 表单标签

用于创建用户输入表单。

  • <form>:定义表单。
  • <input>:定义输入字段。
  • <button>:定义按钮。
  • <select>:定义下拉菜单。
  • <option>:定义 <select> 中的选项。
  • <textarea>:定义多行文本输入框。
  • <label>:定义标签,通常与表单元素关联。
  • <fieldset>:定义一组相关的表单元素。
  • <legend>:为 <fieldset> 定义标题。
  • <datalist>:定义建议列表。
  • <keygen>:定义密钥生成器(已弃用)。

7. 内联元素和块级元素

  • 内联元素(如 <span><a><img> 等)不会创建新块,通常用于在行内应用样式。
  • 块级元素(如 <div><p><h1> 等)通常开始于新的一行,并占用整个行宽。

8. 元数据标签

这些标签用于提供有关页面的信息,通常不直接显示在页面上。

  • <meta>:定义元数据,如字符集、描述、关键词等。
  • <base>:定义页面的基础 URL。
  • <link>:定义与文档相关的外部资源,如样式表。
  • <script>:用于包含 JavaScript 代码或引用外部脚本文件。

9. 语义化标签

HTML5 引入了一些新的语义化标签,它们更清晰地定义了文档的结构。

  • <article>:独立内容块。
  • <section>:文档中的一个区域或章节。
  • <nav>:定义导航链接。
  • <header>:定义页面头部,通常包含网站名称、导航等。
  • <footer>:定义页面或文档的页脚。
  • <aside>:定义与主内容相关但不直接依赖的内容(例如侧边栏)。
  • <p>:包含图像、图表等内容。
  • <figcaption>:为 <p> 提供标题。

10. CSS 样式标签

这些标签用于定义页面的样式。

  • <style>:包含 CSS 样式。
  • <link>:定义外部 CSS 文件的链接。

11. 其他常见标签

  • <div>:定义一个块级容器,用于布局或分组。
  • <span>:定义一个内联容器,用于分组或样式。
  • <hr>:定义水平线,用于分隔内容。
  • <br>:插入换行符。
  • <wbr>:定义可能换行的位置。

扫描二维码推送至手机访问。

版权声明:本文由卡卷网发布,如需转载请注明出处。

本文链接:https://www.kajuan.net/ttnews/2024/12/3596.html

分享给朋友:

相关文章

为什么程序员不自己开发微信小程序这类似的东西赚钱?

为什么程序员不自己开发微信小程序这类似的东西赚钱?

你如果有好的想法是可以挣钱的首先大家说的个人资质限制确实多,也不建议直接拿个人资质去用小程序盈利,因为很麻烦我说一下我的大体操作:1.首先去申请个体户,这个可以用住宅来注册申请,而且速度很快就几天就下来了,经营类目主要是互联网销售这些,不过...

Redmi 为什么可以把性价比做得那么高?

一位修手机的老大哥曾经跟我说过,红米1那个手机,除了处理器还凑活,其余零部件,就是市面上山寨机那种。其实红米性价比并不算极致,而且一直都有竞争者,从原来的群魔乱舞,到后来的荣耀,魅蓝,一加,再到现在的IQOO和realme。红米的方法也很简...

无人机真的是中国领先吗?

无人机真的是中国领先吗?

巧了这是。捡到了一台大疆。应该是别人飞丢的。在草丛中泡过水,轴承锈死,电池鼓涨已,经没有维修价值了。但作为玩电子的,免不了要把它解剖,研究一番。那么,我们看看它的国产化率能有多少吧。图片说话:解释一下吧。图一,高通 美国图二,MPS: 美国...

如何看待台积电,三星相继停供大陆7nm及更先进芯片?

在这个事出来之前,我就看到过一个说法,两家Foundry可以在中东建厂,让中东的Fab去干“脏活”。本质上是国内企业搞几个中东的代理人,装作是中东的初创Fabless企业去下单,人家Foundry大概率睁一只眼闭一只眼,只管数钱。然而,紧接...

抖音上有一些账号搬运别人的视频,几乎一模一样,也没判搬运,他们是怎么做到的??

对于任何短视频平台来说,如何用最低的成本快速实现伪原创搬运都是需要解决的问题。所有的短视频平台,包括抖音、快手、tiktok、视频号、小红书、B站,甚至是FB、推特、INS、YouTube,它们的查重技术都是类似的,只要你在网络环境设置得当...

抖音小店三个月了一单没出,也没有流量,一个星期好像都没有一个点击,怎么办?

抖音小店三个月了一单没出,也没有流量,一个星期好像都没有一个点击,怎么办?

好消息,你有毅力上200多个品,还能坚持三个月坏消息,一单没出我感觉你还是别碰抖店了,甚至电商平台都别碰 你没这个缘分我要是这样,我得用一百辆叉车叉死我自己你如果还想坚持,我直接给你这套至少价值19800学来的新思路简单来说就是 你做的好的...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。