Code入門操作

一、新建文件

File--New file--Save(保存為html格式)--編寫代碼--保存--右鍵Open in Default Browser

二、基本知識

1、三種文件類型:

· html寫靜態(tài)頁面的內(nèi)容
· js寫頁面與頁面之間的超鏈接,動態(tài)
· css寫靜態(tài)頁面的格式,包括字體字號顏色等

2、編碼基礎(chǔ)

id和class的區(qū)別

· id只能定義某一個參數(shù)的屬性,class可以定義某一類參數(shù)的屬性
· 一個參數(shù)可以在多個class下

規(guī)范格式

<head>
</head>

文件頭:模塊中需定義編碼規(guī)范UTF-8、鏈接名稱、調(diào)用.css和.js

<body>
    <div class="XXX">
        <h3>XXX</h3>
        <p class="XXX">XXX</p>
        <h1><a >biaoti</a>biaoti</h1>
    </div>
</body>

代碼主體:其中包含段落div,標(biāo)題h,行p,鏈接等內(nèi)容

tips:所有類型的代碼都被寫在對稱的結(jié)構(gòu)內(nèi)部< > </ >

三、典型代碼結(jié)構(gòu)

<!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>

特別鳴謝何仙姑小姐姐?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容