=☆ 给你造的语言搭一个小网页【保姆级教程】
4.标题
一级标题：
Markdown：# 文字
HTML：<h1></h1>
二级标题：
Markdown：## 文字
HTML：<h2></h2>
三级标题：
Markdown：### 文字
HTML：<h3></h3>
四级标题：
Markdown：#### 文字
HTML：<h4></h4>
五级标题：
Markdown：##### 文字
HTML：<h5></h5>
六级标题：
Markdown：###### 文字
HTML：<h6></h6>
tips：Markdown 和 HTML 标题均不能超过六级标题
一级标题：
Markdown：# 文字
HTML：<h1></h1>
二级标题：
Markdown：## 文字
HTML：<h2></h2>
三级标题：
Markdown：### 文字
HTML：<h3></h3>
四级标题：
Markdown：#### 文字
HTML：<h4></h4>
五级标题：
Markdown：##### 文字
HTML：<h5></h5>
六级标题：
Markdown：###### 文字
HTML：<h6></h6>
tips：Markdown 和 HTML 标题均不能超过六级标题
5.下划线
下划线 Markdown 就比较可怜了，没有原生语法支持，所以还是屈服于 HTML 了。。。
Markdown：<u>文字</u>
HTML：<u>文字</u>
// 这两个本质上是一样的
效果：
下划线 Markdown 就比较可怜了，没有原生语法支持，所以还是屈服于 HTML 了。。。
Markdown：<u>文字</u>
HTML：<u>文字</u>
// 这两个本质上是一样的
效果：
10.数字列表
Markdown：
1. 文字
2. 文字
3. 文字
HTML：
<ol>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ol>
效果：
Markdown：
1. 文字
2. 文字
3. 文字
HTML：
<ol>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ol>
效果：
11.超链接
Markdown：[显示的文字](http://www.baidu.com/)
HTML：<a herf="http://www.baidu.com/">显示的文字</a>
效果：
Markdown：[显示的文字](http://www.baidu.com/)
HTML：<a herf="http://www.baidu.com/">显示的文字</a>
效果：
12.表格（Markdown 篇）
我们要建一个2*2的表格，先这么写：
| | |
| | |
这个竖线就是你键盘上位于return（enter）键上面的字符。你可能觉得可以了，但 Markdown 人家不认识，你这么写得到的是：
怎么办？众所皆知，表格都有一个表头，甭管你的第一行是不是表头，写就是了！表头的写法：
|---|---|
合在一起就是：
| | |
|---|---|
| | |
效果：
同理3*3表格就是：
| | | |
|---|---|---|
| | | |
| | | |
说实话 Markdown 和 HTML 的表格一个比一个难，就先讲 Markdown 吧！
我们要建一个2*2的表格，先这么写：
| | |
| | |
这个竖线就是你键盘上位于return（enter）键上面的字符。你可能觉得可以了，但 Markdown 人家不认识，你这么写得到的是：
怎么办？众所皆知，表格都有一个表头，甭管你的第一行是不是表头，写就是了！表头的写法：
|---|---|
合在一起就是：
| | |
|---|---|
| | |
效果：
同理3*3表格就是：
| | | |
|---|---|---|
| | | |
| | | |
说实话 Markdown 和 HTML 的表格一个比一个难，就先讲 Markdown 吧！
13.图片（Markdown篇）
Markdown 中的图片语法主要是：
那这个图片地址怎么搞到呢？很简单，去一些没有人的（氺）帖，发上你的图片，就像这样：
就是这样子啦！
最后得到的就是：
Markdown 中的图片语法主要是：
那这个图片地址怎么搞到呢？很简单，去一些没有人的（氺）帖，发上你的图片，就像这样：
就是这样子啦！
最后得到的就是：
其实有个印象笔记的官方教程，也很方便！
https去://list.yinx掉iang.com/m文arkdown/eef字42447-db就3f-48ee-8能27b-1bb34c访03eb83.ph问p
https去://list.yinx掉iang.com/m文arkdown/eef字42447-db就3f-48ee-8能27b-1bb34c访03eb83.ph问p
关于Markdown，印象笔记官方也写得很详细了，我再在这里说可能也只是给各位献丑哈哈哈哈哈哈哈。
由于GitHub Pages 的应用局限性比较大，而且写网页的过程本身也是一种乐趣。写网页也可以称作前端。那我从现在开始来更前端吧！
由于GitHub Pages 的应用局限性比较大，而且写网页的过程本身也是一种乐趣。写网页也可以称作前端。那我从现在开始来更前端吧！
0. 一些碎碎念
前端，又称作客户端，通俗地说是给人民群众用的，而不是给专业人士看的。前端网页分为动态网页和静态网页，静态网页有的，动态网页也有，但是动态网页的某些功能静态网页就做不到，诸如表单提交、用户登录等，动态网页本身就是一个从前端转后端的衍生物，它的扩展性很强，但是实现方式也很难。
这篇教程中，我会只介绍静态网页。静态网页包括「三大件」：HTML（架构）、CSS（装饰+微动画）、JavaScript（几乎万能），但是JavaScript在这篇教程中我基本上不会讲，因为HTML和CSS就足以支撑一个网页的建设。
前端，又称作客户端，通俗地说是给人民群众用的，而不是给专业人士看的。前端网页分为动态网页和静态网页，静态网页有的，动态网页也有，但是动态网页的某些功能静态网页就做不到，诸如表单提交、用户登录等，动态网页本身就是一个从前端转后端的衍生物，它的扩展性很强，但是实现方式也很难。
这篇教程中，我会只介绍静态网页。静态网页包括「三大件」：HTML（架构）、CSS（装饰+微动画）、JavaScript（几乎万能），但是JavaScript在这篇教程中我基本上不会讲，因为HTML和CSS就足以支撑一个网页的建设。
2. 从「Hello world」说起
先新建一个文件夹，比如就叫「test1」吧！
建好了以后打开VSCode，选择「打开文件夹」，弹出的文件夹中找到刚刚建的文件夹，单击一下（是单击！单击！单击！不要双击！！！）然后选择「打开」
打开以后左侧栏找到一个加号按钮，选中之后给文件命名，由于写的是前端，就叫他「index.html」吧！
点开你刚刚建的文件，在代码栏中输入一个英文（英文的！英文的！英文的！！！）感叹号，在跳出来的栏中用上下键选择有一个感叹号的代码，敲回车。
重点来了！现在我们就要开始一行一行解释每一行是什么意思了！
（0）首先，HTML的文字通常以<></>的形式或<>的形式出现，这个东东叫做「标签」。
（1）<!DOCTYPE html>标签
这一行是属于html的声明，告诉浏览器，我写的是html文件，这时浏览器会按照多数浏览器统一的标准一行一行读取代码，这个模式被称为「标准模式」，倘若你没有写这个，浏览器会依据「怪异模式」解析代码，这个就很糟糕了！这意味着你的代码在每个浏览器上运行的效果可能都不一样。
（2）<html></html>标签
你的所有HTML文件都要写在这个标签中，就比如你写书，那你所有的关于书的内容肯定都要写在书上吧，不可能还来一个“口信”吧！（除了史前文明。。。）
（3）<head></head>与<body>
如果你会一点儿英文，这两个词就很形象了！head是网站的头，body是身子，腿啊啥的不用管！head里的东西大多数都不会赤~裸~裸~地显示在用户面前，body就要显示！
head可以写什么？head包括了文档的基本信息、连接的库、标题啥的。
body写的就多了，你看见的网站所有东西几乎都在body里！
（4）head里的<title></title>
书有标题，网站也有，我们保存一下你写的代码，用浏览器打开这个HTML文件，你康康，就在这里！
没错就是这个！你写<title>Document</title>上面就会有Document，你写<title>Hello</title>上面就有Hello，以此类推。
（5）head里的<meta charset="UTF-8">
准确的说，这玩意儿也是个声明，它告诉浏览器，这个里面的所有字符都要以UTF-8国际标准运行，否则就可能乱码。
先新建一个文件夹，比如就叫「test1」吧！
建好了以后打开VSCode，选择「打开文件夹」，弹出的文件夹中找到刚刚建的文件夹，单击一下（是单击！单击！单击！不要双击！！！）然后选择「打开」
打开以后左侧栏找到一个加号按钮，选中之后给文件命名，由于写的是前端，就叫他「index.html」吧！
点开你刚刚建的文件，在代码栏中输入一个英文（英文的！英文的！英文的！！！）感叹号，在跳出来的栏中用上下键选择有一个感叹号的代码，敲回车。
重点来了！现在我们就要开始一行一行解释每一行是什么意思了！
（0）首先，HTML的文字通常以<></>的形式或<>的形式出现，这个东东叫做「标签」。
（1）<!DOCTYPE html>标签
这一行是属于html的声明，告诉浏览器，我写的是html文件，这时浏览器会按照多数浏览器统一的标准一行一行读取代码，这个模式被称为「标准模式」，倘若你没有写这个，浏览器会依据「怪异模式」解析代码，这个就很糟糕了！这意味着你的代码在每个浏览器上运行的效果可能都不一样。
（2）<html></html>标签
你的所有HTML文件都要写在这个标签中，就比如你写书，那你所有的关于书的内容肯定都要写在书上吧，不可能还来一个“口信”吧！（除了史前文明。。。）
（3）<head></head>与<body>
如果你会一点儿英文，这两个词就很形象了！head是网站的头，body是身子，腿啊啥的不用管！head里的东西大多数都不会赤~裸~裸~地显示在用户面前，body就要显示！
head可以写什么？head包括了文档的基本信息、连接的库、标题啥的。
body写的就多了，你看见的网站所有东西几乎都在body里！
（4）head里的<title></title>
书有标题，网站也有，我们保存一下你写的代码，用浏览器打开这个HTML文件，你康康，就在这里！
没错就是这个！你写<title>Document</title>上面就会有Document，你写<title>Hello</title>上面就有Hello，以此类推。
（5）head里的<meta charset="UTF-8">
准确的说，这玩意儿也是个声明，它告诉浏览器，这个里面的所有字符都要以UTF-8国际标准运行，否则就可能乱码。
3. 盒子
打开度娘贴吧，所有的东西我都能咔咔分几大块，就像这样：
这一个一个的大块里面还能分小块，小块里面还能分小块，组成这一切的就是「盒子」，盒子可以装很多东西，链接、文字、数据、文本框、图片啥的都行！甚至可以「套娃」。
盒子的标签是<div></div>
就像这样：
这样你的网页上就多了几个盒子。
（番外：最近更新太难了，我就一天一更吧，好把这个巨坑满满填上！）
下节预告：炫彩的盒子
打开度娘贴吧，所有的东西我都能咔咔分几大块，就像这样：
这一个一个的大块里面还能分小块，小块里面还能分小块，组成这一切的就是「盒子」，盒子可以装很多东西，链接、文字、数据、文本框、图片啥的都行！甚至可以「套娃」。
盒子的标签是<div></div>
就像这样：
这样你的网页上就多了几个盒子。
（番外：最近更新太难了，我就一天一更吧，好把这个巨坑满满填上！）
下节预告：炫彩的盒子
4.炫彩的盒子
WARING：本章开始要接触CSS语言，请做好准备！
a.从选择器说起
例子：譬如我有一沓纸，我要在纸上画一堆鬼看得懂的东西，首先我要找到这张纸，选择器可以帮助我们找到这张纸！
在前面的文字中，我介绍过标签，譬如div这样的，选择器选中的就是标签，不同的是，它一次选择的是所有标签。那么该怎么解决？
解决的办法有很多，大体分为三种：1.加编号（id） 2.类（class）封装 3.标签序号
所有的方法中，我更偏爱类封装。
什么是类？下面这个图很形象：
（图片来自菜鸟教程）
选择器可以选择一个类。
选择所有标签：
我在HTML里有这么好几行：<div></div><div></div><div></div>
在CSS里：div{}
这样选择了所有的div标签。
类封装解决
类封装HTML：<div class="first"></div><div class="second"></div><div class="third"></div>
CSS里：.first{}
这样就只选择了那个类名为first的标签。
编号解决
编号HTML：<div id="first"></div><div id="second"></div><div id="third"></div>
CSS里：#first{}
只选择id是first的标签
注意：class可以供许多标签使用，id一人只能用一个。
子标签
太麻烦了就不说了
b.声明
回到那一沓纸，纸我们找到了，那么要画什么？我可以画一个背景（纯色的），将这个纸背景全刷绿。
这样就可以表示为：background-color: green; （一定要分号！一定要分号！一定要分号！）
其中，background-color叫做属性，green叫做值，这一条background-color: green; 就是声明，声明和声明组合在一起，就成了一个样式。最后把样式放在花括号里，加上选择器，一个简单的盒子就画好了。
给个例子：
.paper {
height: 300px;
width: 150px;
margin-left: 5px;
margin-top: 5px;
background-color: green;
}
你就得到了一个上下边距为5像素，长300像素宽150像素的绿油油的盒子了！
下节预告：更多的标签
WARING：本章开始要接触CSS语言，请做好准备！
a.从选择器说起
例子：譬如我有一沓纸，我要在纸上画一堆鬼看得懂的东西，首先我要找到这张纸，选择器可以帮助我们找到这张纸！
在前面的文字中，我介绍过标签，譬如div这样的，选择器选中的就是标签，不同的是，它一次选择的是所有标签。那么该怎么解决？
解决的办法有很多，大体分为三种：1.加编号（id） 2.类（class）封装 3.标签序号
所有的方法中，我更偏爱类封装。
什么是类？下面这个图很形象：
（图片来自菜鸟教程）选择器可以选择一个类。
选择所有标签：
我在HTML里有这么好几行：<div></div><div></div><div></div>
在CSS里：div{}
这样选择了所有的div标签。
类封装解决
类封装HTML：<div class="first"></div><div class="second"></div><div class="third"></div>
CSS里：.first{}
这样就只选择了那个类名为first的标签。
编号解决
编号HTML：<div id="first"></div><div id="second"></div><div id="third"></div>
CSS里：#first{}
只选择id是first的标签
注意：class可以供许多标签使用，id一人只能用一个。
子标签
太麻烦了就不说了
b.声明
回到那一沓纸，纸我们找到了，那么要画什么？我可以画一个背景（纯色的），将这个纸背景全刷绿。
这样就可以表示为：background-color: green; （一定要分号！一定要分号！一定要分号！）
其中，background-color叫做属性，green叫做值，这一条background-color: green; 就是声明，声明和声明组合在一起，就成了一个样式。最后把样式放在花括号里，加上选择器，一个简单的盒子就画好了。
给个例子：
.paper {
height: 300px;
width: 150px;
margin-left: 5px;
margin-top: 5px;
background-color: green;
}
你就得到了一个上下边距为5像素，长300像素宽150像素的绿油油的盒子了！
下节预告：更多的标签
更多的声明
1. margin 控制上下间距
2. padding 控制外侧包裹
3. background 设置背景属性
4. width 设置宽度
5. height 设置高度
6. color 设置颜色
7. rgb 另一种颜色设置方式
8. rgba 另一种颜色设置方式，可设置透明度
1. margin 控制上下间距
2. padding 控制外侧包裹
3. background 设置背景属性
4. width 设置宽度
5. height 设置高度
6. color 设置颜色
7. rgb 另一种颜色设置方式
8. rgba 另一种颜色设置方式，可设置透明度