简介
web前端开发入门学习文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules
你需要学习以下内容：
- html
- css
- js
学习
前端网站结构
一般性结构
- index.html 主页内容
- imgages 网站上的图片
- styles 样式文件 css
- scripts 脚本文件 js
html 基础
html 不是一门编程语言，是一种定义结构的标记语言
简单举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
标题：
<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>
段落：
<p>这是一个段落</p>
列表：
无序是 ul，有序是 ol
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
链接：
<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla Manifesto</a>
css 基础
链接 css，需要放在 html 的 和 之间
<link href="styles/style.css" rel="stylesheet">
选择器介绍：
| 选择器 | 写法 | 备注 |
|---|---|---|
| id 选择器 | #my-id |
<p id="my-id"> 单一 html 中一个 id 对应一个元素 |
| 类选择器 | .my-class |
<p class="my-class"> |
| 属性选择器 | img[src] |
<img src="myimage.png"> |
| 伪类选择器 | a:hover |
如鼠标悬停在链接上时 |
块级元素：
div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre
HTML5：header、section、article、footer等等
行内元素：
span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u
button（display：inline-block）
块级元素和行内元素区别：
块级元素一行是一块，行内元素怎么多个排在一行，行内元素不能设置 width height margin padding，行内元素依靠内容撑开
inline-block，行内块元素与行内元素属性基本相同即不能独占一行，但是可以设置width及height
js 基础
声明变量敞亮：let 或者 var，let 声明的变量作用域更小。常量是 const
数据类型：String 字符串，Number 数字，Boolean 布尔值，Array 数组，Object 对象
let myVariable = [1, '李雷', '韩梅梅', 10]
运算符：一般都和其他编程语言类似，有一些需要注意，===表示判定是否相等，!==判定是否不相等
条件语句：与其他编程语言类似
函数：
function multiply(num1, num2) {
let result = num1 * num2;
return result;
}
事件：
document.querySelector("html").addEventListener("click", function () {
alert("别戳我，我怕疼。");
});
综合示例：
let myImage = document.querySelector('img');
myImage.onclick = function() {
let mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute('src', 'images/firefox2.png');
} else {
myImage.setAttribute('src', 'images/firefox-icon.png');
}
}