HTML是房子，CSS是裝修，JavaScript是生活
提要：常用標籤，並非全部 - 持續補入
前程往事
Basics ~
基礎常識
HTML簡介
HTML 包含HTML 標籤及文本內容，允許格式化文本，添加圖片，創建鏈接、輸入表單、框架和表格等等，並可將之存爲文本文件，瀏覽器即可讀取和顯示
- HTML（ HyperText Markup Language ） ：一種在 Web 上使用的通用標記語言(不是編程語言哦 ~)
- 標記語言 ：是一套標記標籤，使用標記標籤來描述網頁
HTML實例分析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Every Day (baidu.com)</title>
</head>
<body>
<span>繼續努力~<span/>
</body>
</html>
必有元素（每一個Html頁面必定含有以下元素，格式如上）
- !DOCTYPE html - 聲明爲 HTML5 文檔 （若不加，則適配存在問題）
- html 元素 - HTML 頁面的根元素 （首尾標籤）
- head 元素包含了文檔的元（meta）數據，如 meta charset=“utf-8” 定義網頁編碼格式爲 - utf-8 （meta標籤可以擁有多個，這裏我們爲防止亂碼只聲明瞭編碼格式）
- title 元素 - 描述了文檔的標題 （網頁頂部的頁面名稱）
- body 元素 - 包含了可見的頁面內容 （主題頁面書寫區域）
擴展元素（因人而異）
- span 元素 - body內的標籤自己書寫即可，我只是爲了不空曠，才寫了一行文字~
HTML元素分類
HTML 可以通過 div 和 span 將元素組合起來
區塊元素
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）
- 常見塊級標籤
div、h1、p、ul、table
內聯元素
內聯元素在瀏覽器顯示時，通常不會以新行開始
- 常見內聯標籤
span、b、td、 a、img
常用標籤
標題
h1 - h6 標籤 ：值越小，字體越大，目前標題標籤僅有6種
Effect
Code
<h1>Happy every day</h1>
<h2>Happy every day</h2>
<h3>Happy every day</h3>
<h4>Happy every day</h4>
<h5>Happy every day</h5>
<h6>Happy every day</h6>
字體
顯示
- b - 加粗
- i - 斜體
- sup - 上標
- sub - 下標
- code - 計算機代碼
Effect
Code
<b>加粗文本</b>
<i>斜體文本</i>
<sup>上標</sup>
<sub>下標</sub>
<code>計算機代碼</code>
引用
圖片
<img src="此處一般位項目內的圖片地址" alt="圖片加載失敗">
鏈接
<a href="https://www.baidu.com/">點擊直接跳轉百度</a>
水平線
Effect
Code
<p> 今天的天氣</p>
<hr />
<p>有點冷</p>
<hr />
<p>2019/0/21</p>
<hr />
換行
- br - 換行
- p - 段落
br：換行
<br><br/>
或
<br>
或
<br/>
p：段落 (相當於自帶換行功能)
p標籤屬於塊級元素瀏覽器會自動地在段落的前後添加空行
<p>Happy every day</p>
br、p：換行、段落嵌套
Effect
Code
<p>開始的<br/>開始<br/>我們是個孩子</p>
表格
公共屬性
- table - 定義表格
- th - 定義表格的表頭
- tr - 定義表格的行
- td - 定義表格單元
默認表格
Effect
Code
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
單線表格
關鍵屬性
- border 表格的邊框
- cellspacing 表示單元格與單元格之間的距離
- cellpadding 表示單元格()內邊距到其內容之間的距離
Effect
Code
<table border="1" cellspacing="0" cellpadding="20">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
合併表格
關鍵屬性
- colspan 指定單元格橫向跨越的列數（colspan就是合併列的，比如colspan=2的話就是合併兩列）
- rowspan 指定單元格縱向跨越的行數（rowspan就是用來合併行的，比如rowspan=2就是合併兩行）
Effect
Code
<table border = 1 align = "center" cellspacing="0" cellpadding="20">
<tr>
<!-- 合併第一列和第二列 從左往右，把要合併的不寫用 用colspan寫要合併的列-->
<td colspan = "2">第一行第一列</td>
<!-- <td>第一行第二列</td> -->
<td>第一行第三列</td>
<td>第一行第四列</td>
</tr>
<tr>
<!--合併行 從上往下 把要合併的不寫用 用rowspan寫要合併的行-->
<td rowspan="2">第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
<td>第二行第四列</td>
</tr>
<tr>
<!-- <td>第三行第一列</td> -->
<td>第三行第二列</td>
<td>第三行第三列</td>
<td>第三行第四列</td>
</tr>
</table>
我朋友的一個Demo
- bgcolor 表格背景色
Effect
Code
<p align='center'>我喜歡的歌曲<p/>
<table bgcolor="#00FF00" width="100%"border="1" cellspacing="0" cellpadding="10">
<tr>
<th>歌名</th>
<th>作者</th>
</tr>
<tr>
<td>光輝歲月</td>
<td>Beyond</td>
</tr>
<tr>
<td>紅豆</td>
<td>王菲</td>
</tr>
<tr>
<td>我只在乎你</td>
<td>鄧麗君</td>
</tr>
<tr>
<td>倩女幽魂</td>
<td center rowspan="2">張國榮</td>
</tr>
<tr>
<td>有誰共鳴</td>
</tr>
<tr >
<td colspan = "2">現總計：5首歌曲</td>
</tr>
</table>
列表
注意
- 列表分爲三類 有序、無序、自定義
- ol 、ul 前的符號可通過type值修改
- ol 、ul 是塊級元素，li表示行排列不能單獨使用，需要在ol 、ul裏面，配合使用
API
- ol - 定義有序列表
- ul - 定義無序列表
- li - 定義列表項
- dl - 定義列表
- dt - 自定義列表項目
- dd - 定義自定列表項的描述
ol（ordered list）：有序列表
type屬性：1 - 數字（默認）、a - 小寫字母、A - 大寫字母、i - 小寫希臘字母、I - 大寫希臘字母
<ol type=1>
<li>過去</li>
<li>現在</li>
<li>未來</li>
</ol>
ul（unordered list）：無序列表
type屬性：disc - 實心圓(默認）、circle - 空心圓、square - 實心方塊
<ul type=square>
<li>過去</li>
<li>現在</li>
<li>未來</li>
</ul>
dl ：自定義列表
<dl>
<dt>時間軸</dt>
<dd>- 過去</dd>
<dd>- 現在</dd>
<dd>- 未來</dd>
</dl>
Input 輸入框
基礎方式
Effect
Code
常見輸入框：<input type="text" name="nameId">
常見類型
文本
<input type="text" name="nameId">
密碼
<input type="password" name="nameId">
單選
<input type="radio" name="nameId">
多選
<input type="checkbox" name="nameId">
提交
<input type="submit" name="nameId">
Form表單
標籤屬性
Demo效果
Effect
Code
<form name="input" action="html_form_action.php" method="get">
文本<br>
First name:<input type="text" name="firstname"><br>
Last name:<input type="text" name="lastname"><hr>
密碼<br>
Password:<input type="password" name="pwd"><hr>
單選題<br>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<hr>
多選題<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<hr>
下拉框<br>
<select name="Age">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Username:<input type="text" name="user"><br>
<input type="submit" value="提交"><br>
</form>