web网页开发-前端
refer
- web开发
https://developer.mozilla.org/en-US/docs/Learn
本文是入门性质文章，主要通过讲解html，css，js的基础知识对前端有一个入门级别的了解。
工具准备
-
git，使用gitee或者github进行代码托管
https://registry.npmmirror.com/binary.html?path=git-for-windows/ -
沙拉查词，翻译用
https://github.com/crimx/ext-saladict -
Notepad++
-
chrome浏览器，确保disable cache，以此来保证更改网页后能够技术刷新
步骤为：右键-检查-network-disable cache
-
visual studio code
http://vscode.cdn.azure.cn/stable/78a4c91400152c0f27ba4d363eb56d2835f9903a/VSCodeUserSetup-x64-1.43.0.exe
下载vs后可以安装一些插件
网页结构
为了创建你的第一个网页，你的网页backbone应该具有如下目录
index.html，scirpts，images，styles如下：
最终通过编辑html，你可以生成自己的网页，如下：
html
html是一种标记语言(makeup language)，用于编辑网页，常见标签包括但不限于<p><h1><ul><img><a>等，学习html可以参考mdn的文档
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
html的一个element如下：
我们可以通过编辑html实现对网页的编辑，要注意class可以对很多个元素进行指定，而id每个元素都是唯一的，html的backbone如下：
<!DOCTYPE html>
<html><head><meta charset = "utf-8"><title>My test page</title></head><body></body>
</html><!-- 其中我们常见的标签有
1. image
2. Headings
3. Paragraphs
4. Lists
5. Links
-->
<img src="images/firefox-icon.png" alt="My test image"><!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4><p>This is a single paragraph</p><p class = "me" id = "me">At Mozilla, we're a global community of</p>
<ul><li>technologists</li><li>thinkers</li><li>builders</li>
</ul>
<p>working together ... </p><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>CSS
css是一种版面样式语言（style sheet language），建议不要花太多时间在css上面。想深入了解的可以参考mdn的文档
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
css文件的使用方式是，在style文件夹下建立./styles/style.css，而css文件的编辑规范如下：
css文档的实例如下：
p {color: red;width: 500px;border: 1px solid black;
}
写好css文件后，我们还需要在html的<head>元素中增加<link>标签，以确保该html已经链接了该css文件：
<link href="styles/style.css" rel="stylesheet">
JavaScript
JavaScript比较重要，可以认真学习，参考mdn的文档
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
JavaScript是一种脚本语言，脚本语言有别于编译型/解释型语言。脚本语言与解释型语言的主要如下：
解释型语言和脚本语言的区别
- 脚本语言是解释型的语言，也就是解释型语言包括脚本语言。
- 解释语言是说解释执行的语言，但执行的代码并不一定是文本格式的。
- 脚本语言的程序是文本文件，并且是解释执行的。
JavaScript重在逻辑的执行，能够增加用户的交互性，JavaScript具有的特点有
- 大量web browser的APIs供客户调用
- 用
let me = 0声明变量，变量具有多种类型如下：
- 有多种操作符号，其中要重点注意判断equal是
===，不等于是!==，赋值是= - 函数定义
function multiply(num1,num2) {let result = num1 * num2;return result;
}
- 多种事件
document.querySelector('html').addEventListener('click', function() {alert('Ouch! Stop poking me!');
});
// 匿名函数
document.querySelector('html').addEventListener('click', () => {alert('Ouch! Stop poking me!');
});
在这里我们增加在scripts/main.js增加JavaScript，我们再在html中的<body>部分增加对js的链接如下，注意要放在<img>标签后：
<script src="scripts/main.js"></script>
同时我们的JavaScript部分如下：
let myImage = document.querySelector("img");myImage.onclick = function(){let mySrc = myImage.getAttribute("src");if(mySrc === "images/firefox.png"){myImage.setAttribute("src", "images/firefox2.png");} else {myImage.setAttribute("src", "images/firefox.png");}
}
