1-1-3【HTML基础】HTML概述

题外话：先明白是什么？为什么？再去学习！

---

1.为什么要学习HTML?

• 问得好！在学加减乘除之前，为什么要先知道阿拉伯数字呢？因为这是基础中的基础啊！加减乘除因为有数字的存在才能实现。
• 同样，HTML是制作网页基础中的基础，丫不学HTML就去做网页，就像不知道数字是啥就去学加减乘除，现在知道为什么要学了吗？

2.什么是HTML？

• HyperText Markup Language：超文本标记语言，是用来制作网页的一种标记语言。
• 超文本：用超链接的形式，将各种不同的信息组织在一起的文本，比如文字、图片、视频等。
• 标记：将文本等相关信息进行标记，相当于告诉浏览器被打上不同标记的信息该怎么处理。
• 举个例子：

<h1>这个标签告诉浏览器，我是“1级标题”</h1>
<p>这个标签告诉浏览器，我是个“段落”</p>
<strong>这个标签告诉浏览器，我需要“加粗”</strong>

3.HTML发展历史（了解即可）

大致了解下HTML4.0过渡到HTML5.0的过程即可，后面的教程会用到。

4.HTML的元素及其结构

• 元素：从开始标签到结束标签的所有内容，叫HTML的元素。

• 元素结构：HTML元素由“标签”、“元素内容”两部分构成。

5.HTML的标签

• 标签语法（很简单）：
  • 标签名必须写在一对尖括号<>内部。

  <h1>我是一个标题</h1>
  解释：<h1>是开始标签，</h1>是结束标签。
  

  • 标签分为“单标签”和“双标签”，双标签必须成对出现。

  <h1>这是双标签</h1>
  <br/>
  解释：h1为双标签，必须有开始标签和结束标签，而br是单标签，所以只需要写一个即可。
  

  • 双标签的结束标签必须写关闭符号/，单标签在HTML5.0后，就不用书写关闭符号/了。

  <h1>后面的h1前面必须加关闭符号"/"</h1>
  <br/>
  <br>
  解释：HTML5.0后，<br>和<br/>都是正确的。
  

• 标签的级别（很简单）：
  • 根据HTML元素内可存放元素内容的不同，分为2个级别。
    • 文本级标签：元素内容只能存放文字or类文字内容（文字、图片、表单等）。
    • 容器级标签：元素内容可存放任意内容，包含另一个容器级标签。

    <h2>
        <p>我是个段落</p>
    </h2>
    解释：h2是容器级标签，所以其元素内容存放了另一个标签也没有问题。
    

6.HTML元素内容

• 什么是元素内容：开始标签和结束标签之间的内容就是元素内容。
• 元素内容既可以是纯文本，也可以是其他HTML元素，这种情况叫做“嵌套”。

<div>
    <p>我是一段话</p>
<div>
解释：如图例代码，就是“嵌套”。在div标签的元素内容中，嵌套了另一个HTML元素。

• 特性：元素内容有个特殊规定“空白折叠现象”，文本内容间的n个空格、换行、缩进，在浏览器上只会展示为1个空格。

7.HTML元素特性

• 元素间对于空格、换行、缩进等形成的空白不敏感，对网页最终显示效果不产生影响。

• 所以有规则的书写代码，不仅利于阅读和维护，对最终效果也不会产生影响哦~

8.HTML标签的属性

• HTML的标签中可以添加属性，意义是为HTML元素提供更多信息。
• 书写位置：必须在开始标签内，且与标签名间有空格分隔。
• 属性包含：属性名k，属性值v。写法为k="v"。

<div class="myDiv1">
    我是一句话
</div>
解释：在div的开始标签中，增加了class属性，并赋值为myDiv1，作用先不用管后面会讲，先看格式。

• 一个标签，可以设置多个不同的属性，属性与属性间空格分隔。

<div class="myDiv1" id="12">
    我是一句话
</div>
解释：在div的开始标签中，增加了class和id属性，用空格分隔开。依然看格式，啥意思先不用管。

• 一个标签，当某个属性存在多个值时，在一个双引号内写完，用空格分隔。

<div class="p1 p2 p3">
    我是一句话
</div>
解释：在div的开始标签中，增加了class属性，该属性有3个值，分别用空格分隔开。依然看格式，啥意思先不用管。

至此，HTML的铺垫已经完成，从下节开始正式学习HTML。

---

结束语：一花一世界，一木一浮生，诸君共勉！