简介
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');
}
}