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="data: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");}
}