# HTML - 基礎
###### tags: `HTML-CSS`
## 一.基本html的概念(introduction - attribute)
### (一)html語法表達形式
```html=
<tagname attribute="message"> content </tagname>
```
- tagname : 表示此內容的為標題，註解文字，內文等等。
- attribute : 可以由加入attribute去增加一個html標頭的資訊。
- content : 表示此html元素的文字顯示內容。
### (二)html的基本型態
```html=
<!DOCTYPE html>
<html>
<head>
<title>Here is title</title>
</head>
<body>
<p>Here is content </p>
<body>
</html>
```
- html不是『case sensitive』，大小寫視為一樣。
- < !DOCTYPE html > : 宣告檔案為html。
- < html >和< /html > : 表示html檔案的開始。
- < head >和< /head > : 表示網頁的標頭。
- < title >和< /title > : 表示網頁的title，如上面的html-hackmd。
- < body >和< /body > : 表示網頁的內頁內容的開始。
### (三).常見的html tagname
1. < p >和< /p > : 稱為paragraphs，為內文中的一段小分段。
2. < h1 >和< /h1 > : 為內文的標頭，似hackmd的#多寡的功用。
3. < br > : 為換行，沒有end tag。
4. HTML linker : 為超連結，href="網址" 為attribute。
```html=
<a href="https://www.w3schools.com">This is a link</a>
```
4. HTML image : 為顯示圖像。
- src : 此attribute為圖片的位址。
- alt : 此attribute為圖片未顯示後的代替文字。
- width 和 height : 此attribute為圖片的長寬。
```html=
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
```
## 二.基本的Html標籤
### (一).Heading
1. < h1 >到< h6 >為六種字體大小，但同字型不同的標題。
2. attribute - style : 可以改變< h >的字體大小，可以把< h1 >到< h6 >改成一樣大。
```html=
<h1 style="font-size:60px">Heading 1</h1>
<h2 style="font-size:60px">Heading 2</h2>
<h3 style="font-size:60px">Heading 3</h3>
<h4 style="font-size:60px">Heading 4</h4>
<h5 style="font-size:60px">Heading 5</h5>
<h6 style="font-size:60px">Heading 6</h6>
```
3. attribute格式 : < tagname attribute="CCS properity : CCS value" >
### (二).Paragraphs
1. < p >和< /p > : 一個p的tag內夾的內文會忽略空白和換行，但逗點不會，內文會一直顯示到螢幕滿再換行。
2. < hr >(無< /hr >) : 會顯示標題下的一個行線。如此大標:基本的Html標籤下面的直線。
4. < br >(無< /br >) : 換行。
5. < pre >和< /pre > : 會完全符合tag內的形式，包含空白換行，且在每一行加入兩個的空白space。
## 三.style attribute
### (一)style的組成
1. attribute格式 : < tagename style="CCS properity : CCS value" >
2. 所以我們可以用不同properity對不同的tag做造型上的改變。
### (二)style常見的properity
1. backgroung-color : 使此tag內的所有內容，包含再包住的tag都有背景顏色。
```HTML=
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
<!--上下兩個效果一樣 -->
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
```
2. color : 使此tag內的內文字體顏色改變。
```html=
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
```
3. fnot-family : 使此tag內的內文字型改變。
```html=
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
```
4. font-size : 使此tag內的內文字體大小改變。
```html=
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
```
5. text-align : 使此tag內的內文字體排列改變。
```html=
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
```
## 四.color的應用
### (一).color的value
1. 由stlye atrribute我們可以知道，color是一個CCS的properity，而要有不同的顏色就必須給入不同的CCS value。
2. 常見的CCS color value :
3. 我們還可以用五種不同的方法指定顏色 :
- RGB values
- HEX values
- HSL values
- RGBA values
- HSLA values
### (二).RGB color value
1. rgb的組成 : rgb(紅,綠,藍)，每個值都是0-255。
```html=
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
```
2. rgba的組成 : rgba(紅,綠,藍,透明度)，透明度為0-1。
```html=
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
```
### (三).HEX color value
- hex的組成 : ##rrggbb，每一個數字為16進位。
```html=
<h1 style="background-color:#ff0000;">#ff0000</h1>
```
### (四).HSL color value
1. hsl的組成 : hsl(色度,陰影,亮度)。
- 色度 : 0-360,0是紅,120是綠,240是藍.
- 陰影 : 0-100%,0為全灰的陰影,100為全色度的顏色。
- 亮度 : 0-100%,0為全黑,100為全白。
```html=
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
```
2. hsla的組成 : hsla (色度,陰影,亮度,透明度)，透明度為0-1。
```html=
<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
```
# HTML - CSS連接
###### tags: `Web-develop` `front-end` `html` `note`
## 一 . CSS( Cascading Style Sheets)基礎
### (一) . CSS的概念
1. html和css的組成 :
- < tagname atrribute = "CSS properity: CSS value">
- atrribute : 是『表示html tag的額外資訊』。
- css : 更明確的表示atrribute的特性。
2. html使用css的方法
- inline : 在< tagname >中寫入。
- internal : 在< head >內建立。
- external : 連接外建的css檔。
### (二) . inline的CSS
- 及之前所提過所有的style="properity:value"。
```html=
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
```
### (三) . internal的CSS
1. 寫在< head >和< /head >中寫入< style >和< /style > 。
2. 在< style >和< /style > 中寫入要的變化。下兩例效果一樣。
```html=
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
```html=
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color: powderblue;">
<h1 style="color: blue;">This is a heading</h1>
<p style="color: red;">This is a paragraph.</p>
</body>
</html>
```
### (四) . external的CSS
1. 先寫一個css檔 : 下檔名為styles.css。
- 可以多個tag共用一個css。
```ccs=
body {
background-color: powderblue;
}
h1,h2,h3,h4 {
color: blue;
}
p {
color: red;
}
```
2. 再在html的< head >中加入< link > :
- rel attribute必為"stylesheet"。
- href attribute內為css檔的檔名。
- 在同個資料夾實 : 檔名即可。
- 不同資料夾 : 由/ / 寫出連結。
- 甚至可以填入網址。
```html=
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
### (五) . CSS的properity實作
1. padding : 內文和border的距離,value為px。
2. margin : 和其他tag的距離,value為px。
```html=
p {
border: 2px solid powderblue;
padding: 30px;
margin: 50px;
}
```
## 二 . 常見的CSS : link , image
### (一) . link CSS - 基礎
1. html tag : 一般超連結的CSS properity大多在html的< a >內。
2. html的attribute : 一般會用"href"表示為超連接。
3. CSS的properity和value : 一般直接接下網址。
4. title attribute : 將title為atrribute時，可以使游標移到內文時顯示提示字元。
5. target attribute : 表示超連接的新視窗的開啟方式。
- value : _self，在本身視窗開啟，為default。
- value : _blank，在一個新個視窗開啟。
- value : _top，新的視窗填滿整個window。
```html=
<a href="https://www.w3.org/"> W3C </a>
<a href="https://www.w3.org/" title=" keyword ">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px; height:42px; ">
</a>
```
- 注意 : < a >和< /a >的tag內的東西都會是超連接，所以超連結可以是文字或圖片。
### (二) . link CCS - 延伸
1. Bookmark : 可以用id tag去做內頁和外部檔案的連結。
- 可以在任何的tag內加入id，用此id呼叫tag。
- 在href的attribute value內填入需要的id加上#即可。
```html=
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
```
# HTML - 佈局的應用
###### tags: `Web-develop` `front-end` `html` `note`
## 一 . id 和 class
### (一) . Block tag 和 inline tag
1. block tag 和 inline tag 的定義 :
- block tag : 此tag結束即換行。
- inline tag : 此tag結束不換行。
2. 常見的block tag :
```html=
<address> <article><aside>
<blockquote> <canvas>
<dd> <div> <dl> <dt>
<fieldset> <figcaption> <figure> <footer> <form><h1>-<h6> <header> <hr> <li>
<main> <nav> <noscript> <ol>
<p> <pre> <section> <table> <tfoot> <ul> <video>
```
3. 常見的inline tag :
```html=
<a> <abbr> <acronym>
<b> <bdo> <big> <br><button>
<cite> <code> <dfn> <em>
<i> <img> <input> <kbd> <label>
<map> <object> <output> <q>
<samp> <script> <select> <small>
<span> <strong> <sub> <sup>
<textarea> <time> <tt> <var>
```
4. < div > attribute : often used as a container for other HTML elements.
```html=
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
```
5. < span > attribute : 可以視為div的inline版。
```html=
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
```
### (二) . class attribute
1. class的定義 :
- 原文 : class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name
- 中文版 : html中的class是指『定義一個預設的CSS模組以供html的tag使用』，且可以透過這個class做js的操作。
2. class的語法 :
- 寫在head tag內定義 : 由『.』+『class name』定義。
- 可以在任何的tag以inline的型式，用class。 attribute="class name"的方式使用class於不同tag中。
3. 可以連接js : 套用同class的tag像是此class的元素。
- 此class是一個array。
- 每一個套用的tag是一個此array的元素。
```html=
<!DOCTYPE html>
<html>
<head>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</head>
<body>
<h2>Use of The class Attribute in JavaScript</h2>
<p>Click the button to hide all elements with class name "city":</p>
<button onclick="myFunction()">Hide elements</button>
<h1 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h3 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
```
```graphviz
digraph hierarchy {
nodesep=0.3
node [color=Red,shape=box]
edge [color=black, style=dashed]
class->{ h1 h2 h3 }
}
```
- 如上，我們可以想class是一個array，內存放著三個不同的tag，所以js可以由此class存取三種tag的data。
### (三) . id class
1. id的定義 : 像class，但不同是，class可以被多重tag使用，但id只能被一個。
2. id的語法 :
- 寫在head tag內定義 : 由『# 』+『id name』定義。
- 可以在任何的tag以inline的型式，用class。
3. 可以連接js : 似上例，但因id只能用一次，沒有array特性。
4. < a >的href也可以用於id的連接 : href="#id name"。
```html=
<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>
<button onclick="displayResult()">Change text</button>
<!-- Multiple similar elements -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
```
## 二 . Html layout
### (一).html的layout tag
1. header : 文件的標頭。
2. nav : 為link標籤的集合。
3. section : 子文章。
4. article : 另一個分頁。
Sign in with Wallet
Connect another wallet