HTML5基礎知識學習筆記

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標簽： 定義粗體字
-big標簽：定義大號字
-em標簽：定義著重文字
-i標簽：定義斜體文字
-small標簽：定義小號字
-strong標簽：定義加重語氣
-sub標簽：定義下標字
-sup標簽：定義上標字
-ins標簽：定義插入字
-del標簽：定義刪除字

5.HTML樣式

三種樣式表插入方式：

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

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 ,現在推薦使用的框架

--------------------------------------分割線 -------------------------------------- 

HTML5 地理位置定位(HTML5 Geolocation)原理及應用 http://www.linuxidc.com/Linux/2012-07/65129.htm 

HTML5移動開發即學即用(雙色) PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90351.htm 

HTML5入門學習筆記 http://www.linuxidc.com/Linux/2013-09/90089.htm 

HTML5移動Web開發筆記 http://www.linuxidc.com/Linux/2013-09/90088.htm 

HTML5 開發中的本地存儲的安全風險 http://www.linuxidc.com/Linux/2013-06/86486.htm 

《HTML5與CSS3權威指南》及相配套源碼 http://www.linuxidc.com/Linux/2013-02/79950.htm 

關於 HTML5 令人激動的 10 項預測 http://www.linuxidc.com/Linux/2013-02/79917.htm 

HTML5與CSS3實戰指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm 

--------------------------------------分割線 --------------------------------------