大话 HTML 初识"异界"_html/css_WEB-ITnose

第一章 楔子

“你醒了？”老者问，摸着长长的胡须，一脸慈祥。

“嗯？”

等等，这个老头怎么直接悬在半空中。

“妈呀，鬼呀！！！~”

老者看了看自己，似乎没有什么不对。瞬时，想起来了。

“你出车祸，死了。咳咳，但你是因为我们的失误而死亡的，所以让你有了一个投胎的机会。”

“如果你还想回去的话，就好好呆在这里，等我先传授你一门绝学，好让你能在下一个世界混下去的绝学。”

你忍耐着，突然说，“喂，你有够过分的。你们的错就算了，还不让我回去原本的世界。行，我学会了会怎么样？。”

“你要是能够将这门绝学学至最高层次，年入百万，发家致富，赢取白富美，走上人生巅峰毫无难度，是不是想想还有点小激动呢？”

“是呀是呀，那咱们赶紧开始吧。”

“好的，此门神功需七七四十九日不间断学习，你可想好了？”

“快点，来吧，走你！~”

第二章

首先老夫先来跟你说说，你学成之后，该如何去伪装成为一个“老手”。

首先我们学成之后，首先会有一个“封号”。

“是什么狂拽炫酷吊炸天的称号么？是灵冰斗罗还是血刃神帝？我要不要换个名字，想霍雨浩或者牧尘什么的？”

“是个蛋，给老夫躺好，你的封号是叫—-前端开发工程师。”

“好无聊！~”

“你学不学？”

“学，您老继续。”

“前端开发工程师实际上是负责IT系统工程的，实际上就是负责信息化系统的设计、建设，包括设备、系统、数据库、应用系统的建设的。”

“说人话！”

“咳咳，你前期就是个做网页的，但是后期会慢慢变得越来越厉害，自己写网站，做各种动画游戏不再话下，喜欢哪个女生，分分钟在网页上给你画出来花。会了这些害怕追不到妹子么？”

“流弊，那我该如何和其他人一起双修呢？”

“看不出来，你还挺有慧根的。”

“那是，哥毕竟也是学过大学计算机基础的，精通 PPT,EXCEL……..”

“咳咳，跑题了。等你进入公司后，一般来说都是这么分工的。”

1.产品需求: 由产品经理给出需求文档

2.项目设计:
视觉设计师–>PSD 设计图
交互设计师–>对网站交互进行设计

3.前端开发:
HTML
iOS
Android
Unity-3D

4.后台开发:
后台人员配合

5.上线运营

“需要注意，很多公司实际上把网站规划这个工作也直接交给产品去做了，这实际上是不对的。而且像网站的交互设计师，很多公司都直接被省略了，而且最后的上线运营一般来说，跟咱们也没什么关系。”

“哦哦，那我接下来都要学习什么呢？”

“首先就是要学习各种开发工具的使用，例如各种浏览器的使用，熟悉各种浏览器的插件，明确各种浏览器之间的差异，并且还要掌握使用传说中的《亚洲四大邪术》中的 中国PS 术。”

“すばらしい！（好厉害）”

“啥？”

“没事，还有什么？”

“还需要掌握各种语言，例如 HTML ,CSS ,JS ,DOM ,BOM ,PHP ,Ajax ,Node.js等。”

“大爷，这都是什么鬼？”

“不是鬼，是各种语言，还有你要掌握的技术。”

“好吧，我们从哪里开始？”

“今天老夫先来给你讲讲前端开发的核心语言。”

前端开发的核心语言
HTML : 超文本标记语言结构
CSS : 层叠样式表表现
JS : 脚本语言行为

“要是还是不懂，老夫给你举个栗子。”

“看见没有，HTML , CSS 和 JS 三者实际上相互配合的，HTML 负责结构，CSS 负责样式，JS 负责行为，例如我点击了一下，这个色块就变长了。”

“能长能短？嘿嘿嘿，是不是还能粗能细呀？”

“给老夫滚，想哪去了。”

“低调低调，对了，刚才说这个里面用了这三者，那么什么是 HTML 呀？”

HTML 超文本标记语言

超文本?
超越文本,可以包含图片,链接,和一些其他的资源

标记?
特定的位置写特定的内容（都写过信吧，信封上让你写邮编的框框就是标记呦）

如何做标记?
> 双标记
>单标记

标记语言?
给标记里面书写”特定的”英文单词,给这个标记赋予了特殊的意义.
这就是标记语言.

“哦哦，那我们如何去写 HTML 呢？”

“这个先不急，我们首先来认识一下，HTML 的基本结构。”

“哦哦，そうですね（原来如此）。可是这样写出来的内容一点都不好看呀，我该如何去把这个东西变得更美观一点呢？”

“这就要用到我们的 CSS 了，也就是我们的层叠样式表。”

“这个该怎么理解？”

“理解个蛋，给老夫牢牢记住。”

“好的，我最喜欢 SM 了，牢牢的，嘿嘿嘿！~”

“。。。”

“那我们该如何去把这个东西引入在页面中呢？直接写么？”

“当然不是，这个引入方式分为三种。像我们刚才使用的方式，就是‘内联样式表’ 。”

内联样式表

写法:
写在标签内部

优点:
优先级最高

缺点:
冗余代码太多
不利于维护

使用场景:
个别特殊效果的设置,平时不推荐使用

“那另外两种方式呢？”

“另外两种方式分别叫‘内部样式表’和‘外部样式表’。他们都是需要写在

标签内部的。”

“说到这里，老夫还需要给你说说CSS 选择器了，你想要某一个东西发生改变，首先就需要让它知道它自己需要改变。”

现阶段教给大家的三种选择方式
1.标签名选择器
2.类选择器
3.ID 选择器

“现在明白该如何去使用了吧。”

“嗯呢，敢问老夫尊姓大名？”

“李鹏李先生！”

“久仰久仰。”

“蛋，你明明今天才认识老夫。”

“别这么说么，互相吹捧有利于团结，您老先喝口水。”

“嗯，孺子可教。”

“既然已经教你如何去选择某一个标签了，接下来教你控制一些基本的样式。首先是背景。”

“学习了背景设置之后再来学习边框的设置。”

“之后我们学习还需要学习我们的内边距—-padding。”

“有内自然有外，外边距—-margin。”

“学会了 padding，border，margin 就可以组成我们前端开发无往不利的《盒模型》啦。”

“大爷，你知道的好多呀。”

“当然啦，毕竟老夫也是经常出去大保健的人，什么二龙戏珠，星球大战，老夫什么风浪没经历过。”

“大爷，您小心肾虚。”

“咳咳，老夫在给你说一下盒模型的占地面积问题。”

盒模型
盒子占地的空间面积
宽： width + border-left + border-right + padding-left + padding-right;
高： height + border-top + border-bottom + padding-top + padding-bottom;

“今天最后老夫再传授给你控制文字样式的各种方法。”

“注意，测试内容写的短一点，长了会出问题，不要问老夫怎么解决，以后会告诉你的。”

“哦哦，那就起我的名字吧。”

“嗯嗯，现在自己去试试，看看效果如何？如果有不懂的，可以再联系老夫。”

“谢谢大爷！~”

“叫老师！你个龟孙。”

“呃，老师。”

“嗯，回去以后勤加练习，以后必成大器。记得每天都要过来学习，每天留言点赞！”

“好的大王，谢谢大王。”

好的，今天文章到此为止，看到这里的都是真爱。
我头一次尝试用这种文笔来写技术文章，
期间可能有出错的地方，希望大家踊跃挑错，积极留言。
最后也希望大家能够跟着我继续学习，将来出去好歹也能说，自己搞过网站开发是不是。
2016年06月06日 用时3小时