---
# System prepended metadata

title: HTML與CSS基礎概念(1~4堂)
tags: [CSS, HTML]

---

---
title: '交接'
util: jest
---

[TOC]

# 網頁設計基礎課程 (1~4堂課)

## 基礎學習:
==https://www.w3schools.com/html/default.asp==

1. HTML :  網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。
2. CSS: CSS 是一種基於規則的語言，您對網頁裡特定或一群元素指定一系列的規則
3. javascript: 是一種腳本，也能稱它為程式語言，可以讓你在網頁中實現出複雜的功能。
---
HTML基礎結構
```javascript=
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>This is a Heading</h1>
        <p>This is a paragraph.</p>
    </body>
</html>
```
CSS結構(放在`<style></style>`中)
```css=
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
```
Javascript結構
```javascript=
<script>
    document.getElementById("demo").innerHTML = 5 + 6;
</script>
```
[說明]
```
1. <!DOCTYPE> 就是一開始聲明該文件是什麼東西
2.<html> 包起來的就是腳本結構
3. <head> 通常會放<style> <script>  <title>  諸如此類基本腳本
```
---

### HTML常見元素
==HTML Elements==
* h1 ,h2 ,h3 ,h4, h5  : 常用於標題
* p : 用於段落(塊級元素)
* span 用於段落 (行內元素)
* a: 網頁中用於連結 (行內元素)
* div:  最常使用的標籤(塊級元素)
* ul > li  常用於清單(以'點'為開頭符號) 
* ol > li  常用於清單(以'數字'為開頭符號)
* table > tr > td 常用於表格顯示上

### ==class 與 id 選擇器== 重要!!
> class 選擇器命名可以重複使用
> id 只能給一個元素使用

### HTML常見屬性
==HTML Attributes==
* a 元素
```javascript=
<a href="https://www.w3schools.com">Visit W3Schools</a>
```
> 上述href 就是==a元素==的屬性, 主要放要連結出去的網址

* img元素
```javascript=
<img src="img_girl.jpg" width="500" height="600">
    
1. src 為要顯示的圖檔名
2. width 為圖片寬度
3. height 為圖片高度
```

* table 元素
```javascript=
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>
```
> tr 是橫排 - 也就是row
> td 是直排 - 也就是column
> th 是標題 - 表格上方標題

==style Attribute== **此屬性是所有元素都有的屬性**

```javascript=
<p style="color:red;">This is a red paragraph.</p> 賦予文字顏色red

<h2 title="I'm a header">The title Attribute</h2>  滑過去時會顯示說明文字
```

### 塊及元素與行內元素
==Block-level Elements==
> 像是:  div, p這些是塊及元素

==Inline Elements==
> 像是:  img, span, a 這些是行內元素

總結:
1. href 為 a 元素特定的==屬性==
2. src 為 img元素特定的==屬性==
3. img 元素提供 width與height屬性來控制大小
4. ==style 屬性可以加在所有元素中(div, a , p , span 都可以)== 重點!!
6. html 元素可以加上==lang== 去控制你的html 是html 格式 還是 pug格式 (主要在寫法上的差異)
7. ==title==屬性可以加在任意元素上 , 用途是滑過去時會有提示文字

### CSS 基礎格式(選擇器)
```javascript=
p {
  color: red;
  display: block
}

div {
    background-color: red;
    width: 100px;
    height: 100px;
}

p.dotted {
    border: 1px solid black;
    display: inline-block
}

==class選擇器==
.name {
    width: 100px
}

==id選擇器==
#container {
    widht: 500px
}

```

* color 文字顏色
* background-color: 背景顏色
* font-size: 文字大小
* font-weight: 文字寬度
* border: 邊框
* width: 寬度
* height: 高度
* ==display:  區塊的顯示方式== 重要!!
* z-index: 層級高低(數字越高, 區塊的優先級別顯示越高)
* text-align: 文字位置
* margin: 外框外間距
* padding: 外框內間距
* opacity: 控制透明度 0~1

### CSS組合器
* div p {}  代表在div 底下的所有p 都會吃到樣式
* div > p {}  代表div 底下子層所有p 都會吃到樣式
* div + p 代表在div 下面鄰邊的第一個p 的樣式會吃到
* div ~ p 代表在div 下面鄰邊的所有的p 的樣式會吃到





