文章目录

• 简介
• 学习
• • 前端网站结构
  • html 基础
  • css 基础
  • js 基础

简介

web前端开发入门学习文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules

你需要学习以下内容：

• html
• css
• js

学习

前端网站结构

一般性结构

- index.html 主页内容
- imgages 网站上的图片
- styles 样式文件 css
- scripts 脚本文件 js

html 基础

html 不是一门编程语言，是一种定义结构的标记语言
简单举例

标题：

主标题
顶层标题
子标题
次子标题

段落：

这是一个段落

列表：
无序是 ul，有序是 ol

technologists
thinkers
builders

链接：

Mozilla Manifesto

css 基础

链接 css，需要放在 html 的 和 之间

选择器介绍：

选择器	写法	备注
id 选择器	#my-id	单一 html 中一个 id 对应一个元素
类选择器	.my-class
属性选择器	img[src]
伪类选择器	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');}
}