一、新建文件

File--New file--Save（保存为html格式）--编写代码--保存--右键Open in Default Browser

二、基本知识

1、三种文件类型：

· html写静态页面的内容
· js写页面与页面之间的超链接，动态
· css写静态页面的格式，包括字体字号颜色等

2、编码基础

id和class的区别

· id只能定义某一个参数的属性，class可以定义某一类参数的属性
· 一个参数可以在多个class下

规范格式

<head>
</head>

文件头：模块中需定义编码规范UTF-8、链接名称、调用.css和.js

<body>
    <div class="XXX">
        <h3>XXX</h3>
        <p class="XXX">XXX</p>
        <h1><a href="https://www.baidu.com">biaoti</a>biaoti</h1>
    </div>
</body>

代码主体：其中包含段落div，标题h，行p，链接等内容

tips：所有类型的代码都被写在对称的结构内部< > </ >

三、典型代码结构

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>to-do-list</title>
    <link href="index.css" rel="stylesheet">
    <script src="index.js"></script>
</head>

<body>
    <div class="list-card">
        <h3>TO DO LIST</h3>
        <p class="introduce">Simple Todo List with adding and filter by diff status.</p>
        <!-- <form action="#" method="get"> -->
        <input type="text" id="user-info" />
        <button type="submit" id="add-info"><span id="add-btn">Add</span></button>
        <!-- </form> -->
        <div class="add-list-box">
            <ol id="add-list"></ol>
        </div>
        <div class="footer">
            <button id="all-btn" class="all-btn">ALL</button>
            <button id="active-btn" class="all-btn">Active</button>
            <button id="complete-btn" class="all-btn">Complete</button>
        </div>
    </div>
</body>

</html>

特别鸣谢何仙姑小姐姐❤

Code入门操作