作为一个计算机专业的毕业生，本科期间在实验室学的是Web前端。期间教过很多朋友学习做网站。想想不如写一个教程，用最简短的文字最快的速度让想学习网页的你可以入门，要越过自己内心学习的恐惧，其实非常简单。
授人以鱼不如授人以渔，文中所写都是归纳的要点，要吸收要举一反三。
一个基础的网页只需要包含HTML和CSS就可以了，我有信心让你在一个下午的时间学会基础的网页，你也要对自己充满信心。
伍子蛇
目录
| 一. 创建目录结构 | 二. 什么是HTML | 三. 什么是CSS |
| 四. 做个小例子 | 五. HTML+CSS布局 | 六. 小结 |
| 七. 一个简单的网页 | 八. 扩展阅读 | 九. 最终测试 |
工欲善其事必先利其器，首先我们先下载Chrome浏览器，以及Sublime文本编辑器，当然文本编辑器可以用最简单的记事本代替，但一个好用的文本编辑器一定会让你更方便的，不要输在起跑线上。
选择chrome的原因：
"检查"模式可以很好的查看自己写的代码，以及出错找到原因。自己摸索"检查"模式。
"检查"快捷键：option + command + I
选择sublime的原因：
sublime是一款非常小巧轻量的编辑器，没有冗余的功能。也可以下载很多插件，比如自动排版；
注释快捷键：command + /
一. 创建目录结构
如图创建一个基础的目录结构
① 创建一个名为index的文件夹
② 在文件夹中创建index.html以及css和images文件夹
③ 在css文件件中创建style.css文件
二. 什么是HTML
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 标签用于定义文档内容。通过使用 <h1>、<p>、<img> 这样的标签表达“这是标题”、“这是段落”、“这是图片”之类的信息。
右边是一个网页的基础HTML结构
① HTML 标签是由尖括号包围的关键词，比如 <html>
② HTML 标签通常是成对出现的，比如 <b> 和 </b>
③ 标签对中的第一个标签是开始标签，第二个标签是结束标签
将以上代码编辑在index.html中，在浏览器中访问index.html
<!DOCTYPE html>
<html>
<head>
<title>网站标题</title>
<link rel="stylesheet" href="./css/style.css">
<meta charset="utf-8">
</head>
<body>
<div>
我的第一个标题
</div>
</body>
</html><div>后面一定会有</div>，请像上方代码一样缩进，使用tab键不要用空格，开始标签和结束标签对齐非常重要！开始标签和结束标签对齐非常重要！开始标签和结束标签对齐非常重要！
简单解释一下上文出现的HTML代码，这些代码是一个网页的必要元素。
| 标签 | 说明 |
| <!DOCTYPE html> | 声明 |
| <html></html> | 定义 HTML 文档。 |
| <head></head> | 头文件 / 用于引用外部文件等 |
| <meta charset="utf-8"> | 声明编码格式中文 |
| <body></body> | 文档的主体，都写在这里 |
| 标签 | 说明 | 示例 | 文档 |
| <div></div> | 块 | <div>块</div> | 查看 |
| <img src=""/> | 图片 | <img src=''https://d-d.design/wp-content/uploads/2018/12/wzspic.png"/> | 查看 |
| <h1> to <h6> | 标题 | <h1>标题1</h1><h2>标题2</h2> | 查看 |
| <p></p> | 段落 | <p>这是一个段落</p> | 查看 |
| <span></span> | 没有任何属性的标签 | <span>没有任何属性</span> | 查看 |
| <a href=""></a> | 超链接 | <a href="http://d-d.design">一个链接</a> | 查看 |
| <input></input> | 文本框 | <input tpye="password"></input> | 查看 |
| <button></button> | 按钮 | <button type="button">点击</button> | 查看 |
尝试将上面的示例分别放入index.html的<body></body>标签中，在浏览器中查看效果。
三. 什么是CSS
你已经会写DIV、链接、图片、段落、标题、文本框、按钮了。恭喜你，你已经学会本次课程的全部HTML了。
这就学完了？好像这些HTML并没有什么用呀？也没有达到想要的视觉效果呀？是的，HTML就是单纯的表示“某个地方有某个东西”。
要让它又好看的样式，这就需要我们的CSS出场了。
伍子蛇
CSS 指层叠样式表 (Cascading Style Sheets)；
CSS是用来形容HTML定义的结构，如div、a、img、p他们是什么颜色的字体、什么颜色的背景、字体靠左还是靠右、多宽、多高、在左边还是在右边等等。
在前文中<link rel="stylesheet" type="text/css" href="./css/style.css">这句话的意思是，index.html这个文件将用css文件夹下的style.css文件进行描述。
那么怎么使用呢？我们要先学一个概念，叫做选择器。
选择器通俗来说就是给我们的形如<a></a>这些标签命个名，这样我们才方便用CSS来形容它。
① 学习第一个选择器叫做ID选择器
<div id='wuzishe'>伍子蛇</div>
如上文中的块标签，我们就已经给他命名成了"wuzishe",你想象wuzishe是你的一个同学，接下来我们就可以来形容伍子蛇同学了，他多高、多宽、是什么颜色的……
例如： #wuzishe{color : red ; width : 100px}
意思就是：ID为wuzishe的元素，字体颜色为红色，宽度为100px。
② 学习第二个选择器叫类选择器（CLASS）
<div class='classmate1'>伍子蛇</div><div class='classmate1'>兰清发</div><div class='classmate1'>蒋恩涛</div><div class='classmate1'>赵伟豪</div>
如上文中的块标签，我们给他们都取了一个类名叫做classmata1，想象他们都是你的同学，你们在1班（classmate1），这样我们就可以来形容1班的同学的通用属性了，比如他们多高、多宽……
例如： .classmate1{color : yellow ; text-align : right}
意思就是：class为classmate1的全部元素，字体颜色为黄色，文字向右对齐。
说到这，应该理解ID选择器，和类选择器了吧，我来总结一下：
※ ID选择器只能选择一个标签，写作 id=“” ,类选择器可以选择多个标签，写作 class=“”;
四. 感受网页，做一个简单的小例子
index.html
<!DOCTYPE html>
<html>
<head>
<title>个人介绍</title>
<link rel="stylesheet" href="./css/style.css">
<meta charset="utf-8">
</head>
<body>
<div id="cxy">
<img id="boxLeft" src="http://d-d.design/cxk.jpeg">
<div id="boxRight"></div>
</div>
</body>
</html>style.css
#cxy{
width: 100%;
height: 200px;
}
#boxLeft{
width: 200px;
height: 100%;
float: left;
}
#boxRight{
width: 200px;
height: 100%;
float: left;
background-color: lightgrey;
}分别复制上面的代码到index.html和style.css中。可以看到我们在body中使用了三个标签，块标签命名为cxk，cxk中又包含一个图像以及一个块。
※ ID选择器在CSS中用'#'号选择
在CSS中我们对图像和块进行了描述，很容易看懂，width是描述宽度，height是描述高度，background-color是描述颜色。float是重点，我们后面再说。
尝试修改这些属性，看看网页的变化。
现在有了照片和右边的方框，我们要给他添加标题和描述。
在index.html <div id="boxRight">▲</div>的 '三角形' 处添加以下代码：
<div id="title">蔡徐坤</div><div id="intro"></div>
在style.css的文件中
#title的宽度设置为100%；高度设置为50px;文字居中;字体大小25px;行高50px;
#intro 的宽度100%；高度150px;
#title{
width: 100%;
height: 50px;
text-align: center;
font-size: 25px;
line-height: 50px;
}
#intro{
width: 100%;
height: 150px;
}在index.html的intro块中添加以下HTML
<div class="hobby>唱</div>
<div class="hobby>跳</div>
<div class="hobby>RAP</div>
<div class="hobby>篮球</div>
<div id="cxy">
<img id="boxLeft" src="http://d-d.design/cxk.jpeg">
<div id="boxRight">
<div id="title">蔡徐坤</div>
<div id="intro">
<div class="hobby">唱</div>
<div class="hobby">跳舞</div>
<div class="hobby">RAP</div>
<div class="hobby">篮球</div>
</div>
</div>
</div>描述一下刚才添加的class选择器
※ 类选择器在CSS用'.'号选择
10px的边距
上下左右各10px的空隙
白色背景色
5px的圆角
浮动：左边 //现在不用理解
字体颜色橙色
一像素的实线边框
.hobby{
box-sizing: border-box;
padding: 10px;
margin: 10px;
background-color: white;
border-radius: 5px;
float: left;
color: orange;
border:1px solid orange;
}是不是已经感受到类选择器的作用了呢，可以批量的设置相同类型的标签。
看到一个新css：box-sizing;我们先不管他
通过以上的实际操作我们已经使用了一些常用的CSS，下面这张表我你在入门阶段会经常用到的CSS
| 属性 | 说明 | 示例 |
| width | 宽度，单位（%）或（px） | width:200px; |
| height | 高度，单位（%）或（px） | height:200px; |
| float | 浮动，值（left）或（right） | float:left; |
| color | 字体颜色，值（red、#d0d0d0……） | color:black; |
| background-color | 背景颜色 | background-color:red; |
| line-height | 行高，单位（px）或（数字）代表倍数 | line-height:2; |
| text-align | 字体对齐，left，right，justify; | text-align:justify; |
| border-radius | 圆角，单位（px） | border-radius:5px; |
| border | 边框 | border:1px solid red; |
| padding | 外边距；如左边距padding-left:10px | padding:10px; |
| margin | 内边距；左边内边距margin-left | margin:10px; |
五. HTML+CSS布局
以上就完成HTML以及CSS的简单上手了，现在，请忘记我们学过的所有内容！请忘记我们学过的所有内容！请忘记我们学过的所有内容！
第一阶段的学习只是让你对HTML和CSS有个初步的印象。
开始第二阶段的学习，用最简单的方式让你学会布局。
伍子蛇
我教你的还记得多少?
回子蛇哥，我只记得一大半。
那，现在呢?
已经只剩下一小半了。
那，现在呢?
我已经把所有的全忘记了！
好，你可以上了…
忘记之前学过的所有东西，HTML只需要记住div就可以了，前面我们说了'块'是div，块级元素的概念就不展开讲了，理论上div可以模拟所有的标签，那么就意味着只要会用DIV了就会使用HTML了！
CSS我们只用记住最简单的4个属性
| 属性名 | 简介 | 示例 |
| width | 宽度：单位（px）或者（%） | width:200px; |
| height | 宽度：单位（px）或者（%） | height:200px; |
| float | 浮动：left 或者 right | float:left |
| background-color | 背景色（orange、#d0d0d0……） | background-color:red; |
上面的东西都已经记住了吧，记住之后我们继续往下。我们来动手写一个布局。
step1 一个灰色的块
最好在不看我的代码的情况下自己手动完成。
需求：写一个宽1000px；高600px；颜色为grey的块
//html
<div id="box"></div>
//css
#box{
width: 1000px;
height: 600px;
background-color: grey;
}
step2 在灰色块中建立两个块
需求：将灰色块分为上下两个块，上面的块高度：120px，颜色为红色。下面的块高度为剩下的部分，颜色为burlywood
//html
//在box块中加入下面两行代码
<div id="box1"></div>
<div id="box2"></div>
//css
#box1{
width: 100%;
height: 120px;
background-color: red;
}
#box2{
width: 100%;
height: 480px;
background-color: burlywood;
}
通过step2，我们就已经掌握了标签的嵌套，可以在一个标签内写入标签。
step3 将burlywood块分为左右两块
需求：将颜色为burlywood的块分为左右两块，左边块的宽度为70%；颜色为cadetblue。右边的块宽度为剩余宽度，颜色为orange。
//html
// 在box2块中加入下面两行代码
<div id="box3"></div>
<div id="box4"></div>
//css
#box3{
width: 70%;
height: 100%;
background-color: cadetblue;
float: left;
}
#box4{
width: 30%;
height: 100%;
background-color: orange;
float: right;
}
发现了么，flot的用法就是将一个块分为左右两块的时候，左边的块float:left;右边的块float:right
step4 将cadetblue块分为上下两块
需求：将颜色为cadetblue的块上下分为两块，上面的块高度为120px；颜色为skyblue。下面的块高度为剩余高度，颜色为pink。
//html
// 在box2块中加入下面两行代码
<div id="box5"></div>
<div id="box6"></div>
//css
#box5{
width: 100%;
height: 120px;
background-color: skyblue;
}
#box6{
width: 100%;
height: 360px;
background-color: pink;
}
发现了么，step4和step2几乎是一样的。
写了这几个块你会发现很简单就可以完成色块的搭建，那么这些色块的搭建有什么用呢？看看下面的图你会发现，其实这就是本页面的简单架构。只不过是嵌套了更多层级罢了。
※ 注意：在入门阶段一定要做到一个块只分成两块（无论是上下分还是左右分）
布局原则：
① 从最大的块开始写
② 将最大的块分为两个部分
③ 将分出来的两个部分继续分成两个部分
④ 以此循环直至分到最终想要的布局效果
六. 小结
通过以上的学习，我们学习到了以下几点，请按顺序确认是否学会：
① 已经初步认识了HTML和CSS
② 学会了div+css对页面进行布局（ID选择器的使用、类选择器的使用、左右分布的元素使用float）
很好，你已经掌握了写网页的思想核心。
接下来我们将继续练习写布局，并在写好的布局里面增加更多的html标签，以及描述。
初极狭，才通人，复行数十步，仿佛若有光，成功就在不远处。
伍子蛇
七. 一个简单的网页
我们继续使用刚才的布局代码，进一步写它的样式。
在写之前，你有没有发现之前我们做的布局外部有一圈白边，那是浏览器给body标签预设的CSS，所以我们要在CSS中加入以下这一段来去掉这个白边。
body{
margin: 0;
}有没有觉得这个选择器我们并不认识？既不是ID选择器，也不是类选择器。这是我们要学的第三种选择器，叫做元素选择器。
元素选择器是最常见的 CSS 选择器。换句话说，文档的元素就是最基本的选择器。比如:div{background-color:"orange"},这句话的意思就是所有的div的背景色都是橙色。这就是我没有把它放在前面讲的原因，一般单独的元素选择器是用来做默认样式声明的。不要直接使用。
step5 红色块分为上下两个块
需求：红色的块分为上下两个块，上面的块高度40px；颜色3c3c3c。下面的块高度为剩余高度；颜色为白色
//html
// 在box7块中加入下面两行代码
<div id="box7"></div>
<div id="box8"></div>
//css
#box7{
width: 100%;
height: 40px;
background-color:#3c3c3c;
}
#box8{
width: 100%;
height: 80px;
background-color: white;
}
与step4和step2一样
step6 白色块横向平分为7块
需求：将白色块分为7个小块，高度不变，并且加上1px的实线黑色边框
//html
// 在box8块中将下面这行代码复制7遍
<div class="box8child"></div>
//css
.box8child{
width:-webkit-calc(100%/7);
float: left;
height: 100%;
border: 1px solid black;
box-sizing: border-box;
}
//宽度可以写成上面这样，也可以算出100%/7的结果
//写成width:14.28% 也是可以的
这里有个新的css叫做box-sizing;它有什么用呢，你可以去掉这个属性再看看。
box-sizing是将border以及padding放在块的内部。以实现加上border和padding块的高度和宽度不改变。
step7 给类为box8child的块加上链接
需求：给类为box8child的块加上链接，链接指向http://d-d.desing，链接颜色为黑色，链接名字为：栏目，链接名字上下居中，触摸链接颜色变成红色；去除类为box8child块的边框。
//html
// 给每个box8child块中都加入下面这行代码
<a href="http://d-d.dsign">栏目</a>
//css
.box8child{
width:-webkit-calc(100%/7);
float: left;
height: 100%;
text-align: center;
}
.box8child a{
text-align: center;
line-height: 80px;
text-decoration: none;
//上面这条的意思是去掉链接自带的下划线
color: black;
font-weight: bolder;
//字体为粗体
font-size: 20px;
}
.box8child a:hover{
color: red;
}
这里有很多新的CSS
.box8chid a{}这样的写法，这叫派生选择器。意思是class名为box8child的全部标签中全部a标签
文字左右居中需要在它的父级设置text-align:center；也就是标签a要居中需要在父级box8child中设置
※ 文字上下居中小窍门：将需要上下居中的元素设置line-heignt的值等于父级元素的高。
元素:hover{}这样可以设置该元素被触摸后的变化。这样的写法叫做伪类
遇到任何无法解决的问题请精准的描述进行百度，比如遇到标签a有下划线无法去除，则百度 ‘css 去除a标签下划线’
根据step7可以同理做出最顶端黑色块的详细内容和橘色的内容了，自己可以试一试；
有点需要补充说明，不仅仅是img标签可以插入图像，用div也可以，并且更多时候用div插入图片可以更好的控制。下面我们将在粉色区域插入一张图片给你演示。
step8 在粉色块中插入图片并铺满
下载一张图片，放在images文件夹中，在粉色块中插入该图片作为背景图片，图片尺寸铺满
//css
#box6{
width: 100%;
height: 360px;
background-color: pink;
background-image: url(../images/bph.jpeg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
//可以发现background-color和background-image可以同时存在
//如果插入的图片是透明的png
//那么就会看到背景色和图片的样子
在div中插入图片作为背景图的方式为background-image:url('图片地址');
注意这里的图片地址用的是../，这是为什么呢，../代表的是上一级文件夹，./代表着当前文件夹，可以回到最顶上去看看目录结构。
铺满是background-size:cover;
八. 扩展阅读
通过以上的学习，你已经学习到了一个网页的基础知识
需要更多的反复联系才能变成自己的知识
在文末我会出一道测试题，做出来你就通过了本次学习
不用强硬的背HTML或者CSS，熟能生巧，什么都不记得才是无招胜有招。
伍子蛇
一些重点难点的扩展阅读，不需要完全理解，慢慢来比较快。
padding、margin、border
padding是内边距、border是边框、margin是外边距。
通俗来说，一个块，border是它的边界，padding在边界里面，margin是这个块与其他块的缝隙
要熟练掌握还需反复测试与练习。还记得之前出现的css：box-sizing:border-box。对于padding是有奇效的
float 浮动 [不用深入理解]
HTML的文件流是至上而下的，但是很多时候我们需要从左向右或者从右向左的布局，因此，就用了float
请看右图
当把框 1 向右浮动时，它脱离文档流并且向右移动
直到它的右边缘碰到包含框的右边缘
再请看右图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
九. 最终测试
在测试的过程中，有不懂的地方请查阅W3school；以及描述清楚进行百度，请相信我所讲的内容已经涵盖了HTML和CSS的核心，你已经可以写一个网页了。剩下的，靠你了！
看到这里的童鞋们，你们已经胜利了，我们接下来开始对你的学习成果进行检验
请按照下面的设计图进行制作。
伍子蛇
注意！一定要尽一切可以做得和设计图一样，一模一样！任何的差池都是不及格的，一模一样！下面会给出这个网页将用到的css。
提示：做测试的步骤第一步是画布局，就像我们做的练习一样，画色块。其实我已经帮你做出了色块如何分布的图。布局好了之后第二步是做布局里面的细节，加油吧！
| width 宽度 | height 高度 | margin 外边距 |
| pading 内边距 | border 边框 | background-color 背景色 |
| background-image 背景图 | background-position 背景位置 | background-size 背景尺寸 |
| float 浮动 | line-height 行高 | border-radius 圆角 |
| ※ box-sizing |
可以随时在评论区留言遇到的问题，看到后一定第一时间解答。
完成测试的同学们，请点击此处前往W3school从头至尾阅读HTML以及CSS，不要求记住，但脑海中完整的知识图谱在你入门以后是非常重要的。以上！
孤斗 [gū dóu] 全作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可
受教
看见蔡徐坤那把爷弄笑了。
你居然还能看到蔡徐坤，哈哈，看的很仔细呀~
0基础怎么搞，英语都不会