wiasliao
There is nothing special. This account is for my reports,homework.
HTML&CSS
HTML
- 超文件標記語言
- 網頁建立
HTML骨幹
<!DOCTYPE html>
宣告版本
<html>
網頁資訊和內容
<head>
網頁資訊
<body>
網頁內容
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html><head>
<title>
分頁名稱
<meta>
告訴瀏覽器用什麼文字編碼讀HTML。沒設定的話，瀏覽器預設的編碼讀取，若預設的與
HTML不一樣，就會亂碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>分頁標題</title>
</head>
<body>
</body>
</html><body>
<h1>、<h2>、<h3>
<h4>、<h5>、<h6>
我們語意是標題，雖然能讓文字有大小不同，但這樣做你的HTML就全部是標題了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>...</title>
</head>
<body>
<h1>主要標題</h1>
<h2>次要標題</h2>
<h3>以此類推</h3>
</body><body>
<br>
對html來說
Enter = Space
所以會換不了行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
這樣會換行<br>
這樣不會換行
</body>
</html>body
<a>
我專門做連結
<img>
我職責圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>..</title>
</head>
<body>
<img src="圖片網址或是檔案名"/>
<a href="超連結網址">..</a>
</body>
</html><body>
<p>
我的文義是段落
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>...</title>
</head>
<body>
<p>段落</p>
</body>
</html>body
<div>
我的功用很大，是區域標籤，
在區域內的可以為所欲為
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>...</title>
</head>
<body>
<div></div>
</body>
</html>CSS
- 層疊樣式表
- 給HTML等做樣式添加
CSS
<link>引入外部的檔案，能引入的不只有CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>...</title>
<link rel="stylesheet" type="text/css" href="CSS檔案"/>
</head>
<body>
</body>
</html>body{
background-color:yellow;
}
HTML
對一堆相同標籤，要做出不同樣式，就要給id或class
CSS
CSS的寫法，也會因id或class而不同。
<body>
<div id="idexp">..</div>
<div class="exp1">..</div>
<div class="exp2">..</div>
<div class="exp1 exp2">..</div>
</body>#idexp{/*id範例*/
color:blue;
}
.exp1{/*單一class範例*/
font-size:30px;
}
.exp2{/*多重class範例*/
gackground-color:gray;
}CSS
color，可以打關鍵字，例如:red等。或是16進位表的顏色代碼
font-size，設定文字大小，可以直接大小，或是以百分比表示。
tag{
color:red;
/*顏色關鍵字*/
color:#FF0000;
/*16進位碼*/
}tag{
font-size:30px;
font-size:120%;
/*1.2倍*/
}CSS
font-family : 設定字形
font-weight : 字體粗度
tag{
font-family:DFKai-sd;
}tag{
font-weight:bold;
font-weight:800;
}CSS
background : 跟color一樣，放的是顏色代碼
Title Text
img : 圖片大小
body{
backgroung-color:lightgreen;
}
tag{
background-color:blue;
}img{
width:150px;
/*設定圖片寬度*/
height:150px;
/*設定圖片長度*/
}CSS
text-align : 文字置中
float : 區塊移動
clear : 清除
tag{
text-align:center;
}tag{
float:right;
float:left;
clear:both;
}CSS
margin : 外間距
padding : 內間距
tag{
margin-left:3px;
margin-right:3px;
margin-top:3px;
margin-bottom:3px;
}tag{
padding-left:3px;
padding-right:3px;
padding-top:3px;
padding-bottom:3px;
}HTML-alldone
By wiasliao
HTML-alldone
- 155
