您好,登錄后才能下訂單哦!
HTML/CSS基本框架結構講解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style></style>
</head>
<body></body>
</html>
注釋:
無論你寫的內容有多少都是在這基本框架里面寫!
<!DOCTYPE html>----這是一個聲明為 HTML5 文檔,就像你在一張紙上寫個請假條,此張紙就是請假條一個道理
<html> 與 </html> 之間的文本描述網頁,可以想象成整張請假條一樣。
<head>與</head>之間寫規則來規定來<body> 與 </body> 之間的內容。head意為頭部的意思,類似大腦來判斷你看到物體的形狀和去制定一些規則。
head>與</head>之間分別有<meta charset="utf-8"> <title></title> <style></style>。
<meta charset="utf-8"> 是字碼表的規定是國際公認的使用最廣泛的,就像好多門外語一樣而英語是最廣泛的,字碼表就是一張制定好的文字的顯示規則,有的網頁會顯示亂碼就是字碼表的原因!
<title></title>之間寫的是標題就是來給網頁的一個概述,例如打開百度在就是在上方顯示百度的名字。
<style>與</style>之間就是來規定<body> 與 </body> 之間的顯示內容的樣式的。
<body> 與 </body> 之間的文本是可見的頁面內容,就像是眼睛看到的東西,東西的形狀例如:長,寬,高,顏色等..都有大腦去分析判斷即為<head>與</head>之間寫規則來規定來<body> 與 </body> 之間的內容。
下面寫個例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>田字格</title>
<style>
div
{
width: 100px;
height: 100px;
background: #7fff00;
border: solid 10px black;
float: left;
}
.big
{
margin: 0px auto;
width: 240px;
height: 240px;
border:0px;
}
</style>
</head>
<body>
<div class="big">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
注釋:<div></div>默認就是個高0x寬0的方塊在<style></style>之間定義了div的寬,高和背景色,邊框的樣式和顏色,和向左浮動。
<div></div>這是是一個大的div把四個小的包起來,所以寬和高不一樣,給這大的div一個ID極為.big . 即代表class。
打開結果為
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。