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为广告宣传页面的代码实现。
