码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • HTML 之常用标签的介绍


    在这里插入图片描述

    文章目录

    • h标签
    • p标签
    • a标签
    • img 标签
    • table、tr、td标签
    • ul、ol、li 标签
    • div 标签

    h标签

    标签用于定义 HTML 文档中的标题,其中 h 后面跟着一个数字,表示标题的级别。HTML 提供了

    到
    六个不同级别的标题,其中

    表示最高级别的标题,
    表示最低级别的标题。

    以下是 标签的简单介绍:

    1. to
      :标题标签

      • : 表示最高级别的标题。

      • : 表示较次级别的标题,依此类推。

      • : 表示最低级别的标题。

    示例:

    <h1>This is a Heading 1h1>
    <h2>This is a Heading 2h2>
    <h3>This is a Heading 3h3>
    
    
    • 1
    • 2
    • 3
    • 4

    这些标签用于组织文档结构,使得页面内容更具有层次感。浏览器通常会根据标题级别的不同,自动调整文本的大小和样式,使得用户能够更容易地识别和理解文档的结构。标题标签在 SEO(搜索引擎优化)中也很重要,因为搜索引擎会根据标题来理解文档的内容和重要性。

    p标签

    标签用于定义 HTML 文档中的段落(paragraph)。这是一种常用的文本标签,它用于将文本分组成段落,使文档更易读和有组织。

    以下是

    标签的简单介绍:

    • : 段落标签

      示例:

      <p>This is a paragraph of text. It can contain <strong>strongstrong> or <em>emphasizedem> text.p>
      
      • 1

      在这个例子中,

      标签包裹了一段文本,并且可以包含其他内联标签,如 和 ,用于加粗和强调文本。

    使用

    标签有助于提高文档的可读性,并将文本内容划分成逻辑段落,使网页结构更清晰。

    a标签

    标签是 HTML 中的锚点标签,用于创建超链接(hyperlinks)。超链接可以链接到其他网页、文件、位置内文档的锚点等,使用户能够通过点击链接跳转到目标资源。

    以下是 标签的简单介绍:

    • : 锚点标签

      示例:

      <a href="https://www.example.com">Visit Example.coma>
      
      • 1

      在这个例子中, 标签创建了一个超链接,href 属性指定了链接的目标 URL,而链接文本是 “Visit Example.com”。用户点击这个链接后,将跳转到指定的网址。

    标签还可以与其他属性一起使用,如:

    • target: 指定链接如何在浏览器中打开。例如,target="_blank" 将在新标签页中打开链接。

      <a href="https://www.example.com" target="_blank">Visit Example.com in a new taba>
      
      • 1
    • download: 提供一个下载链接,使用户能够下载链接的目标资源。

      <a href="documents/example.pdf" download>Download Example PDFa>
      
      • 1

    超链接是网页中连接不同页面和资源的主要手段,通过 标签,用户可以轻松导航到其他网页或下载文件。

    img 标签

    标签是 HTML 中用于嵌入图像的标签。它允许在网页中显示图片,并通过指定图像的源(src 属性)来引用图像文件。

    以下是 标签的简单介绍:

    • : 图像标签

      示例:

      <img src="example.jpg" alt="Example Image">
      
      • 1

      在这个例子中, 标签通过 src 属性指定图像文件的路径(相对路径或绝对路径),而 alt 属性用于提供图像的替代文本,以增强可访问性和在图像加载失败时显示。

    标签还可以包含其他属性,例如:

    • width 和 height: 用于指定图像的宽度和高度。

      <img src="example.jpg" alt="Example Image" width="300" height="200">
      
      • 1
    • border: 用于指定图像的边框宽度。

      <img src="example.jpg" alt="Example Image" border="1">
      
      • 1
    • style: 允许通过 CSS 样式规则为图像应用样式。

      <img src="example.jpg" alt="Example Image" style="border: 1px solid #ccc; max-width: 100%;">
      
      • 1

    通过 标签,可以轻松地在网页中插入图像,丰富页面内容。

    table、tr、td标签

    , , 和
    是用于创建表格的 HTML 标签。它们共同构成了表格的结构,允许在网页中以行和列的形式组织和展示数据。

    1. : 表格标签

      标签用于定义 HTML 表格的开始和结束。
    2. 可以包含
    3. , , , 等子元素,用于定义表格的各个部分。

      示例:

      <table>
        
      table>
      
      • 1
      • 2
      • 3
    4. : 表格行标签

      标签用于定义表格中的行。
    5. 包含在
    6. , ,
      ,
      元素内,可以包含 元素内,表示表格中的一个数据项。

      示例:

      <table>
        <tr>
          <td>Data 1td>
          <td>Data 2td>
          
        tr>
      table>
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

      这些标签的组合允许创建复杂的表格结构,用于展示和组织数据。表格还可以包括表头、表格标题、合并单元格等功能,以适应不同的数据展示需求。

      ul、ol、li 标签

        ,
          , 和
        1. 是用于创建列表的 HTML 标签。它们允许在网页中有序或无序地组织信息。

            • : 无序列表标签

                • 标签用于定义无序列表。
                • 包含在
                    元素内的内容通常是使用
                  • 标签定义的列表项。

                  示例:

                  <ul>
                    <li>Item 1li>
                    <li>Item 2li>
                    <li>Item 3li>
                  ul>
                  
                  • 1
                  • 2
                  • 3
                  • 4
                  • 5

                  这将创建一个包含三个无序列表项的无序列表。

                  1. : 有序列表标签

                      1. 标签用于定义有序列表。
                      2. 包含在
                          元素内的内容也是使用
                        1. 标签定义的列表项,但列表项会按照数字或字母的顺序排列。

                    示例:

                    <ol>
                      <li>First itemli>
                      <li>Second itemli>
                      <li>Third itemli>
                    ol>
                    
                    • 1
                    • 2
                    • 3
                    • 4
                    • 5

                    这将创建一个包含三个有序列表项的有序列表。

                  2. : 列表项标签

                    • 标签用于定义列表中的每个项目(列表项)。
                    • 可以包含在
                        或
                          元素内,表示无序或有序列表中的一个项目。

                      示例:

                      <ul>
                        <li>Item 1li>
                        <li>Item 2li>
                      ul>
                      
                      <ol>
                        <li>First itemli>
                        <li>Second itemli>
                      ol>
                      
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 6
                      • 7
                      • 8
                      • 9

                      在这个例子中,

                    • 被用于定义两个无序列表项和两个有序列表项。

                  这些标签允许开发者以有序或无序的方式组织信息,以便更好地呈现内容。

                  div 标签

                  标签是 HTML 中的块级容器标签,用于将文档分割为独立的部分或区块,从而对这些部分进行样式或布局上的控制。
                  本身不会添加任何视觉效果,但它提供了一种将内容分组并应用样式的方法。

                  以下是

                  标签的简单介绍:

                  • : 分割文档的块级容器标签

                    示例:

                    <div>
                      <p>This is some text inside a div.p>
                      <p>Another paragraph in the same div.p>
                    div>
                    
                    • 1
                    • 2
                    • 3
                    • 4

                    在这个例子中,

                    包裹了两个

                    (段落)元素。通过使用

                    ,可以将这两个段落视为一个单独的组,并且可以轻松地为这个组应用样式、布局或其他属性。

                    经常与 CSS 一起使用,通过为
                    元素添加类或ID,并应用相应的样式规则,以实现对网页布局和外观的更精细的控制。它在构建复杂的网页结构时经常用于包装和组织内容。

                • 相关阅读:
                  省 市 县 三级联动
                  【Java面试】List接口
                  设计模式——23种设计模式
                  Linux网络编程3-select模型
                  Promise详解:手写Promise底层-实现Promise所有的功能和方法
                  python中is和==的区别,地址和重新复制后,地址变化
                  vuex详解
                  C++11(一)
                  Snipaste 截图悬浮工具【实用教程】
                  单片机调试
                • 原文地址:https://blog.csdn.net/weixin_74850661/article/details/134397938
                • 最新文章
                • 攻防演习之三天拿下官网站群
                  数据安全治理学习——前期安全规划和安全管理体系建设
                  企业安全 | 企业内一次钓鱼演练准备过程
                  内网渗透测试 | Kerberos协议及其部分攻击手法
                  0day的产生 | 不懂代码的"代码审计"
                  安装scrcpy-client模块av模块异常,环境问题解决方案
                  leetcode hot100【LeetCode 279. 完全平方数】java实现
                  OpenWrt下安装Mosquitto
                  AnatoMask论文汇总
                  【AI日记】24.11.01 LangChain、openai api和github copilot
                • 热门文章
                • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
                  奉劝各位学弟学妹们,该打造你的技术影响力了!
                  五年了,我在 CSDN 的两个一百万。
                  Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
                  面试官都震惊,你这网络基础可以啊!
                  你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
                  心情不好的时候,用 Python 画棵樱花树送给自己吧
                  通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
                  13 万字 C 语言从入门到精通保姆级教程2021 年版
                  10行代码集2000张美女图,Python爬虫120例,再上征途
                Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
                正则表达式工具 cron表达式工具 密码生成工具

                京公网安备 11010502049817号

      或 元素作为子元素,用于定义行中的表头或数据。

      示例:

      <table>
        <tr>
          
        tr>
      table>
      
      • 1
      • 2
      • 3
      • 4
      • 5
    7. : 表格数据单元格标签

      标签用于定义表格中的数据单元格。
    8. 包含在