【软硬结合】HTML、CSS、JS基础

Aug 25, 2018 | 软硬结合客户端开发 | 阅读

条评论

文章目录

1. 本篇视频
2. 本篇学习内容
3. HTML
1. 3.1. 在本机写一个最简单的html
4. CSS
5. JavaScript
6. 使用调试工具查看别人的元素
7. 结给其它教程学习
8. FAQ
9. 附录

在阅读本篇文章之前，你已经阅读了：

本篇视频

本篇学习内容

编写最简单的页面
自学基本的HTML、CSS、Javascript知识

关于HTML、CSS、JavaScript，网上有很多也很优秀的教程，我不再重复。别人写的教程会比我写的完整详细，我这里简单地起一个头。

不再重复造轮子

先放结论：

HTML用于描述网页内容。
CSS用于描述网页样式。
JavaScript用于实现交互行为。

HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML），HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。 ——维基百科

手机浏览器请求我的网页时，我想显示一个按钮，于是我代码里返回了一个数据：

这是一个按钮

然而这个傻逼浏览器竟然没读懂我的想法，最终浏览器展示了一行字：

这是一个按钮

浏览器内心：“我鬼知道你是要想显示字，还是要显示按钮呀？”
所以，要另外使用一种方法，让浏览器知道，这部分内容要显示成字，还是显示成按钮，这就是HTML的作用：

1	<button>这是一个按钮</button>

最终浏览器展示的效果：

所以，HTML的本质就是告诉浏览器，这里要显示为按钮，那里要显示为文字。

在本机写一个最简单的html

完整的html，还包括一些东西，<html>和</html>之间的文本描述网页，<body>和</body>之间的文本为可视页面内容。

<html>
  <head>
  </head>
  <body>
    <p>这是一段文字</p>
    <button>这是一个按钮</button> 
  </body>
</html>

打开vscode，然后在桌面新建一个文件夹（名字随意，比如叫example），然后拖动文件夹到vscode图标上，再创建一个index.html文件，里面复制以上代码并保存。点击打开所创建的index.html文件，就可以看到你所写的HTML代码。（直接点击打开index.html是浏览器打开，会被渲染成网页。而用编辑器打开，才会显示HTML代码。）

CSS

这玩意就是声明网页的内容该如何演示，能通过CSS改变颜色、大小等等。学习CSS如何练习画画，反复练习就可以了，请结合其它教程学习。

1	<p style="color:red;">这是一段红色文字</p>

JavaScript

HTML与CSS都不是编程语言，都像是种声明。HTML告诉浏览器这一个元素是按钮，CSS告诉浏览器这字体要显示红色，而JavaScript就负责所有逻辑判断、动作交互，如：点击这个按钮就会执行怎么样的动作。

1	<button onclick="alert('你点击了按钮')">测试按钮</button>

如果之前有学习过编程语言，学习JavaScript就是熟悉其语法罢了，一理通百理通，很快就能上手。但如果这是你学习第一门编程语言，需要时间就比较长，毕竟学习编程是一个过程，需要时间慢慢学习。

使用调试工具查看别人的元素

网页有个特点，那就是只要网页能显示出来的，大部分你都能拿到！
Chorme浏览器的右上角的省略号，点击打开更多工具->开发者工具可以打开调试工具（快捷键Ctrl+Shift+I，或者直接右键菜单里检查），切到Element板块查看别人的的HTML、CSS是怎么写的。当你看到别人的网页很漂亮想参考别人的代码怎么写的时候，或者说想拿那张图片，都可以做到。

结给其它教程学习

上面我只是简单地演示了使用vscode开发网页，里面还有很多需要学习，比较出名的教程有w3school、菜鸟教程、廖雪峰教程。当然，网上的教程还是比较浅，适合快速了解上手，但根基不实。如果你还想要学习得更踏实，就要啃书。

在线教程:

学习 Web 开发- MDN【推荐】MDN是web领域最好的文档，但好像有时访问不了
w3school
JavaScript-菜鸟教程
JavaScript教程-廖雪峰

FAQ

为什么我按网上那些在线教程学，好像效果不怎么样？
答：网上的教程一般般，不讲技术的诞生原因，不讲核心观念，只讲怎么用而已，所以最好能看书。另一方面，编程需要大量动手练习才能提高能力，绝对不是记一些知识点就能马上做出满意的作品。一般来说，至少模仿三到五个网页，所做出来的东西才能看一下，千万不要因为自己翻了一下书，记了一下知识点，做第一个作品效果太差就气馁。成长需要一个过程，去模仿三到五个网页吧。
怎么模仿网页？
答：找一些简单的自己喜欢的网页，然后使用 chrome开发者工具分析别人是怎么做的，然后自己新自做一次。某个地方做不出来，继续分析继续做。遇到没见过的东西就多搜索，觉得超出自己水平的内容先放下。
Javascript到底写不写;，声明变量时到底使用var还是let或const？
答：Javascript到底写不写;看个人习惯，写不写都行。声明变量时尽量使用let或const，只有考虑兼容性时才会使用var，var存在一些的陷阱。

附录