大前提：我假设看这个文章的人会使用鼠标，会创建文件，删除文件等电脑基础操作...有基础的理解能力，对编程知识毛都不懂
如果你有以上的前提条件，那么就继续吧，不然你观看过程中可能会出现“眩晕”“恼怒”“觉得作者是SB”等不良反应，后果自负
先想一个问题：假如你是一个店长，管理着N家连锁商超，你想要统一管理所有商超内商品的陈列顺序以及位置和数量，你该怎么做呢？
你可以这么写：
1.XXX商品摆放在第一个货柜，横着摆放，货柜的颜色是白色；
2.XXX商品悬浮在第一个货柜的下面10cm处；
... ...
但是这么写不够美观，不够规范，所以可以优化成
| 商品名称 | 货柜颜色 | 摆放方式 |
| XXX | 白色 | 横着 |
<商超开始>
<货柜A开始 颜色：白色>
<商品A 摆放方式：横着>
<商品B 摆放方式：竖着>
<货柜A结束>
<商超结束>这样写就很清晰了，仿佛直接就看到了真正的货柜一样了吧
回来继续说前端的第一个基础：HTML
HTML按照我的理解就是大家遵守某个规则写出来的一个文档，这个规则的演化可能是我上面说的那样
也就是说，HTML只是一个规则
我举几个例子
比如：<html></html>就跟上面写的<商超开始><商超结束>一个道理，只是<html></html>表示的是一个页面的开始和结束，而<商超开始><商超结束>表示一个商超的开始和结束，<html></html>之间是网页的内容，<商超开始><商超结束>之间是商超店里的内容
把咱们的<货柜A>换成<div ="货柜A">，<商品A>换成<div title="商品">就变成了
<html>
<div title="货柜A">
<div title="商品A"/>
</div>
</html>是不是跟咱们推演出来的文档结构很像！
HTML是一个提供给全世界使用的文档，所以不能像咱们的"货柜"，"商品"这样不够抽象的描述，HTML提出了一些规则，我简单说几个，咱们就用这几个就够了（这确实够写一个页面了，但这样并不标准，但是，在你什么都不会做的时候，先学会做，再去做的好）
<html>：表示一个页面，类比：一个商超
<div>：表示一个区域，类比：一个货柜 或 一个商品
还有几个知识点：在HTML文档中，类似html，div等都叫做"标签"，标签必须是闭合的，闭合有两种方式
<html></html>这种叫做非自闭和
<html />这种叫做自闭和（html这么写没有意义，因为html一定要有内容）
类推一下div就是：<div></div>和<div />，注意！当自闭和的时候<div这里有个空格/>
其实所有标签都可以这么写，但是你慢慢会发现，有些标签使用上基本会使用一种方式，例如：<img />基本上永远是自闭和
标签还有一个功能就是：属性
上面我举例中有一个<div title="商品A">，title就是这个标签的一个属性，这里使用是想说明这个标签代表了商品A，不过一般情况下你知道这个标签干什么用的就行，不用非得写个title="商品A"，因为浏览器不需要知道这个标签是什么，他只是按照你的HTML文档，渲染出对应的页面而已。
关于标签的属性有很多，不过你先不用去了解，需要的时候百度一下就知道了，多用几次就记住了
这里介绍一个关键的属性：style，这个属性代表了标签的展现方式，类比：一个商品的摆放方式
前端之所以能呈现出各式各样的形态就是因为style属性
这里简单介绍几个基础属性，以后随着我的文章我会一点一点的介绍
width：宽度，可以是“100px”或“50%”（举一反三哈~），其他的先不需知道
height：高度，可以是“100px”或“50%”（举一反三哈~），其他的先不需知道
color：文字颜色，可以是单词“red”、“grey”等，或者是“#fff”（#后是16进制的6个数字，也可以缩写成3个，不懂就先用单词），其他的先不需要知道
font-size：文字尺寸，可以是“32px”（举一反三哈~），其他的先不需知道
backgorund-color：背景颜色，如color一样
border：边框，可以是"1px solid red"，第一个是边框的宽度，第二个是边框的样式，第三个是颜色（举一反三哈~）
这些设置，你都可以百度搜索得到，我不多说，多试一试，很爽的。
style属性的值书写有一些规范，就是"名称 : 值 ;"，名称是width/height等，值就是这些名称可以设定的值，例如style="width : 100px;" （这里涉及到的px指的是像素，这个你先别去了解，因为关于这个也够将一堂课了。）
这回把style属性应用进来
<html>
<div style="width:100px;height:100px;color:red;font-size:30px;background-color:#ccc;border: 1px solid grey;">我的第一个页面</div>
</html>1.在任何地方都行，新建一个文本文档，修改文件名为：我的第一次.html吧，然后回车，系统可能会让你确认是否修改扩展名，点确定就可以了。（注意：如果你新建一个文本文档，默认名称不是“新建文本文档.txt”，你可能是没显示文件的扩展名，你去百度，必须得看到文件的扩展名才行，然后修改的时候得把“新建文本文档.txt”彻底写成“我的第一次.html”，关键的是要有“.html”，至于“我的第一次”你可以写成其他的。）
2.右键“我的第一次.html”，打开方式，记事本
3.把我上面写的代码，自己手敲进去，然后ctrl+s或者保存文件
4.双击“我的第一次.html”，你就能看到浏览器打开了一个页面，如下所示
好了，学到这些，如果你都会了，你已经很牛逼了，因为你能用txt文档编程了，就像电影里的大牛一样，哈哈哈哈哈~
下一章打算写：定位，并且会写出一个标准的网页，但是不定啥时候写呢
扫一扫
7964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
