HTML
基础内容
HTML 主要用于创建 Web 页面结构和内容， 负责页面的静态部分。
在Visual Studio Code中新建文件work.html。
创建完HTML文件后，按 ！+ tab键可以生成HTML文件标准格式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html><body>主体
<body> 主干内容 </body>，在两个body中间加入主干内容。
可以使用下列标签充实主体内容。
<h1>一级标题</h1>
<h2>二级标题</h2>等等
<p>段落</p>
<div>：内容划分元素
通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。
<div>在这里也可以写入内容</div>
HTML基本使用代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例网页</title> <!-- 这是网页名称标题 -->
</head>
<body>
<h1>这是我的第一个一级标题</h1>
<h2>这是我的第一个二级标题</h2>
<p>这是我的第一个段落。</p>
<h1>这是我的第二个一级标题</h1>
<h2>这是我的第二个二级标题</h2>
<p>这是我的第二个段落。</p>
<div>
在这里也可以写入内容
</div>
</body>
</html>运行效果
JavaScript
基础内容
JavaScript 主要用于为 Web 页面添加交互性和动态效果，负责页面的动态部分。
对于各种页面上的各种功能，事件，点击事件，可视化处理均使用JS实现。
在 JavaScript 中，ES6 开始引入class的概念。实际上，JavaScript 中class的本质也是基于原prototype的实现方式作了进一步的封装，其本质还是函数function。虽说如此，class和function还是有不同之处。
由于我学习的是React框架。所写代码均在React框架下实现。可以参考React官方中文文档。
React 官方中文文档
JS基本使用代码示例
在Visual Studio Code中新建文件App.js。
使用function实现
import './App.css';
function App() {
return (
<div>
<div>内容1</div>
<div>内容2</div>
<div id="C1">内容</div>
<div className="C2">内容</div>
<div>
可以嵌套使用
<div> 二层内容 </div>
</div>
</div>
);
}
export default App;id与className在CSS中实现，用于对字体颜色，形状，粗细，背景颜色，边框等的网页美化设计。
function示例代码+CSS运行效果
使用class实现
import react from "react";
import "./App.css";
import {Button } from "antd";
class Example1 extends react.PureComponent{
//生命周期
constructor() {
super();
console.log( "constructor excute！");
}
componentDidMount() {
console.log( "componentDidMount excute！");
}
handleClick=()=>{
console.log("Click");
}
render() {
console.log( "render excute！");
return(
<div>
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
<Button className="C2" onClick={this.handleClick}>点击</Button>
</div>
);
}
}
export default Example1;由于代码基于React框架实现，首先需要导入import react from "react";
如果有CSS需要调用，则要导入import "./App.css";
constructor为构造函数。
componentDidMount是React组件。
在render函数中对页面进行渲染，示例代码中定义了一个名字叫“点击”的Button按钮，并在前面定义了这个按钮的点击事件handleClick。
这个Button调用的antd的组件，需要导入import {Button } from "antd";
console.log()是JavaScript中的一个内置函数，用于在控制台输出提示信息。
class示例代码+CSS运行效果
鼠标移动到按钮上的效果：
CSS
基础内容
CSS用于页面美化设计。
新建一个CSS文件App.css，在App.css中对id对应的C1与className对应的C2进行定义。
id是唯一的，每个元素只能有一个id，每个页面这个id只能出现一次，不可重复使用。
className不是唯一的，同一个className可以被多个不同的元素使用，可重复使用。
CSS参考手册_web前端开发参考手册系列
CSS基本使用代码示例
#C1 {
border:20px solid black;
height:100px;
margin-left:200px;
margin-right:200px;
margin-top:50px;
display:flex;
background-color: yellow;
font-size: xx-large;
}
.C2 {
border:20px solid purple;
height:100px;
flex:1 1 33%;
text-align:center;
color: red;
background-color: blue;
margin-left:400px;
margin-right:400px;
font-size: xx-large;
}"#"定义id，"."定义className。
border设置边框，px代表像素点，一个不固定的长度单位，solid代表边框线是实心的，black代表边框线是黑色的。
height设置高度，margin设置边框与页面边界的距离，margin-top,margin-bottom,margin-left，margin-right，分别用于设置边框与页面上、下、左、右的距离。
flex为伸缩盒，是Flexible Box的缩写，意为”弹性布局”，可以设置页面面积占比，用来为盒状模型提供最大的灵活性。
background-color用于背景色，color用于设置边框范围内的元素颜色，例如文本的字体颜色。
font-size用于设置字体大小。
text-align用于设计文本在页面中的位置，text-align:center代表文本居中
简单广告宣传页面设计效果
详细代码
参考Gitee码云仓库：https://gitee.com/fire_fish/new.git
src中的App.js与App.css为广告宣传页面的代码实现。
