1.Html5基礎講解

1.1HTML5基礎標籤:
head:頭標籤，一般會將一些網頁的基本配置和檔案引用在head中設定；
body:內容標籤，裡面是整個網頁要展示內容部分；
1.2HTML5標題:
h1…h6等,後面跟的數字越大，對應的標題的字型大小就越小；
1.3HTML5段落
p標籤表示段落，在p標籤中可以編寫文欄位落；
1.4HTML5連線
a標籤表示連線，可以在裡面設定點選之後跳轉到其他url；
1.5HTML5影象
img標籤表示影象標籤，可以通過其設定圖片展示；
1.6HTML5換行標籤
br標籤表示換行，使用它時最後帶上“/”,因為這樣更規範。

2.HTML5元素簡介

元素：從開始標籤到結束標籤的所有程式碼，元素是可以進行巢狀的，正是這個屬性可以是網頁可以形成百變的組合效果。

3.HTML屬性

可以通過設定屬性為元素提供更多的屬性，屬性以鍵值對的形式存在
eg：href=“xxxxx”

常用的標籤屬性:
h1標題標籤: align：設定對齊方式
body標籤: bgcolor：設定整個body背景顏色
a標籤: target：指定在何處開啟連線

通用屬性:
-class:規定元素的類名
-id：規定元素的唯一id
-style：規定元素的樣式
-title：規定元素的額外資訊

4.HTML格式化

常用格式化標籤:
-b標籤

5.HTML樣式

三種樣式表插入方式：

-外部樣式表:
<link rel =”stylesheet” type=”text/css” href=”mystyle.css”>
-內部樣式表：
<style type=”text/css”>
body{background-color ;red}
p{margin-left:20px}
</style>
-內聯樣式表：

6.HTML連結

href屬性：指向另一個文件的連結，頁面外的跳轉
name屬性：建立文件內的連結，頁面內的跳轉
eg：
<a name=”tips” > 待跳轉的位置</a>
<a href=”#tips”>開始跳轉的位置</a>

7.HTML表格

標籤
<table> : 定義表格
<caption> : 定義表格標題
<th> : 定義表格的表頭
<tr>: 定義表格的行
<td>: 定義表格的單元
<thread> : 定義表格的頁首
<tbody> : 定義表格的主體
<tfoot> : 定義表格的頁尾
<col> : 定義表格的列屬性
幾種表格
最簡單的表格：
<table border=”1”>
<tr>
<td>表格1</td>
<td>表格2</td>
<td>表格3</td>
</tr>
<tr>
<td>表格1</td>
<td>表格2</td>
<td>表格3</td>
</tr>
</table>
帶表頭的表格：
<table border=”1”>
<tr>
<th>單元</th>
<th>單元</th>
<th>單元</th>
</tr>
<tr>
<td>表格1</td>
<td>表格2</td>
<td>表格3</td>
</tr>
<tr>
<td>表格1</td>
<td>表格2</td>
<td>表格3</td>
</tr>
</table>
帶標題的表格：
<table border=”1”>
<caption>重要表格</caption>
<tr>
<th>單元</th>
<th>單元</th>
<th>單元</th>
</tr>
<tr>
<td>表格1</td>
<td>表格2</td>
<td>表格3</td>
</tr>
<tr>
<td>表格1</td>
<td>表格2</td>
<td>表格3</td>
</tr>
</table>
表格內的標籤：
<table border=”1”>
<caption>重要表格</caption>
<tr>
<th>單元</th>
<th>單元</th>
</tr>
<tr>
<td>表格1</td>
<td>表格2</td>
</tr>
<tr>
<td>
<ul>
<li>菠蘿</li>
<li>菠蘿</li>
<li>菠蘿</li>
</ul>
</td>
<td>我想吃了</td>
</tr>
</table>
單元格間距設定表格： <table border=”1” cellspacing=”10”>
單元格邊距設定表格：<table border=”1” cellpadding=”10”>
表格背景色，表格背景圖片設定：
背景圖片： <table border=”1” background=”images/Desert.jpg”>
背景顏色: <table border=”1” bgcolor=”aqua”>

8.HTML列表的使用

列表標籤：
-<ol>: 有序列表
-<ul>: 無序列表
-<li>: 列表項
-<dl>:列表
-<dt>:列表項
-<dd>:描述

常用列表示例：
無序列表：
<ul type=”square”>
<li>第1個</li>
<li>第2個</li>
<li>第3個</li>
<li>第4個</li>
</ul>
使用標籤：<ul>,<li>
屬性: disc,circle,square 代表了列表前的符號樣式

有序列表：
<ol start=”10”>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
使用標籤：<ol>,<li>
屬性 :A,a,l,i,start 表示有序列表前面的數字樣式

巢狀列表：
<ul>
<li>動物</li>
<ul>
<li>小狗</li>
<li>小貓</li>
</ul>
<li>植物</li>
<ul>
<li>小草</li>
<li>小花</li>
</ul>
<li>人類</li>
</ul>
使用標籤：<ul>,<ol>,<li>

自定義列表：
<dl>
<dt>ahah</dt>
<dd>sssssssss</dd>
<dt>ahah</dt>
<dd>sssssssss</dd>
<dt>ahah</dt>
<dd>sssssssss</dd>
</dl>
使用標籤：<dl>,<dt>,<dd>

9.HTML塊的使用

HTML塊元素：塊元素顯示時，通常會以新行開始
一般有：<h1>、<p>、<ul>
HTML內聯元素：內聯元素通常不會以新行開始
一般有：<b> 、<a> 、<img>
HTML<div>元素： div元素也被稱為塊元素，其主要是組合HTML元素的容器
HTML<span>元素： span是內聯元素，可作為文字的容器

10.HTML5的佈局

一般可以使用div進行佈局，也可以使用table進行佈局，使用這兩個標籤可以搭出一個網頁的大體框架，然後往其中提充具體的細節元素；

11.HTML5的表單

表單常用標籤：
<form>:表單
<input>:輸入框
<textarea>:文字框
<label>:控制標籤
<fieldset>:定義域
<legend>:域的標題
<select>:選擇列表
<optground>:選項組
<option>:下拉列表中的選項
<button>:按鈕
常用的表單：
複選框表單：
eg： 請選擇你喜歡吃的水果：
蘋果<input type=”checkbox”>
香蕉<input type=”checkbox”>
水蜜桃<input type=”checkbox”>
單選按鈕：
eg： 請選擇你的性別：
男<input type=”radio” name=”sex”>
女<input type=”radio” name=”sex”>
下拉框：
eg：<select>
<option>上海</option>
<option>南京</option>
<option>北京</option>
</select>
文字域：
eg：<textarea cols=”30” rows=”10”>please input your message here…</textarea>
按鈕：
eg:<input type=”submit” value=”提交”>
<input type=”button” value=”提交”>
表單提交資料到伺服器:
eg:<form action=”http://localhost/MyServer/server1.php” method=”get”>
<table>
<tr>
<th colspan=”2”>登入</th>
</tr>
<tr>
<td>使用者名稱：</td>
<td><input type=”text” name=”name”></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type=”password” name=”password”></td>
</tr>
<tr>
<td colspan=”2”><input type=”submit” value=”提交”></td>
</tr>
</table>
</form>

12.HTML5的框架

frame：框架標籤
框架對於頁面設計有著很大的作用

frameset：框架集標籤
框架集標籤定義如何將視窗分割為框架
每個frameset定義了一系列行或列
rows、cols的值規定了每行或每列佔據螢幕的面積

常用標籤: norsize固定框架大小,cols列,rows行
內聯框架： iframe ,現在推薦使用的框架