HTML标签 - 基础标签的使用

84 阅读7分钟

HTML标签 - 基础标签的使用

h系列标签

  • 作用:专门用于给文本添加标题语义。
  • 格式:
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    
  • 注意点:
    • h系列标签是用来给文本添加语意的,而不是用来修改文本样式的。
    • h系列标签一共有6个,从h1h6,超过6个则无效。
    • h系列标签包裹的内容会独占一行。
    • h系列的标签中,h1的字体大小最大,h6的字体大小最小。
    • 在开发过程中,一定要慎用h系列标签,特别是h1标签,一般情况下一个网页只能有一个h1标签(SEO有关)。

p标签

  • 作用:告诉浏览器哪些文字是一个段落。
  • 格式:
    <p>段落文本</p>
    
  • 注意点:p标签在浏览器中独占一行。

hr标签

  • 作用:在浏览器上显示一条分割线。
  • 格式:
    <hr/>
    
  • 注意点:
    • 在浏览器上单独占据一行。
    • hr标签,可以写/,可以不写/,带/的标签就是按照XHTML的规范编写,没有的就是按照HTML编写的。但是在HTML5中,由于HTML5兼容HTML和XHTML,故写不写都可以。

br标签

  • 作用:在HTML中用来换行。
  • 格式:
    <br>
    
  • 注意点:
    • br标签可以连续使用,使用多少个br标签,就可以换多少行。
    • 由于HTML的作用就是用来给文本添加语义,br标签的语义是不另起一个段落换行,但是在我们开发时,一般情况下需要换行都是因为需要另起一个段落,所以在开发时我们一般很少使用br标签。

img标签

  • 作用:img标签中的img其实是英文image的缩写,所以img标签的作用,就是告诉浏览器需要显示一张图片。
  • 格式:
    <img src="图片路径">
    
  • 属性:
    • src:src是英文source的缩写,所以src属性就是用来告诉img标签,需要显示的图片路径。
    • width:用于设置图片的宽度,若没有指定需要显示的图片的宽度,那么系统会按照图片默认的宽度来显示。
    • height:用户设置图片的高度,若没有指定需要显示的图片的高度,那么系统会按照图片默认的高度来显示。
    • title:用于告诉浏览器,当鼠标悬停在图片上时,描述框中需要展示的内容。
    • alt:用于告诉浏览器,当图片找不到的时候,展示什么内容。

路径问题:给src属性赋值有两种方式。

  1. 相对路径赋值:相对路径就是每次都从代码文件所在的文件夹开始查找,我们称之为相对路径。
    • 同级:同级就是目标文件和代码文件存储在同一个文件夹中。
      • 格式:src = "目标文件名称"
      • 含义:在代码文件所在的文件夹中查找目标文件。
    • 下级:下级就是存储目标文件的文件夹同代码文件在同一个文件夹中
      • 格式:src="同级文件夹名称/目标文件名称"
      • 含义:在代码文件所在文件夹中找到目标文件所在文件夹,再从其中找到目标文件。
    • 上级:上级就是存储目标文件的位置和存储代码的文件夹在同一个文件夹当中。
      • 格式:src="../文件名称"
      • 含义:在代码文件所在的文件夹中找到这个文件夹的上一级文件夹,然后在上一级文件夹中找到目标文件。其中../代表从当前位置找到上一级文件夹。
  2. 绝对路径赋值:绝对路径就是每次都从指定的盘符开始查找。
    • 例子:src="C:\Users\GinoWi\HTML\QRCode.jpg"
    • 含义:在C盘中找到Users文件夹,在Users文件夹当中找到GinoWi文件夹,在GinoWi文件夹找到HTML文件夹,在HTML文件夹中找到对应的QRCode.jpg图片文件。
  3. 注意点:
    • 路径中不要出现中文,否则可能出现未知问题。
    • 如果是通过相对路径来指定,那么不能跨盘符。
    • 以后开发中,如果需要编写路径,统一使用/,不要使用\。因为将来开发程序,可能部署到其他服务器当中,其他服务器的路径都是/,所以如果写的不是/,可能会引发其他问题。
    • 在后续开发中,一般不会使用绝对路径,因为可移植性不好,也就是说将你写好的代码拷贝给别人,别人可能就不能运行了。

a标签

  • 作用:就是用于控制页面与页面之间的跳转
  • 格式:
    <a href="指定需要跳转的页面地址">需要展现给用户查看的内容</a>
    
  • 属性:
    • target:专门用于控制如何跳转到指定的页面地址。
      • _self:用于在当前选项卡中跳转,也就是不新建选项卡跳转。target属性默认就是_self
      • _blank:用于在新的选项卡中跳转,也就是新建界面跳转。
    • title:同img标签的title属性一样,都是用于显示鼠标悬停时所展示的提示。
  • 注意点:
    • a标签不仅能够让文字可以点击,还能够让图片可以点击。
    • 一个a标签必须有一个href属性,否则a标签不知道要跳转到什么地方。
    • 如果通过a标签的href属性指定一个url地址,必须在地址前面加上http://或者https://
    • a标签的href除了可以指定一个网络地址以外,也可以指定一个本地地址。

补充内容:

假链接:

  1. 什么是假链接?

    点击之后不会跳转的链接就是假链接。

  2. 假链接存在的意义是什么?

    在开发前期,其他页面都还未开发出来,我们不知道需要跳转到什么地方,我们就需要假链接代替,等到了项目后期,其他页面完成后,再将假链接替换成真链接。

  3. 假链接的格式

    <a href="#"></a> 或者<a href="javascript:"></a>

    这两种格式的区别:<a href="#"></a>会自动回到网页顶部,<a href="javascript:"></a>不会回到网页顶部。

锚点:

  1. 什么是锚点?

    点击之后可以跳转到页面的指定位置(可以是非当前页面的指定位置)。

  2. 如何设置锚点?

    要想通过a标签跳转到指定位置,必须告诉a标签一个唯一标识,这样a标签才能在当前界面(或者其他界面)中找到需要跳转到的目标位置。

    那么如何设置一个唯一标识?可以通过HTML标签当中的一个属性id来实现,这个属性就是专门用来给当前标签指定唯一标识的,就类似于我们日常生活中的身份证号。

    所以实现锚点仅需要两步,第一步给需要跳转的标签位置设定一个唯一标识id属性,第二步之需要告诉a标签需要跳转到的目标标签位置的唯一标识id属性是多少。

  3. 锚点格式:

    跳转到同一个界面的目标标签位置:<a href="#id名称"></a>

    跳转到不同界面的目标标签位置:<a href="目标路径#id名称"></a>

  4. 注意点:

    • 通过a标签跳转到指定位置是没有过渡动画的,是直接跳转到指定位置。
    • a标签除了可以跳转到当前界面指定位置外,还可以直接跳转到其他界面的指定位置。

base标签

  • 作用:base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开。
  • 注意点:
    • base标签必须写在head标签里面。
    • 如果既在base中指定了target属性,又在a标签中指定了target属性,那么浏览器会按照a标签中指定的target属性来执行。

补充 -- HTML中的注释

  • 作用:注释可以用来解释某一段程序或者某一行代码是什么意思,方便直接与程序员之间交流,增强代码的可读性。
  • 格式:
    <!-- 注释内容 -->
    
  • 注意点:
    • 注释内容不会在浏览器当中进行展示。
    • 注释不能嵌套使用。

参考链接:

W3School官方文档:www.w3school.com.cn