主題 : 網頁語言介紹 Html文件類型 註解 head & body 容器 meta系列 網頁標籤 各式標題 換行&水平線 粗體&斜體 連結 圖片 播放器 表格 列表 Input textarea 基礎架構 其他筆記
網頁語言介紹
| 語言 | 功能 |
| Html | 骨架 架構 |
| Css | 排版 美工 |
| JS | 動畫 功能 |
Html文件類型
<!DOCTYPE html>
註解
<!--要註解的東西-->
head & body
<head>
HTML tags、meta標籤
</head>
<body>
網頁內容
</body>
容器
<div>
區塊容器(排版)
</div>
<span>行內容器(美工)</span>
meta系列(matadata)
編碼 <meta charset="UTF-8"/>
作者 <meta name="author" content="作者"/>
關鍵字 <meta name="keyword" content="關鍵字"/>
網頁內容 <meta name="description" content="網頁內容"/>
視口(自動調整大小) <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
網頁標籤
<title>標籤內容</title>
各式大小標題
<h1>你的標題(大)</h1> ---- <h6>你的標題(小)</h6>
第一種標題
第二種標題
第三種標題
第四種標題
第五種標題
第六種標題
換行&水平線
換行 <br></br> 簡化成 <br/>
水平線 <hr></hr> 簡化成 ><hr/>
文字段落
<p>文字段落(占整行)</p>
<a>文字段落(多常長多少)</a>文字變化
<i>斜體</i>
<b>粗體</b>
<i>斜體<b>粗體</b></i>
連結
<a href="連結">顯示在頁面的樣子</a>
<a href="https://www.flickr.com/photos/cjc217">志融的Flickr</a>
圖片
<img src="圖片連結/位置/名稱"/>
(攝於2022.05.06 By 簡志融)
影片播放器
<video src="影片連結/位置/名稱"/>錯誤時顯示</video>
<iframe src="影片連結"/>錯誤時顯示</video> (用來內嵌外部內容)
表格
<table>
<tr>
<td>語言
<td>功能
</tr>
<tr>
<td>Html
<td>骨架 架構
</tr>
<tr>
<td>Css
<td>排版 美工
</tr>
<tr>
<td>JS
<td>動畫 功能
</tr>
</table>
| 語言 | 功能 |
| Html | 骨架 架構 |
| Css | 排版 美工 |
| JS | 動畫 功能 |
列表
<ul>
<li>Html</li>
<li>Css</li>
<li>JS</li>
</ul>
- Html
- Css
- Js
input系列
<input type="種類" placeholder="說明文字"/> 種類 : text、password、date、checkbox、flie
I understand this
textarea
<textarea>預設文字</textarea>
網頁基礎架構
<html>
<head>
<meta charset="UTF-8"/>
<title>網頁標題</title>
</head>
<body>
<h1>這是第一種標題</h1>>
<p>文字段落</p>
</body>
</html>