HTML 修真录------初识"异界"

请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。


第一章 楔子

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

“嗯?”

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

“妈呀,鬼呀!!!~”

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

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

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

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

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

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

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

“快点,来吧,走你!~”


第二章

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

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

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

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

“好无聊!~”

“你学不学?”

“学,您老继续。”

“前端开发工程师实际上是负责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 : 脚本语言行为

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

77800024ed3f1391c24
72100052c54a1507719

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

“能长能短?嘿嘿嘿,是不是还能粗能细呀?”

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

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

HTML 超文本标记语言

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

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

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

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

“哦哦,那我们如何去写 HTML 呢?”

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

7210005374bfdde6e04

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

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

“这个该怎么理解?”

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

“好的,我最喜欢 SM 了,牢牢的,嘿嘿嘿!~”

“。。。”

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

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

内联样式表

写法:
写在标签内部

优点:
优先级最高

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

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

“那另外两种方式呢?”

“另外两种方式分别叫‘内部样式表’和‘外部样式表’。他们都是需要写在 <head> 标签内部的。”

7210005443a2d250c90

721000544f4aeb78256

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

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

721000549e29e62df50

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

“嗯呢,敢问老夫尊姓大名?”

“李鹏李先生!”

“久仰久仰。”

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

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

“嗯,孺子可教。”

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

778000277e2c53e0b96
778000277e2c53e0b96
721000550c7d4c23be5
721000550c7d4c23be5

778000276259672d2c9
778000276259672d2c9
7780002771f9ac600a1
7780002771f9ac600a1

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

721000557414ee1e285
721000557414ee1e285
72100055a812035bf0c
72100055a812035bf0c

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

778000280c10b926632
778000280c10b926632

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

72100055e0fbce1e6cb
72100055e0fbce1e6cb
778000282fa7c5f2ee7
778000282fa7c5f2ee7
778000283ad1ec3d2f6
778000283ad1ec3d2f6

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

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

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

“大爷,您小心肾虚。”

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

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

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

778000289591a656eec
778000289591a656eec
721000565ad2d0b66a4
721000565ad2d0b66a4

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

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

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

“谢谢大爷!~”

“叫老师!你个龟孙。”

“呃,老师。”

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

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

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,685评论 1 83
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 964评论 0 8
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    袁俊亮技术博客阅读 3,231评论 0 72
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    poetries阅读 12,584评论 32 435
  • 穿高跟鞋的女医生、大失血时打针不绑压脉带、40ml的甲强龙……近年来在医疗剧中不少能气死专业医生的错误频出,观众...
    草席0阅读 33评论 0 1