零基础入门学习前端三件套——HTML篇 ｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第1天
前言
这是零基础入门学习前端三件套系列的第一篇笔记，从HTML开始。接下来我们将以相当直观的例子学习HTML。
HTML与CSS，哪一个更重要？
既然要学HTML和CSS，那么这两个到底哪一个更重要？
嗯…其实都很重要。
举个例子吧！
第一张图是纯 HTML 的页面效果。
第二张图是 HTML + CSS 所带来的页面效果。
由此可见内容都在HTML中，HTML是必要的；而拥有CSS的HTML非常美观，因此CSS也是很重要的！
但总的来说，如果没有HTML，一切都不存在。
既然如此，我们就知道他们的关系了！ HTML为骨架，是支撑起网页的核心；CSS是外貌，让网页看起来更优秀。
那么，让我们开始 HTML 的学习吧！
HTML —— 超文本标记语言
HTML 是一种浏览器用于描述网页内容和框架的语言。
这到底是什么意思呢？？？？？？
简单来说，HTML，就是一堆嵌套的框架。
举个例子吧，我们来看看下面这个网页。通过它来理解 HTML 中嵌套框的含义的具体表现！
该网页以外框为基础，对内部内容进行不断细分，最终我们会发现，其内容都是嵌套在一个又一个框架当中。
那么，这就是HTML，一堆盒子，嵌套在其他盒子的里面。不用担心，让我们通过编程来逐步理解这一切吧~
HTML 基本框架结构
这是一个基本框架，是你必须要记住的重要内容！不过不要担心，让我来一步步说明这一切。图片的右侧是该示例的实现效果。
!DOCTYPE html 标签
让我们先来看看第一行的<!DOCTYPE html>
用这一行代码保证网页采用的是最新的HTML版本，而非其他奇怪的版本，以免浏览器用错误的方式解读HTML，导致网页内容显示错误。
html 标签
前后的<html>和</html>是HTML的根基，关于网页的一切内容都在该标签之中。
你也许注意到了，这两个html只差了一个斜杠。
这个html元素由一对开始标签和结尾标签组成，这也是HTML标签的基本形式。
每一个HTML元素都有一对开始标签和结尾标签，这不仅表明了嵌套的内容应该在哪，在该标签之间还承载着内容，他们都是内容的容器。
回顾我们的代码，你可以看到代码中存在很多这样的容器。html 容器... head 容器... body 容器...所有这些容器基本上都是我们之前讨论的嵌套框表示形式。
使用这些标签，我们为语句提供了意义（意思是提供了其在网页上的表达形式）。例如，这里的 h1 标签表示“Heading!”是1级标题 ，是内容中的“主要”标题。
但是，请注意：标签之间不能交错出现，必须为嵌套的格式。
下面的 head/body 标签具有预设样式，而这是可以被改写或覆盖的。
head 标签
在head标签里，有文档的标题(title)、脚本(script)、样式(style)、有关页面数据的基本信息（“metadata”）（浏览器和搜索引擎所需要的信息）
title 标签
title 标签承担着标题栏的内容，显示在浏览器的标题栏上。
body 标签
这是页面主体(body)
最外面的框，就是body。
也就是说，显示在页面的一切内容都在body之内。
heading!是body中的第一条内容，在最上面。
Paragraph是body中的第二条内容，在第二位。
你会发现其实这一切都是按照代码顺序排列的。
常用的基础标签
这里是一些基本的 HTML 标记...你可以花点时间看看它们，但是总共有一百多个，最好在你学习的过程中在网上搜索它们。我们将详细地介绍这些标签，但前3个最重要，也最基本，因为它们在基本上所有的html文档中都是必不可少的。
最后2个是通用的html标签，没有默认的样式或表示形式。
标签属性
接下来介绍HTML标签的属性
你可以在你的元素/标签中应用任意属性。
下面是通过链接或图像设置这些HTML属性的示例。
a 标签
a = “anchor”
这里a的意思是“锚点”，能够承载一个链接，点击即可跳转至链接网页或本网页的特定位置。
其形式如下：
链接的属性名称为href，输入的链接为value。这一切属性都在开始标签中。
我们让这个 a 标签承载一个网址试试…
嗯…很简单嘛。
img 标签
接下来来看看另外一个常用的标签：img
该标签和刚刚的那些标签最大的不同是：这是一个自闭标签（self-closing tag，自我结尾的标签），这意味着该标签并非是成对出现的，而是只有一个。
我们看看这个标签的写法错在哪了。
<img src="wave.jpg"></img>
首先，它是自闭标签，因此只有一个，没有结尾标签。
其次，它是自闭的标签，因此在该标签的最后要打上一个斜杠表示自闭。
所以正确的写法应该是这样：
<img src="wave.jpg" />
如果不写这个斜杠的话，其实也不会发生什么严重的错误…
为了严谨起见，或是避免某些浏览器出现内容的错误显示，对于自闭标签应当在标签末尾加上一个斜杠以表示其自闭的特性。
如果自闭标签不自闭，浏览器看到这个就自闭了（bushi）
需要注意的是，这里使用了 src 属性以引用图片。
扩展：如何分辨哪些是自闭标签？
一个不能插入文本内容的标签即为自闭标签。例如img标签就不能用做文本标签（如果用alt属性来杠我的话我也没办法┐(ﾟ～ﾟ)┌，我的意思是这类标签是不能为文本带来效果的标签）
如果引用图片的 html 文件与图片在同一个文件夹内，则只需要直接输入图片名称即可。
例如对于下面这个文件路径
app/
hello.html
wave.jpg
我们应该写作<img src="wave.jpg" />
相对位置：
在同一文件夹中时，应该用 ./ 表示处于同一文件夹中（相对位置）。
从严谨的角度来看，示例中应该用 ./wave.jpg 表示照片相对于 hello.html 的路径信息。
如果引用图片的 html 文件与图片在同一个文件夹内的另一个文件夹中时，则需要输入图片所在文件夹(/images)，再输入图片名称(wave.jpg)。
如果引用图片的 html 文件与图片在不同文件夹（但父文件夹相同) 时，则需要先回到上层文件夹(../)，输入图片所在文件夹（/images），再输入图片名称(/cat.gif)。
blog/
app/
hello.html
images/
cat.gif
错误示例：<img src=“cat.gif" />
正确示例：<img src=“../images/cat.gif"/>
列表
现在介绍一下列表~
其中，ol 和 ul 为列表形式标签，用以改变 li 标签的显示效果。
我们试试单独用 ul 会发生什么…什么也没有发生！
这是因为 ul 只是用于给 li 标签添加形式，没有 li 就没有实际效果。
我们添加一个 li 标签试试…这下 ul 的点列表效果就出现了
再添加一个 li 标签…显示在了第一个 li 标签的下面！这就是列表。
你也可以试试将 ul 改为 ol，看看 ol 是什么效果的列表。
div 与 span
接下来介绍以后你最常用到的元素—— div 和 span 标签
我们先来看看div标签吧。
如果我们想把 body 的内容（h1和p）放在一个框中的话…
现在把<h1>和<p>都放在了<div>里，似乎什么变化都没有
但事实上存在一个 div 框将内容包括在了里面！
如果没能理解的话，可以看看这篇文章：developer.mozilla.org/en-US/docs/…
再进一步...
我们已经介绍了一些非常常见的标签，但事实上还有很多标签都还没接触到。
还有这么多的标签…到底该怎么办呢？
作为一名程序员，最重要的技能当然是学会上网搜索！
如果会科学上网的话，当然Google是最好的！
如果不会的话，那就用必应吧！
什么？百度？狗都不用（狗头保命）
在输入关键词之后，就找找你最能理解的答案吧~
关于MDN与W3schools：
MDN上的内容更新迅速！它像 wiki 一样由大家共同维护（不需要科学上网~）
W3schools 并不好用，尽管它总是出现在搜索结果的第一行…
对比二者，我更推荐大家使用 MDN！（在必应搜索时，MDN会倾向于在第一位出现）
一个问题
话说回来…既然 div 是通用标签，为什么不直接用 div 就行了呢？
嗯…或者说为什么只用它并不是很好？
让我们看看MDN是怎么说的吧！
div
- “是一个存粹的容器，div 元素不会继承任何样式属性。”
- “div 元素应只被用于没有其他语义元素（例如
<article>或<nav>）的时候”- “语义切片元素：
<section>,<article>,<nav>,<header>,<footer>”
因此，应当有更合理的选择。
语义首次在 HTML5 中引进，如果你对向后兼容性方面感兴趣的话，可以点击下方链接： developer.mozilla.org/en-US/docs/…
简单来说，语义能够：
- 使机器可读，对网络爬虫友好（可以有效抓取内容信息，让你的网站更容易被发现）
- 使人类可读（更易维护，虽然我也不是很懂…）
总之不用只用 div！如果你有其他疑惑，可以问问MDN！
当然，这也不是说 div 就不好。当你只是单纯为了给某样东西应用特殊的CSS样式而想要把一些东西放在一堆标签里时，就是一个不错的 div 使用场景。
一段尾声
OK，HTML篇结束！接下来将更新 CSS 篇！敬请关注。
