---
# System prepended metadata

title: 基礎HTML教學重點
tags: [六角筆記王, HTML, 前端筆記]

---

---
disqus: HackMD_david
---
###### tags: `六角筆記王` `前端筆記` `HTML`
# 基礎HTML教學重點
一個網頁只會有一個h1
標籤(h1.p.img)裡面可以放多個屬性(src.background.color)
<br>

## 建立 HTML 環境

```html
<!DOCTYPE html> 告訴大家這是html5的語法
<html>
<head>關於整個專案的資訊放這裡面
	<title>頁籤標題</title>
</head>
<body>
	寫給別人看的要放這裡面
</body>
</html>
```
<br>

## Emmet 預設安裝

```html
<html lang="en"> /*語意使用英文*/
	<meta charset="UTF-8"> /*使用UTF-81編碼，沒寫在IE會顯示亂碼*/
	/*對網頁螢幕解析度優化，讓每個瀏覽器都能清楚*/
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">/*讓IE更新到最新*/
</html>
```
<br>

## 圖片 img

img是少數沒有結尾標籤的

基本語法

```html
<img src="圖片位置" alt="給視障人士觀看，可以用播報讀給他們聽">
```

如果要找上一層(跟你現在的html檔相比)的圖片要用`..`

如果要找下一層的圖片用`/`

```html
<img src="../2020css常用語法/img/logo1.png" alt="">
```
<br>

## 斷行br
<br>

## 連結 a 標籤
- 基本語法

```html
<a href="想要連結的網頁">顯示在網站的文字</a>
```

### 想要開出新頁面
- 語法

```html
<a target="_blank" href="想要連結的網頁">顯示在網站的文字</a>
```

### 製作當滑鼠移到連結時的彈跳視窗
- 語法

```html
<a title="連到google" href="想要連結的網頁">顯示在網站的文字</a>
```

- 顯示畫面

![](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc7ced4bf-c343-4cab-8614-210a9615e4cf%2F_2021-06-21_11.52.29.png?table=block&id=8d03e539-11a5-426b-8632-bf7af6c95088&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=480&userId=&cache=v2)
<br>

## ul li列表標籤
- 有一系列相同的資訊要呈現就可以用ul.li
不要用ul取代h2當標題
一定要用ul包起來

- 基本語法

```html
<ul> /*實心圓*/
  <li>項目一</li>
  <li>項目二</li>
  <li>項目三</li>
</ul>
<ul> /*數字*/
  <li>項目一</li>
  <li>項目二</li>
  <li>項目三</li>
</ul>
```

- 顯示結果
![](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6ed5e3a9-f428-414b-99f1-f8157e33bdc8%2F_2021-06-22_12.07.50.png?table=block&id=b415a40e-4384-45a8-a3d2-32641372a0d2&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=730&userId=&cache=v2)