前端语言3 | 青训营笔记

154 阅读5分钟

七、HTML常用标签

(一)注释标签

  • 在很多代码技术中都可以添加注释内容,我们也可以向HTML源代码添加注释。

(二)标题标签

  • 标题(Heading),是通过

    ~

    六个标签分别来对六个级别的标题进行定义的。
  • 定义最大的标题,

    定义最小的标题。

(三)段落和换行标签

  • 段落(paragragh)是通过

    标签进行定义的。


  • (breaking)标签是HTML中一个简单的换行符。

(四)文本格式化标签

  • HTML中有部分标签是用来对文字进行格式化显示设置的,比如:粗体斜体、下划线等。
  • 文本格式化标签:文本级(双标签),内部只能书写文字。

  • 在HTML4.0版本规范后,结构和样式进行了分离,HTML只负责搭建结构,CSS负责格式化样式,所以大部分文本格式化标签被废弃,但是在HTML4.01和HTML1.0 transitional版本中依旧可以使用。

(五)图像标签和路径

  • 图像(image)由标签进行定义。
  • 标签是单标签,本身相当于一个特殊的文本。
  • 标签的作用是在指定的位置插入一张图片。
  • 在HTML文件,常用的插入图片的类型有:jpg、png、jif。
  • 由于为单标签,所以它只能通过属性进行相关的图像设置。
  • 标签常用属性:

  • 路径:指的是寻找文件时所历经的线路,在HTML中有特殊的书写语法。
  • 路径分为相对路径绝对路径,不同的方式出发点和参考位置不同。

  • 路径实际应用
  1. 建议多使用相对路径,可适当使用网址形式的绝对路径。
  2. 使用相对路径必须将图片或文件与HTML同时上传,而且需要保持相对位置不变。

(六)音频和视频标签(H5新增)

(七)超级链接标签

(八)列表标签(无序列表、有序列表、定义列表)

  • 列表用于制作HTML中的一系列项目。
  • 通常我们会将内容相关结构相似样式相近的内容使用列表结构进行搭建。
  • 根据项目的内容不同,可以有三种语义的列表结构:无序列表有序列表定义列表

(九)布局标签(div标签、span标签)

  • div和span是最常见的2个布局标签,
    标签常用作布局工具,俗称盒子。
  • 都是没有具体明确的语义的。

(十)表格标签

  • 创建一个简单的表格至少有三个标签组成,分别是、、
    标签。

    • 如果要绘制表头,使用标签
  • 一个完整的表格分为四个大的区域:表格标题、表格头部、表格主体、表格页脚
    • 的属性

      • 合并单元格:表格的单元格可以进行合并,通过th和td的两个属性可以进行合并设置。

      • 制作表格的技巧步骤:
      1. 先列出所有行
      ,以最小单元格为标准。
    • 再添加每一行的
    • 单元格。
    • 划分单元格所在行时,顶边对齐的属于同一行
    • 将所有行和列写完后,再查看哪个单元格有跨行或跨列,属性值的个数要参考最小的单元格。
    • (十一)表单标签

      • 表单是用来收集用户输入信息的。
      • 表单的组成
      1. HMTL表单用于搜集不同类型的用户输入,表单元素就是网页中提供用户进行输入或点击的小控件。
      2. 在HTML中,一个完整的表单通常由表单域、提示信息和表单控件(也称为表单元素)3个部分构成。

      • 表单域标签

      • 表单元素(表单控件)

      1、标签

      (1)标签是最重要的一个表单元素。

      (2)标签为单标签,本身相当于一个特殊的文本。

      (3)标签需要通过标签属性实现各种功能。

      2、文本域

      (1)文本域使用标签定义,制作可以输入多行文本的区域。

      (2)标签为双标签,本身相当于一个特殊的文字。

      (3)文本域可以设置默认输入的文字,在双标签之间书写默认文字。

      3、下拉菜单:HTML中的下拉菜单提前设置一些选项,然后可以通过点击选择其中一项。

      4、label标签

      八、HTML字符实体

      • 在普通文字书写时,有一些特殊符号不能直接书写(例如:连续的空格),或者符号具有特殊功能也不能直接书写(例如:<>符号)。
      • 可以使用一些HTML提前预留好的替换字符进行书写,这些替换字符叫做字符实体。
      • 通过查询W3school手册,查看所有的字符实体。

      • 使用方法:可以查询特殊字符的替换写法,包含实体名称以及实体编号。