# 網頁前端✧ω✧
----
## 基本元素
---
## HTML
是啥
----
### doctype
宣告文件類型
```html=
<!DOCTYPE html>
```
----
### 結構
```html=
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
```
----
### head
```html=
<head>
<title>my AWESOME webpage.....</title>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
</head>
```
----
### body
```html=
<body>
aW5zZXJ0IHNvbWV0aGluZyBtZWFuaW5nZnVs
</body>
```
----
### 標題標籤 h
```html=
<h1>h1 大大大標題</h1>
<h2>h2 副標題</h2>
<h3>h3 小標題</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
```
----
### 文字效果
```html=
<strong>大壯</strong> <!-- = <b> -->
<em>大斜</em> <!-- = <i> -->
<del>大誤</del>
<ins>底線</ins>
<code>
restart(Life);
</code>
```
----
### 分段 p
```html=
<p>abcdefg</p>
<p>
no
pqrst
</p>
<!-- 換行用<br> -->
<p>bifur <br> cated</p>
```
----
### 分割區塊 div
```html=
<div style="background-color: lightpink">
<p>段落一 1 1 2 3 5 8 13 21 34</p>
<p>段落二 1 11 21 1211 111221 312211</p>
</div>
<div style="background-color: lightskyblue">
<p>ottffssent</p>
</div>
```
----
### 行內分割區塊 span
```html=
<p><span style="color: lightcoral">hell</span>o world</p>
```
----
### 超連結 a
```html=
<a href="/about.html">about page</a>
<a href="https://youtu.be/dQw4w9WgXcQ">點這裡會AC</a>
<a href="javascript:alert(1);">pwned</a>
```
----
### img
```html=
<img src="kat.gif" alt="cat">
```
----
### input & button
```html=
<button type="button">change background</button>
<br>
who r u?
<input type="text" id="username">
<button id="submit" type="submit">submit</button>
```
---
## CSS
階層式樣式表
----
## 使用
```html=
<style>
/*insert css*/
</style>
<link rel="stylesheet" href="style.css">
```
----
### 文字效果
```css=
color: fuchsia;
font-size: 36px;
font-family: monospace;
font-style: italic;
```
[HTML顏色](https://www.w3schools.com/tags/ref_colornames.asp)
----
### font
```css=
font: italic bold 36px monospace;
```
----
### 選取所有段落
```css=
p {
color: tomato;
}
```
```html=
<p>work it make it</p>
<p>do it makes us</p>
```
----
### 選取元素 (id)
```css=
#secret {
font-size: 8px;
}
```
```html=
<p>Lol</p>
<p id="secret">in plain sight</p>
```
----
### 選取一組元素 (class)
```css=
.burn {
color: rgb(128, 0, 0);
}
```
```html=
<p id="burn">a</p> <p id="burn">b</p> <!-- D: -->
<p class="burn">im on fire</p>
<p class="burn">help</p> <!-- :D -->
```
----
### 選取多組元素
```css=
p, h1, h2, #id1, .class1 {
color: #ae27ff;
}
```
---
## JavaScript
=/= Java
----
### 使用
```html=
<script>
alert(1);
</script>
<script src="main.js"></script>
```
----
### var, let
```javascript=
for (var i = 0; i < 3; i++) {
console.log(i); //0, 1, 2
}
console.log(i); // 3
for (let j = 0; j < 3; j++) {
console.log(j); //0, 1, 2
}
console.log(j); // ReferenceError: j is not defined
```
----
### const
```javascript=
const BANANA_COUNT = 55;
console.log(BANANA_COUNT); // 55
BANANA_COUNT++; // TypeError: assignment to constant variable
```
----
### window, document
```javascript=
window.alert(1);
alert(1); //same!
let body = document.querySelector(".class");
```
----
### querySelector
```html=
<p id="aple">text 1</p>
<p class="banan">text 2</p>
```
```javascript=
let text1 = document.querySelector("#aple");
let text2 = document.querySelector(".banan");
```
----
### addEventListener
```html=
<button type="button" id="test">change background</button>
```
```javascript=
document.querySelector("#test").addEventListener("click", function() {
document.body.style.background = "#c0ffee";
});
```
----
#### 前端處理輸入
```html=
<input type="name" id="input">
<button type="submit" id="submit">submit</button>
<p id="display">submitted: </p>
```
```javascript=
let input = document.querySelector(".input");
let display = document.querySelector(".display");
document.querySelector(".submit").addEventListener("click", function(){
display.innerHTML = "submitted: "input.textContent;
});
```
----
### 參考資源
為什麼手機hackmd貼上沒用
---
## </html>
{"title":"網頁前端✧ω✧","description":"tgdgdafad","contributors":"[{\"id\":\"1e03aeab-6610-4474-825c-e5196b0ab208\",\"add\":5620,\"del\":803}]"}