web网页开发-前端

樱木之

已于 2022-04-02 16:53:00 修改

阅读量3.3k

点赞数

文章标签：前端

于 2022-04-02 16:50:39 首次发布

本文链接：https://blog.csdn.net/qq_43369406/article/details/123916409

版权

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