HTML，JavaScript，CSS的基本使用，简单广告宣传页面设计实现

HTML

基础内容

HTML 主要用于创建 Web 页面结构和内容， 负责页面的静态部分。

在Visual Studio Code中新建文件work.html。

创建完HTML文件后，按 ！+ tab键可以生成HTML文件标准格式。

1
2
3
4
5
6
7
8
9
10
11
<!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是主体

1
<body> 主干内容 </body>

在两个body中间加入主干内容。

可以使用下列标签充实主体内容。

1
2
3
<h1>一级标题</h1>
<h2>二级标题</h2>等等
<p>段落</p>

div是内容划分元素，通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。

1
<div>在这里也可以写入内容</div>

HTML基本使用代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>

运行效果

1.png

JavaScript

基础内容

JavaScript 主要用于为 Web 页面添加交互性和动态效果，负责页面的动态部分。

对于各种页面上的各种功能，事件，点击事件，可视化处理均使用JS实现。

在 JavaScript 中，ES6 开始引入class的概念。实际上，JavaScript 中class的本质也是基于原prototype的实现方式作了进一步的封装，其本质还是函数function。虽说如此，class和function还是有不同之处。

由于我学习的是React框架。所写代码均在React框架下实现。可以参考React官方中文文档。

React 官方中文文档

JS基本使用代码示例

在Visual Studio Code中新建文件App.js。

使用function实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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运行效果

2.png

使用class实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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运行效果

3.png

鼠标移动到按钮上的效果：

4.png

CSS

基础内容

CSS用于页面美化设计。

新建一个CSS文件App.css，在App.css中对id对应的C1与className对应的C2进行定义。

id是唯一的，每个元素只能有一个id，每个页面这个id只能出现一次，不可重复使用。

className不是唯一的，同一个className可以被多个不同的元素使用，可重复使用。

CSS 参考手册

CSS基本使用代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#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代表文本居中

简单广告宣传页面设计效果

5.png

详细代码

参考GitHub仓库：https://github.com/water-fish-all/web_demo.git
或者
参考Gitee码云仓库：​​​​​https://gitee.com/fire_fish/new.git

src中的App.js与App.css为广告宣传页面的代码实现。