Let's Start Our Web Develop Topic!

Day 00


From the Beginning

我们开始讲一讲web开发吧 TTfish会在接下来的几篇post中 介绍一下Web前端(front End)和Web后端(back End) 当然我们会从头开始 也就是有很多的东西需要自己写出来 (例如现在已经没有人手写的网络请求…) 现在已经2018年了 这些复杂的东西已经有封装好的package 我们在实际开发中 只需要调用包装简便的package就可以加速我们的开发 但是 为了弄清楚他们到底是怎么运作的 我们在学习的时候不能偷懒

今天是第0天 TTfish会推荐进行开发的基本概念和思想 优秀的开发思想和习惯比代码更重要! 无论是以后选择移动端开发(IOS\Android)还是继续web开发 都是挺重要的东西呢 (。・∀・)ノ

QSC的宗旨就是Leading the tide~ 我们尝试着世界上最新的计算机技术 实践最有创意的工程!

如果遇到什么问题欢迎随时询问TTfish~

TTfish可能不会直接回答你的问题

但是会告诉你哪里能找到你的答案

这个更重要呢

(现任QSC站长对TTfish的谆谆教诲)

Start from Web Pages

我们平时看到的web page 一般都由三个大部分组成 HTML CSS JavaScript 其中每一个部分都有自己的语法,HTML包含着页面的元素(Elements) 通过CSS选择器 我们可以设置页面中每一个元素的样式(Style)而为了处理用户的操作,我们使用javascript(js)作为脚本(script)进行编程 我们可以在任何一个网页右键 选择检查(inspect)然后查看每一个元素 随便举一个例子

如果使用了Chrome的话 在extension store中有更多的小工具可以帮助开发 具体下次再说~


About Develop Environment

那么 既然我们已经做好了进行web开发的准备(真的吗?) 我们的电脑是否做好了足够的准备呢?

  • 首先 需要一个文本编辑器或者集成开发环境(IDE) 用来编辑你的代码

推荐安装Visual Studio Code 这是一个文本编辑器 有非常优秀的extension可以安装 用来做网页开发足够了! Download and write your codes!

  • 其次 我们需要找到一个自主学习的地方

我们在开发的过程中会遇到各种各样的问题 我们需要自己去寻找答案 有很多地方能够帮助我们

  • Google (毫无疑问是万能的老师 你能搜索到几乎所有你能够遇到的问题)
  • StackOverflow (有许多有意思的问题都在上面得到了讨论)
  • MDN (web developer的家 Mozilla基金会的web开发)
  • Github (全球最大的同性交友网站 程序员的开源仓库 你可以找到各种各样的源代码和相关的issue)

因为我们进行着开发 所以我们不可能指望所有的问题都能够被别人所解决 也不可能指望所有的技术都由老师教给我们 参与论坛的讨论 自
我学习提高才是开发者应该做的事


Start our First Project

说了那么多的啰嗦的话 我们可以考虑开始我们的第一个project了 第一个project 我们需要完成一个网页制作

我们平时在浏览器看到的网页 其实是我们的电脑 向我们希望能够访问的网页的服务器(server) 发送了一个请求(request) 我们的浏览器解析了对方的服务器发回的response 渲染(render)成为了我们看到的网页 这里我们需要HTML的帮助~

Let’s Write HTML

HTML是超文本标记语言 是我们和浏览器交流的语言 假设我们想告诉浏览器:”ttfish是一条鱼” 而浏览器往往需要知道更具体的信息 那么我们把名字标注出来 我们可以这样写 <name>ttfish</name>是一条鱼

而如果浏览器需要得到更多信息 我们就不妨把更多信息告诉浏览器 我们就这样写 <name>tt<species>fish</species></name>是一条鱼
这样 浏览器就不仅知道了ttfish的name 更知道了ttfish的species是fish

例如 我们先来看一段代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML>
<html>
<head>
<title>
TTFish
</title>
</head>
<body>
<h1>Hello Developer</h1>
<p>TTfish is on sale!</p>
<div>
<p>ttfish is here</p>
<a href="http://ttfish.top">Click ME TO BUY</a>
</div>
</body>
</html>

显示如下:

我们可以很开心的看到 有一些元素被渲染了出来
我们可能很头疼 因为在源代码中看到了很多不认识的东西

  • <!DOCTYPE HTML> 这个不是标签 这一行告诉浏览器我们的文本格式是HTML
  • html 这个是html文件最外层的标签
  • head 这里一般存放一些不显示在页面主体的代码块
  • body 这里存放着网页主题显示的内容

HTML 语法要求所有的标签都完好地闭合 请注意( ̄▽ ̄)”

<div>标签是一个非常重要的标签 我们可以把它理解为一个通用的容器 可以在div标签中 包含一些其他标签 并将这样的div看成一个块(block) 这样对于我们之后的调节CSS与大规模的项目开发有非常多的好处

HTML还有非常多的标签 比如:

  • <title> 我们的网页的标题 一般放在<header></header>中 显示在浏览器的标签卡上
  • <p> 段落元素 用来存放文字
  • <a> 链接元素
  • <img> 图片元素
  • <button> 按钮元素
  • <h1> 一级标题 当然能猜到<h2><h3>之类的标签是什么意思

每一个标签还可以有属于自己的属性(attribute) 例如<a href="http://ttfish.top" class="button">Click ME TO BUY</a> 表示”a”标签的”class”(类别)是”button” 链接地址是”ttfish.top” 标签中的文字是”Click ME TO BUY” 我们点击了链接标签 我们就会跳转到那个页面

具体关于html标签请查询MDN上的介绍~

如果你之前就有编程基础 对于物理计算、粒子渲染有兴趣的话 可以看一下<canvas>标签 尝试手写一些简单的canvas

Continue with CSS

完成了之前的页面之后 我们是不是觉得少了些什么~ 嗯 我们没有设定样式(style) 所有的元素都非常”朴素”的排布在页面上 不好看 于是我们需要CSS的帮助来拯救我们的眼镜! 在html页面中引入了css后 我们可以通过css选择器选中html中的元素(element) 并且设置它的style 使得它更加漂亮 o( ̄▽ ̄)o

请自行查询如何在html中引入css文件 (有多种方法) hint: <link>/<style>/style="" ...

1
2
3
4
5
6
7
8
h1{
color: white;
font-size: 72px;
}
.button{
height: 30px;
width: 80px;
}

css选择器中 xx 选择了element name #xx选择了id name .xx 选择了class name 请自行Google css selector的相关知识~
頑張ります!

有关于CSS 有非常多的属性 这里根本讲不完(有些你可能也不会遇到)而例如伪类(例如:hover属性 很有用) 可能使用很多
请加油哦~~

Update on 6.28 CSS补充

  • 在自行搜索HTML标签的时候 请注意在MDN上的标签建议 类似于<font>这样的标签已经被废弃 (前端的api变的比变天还快
  • 对于页面元素布局的CSS 有一些比较常用
    1
    2
    3
    4
    5
    6
    div{
    position: relative/fixed/absolute....;
    display: inline/flex/block.....;
    margin: 0 0 0 0;
    padding: 0 0 0 0 ;
    }

每一个属性都有各自适合的地方 用的多了就熟悉了~

具体作用请自行查询MDN flex是一个不错的方法

Finally goes the Homework!

讲了那么多 其实还没有涉及对于javascript的讲解 我们先夯实基础吧! 那么我们有小小的作业了 (毕竟TTfish写了那么久 wuwuwu)

请实现一个 你觉得很漂亮的网页!这个作业不限时间 目的是熟悉html和css的操作!!! 你可以实现一个自己的个人简历 也可以自己设计一份报名表单 如果你觉得TTfish的blog太丑陋了 你也可以做一个TTfish的主页的替换品 ~~ 实在没有什么想法的话 只能偷偷的去设计师网站Dribbble查找 (偷偷的!别让TTfish知道) 在写网页的时候 你一定会发现有一些想要实现的功能并不能用HTML和CSS来解决 请不要伤心 这就是javascript的作用所在了 下一课会好好讲一讲它~

如果写完了小作业 你的心中有了一些想要开发的欲望【(欸?我是不是可以做一个xxx样的网页呢?)】这样的想法 请在评论中提出来呢 说不定是一个非常有价值的想法 每一个有创意有需求的想法都值得实现

总之 请加油哦!!!

Share