前端必知：3.html中常用的基础标签-行

小姚学前端

已于 2023-07-09 17:02:12 修改

阅读量3.5k

点赞数 3

分类专栏： HTHL+CSS 文章标签：前端 html javascript

于 2023-07-05 22:10:05 首次发布

本文链接：https://blog.csdn.net/qq_52799985/article/details/131564801

版权

HTHL+CSS 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

前言

在HTML中，常用的基础标签中的行（inline）标签是用于包裹文本或其他行内元素的标签。这些标签不会独占一行，而是根据文档流的布局在同一行显示，不会自动换行。以下是一些常见的行标签：

<span>: 用于包裹文本或其他行内元素，并进行样式设置。
<a>: 用于创建超链接。
<strong>: 用于表示强调的重要文本。通常以加粗显示。
<em>: 用于表示强调的文本。通常以斜体显示。
<code>: 用于表示计算机代码或程序代码。
<img>: 用于插入图像。
<input>: 用于创建用户输入字段，如文本框、复选框等。
<label>: 用于为表单元素创建标签。
<textarea>: 用于多行文本输入字段。
<br>: 用于表示换行。

这些行标签具有不同的功能和用途，可以根据需要选择适合的标签来组织和呈现文本内容。通过合理使用这些标签，可以创建结构清晰、语义明确的HTML文档

一.部分基础行标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行属性标签</title>
</head>
<body>
<!-- 
        1.span  标记标签，没有实际意义，通常用来渲染文字。（相当于
        块标签里的div）

     -->
     <span style="border: 1px #f00 solid;">孙悟空</span>
     <span style="border: 1px #f00 solid;">孙悟天</span>
     <span style="border: 1px #f00 solid;">孙悟饭</span>
    <!-- 
        iframe  框架 (相当于一个窗口，指向那个页面显示那个页面的内容)
        src="需要显示的页面地址"
        height="设置高度"
        width="设置宽度"
     -->
    <iframe src="./case.html" height="200" width="600"></iframe>
    
    <!-- 
        a 标签
           href 属性：用来设置超链接的地址
           target 属性：设置标签页的打开方式
           -blank在新标签页打开
           -seif默认值，在当前页打开
        作用：
           1.设置一个超链接
           2.设置锚点
              最常见的是 回到顶部   (一个id只能在一个网页中出现一次)
              如果在开发中需要设置a标签点击没有效果，则可以设置href属性为
              ## 即是：href="##"，如果需要设置回到顶部 则 href="#"
              不要设置href为空，这样会导致页面刷新
            3.下载文件
               a.如果设置的下载文件是音频视频图片文档等，都需要经过压缩
               之后，再在href上设置文件路径。
               b.如果是文本类型的文件，可以之间把文件路径设置在href属性上，
               直接由浏览器打开
     -->
     <a href="http://www.baidu.com">百度</a>
     <a href="./case.html" target="_blank">案例</a>
     <hr />
     <div id="ye" style="height: 100px; background:#ff0;"></div>
     <div id="gr" style="height: 100px; background: #04be02;"></div>


     <a href="#ye">黄色块</a>
     <a href="#gr">绿色块</a>
     <a href="#">回到顶部</a>
     <a href="##">点不动</a> 
     <a href="./abc.txt">下载文本</a>
     <a href="./abc.zip">下载文件</a>  <!--如果图片没有压缩点击下载会打开图片-->

     <!-- 
        strong强调标签
          em 强调并且斜体
          b文本加粗  （不常用，h5中即将废弃）
          i 文本斜体
          var 文本斜体 （不常用，h5中即将废弃）
      -->
      <hr>
      <strong>飞流直下三千尺strong</strong>  <!-- strong和em都表示强调，strong>em-->
      <em>飞流直下三千尺em</em>
      <b>飞流直下三千尺b</b>
      <i>飞流直下三千尺i</i>   
      <var>飞流直下三千尺var</var>


      <!-- 
        q 标签，引用标签，他引用的内容都比较简短
        pre 标签 ，格式化输出
        code 标签，一般是嵌套代码使用（常用在博客中）


        &lt; 在html中渲染为<
        &gt; 在html中渲染为>
        &nbsp; 在html中渲染为 空格
       -->
       <hr>
      <span>子曰：</span>
      <q>学而时习之</q>
      <p>
        种豆南山下
        草盛豆苗稀
      </p>
      <pre>
       种豆南山下
       草盛豆苗稀
       锄禾日当午
       汗滴禾下土
       谁知盘中餐
       粒粒皆辛苦   
      </pre>

      <code>
       &lt; p&gt;陶&nbsp;渊 &nbsp; 明&lt; /p&gt;
      </code>

</body>
</html>

二，img标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>img标签</title>
</head>
<body>
    <!-- 
        img 标签，是一个单标签
        src属性；用来设置图片的资源路径

        文件的资源路径 分为三种
        a. 网络路径
             图片的网络地址
        b. 绝对路径
            从服务器的根目录开始直到找到需要的文件的整个路径
            通常不使用
        c. 相对路径
              相对于当前文件所在的资源路径
              ./ 代表的是当前目录
              ../代表的是上一级目录
              相对路径在开发者最常用
        alt 属性，用来解释图片的内容
            作用：1.当图片没有被加载出来的时候会显示alt的内容     
                  2.通过alt属性，告诉浏览器当前图片的内容
        
        width/height 设置图片的宽和高，在实际的开发当中，一般只设置单个的宽
        或者高另一侧根据比例显示大小
     -->
     <!-- 绝对路径  （需要外部双击操作） -->
     <img src="C:/上课代码/day02/images/wallhaven-rdwjj7.jpg" width="700" height="400" alt=""/>
     <!-- 相对路径 -->
    <img src="./images/wallhaven-v9v3r5.jpg" width="700" height="400" alt=""/> <!--  
        一个 . 代表的是当前目录   如果 .. 点表示他的上一级 -->
    <!-- 网络路径 -->
    <img src="./images/wallhaven-v9v3r5.jpg" width="700" height="400" alt=""/>  
    <!-- alt属性 -->
    <img src="aa//sad/as/" width="700" height="400"  alt="小狗">

    <img src="./images/wallhaven-v9v3r5.jpg" width="700"  alt=""/>
</body>
</html>

三，总结块标签和行标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>总结</title>
</head>
<body>
    <!-- 
        1.块属性标签
            a.独自占据一行空间，支持宽高的设置，设置完宽和高之后仍然
            独占一行。
            b.支持上下 padding 和 上下 margin
        2.行属性标签
           a.不会独占一行空间，从左至右横向排列
           b.无法设置宽高，他的宽高由内容撑开
           c.不支持上下 padding 和上下 margin
     -->


   <!-- a.独自占据一行空间，支持宽高的设置，设置完宽和高之后仍然
            独占一行。列 -->
     <div style="background: #f00;height: 200px; width: 200px; "></div>
     <div style="background: rgb(28, 3, 3);height: 200px; width: 200px; "></div>


    <!--  a.不会独占一行空间，从左至右横向排列
           b.无法设置宽高，他的宽高由内容撑开 -->
     <span style="border: 1px #f00 solid; height: 200px; width: 200px;">一行白鹭上青天</span>
     <span style="border: 1px rgb(37, 2, 2) solid; height: 200px; width: 200px;">二行白鹭上青天，三行白鹭上青天</span>
</body>
</html>