02-写个网页吧

你们的小f
194 阅读5分钟

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

html

css

jquery

2021琴理工作室开发通识课「完结」_哔哩哔哩_bilibili

如何截屏

Win + Shift + S：截屏

Win + V：剪贴板历史记录

不为人知的浏览器

浏览器的复杂性不亚于操作系统

推荐使用 Edge 浏览器

DevTools

浏览器为开发者提供的调试工具

  • 浏览器向服务器发送请求，接收到网页源码，渲染到屏幕上
  • 使用 DevTools（开发者工具）可以看到这一过程

使用

  1. 使用键盘上F12 / Ctrl + Shift + C打开控制台
  2. 点击左上角的元素检查，修改网站内容，查看效果，如果可以，则修改代码。
  3. 观察网页结构
    • 语法像标签一样，使用<xxx>括起来，并且还有闭合标签</xxx>
    • 最外层<html>....</html>
    • <html>标签内部有<head> 及 <body>
    • 只有标签外的东西，才会在页面中显示出来

写一个自我介绍页吧

保存路径：C:\Users\xxx\WorkSpace\02-写个网页吧\

为这个项目花了很多心思，如何用最简单的样式做出简洁美观的网页。

参考 EvanYou 的首页

网页的骨架

来写 HTML 吧（Hyper Text Markup Language）

  • HTML 是一种标签语言
  • 使用标签将内容包裹住
  • 浏览器根据国际标准，将内部的内容按照标签展示出来
  • 保存位置：C:\Users\xxx\work-space\02-写个网页吧\01-intro.html
  • 格式化代码：Alt + Shift + F
  • 预览：安装插件：Live Server，右下角go live
<body>
  <h1>你好呀👋</h1>
  <h2>My name is 孟祥瑞 👦</h2>
  <p>一枚艺术生，就读于沈阳理工大学动画专业。</p>
  <p>
    是修炼中的全栈开发者，左派社会主义接班人，理想主义建政带师。
    社会化抚养推动者，继承制及死刑的反对者。 轨道交通迷。
  </p>
</body>

网页的皮肉

来写样式表吧

样式表有很多关键字，熟练掌握需要长时间的训练

  • 保存位置：C:\Users\xxx\work-space\02-写个网页吧\01-css.html

选择器

image-20200721103637737

<style>
  /* 选择h1标签  */
  h1 {
    color: black;
    font-size: 12px;
  }
  /* 选择id为hi的标签 */
  #hi {
    color: blue;
  }
  /* 选择class为hello的标签 */
  .hello {
    color: red;
  }
</style>

<h1>你好呀👋</h1>
<h1 id="hi">你不好呀👋</h1>
<h1 class="hello">你一点不好呀👋</h1>
  • id 是唯一的
  • class 可以是多个的
  • css 每条样式需要用分号分隔

颜色表示法

只需要 RGB 三个颜色的灯泡，就可以组合出人眼能分辨的所有颜色。

/* 十六进制表示法 */
/* 000000 - ffffff */
color: #000000;
color: #454545;
color: #999999;
color: #ffffff;

color: #aa0000;
color: #00aa00;
color: #0000aa;

/* RGB表示法 */
color: rgb(0, 0, 0);
color: rgb(100, 100, 100);
color: rgb(255, 255, 255);

color: rgb(100, 0, 0);
color: rgb(0, 100, 0);
color: rgb(0, 0, 100);

/* RGBA表示法 */
color: rgba(100, 0, 0, 0.9);
color: rgba(100, 0, 0, 0.5);
color: rgba(100, 0, 0, 0.2);

盒模型

CSS box-model

<style>
  h1 {
    /* 边框 */
    border: #454545 solid 5px;
    border-radius: 10px;

    /* 内边距 */
    padding: 15px;
    padding: 15px 30px;
    /* padding-top: 15px; */
    /* padding-bottom: 15px; */
    padding-left: 100px;
    /* padding-right: 100px; */

    /* 外边距 */
    margin: 50px;
    margin: 50px 100px;
    margin-left: 200px;
    margin-right: 200px;
  }
</style>

<h1>你好呀👋</h1>

美化一下咱们的网页吧

新建：C:\Users\xxx\work-space\02-写个网页吧\index.html

将样式表放入新文件：style.css

引入：<link rel="stylesheet" href="style.css">

body {
  /* 内边距 */
  padding: 10vh 10vw;
}

h1 {
  /* 文字大小 */
  font-size: 3em;
  margin-bottom: 0.8em;
}

h2 {
  font-size: 2em;
  margin-bottom: 1.4em;
}

p {
  font-size: 1.4em;
  /* 字体粗细 */
  font-weight: 300;
  /* 行高 */
  line-height: 1.6em;
  /* 最大宽度 */
  max-width: 600px;
}

动态的网页

让网页动起来吧

JavaScript

JS 与 JAVA，就像雷锋与雷峰塔的区别。

可以直接在浏览器控制台写 JS 代码

// 只讲解ES6标准推荐的写法

// 变量
let a = 404;
// a 的数据类型
typeof a;
// 字符串
a = "404"; // 与 a = "404" 一样
typeof a;

// 常量
const b = 404;
typeof b;
b = "404"; // 报错

// 对象 object
let obj = { name: "fzf", age: 19 };
typeof obj;
obj.name;
obj.age = 18;

// 条件判断
if (a == 404) {
  console.log("a is 404");
} else {
  console.log("a is not 404");
}

// for循环
for (let i = 0; i < 10; i++) {
  console.log(i);
}

// 函数
// 不需要指定返回类型及传入数据的类型
function add(a, b) {
  return a + b;
}

Json

十分常用的数据存储格式

浏览器解析 json 的插件：FeHelper

b 站 API（其他网站也是）

vscode 配置文件

观察格式

  • {...}：最外层
  • { "code": 123 }：键值对(key: value)
  • { "list": [ 1, 2, 3] }：键值对里的值为列表

精简为json文件

将需要自我介绍的信息精简为json文件

{
  "name": "张三",
  "sex": 0,
  "intro": "大一学生，就读于沈阳理工大学物联网专业。",
  "about": "身体健康，大脑健全，心态良好，反诈骗能力高。啥都不会，进去想学东西的，emmmm没了。"
}

Jquery

JS 库，让网页操作变得更简单

  • Jquery 为我们提供了封装好的 API（应用程序编程接口）
  • 我们不需要关注内部的实现原理，就可以简单的操作网页内容

基础

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello jQuery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  </head>

  <body>
    <h1>你好呀👋</h1>
    <h2>My name is <span id="name">孟祥瑞</span> 👦</h2>
    <p>一枚艺术生，就读于沈阳理工大学动画专业。</p>
    <p>
      是修炼中的全栈开发者，左派社会主义接班人，理想主义建政带师。
      社会化抚养推动者，继承制及死刑的反对者。 轨道交通迷。
    </p>

    <script>
      $("#name").text("王山而");
    </script>
  </body>
</html>
  • JS 代码要写在页面内容后，因为代码是一行一行执行的。

加载 json 文件

  • 保存位置：C:\Users\xxx\work-space\02-写个网页吧\app.js
$.getJSON("info.json", function (json) {
  $("#name").text(json.name);
  $("#intro").text(json.intro);
  $("#about").text(json.about);

  // 0为女生，1为男生
  if (json.sex == "1") {
    $("#sex").text("👦");
  } else {
    $("#sex").text("👧");
  }
});

代码规范

  1. 缩进对齐
  2. 变量名符合正常人阅读规范

成品代码

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自我介绍</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>

  <body>
    <h1>你好呀👋</h1>
    <h2>My name is <span id="name">fzf</span> <span id="sex">👦</span></h2>
    <p id="intro">一枚艺术生，就读于沈阳理工大学动画专业。</p>
    <p id="about">
      是修炼中的全栈开发者，左派社会主义接班人，理想主义建政带师。
      社会化抚养推动者，继承制及死刑的反对者。 轨道交通迷。
    </p>
    <script src="app.js"></script>
  </body>
</html>

style.css

body {
  /* 内边距 */
  padding: 10vh 10vw;
}

h1 {
  /* 文字大小 */
  font-size: 3em;
  margin-bottom: 0.8em;
}

h2 {
  font-size: 2em;
  margin-bottom: 1.4em;
}

p {
  font-size: 1.4em;
  /* 字体粗细 */
  font-weight: 300;
  /* 行高 */
  line-height: 1.6em;
  /* 最大宽度 */
  max-width: 600px;
}

info.json

{
  "name": "张三",
  "sex": 1,
  "intro": "大一学生，就读于沈阳理工大学物联网专业。",
  "about": "身体健康，大脑健全，心态良好，反诈骗能力高。啥都不会，进去想学东西的，emmmm没了。"
}

app.js

$.getJSON("info.json", function (json) {
  $("#name").text(json.name);
  $("#intro").text(json.intro);
  $("#about").text(json.about);

  // 0为女生，1为男生
  if (json.sex == "1") {
    $("#sex").text("👦");
  } else {
    $("#sex").text("👧");
  }
});

课后作业

  1. 根据课程内容，写一个自己的自我介绍页
  2. 使用 markdown 语法写一篇笔记，命名为README.md，放在02-写个网页吧文件夹中

推荐阅读

HTML-菜鸟教程

CSS-菜鸟教程

jQuery-菜鸟教程

avatar
文章
阅读
粉丝