每天一句：你可以不聰明，但你不可以不努力！
一、web標準的概念
web標準是網頁制作的標準，它不是一個標準，而是根據網頁不同組成部分生成的一系列標準。這些標準大部分由W3C(萬維網聯盟)起草發(fā)布，也有部分標準由ECMA起草發(fā)布(ECMA歐洲電腦網商協會);
二、網頁組成
- 內容: 網頁要傳達的信息即是內容部分；
- 結構: 網頁的結構部分(頭部、身體、結尾…)
- 表現: 網頁樣式(每個網頁設計的都是不一樣的)
- 行為: 網頁能夠實現交互功能(輪播圖、滑動效果、用戶與頁面的交互..)
網頁組成
三、HTML及相關概念
- HTML指的是超文本標記語言，www萬維網的描述性語言，通用標記語言的一個應用；
- XHTML指可擴展超文本標記語言(標識語言)，是一種置標語言，表現方式與超文本標記(HTML)類似，不過語法上更加嚴格；
- HTML5指的是HTML的第五次重大修改(第5個版本)；
- H5是一個技術集合，面向于移動端；
四、HTML發(fā)展歷史
> HTML1.0 在1993年6月作為互聯網工程工作小組(IETF)工作草案發(fā)布(并非標準);
> HTML2.0 1995年11月作為RFC 1866發(fā)布，在RFC 2854于2000年6月發(fā)布之后被宣布已經過時;
> HTML3.2 1996年1月14日，W3C推薦標準;
> HTML4.0 1997年12月18日，W3C推薦標準;
> HTML4.01（微小改進）——1999年12月24日，W3C推薦標準;
> XHTML1.0 發(fā)布于2000年1月26日，是W3C推薦標準，后來經過修訂于2002年8月1日重新發(fā)布;
> XHTML1.1 2001年5月31日發(fā)布，W3C推薦標準;
> XHTML2.0 W3C工作草案;
> XHTML5 從XHTML 1.x的更新版，基于HTML5草案;
> HTML5 第一份正式草案已于2008年1月22日公布;
> HTML5 2014年10月29號萬維網聯盟宣布經過8年時間，該標準規(guī)范制定完成；
【WHATWG(網頁超文本應用技術工作小組)是一個以推動網絡HTML 5 標準為目的而成立的組織，在2004年，由Opera、Mozilla基金會和蘋果這些瀏覽器廠商組成】
五、HTML基本骨架
- 骨架1(HTML4.01版本IE6開始兼容)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
</body>
</html>
- 標準骨架2(IE9開始兼容)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
- 備注
文檔聲明頭
<!DOCTYPE html …>此標簽可告知瀏覽器文檔，使用HTML或XHTML規(guī)范(注: 現階段學習的是HTML4.01版本);
字符集(編碼類型)
- <meta charset=“xxx” ...>中文能夠使用的字符集有UTF-8和GB2312(GBK);
- UTF-8是國際通用字庫，里面涵蓋所有地球上人類語言文字，例如漢語、英語、鳥語…;
- GB2312是國標，是中國的字庫，里面僅涵蓋了漢字和一些常用外文，例如日文片假名、常見符號…;
- 字庫規(guī)模: UTF-8(字全) > GB2312(只有漢字);
- 保存大小: UTF-8(更臃腫、加載更慢) > GB2312(更輕巧、加載更快)[UTF-8一個漢字3個字節(jié)，而GB2312一個漢字2個字節(jié)];
【meta標簽即是聲明當前html文檔的字庫，如果類型不一致，則會出現亂碼】
注: 使用UTF-8，還是GB2312?
使用哪種字符集要根據實際情況進行選擇，例如公司是做日本動漫的，經常會出現日語動漫名字，網頁就要使用UTF-8，如果用GB2312將無法顯示日語；例如公司就是中文網，極度的追求網頁的顯示速度，就可以使用GB2312，如果使用UTF-8將每個漢字多一個字節(jié)，即5000個漢字就多5KB；
例如qq、網易、搜狐都是使用GB2312，追求顯示速度；
例如新華網藏語頻道使用的是UTF-8，保證字符集的數量；
注: 什么是字符集?活字印刷術，所有的漢字都有一個小小印章，需要哪個字，就取哪個字。
趙六發(fā)明一個字庫U，老王發(fā)明了一個字庫G；
例如同一個漢字“你”，在趙六字庫U中是第3個大盤子第3行第24列；在老王字符庫G中是第6大盤子第9行第68列。
計算機，不能直接存儲漢字，而都是存儲的是編碼，所以計算機記錄“你”字，就這么記錄的：
趙六U: 03 03 24 030324你
老王G: 06 09 68 060968你
六、HTML語法
1、標記
標簽對: <標記名> </標記名>
單標簽: <標記名 />
說明：
1）寫在尖角號里的第一個單詞，叫做標記，也叫做標簽，也稱作元素；
2）標記和屬性用空格隔開，屬性和屬性值用等號連接，屬性值必須放在雙引號內
3）一個標記可以有多個屬性，屬性和屬性之間用空格隔開，屬性與屬性間不分先后順序；
4）空標記是指沒有結束標簽的標記，必須使用"/" 關閉
2、HTML注釋方式
語法:
<!-- -->
例如:
<!-- 標題-->
3、標題字體
語法:
<h#> 標題內容 </h#> [其中#是1~6]
例如:
<h1>HTML基礎學習</h1>
<h3>HTML基礎學習</h3>
4、段落
語法:
<p> 段落文本內容(段落與段落之間有間距) </p>
注:
空格符號(所占的位置沒有確定值，這和當前字體有關):
例如:
<p> 我是段落內容 </p>
5、加粗
語法1:
<b> 加粗內容 </b>
語法2:
<strong> 加粗內容 </strong>
例如:
<b>學習HTML的感想... </b>
6、傾斜
語法1:
<i> 傾斜內容 </i>
語法2:
<em> 傾斜內容 </em>
例如:
<p> 今天是星期四，明天就是 <strong>星期五啦!!!</strong> 想想明天放假我都開心，然后我可以<i>睡個懶覺、玩玩游戲、撩撩妹...</i></p>
7、文本加下劃線
語法:
<u> 文本加下劃線 </u>
例如:
<u> 我就是文本文本加下劃線 </u>
8、標記文本上標
語法:
<sup> 文本上標 </sup>
例如:
2<sup>3</sup> = 8
9、標記文本下標
語法:
<sub> 文本下標 </sub>
例如:
H<sub>2</sub>O
10、特殊字符
不換行空格: 空格大小是不確定的，是和當前所在字體大小有關
右尖括號>: >
左尖括號<: <
備案中圖標? : ?
11、換行
語法: <br />
備注: 換行是一個空標記，是強制換行
12、水平線
語法: <hr />
備注: 空標記
13、列表
> 無序列表(unordered list):
<ul>
<li> 無序列表1 </li>
<li> 無序列表2 </li>
</ul>
> 有序列表(ordered list):
<ol>
<li> 有序列表 </li>
<li> 有序列表 </li>
</ol>
注: 擴展(有序列表的屬性):
語法: <ol type="a" start="3"> </ol>
type屬性: 規(guī)定列表中的列表項的符號類型
start屬性: 規(guī)定有序列表是從第幾個開始(默認從1開始)
'1' 數字的有序列表(默認值)
'a' 小寫字母的有序列表
'A' 大寫字母的有序列表
'i' 羅馬數字，小寫
'I' 羅馬數字，大寫
> 自定義列表(definition list):
<dl>
<dt> 名詞 </dt>
<dd> 解釋/定義描述 </dd>
</dl>
14、圖片
語法:
title的作用: 在你鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就沒有了，HTML的絕大多數標簽都支持title屬性，title屬性就是專門做提示信息的，圖片標題;
alt的作用: 在你的圖片因為某種原因不能加載時在頁面顯示的提示信息，它會直接輸出在原本加載圖片的地方做為圖片替換文本;
例如:
備注:
需要插入的圖片必須放在站點下;
路徑問題:
./ 當前目錄(可以忽略不寫)
../ 上級目錄
../../ 上上級目錄
15、超鏈接
語法1:
<a href="#"> </a>空鏈接(當前)
語法2:
<a href="鏈接地址" target="" title=""> </a>
href: 鏈接地址后邊跟的是鏈接頁面的路徑(包含文件名);
title: 加入這個屬性后,當鼠標移動到熱點時,則在鼠標下方顯示title的內容;
target: 參數定義了打開鏈接的目標窗口，即控制打開方式;
_blank: 在新窗口中打開鏈接 頁面（會保留原窗口）
_self: 在當前窗體打開鏈接頁面，此為默認值
例如:
<a target="_blank"> 首頁 </a>
16、表格
表格: <table> </table>
行: <tr> 行 </tr>
單元格(列): <td> 單元格 </td>
1）width="表格的寬度"
2）height="表格的高度"
3）border="表格的邊框"
4）bordercolor="邊框色"
5) bgcolor="背景顏色"
6）cellspacing="單元格與單元格之間的間距"
7）cellpadding="單元格與內容之間的空隙"
8）align="表格對齊方式" 取值：left、right、center(備注: 如果是table中的屬性是整個表格相對于瀏覽器的對齊方式，如果是td即是文本內容相對單元格的對齊方式)
valign="垂直對齊" top\bottom\middle (備注: 只能用于tr/td)
9）background=“路徑” 背景
10）合并單元格屬性：
合并列： colspan=“所要合并的單元格的列數"
合并行： rowspan=“所要合并單元格的行數”
例如:
<table width="300" height="300" border="1" cellspacing="0" align="center">
<!-- 單元格合并，合并列-->
<tr>
<td colspan="2" align="center" width=“130”> 單元格"合并列" </td>
<!-- 注意，合并完之后，就是刪除掉一下，如果還存在，就是會多出一個單元格-->
<!-- > <td> 第一行第二列 </td> -->
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
16、表格相關
17、表單控件
- 表單框(表單域)
語法:
<form name="表單框的名稱" method="post/get" action="url">
</form>
屬性描述:
name: 表單框的名字
method: 請求方式
action: 提交到url
- 文本框
<input type="text" value="賬號"/>
- 密碼框
<input type="password"/>
- 提交按鈕
<input type="submit" value="提交內容">
備注: value是必備的，即是按鈕要有按鈕名才行
- 重置按鈕
<input type="reset" value="重置">
備注: 重置，即是輸入框刪除輸入內容
- 單選框/單選按鈕
<input type="radio" name="sex"/> 男
<input type="radio" name="sex" checked="checked" /> 女 <br/>
<input type="radio" /> 中性 <br/>
備注:
name: 必須寫，而且同一組單選按鈕的name屬性值必須是一致的;
checked: 可以設置默認選擇(checked="checked"默認即是選中);
disabled: 是否可用(disabled="disabled"即禁用)，默認是可用;
- 復選框(即可以多選的)
<input type="checkbox" name="like"> 吃飯
<input type="checkbox" name="like"> 睡覺
<input type="checkbox" name="like"> 玩游戲
<input type="checkbox"> 打豆豆
備注:
name: 可以不寫，不影響復選，但是同一組的最好還是要添加一致的名字；
checked: 可以設置默認選擇(checked="checked"默認即是選中);
disabled: 是否可用(disabled="disabled"即禁用)，默認是可用;
- 下拉菜單
<select>
<option>身份證</option>
<option>學位證</option>
<option>軍人證</option>
</select>
- 多行文本框(文本域)
<textarea rows="5" cols="50">
</textarea>
rows: 設置文本輸入窗口的高度
cols: 設置文本輸入窗口的寬度
- 按鈕
<input name="" type="button" value="按鈕內容" />
備注: 和submit的區(qū)別是 ，submit是提交按鈕 起到提交信息的作用，button只起到跳轉的作用，不進行提交
