web网页开发-前端
refer
- web开发
https://developer.mozilla/en-US/docs/Learn
本文是入门性质文章,主要通过讲解html,css,js的基础知识对前端有一个入门级别的了解。
工具准备
-
git,使用gitee或者github进行代码托管
https://registry.npmmirror/binary.html?path=git-for-windows/
-
沙拉查词,翻译用
https://github/crimx/ext-saladict
-
Notepad++
-
chrome浏览器,确保disable cache,以此来保证更改网页后能够技术刷新
步骤为:右键-检查-network-disable cache
-
visual studio code
http://vscode.cdn.azure/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/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/en-US/about/manifesto/">Mozilla Manifesto</a>
CSS
css是一种版面样式语言(style sheet language),建议不要花太多时间在css上面。想深入了解的可以参考mdn的文档
https://developer.mozilla/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/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");
}
}
更多推荐
web网页开发-前端
发布评论