前端学习第一节课（HTML标签）

1. 标题标签（heading）

标题级别展示

H1

H2

H3

H4

H5
H6

特点：独占一行，粗体，标题标签

H1 标签的默认样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
h1 {
  display: block;
  font-size: 2em;
  如果父元素的 font-size 是 16px （浏览器默认值），那么 2em = 2 × 16px = 32px 。
  em是字体大小的体大小的倍数
  浏览器默认文字大小是16个像素

  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  unicode-bidi: isolate;
}

2. 段落标签（Paragraph）

特点：独占一行，段落标签，用于定义网页中的段落。

示例：
这是一个段落，用于展示段落标签的使用。这是一个段落，用于展示段落标签的使用。

首行缩进：
使用 text-indent: 2em 可以实现首行缩进2个字符的效果。

3. 文本格式化标签

标签 效果 说明
<strong> 我是加粗的文本 用于强调的加粗
<b> 我是加粗的文本 单纯的加粗
<i> 我是斜体的文本 单纯的斜体
<em> 我是斜体的文本 用于强调的斜体
<u> 我是下划线的文本 下划线
<ins> 我是下划线的文本 插入文本
<del> 我是删除线的文本 删除线
<sub> 我是下标文本 下标
<sup> 我是上标文本 上标

4. 地址标签（address）

示例：
北京市大兴区西环南路

5. div 标签

特点：

  • 独占一行，块级元素，用于定义网页中的块级元素
  • 里面的空格和换行默认都是一个文本分隔符

示例：

1
2
3
我是一名前端工程师我是一名前端工程师我是一名前端工程师我是一名前端工程师我是一名前端工程师我是一名前端工程师
我是一名前端工程师我是一名前端工程师我是一名前端工程师我是一名前端工程师我是一名前端工程师我是一名前端工程师
我是一名前端工程师我是一名前端工程师我是一名前端工程师我是一名前端工程师我是一名前端工程师我是一名前端工程师

空格处理：

1
2
I am    sajgkladsjgjlkda      sjlgajgljagakjgLjdfla     jgldsajglk     agjkagjalgjdl     kajg
lkajkandvlasmbnal

6. HTML实体标签

示例：
我正在学习 <div 标签>

常用实体：

  • &lt; → <
  • &gt; → >
  • &nbsp; → 空格
  • &amp; → &

7. 图片标签（img）

属性说明：

  • src：图片路径
  • alt：图片描述（当图片无法加载时显示）
  • title：鼠标悬停时显示的文本

路径类型：

  • 相对路径：../img/2.png（上一级目录）
  • 绝对路径：/img/2.png（网站根目录）
  • 网络路径：https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png

示例：
百度Logo

8. 元素类型

内联元素（inline element）

  • 特点：不独占一行，无法定义宽高
  • 示例：strong, b, i, em, u, ins, del, sub, sup

块级元素（block element）

  • 特点：独占一行，可以定义宽高
  • 示例：p, div, address, h1-h6

内联块级元素（inline-block element）

  • 特点：不独占一行，可以定义宽高
  • 示例：img, video, audio, iframe, object, input, button, select, textarea

9. 超链接标签（anchor）

特点：用于定义网页中的超链接

属性：

  • href：链接的目标地址
  • target：链接的目标窗口（_blank 表示新窗口打开）

a 标签的作用：

  1. 超链接标签
  2. 打电话
  3. 发邮件
  4. 锚点定位
  5. 协议限定符

示例：

锚点定位：

10. 标签嵌套规则

  • 内联元素：可以嵌套内联元素
  • 块级元素：可以嵌套任何元素
  • 特殊规则：
    • p 标签不可以嵌套 div
    • a 标签不可以嵌套 a 标签

示例：

1
2
3
<a href="http://www.baidu.com">
  <img src="/img/2.png" alt="">
</a>

11. 注释

格式：<!-- 注释内容 -->

作用：

  1. 为了说明代码
  2. 帮助找bug

12. 总结

本节学习了HTML的基本标签，包括：

  • 标题标签（h1-h6）
  • 段落标签（p）
  • 文本格式化标签
  • 地址标签（address）
  • 块级元素（div）
  • 图片标签（img）
  • 超链接标签（a）
  • 各种元素类型（内联、块级、内联块级）
  • 标签嵌套规则
  • 注释

这些是HTML的基础内容，是构建网页的重要组成部分。