HTML常用的基础知识

HTML

前言：HTML（超文本标记语言）作为一种标记语言，HTML用于描述网页的结构和内容。它是构建网页的基础，提供了一系列的标签和元素，用于定义文本、图像、链接、表格、表单等元素的结构和布局。

一、概念

• HTML（Hyper Text Markup Language）：超文本标记语言

二、标签

1.标题标签

• h系列标签：

  • <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    

  • 特点：

    • 文字都被加粗，且大小程度从h1-h6依次递减
    • 独占一行

2.段落标签

• 代码：<p>一段文字</p>
  • 特点：
    • 段落之间存在间隙
    • 独占一行

3.换行标签

• 代码：<br>
• 特点：
  • 单标签
  • 让文字换行

4.水平分割线标签

• 代码：<hr>
• 特点：
  • 单标签
  • 在页面中显示一条水平线

5.文本格式化标签

• 加粗
  • 标签：
    • <b>
    • <strong>
• 下划线
  • 标签：
    • <u>
    • <ins>
• 倾斜
  • 标签：
    • <i>
    • <em>
• 删除线
  • 标签：
    • <s>
    • <del>

6.图片标签

• 代码
  • <img src="" alt="">
• 常见属性
  • src：图片路径
  • alt：对图片的描述
    • alt只有在图片加载失败才会显示
  • title：提示文本，只有当鼠标悬停在图片上时，才会显示
  • width：设置图片宽度
  • height：设置图片高度
• 注意：width与height只设置其中一个，另一个会自动等比缩放
• 特点：单标签

7.路径

• 绝对路径
  • 定义：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
  • 如：D:\test\images\01.jpg
• 相对路径
  • 定义：从当前文件出发找目标文件的路径
  • 目标文件（01.jpg）在同级目录：
    • 方法一：<img src="01.jpg">
    • 方法二：<img src="./01.jpg">
  • 目标文件（01.jpg）在下级目录:
    • 方法：<img src="下级目录/01.jpg">
  • 目标文件（01.jpg）在上级目录:
    • 方法：<img src="../01.jpg">

8.音频标签

• 代码
  • <audio src="" controls></audio>
• 常见属性：
  • src：音频的路径
  • controls：显示播放的控件
  • autoplay：自动播放（部分浏览器不支持）
  • loop：循环播放
• 注意：
  • 音频标签目前支持三种格式：MP3、Wav、Ogg

9.视频标签

• 代码
  • <video src="" controls></video>
• 常见属性：
  • src：音频的路径
  • controls：显示播放的控件
  • autoplay：自动播放（谷歌浏览器中需要配合muted实现静音播放）
  • loop：循环播放
• 注意：
  • 视频标签目前支持三种格式：MP4、WebM、Ogg

10.链接标签

• 代码
  • <a href="">超链接</a>
• 常见属性：
  • href：跳转地址，如填写https://www.baidu.com，会跳转到百度页面
  • target：目标网页的打开方式
    • 属性值：
      • _self：默认值，在当前窗口打开（覆盖原网页）
      • _blank：在新窗口中跳转
• 特点：
  • 点击内容可以跳转到指定网页

11.列表标签

1.无序列表

• 代码

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  

• 标签：

  • ul：表示无序列表的整体，用于包裹li标签
  • li：表示无序列表的每一项，用于包含每一行的内容

• 特点

  • 列表的每一项前默认显示圆点标识

• 注意：

  • ul标签中只允许包含li标签
  • li标签可以包含任意内容

2.有序列表

• 代码

    <ol>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ol>
  

• 标签：

  • ol：表示有序列表的整体，用于包裹li标签
  • li：表示无序列表的每一项，用于包含每一行的内容

• 特点

  • 列表的每一项前默认显示序号标识

• 注意：

  • ol标签中只允许包含li标签
  • li标签可以包含任意内容

3.自定义列表

• 代码

   <dl>
      <dt>自定义列表</dt>
      <dd>1</dd>
      <dd>2</dd>
      <dd>3</dd>
    </dl>
  

• 标签

  • dl：表示自定义列表的整体，用于包裹dt/dd标签
  • dt：表示自定义列表的主题
  • dd：表示自定义列表的每一项内容

• 特点

  • dd前会默认显示缩进效果

• 注意点:

  • dl标签中只允许包含dt/dd标签
  • dt/dd标签可以包含任意内容

12.表格标签

• 代码

  <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
  

• 标签

  • table：表格整体，可用于包裹多个tr
  • tr：表格每行，可用于包裹td
  • td：表格单元格，可用于包裹内容

• 常见属性:

  • border + 数字：边框宽度
  • width + 数字：表格宽度
  • height + 数字：表格高度

• 注意：

  • 标签的嵌套关系：table > tr > td

• 结构标签

  • thead：表格头部
  • tbody：表格主体
  • tfoot：表格底部
  • 注意：
    • 表格结构标签内部用于包裹tr标签
    • 表格的结构标签可以省略

• 其他标签

  • caption（表格大标题）：表示表格整体大标题，默认在表格整体顶部居中位置显示
  • th（表头单元格）：表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
  • 注意：
    • caption标签书写在table标签内部
    • th标签书写在tr标签内部（用于替换td标签）

• 合并单元格

  • 合并规则
    • 上下合并，只保留最上的，删除其他
    • 左右合并，只保留最左的，删除其他
  • 属性：
    • rowspan + 数字（合并单元格的个数）：跨行合并，将多行的单元格垂直合并
    • colspan + 数字（合并单元格的个数）：跨列合并，将多列的单元格水平合并
  • 注意：
    • 只有同一个结构标签中的第一个才能合并，不能跨结构标签合并

13.表单标签

1.input系列标签

• 标签名
  • input：input标签可以通过type属性值的不同，展示不同的效果
• type属性值
  • text：文本框，用于输入单行文本
    • placeholder：占位符。提示用户输入内容的文本
  • password：密码框，用于输入密码
  • radio：单选框，用于多选一
    • name：分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中
    • checked：默认选中
  • checkbox：多选框，用于多选多
  • file：文件选择，用于之后上传文件
    • multiple：多文件选择
  • submit：提交按钮，用于提交
  • reset：重置按钮，用于重置
  • button：普通按钮，默认无功能
• 注意：
  • submit 、 reset 、button按钮功能的实现要与form配合使用
  • form使用方法：用form标签把表单标签一起包裹起来即可

2.button按钮标签

• 标签名
  • button
• type属性值
  • submit：提交按钮。点击之后提交数据给后端服务器
  • reset：重置按钮。点击之后恢复表单默认值
  • button：普通按钮。默认无功能

3.select下拉菜单标签

• 代码

  <select>
      <option value="cs">长沙</option>
      <option value="bj">北京</option>
      <option value="sh">上海</option>
    </select>
  

• 标签

  • select：下拉菜单的整体
  • option：下拉菜单的每一项

• 常见属性：

  • selected：下拉菜单的默认选中

4.textarea文本域标签

• 标签名：
  • textarea
• 常见属性：
  • cols：规定了文本域内可见宽度
  • rows：规定了文本域内可见行数
• 注意：
  • 右下角可以通过拖拽改变大小

5.label标签

• 作用：用于绑定内容与表单标签的关系

• 标签名：

  • label

• 使用方法：

  • 方法一：
    • 使用label标签把内容包裹起来
    • 在表单标签上添加id属性
    • 在label标签的for属性中设置对应的id属性值
  • 方法二：
    • 直接使用label标签把内容和表单标签一起包裹起来
    • 需要把label标签的for属性删除即可

14.语义化标签

• 标签：
  • div标签：一行只显示一个
  • span标签：一行可以显示多个
  • header：网页头部。一行只显示一个
  • nav：网页导航。一行只显示一个
  • footer：网页底部。一行只显示一个
  • aside：网页侧边栏。一行只显示一个
  • section：网页区块。一行只显示一个
  • article：网页文章。一行只显示一个

15.字符实体

• 常见字符实体

  • 结构：& + 英文

  • 常用字符实体表：

    显示结果	描述	实体名称
    	空格	 
    <	小于号	&lt;
    >	大于号	&gt;
    &	和号	&amp;
    ‘’	引号	&quot;
    ，	撇号	&apos;
    ¢	分（cent）	&cent;
    £	镑（pound）	&pound；
    ¥	元（yen）	&yen;
    €	欧元（euro）	&euro;
    §	小节	&sect;
    ©	版权（copyright）	&copy；

  参考：

  本人博客发布了一些关于CSS以及JavaScript等前端小知识，感兴趣的小伙伴欢迎访问！