一、新建文件
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>
特別鳴謝何仙姑小姐姐?