html css

2019/03/29 陳惴棋

目錄

  • Meta
  • 區塊
  • 圖片
  • 清單
  • 表格
  • 超連結
  • 盒子
  • 顏色
  • 背景圖片
  • 文字格式

HTML

HyperText Markup Language

Meta

codepen !tab


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Meta

  • description 網頁簡短描述
  • keywords 網頁關鍵字
  • author 作者
  • generator 編輯器
  • copyright 網頁版權
  • distribution 網頁發布地區

<meta name="str1" content="str2">

註解


<!-- 註解內容 -->

區塊

div class id

  • 標題 <h1></h1> ~h6
  • 文字 <p></p>
  • 換行 <br>
  • 水平分隔線 <hr>

圖片

  • src
  • width
  • height
  • alt

<img src="超連結" width="寬度" height="高度" alt="替代文字">

清單

  • ul : unordered list
  • ol : ordered list

<ul>
	<li>沒有數字順序的清單</li>
	<li>就是 unordered list</li>
</ul>

<ol>
	<li>有數字順序的清單</li>
	<li>就是 ordered list</li>
</ol>

表格


<table border="1">
	<caption>表格標題</caption>

	<tr><td>第一直欄</td><td>第二直欄</td></tr>
	<tr><td>這都是在</td><td>同一橫列</td></tr>
	<tr><td>這邊都是</td><td>第三橫列</td></tr>
</table>

表格


<table border="1">
	<caption>表格標題</caption>

	<tr><td colspan="2">第一列</td></tr>
	<tr><td rowspan="2">合在一起了</td><td>第二列</td></tr>
	<tr><td>第三列</td></tr>
</table>

超連結


<a href="連結網址" target="_blank">顯示在網頁上的文字</a>
<a href="連結網址" target="_blank"><img src="圖片的超連結"></a>

CSS

Cascading Style Sheets

選擇器

套用最精準、最小單位、後寫的選擇器

  • 選擇全部 *{}
  • 選擇特定class .intro{}
  • 選擇特定id #abc{}
  • 選擇特定標籤 div{}
  • 選擇特定標籤的特定class div.pink{}

*{
    margin: 0px;
}

盒子

  • margin
  • border
  • padding
  • content

上 右 下 左/上 左右 下/上下 左右/上下左右


margin: 0px 0px 0px 0px;
margin: 0px 0px 0px;
margin: 0px 0px;
margin: 0px;

盒子

單獨調整


margin-top

顏色

背景圖片

文字格式

END