题外话：先明白是什么？为什么？再去学习！
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是容器级标签，所以其元素内容存放了另一个标签也没有问题。
- 根据HTML元素内可存放元素内容的不同，分为2个级别。
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。
结束语：一花一世界，一木一浮生，诸君共勉！
网友评论