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>

我們語意是標題，雖然能讓文字有大小不同，但這樣做你的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

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