html:hyperText markup language 超文本標記語言
點擊鏈接后退頁面:
<a href="javascript:history.go(-1)">回到上一個網(wǎng)頁</a>
1.在網(wǎng)頁中，HTML決定結(jié)構(gòu)和內(nèi)容，CSS設(shè)定網(wǎng)頁的表現(xiàn)樣式，JavaScript控制網(wǎng)頁的行為。
2.<!DOCTYPE html>必須位于HTML文檔的第一行。
3.<meta>標簽:用于方便瀏覽器解析或搜索引擎搜索，一般放置于<head>中，用"名稱/值"方式:
(1)表示文檔內(nèi)容類型，字符串編碼信息，如:<meta charset="UTF-8">
(2)為搜索引擎定義關(guān)鍵詞:
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">
(3)為網(wǎng)頁定義描述內(nèi)容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
(4)定義網(wǎng)頁作者
<meta name="author" content="zain">
(5)每30秒中刷新當前頁面
<meta http-equiv="refresh" content="30">
4.字體樣式標簽： <strong>字體變粗， <em>字體傾斜
5.注釋
6.特殊符號:
空格?
大于號>
小于號<
引號"
版權(quán)符號?
圖片格式:JPG,GIF,PNG,BMP
7.圖片標簽，必須要有src和alt屬性
<img src="圖片地址" alt="圖片的替代文字" title="鼠標懸停提示文字" width="圖片寬度" height="圖片高度" />
8.超鏈接標簽(target指定在那個窗口打開，_self自身窗口，_blank新建窗口)
<a href="鏈接地址" target="目標打開窗口位置">附連接的文本或圖像</a>
9.鏈接地址
（1）絕對路徑(指向目標地址的完整描述，多指向本站點外的文件，如<a >百度</a>)
(2)相對路徑(一般指向本站點內(nèi)的文件，如<a href="login/login.html">登陸</a>)
(3)相對路徑中"../"表示當前目錄的上級目錄，"../../"表示上上級目錄
10.超鏈接的應(yīng)用場合
(1)頁面鏈接:如<a href="login.html" target="_blank">為你跳轉(zhuǎn)到登錄頁</a>
(2)錨鏈接:
先在目標位置B設(shè)置標記如:<a name="new">這里是目標位置</a>
然后在A位置設(shè)置超鏈接路徑href屬性值為"#標記名"如:<a href="#new">當前位置</a>
(3)功能性鏈接:單擊時啟動本機自帶的應(yīng)用程序如QQ,電子郵件等，如電子郵件鏈接:"mailto:電子郵件地址"
11.元素分類
（1）塊元素:如<p><h1><div>無論內(nèi)容有多少，該元素都獨占一行(一塊)。
塊元素特點:如果沒有設(shè)置自身寬度，則顯示為父容器的100%。
（2）行內(nèi)元素:如<strong><a>顯示寬度由自己的內(nèi)容決定，其他元素可以排在它后面。
12.元素類型轉(zhuǎn)換
（1）塊狀元素轉(zhuǎn)換為內(nèi)聯(lián)元素:display:inline;
（2）內(nèi)聯(lián)元素轉(zhuǎn)換為塊狀元素:display:block;
(3)把元素設(shè)為內(nèi)聯(lián)塊狀元素:display:inline-block;
13.元素的特點:
塊狀元素特點：
1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行.
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
3、元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個寬度。
內(nèi)聯(lián)元素特點:
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設(shè)置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變.
內(nèi)聯(lián)塊狀元素（同時具備塊狀元素和內(nèi)聯(lián)元素的特點）：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
14.常見的元素:
常用的塊狀元素有:（block）
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的內(nèi)聯(lián)元素有:(inline)
<a>、<span>、
、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內(nèi)聯(lián)塊狀元素有:(inline-block)
<img>,<input>
15.三種列表:
(1)有序列表<ol><li>
(2)無序列表<ul><li>,ul中只能嵌套li，而li可以嵌套任意標簽
(3)定義列表<dl><dt><dd>,是標題及列表項的結(jié)合。
16.表格基本結(jié)構(gòu):單元格，行，列
(1)<table><tr><th><td>
(2)HTML5中已經(jīng)廢除table的border屬性，用css控制邊框?qū)挾取?br>
(3)跨列(橫跨)：<td colspan="所跨的列數(shù)">內(nèi)容</td>
跨行(豎跨)：<td rowspan="所跨的行數(shù)">內(nèi)容</td>
(4)表格特點:同行單元格高度一致且水平對齊，同列單元格寬度一致且垂直對齊。
17.視頻元素:
(1)controls屬性是否顯示播放暫停和音量控制，autoplay屬性自動播放，loop屬性循環(huán)播放。
<video src="視頻路徑" controls="controls">你的瀏覽器不支持video標簽</video>
(2)source元素鏈接不同的視頻文件，瀏覽器會自動選擇第一個可識別的格式:
<video controls>
<source src="video/video.webm"/>
<source src="video/video.mp4"/>你的瀏覽器不支持video標簽
</video>
18.音頻元素:使用語法和視頻元素一樣，只要把video換成audio即可。
19.HTML5的結(jié)構(gòu)元素(先劃分結(jié)構(gòu)再寫內(nèi)容)
head(頭部)，footer(腳部),
section(獨立區(qū)域),article(獨立文章內(nèi)容),
aside(相關(guān)內(nèi)容或應(yīng)用，常用于側(cè)邊欄),nav(導航類輔助內(nèi)容)
20.<iframe>框架：方便在頁面中引用站外的頁面內(nèi)容。
<iframe name="此框架的標識名" src="引用的頁面地址"></iframe>
21.<iframe>和錨鏈接的結(jié)合：使錨鏈接的內(nèi)容在iframe框架中打開
<form name="mainFrame" src="框架引用的頁面地址" />
<a href="鏈接路徑" target="mainFrame">點擊在框架中打開</a>
22.表單標簽form
<form method="post" action="login.html" enctype="text/plain"/>
表單內(nèi)容
</form>
(1)action="url"屬性意為把表單提交到某個頁面,method=get|post意為向服務(wù)器發(fā)送數(shù)據(jù)的方式。
(2)提交方法：get提交,表單數(shù)據(jù)會在地址欄url中顯示；而post提交不會顯示，所以post提交更安全。
(3)enctype="text/plain"指enctype 屬性規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對表單數(shù)據(jù)進行編碼。text/plain 空格轉(zhuǎn)換為加號+，但不對特殊字符編碼。
23.表單元素:
(1)表單元素<input>標簽屬性:
type(默認text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、name、value(可選,該元素的初始值)、size(該元素的初始寬度)、
maxlength(可輸入的最大字符數(shù))、checked(按鈕被選中)
(2)列表框<select><option>標簽：
<select>中至少包含一個<option>。在<option>有多行選項需滾動查看時，size屬性設(shè)置可提示看到的行數(shù)，selected屬性默認選中該列表項。
(3)按鈕：button普通(要和事件如onclick關(guān)聯(lián)使用),submit(提交表單到action指定的url并傳遞表單數(shù)據(jù)),reset重置。要求美觀可使用圖片按鈕如<input type="image" src="圖片路徑"/>
(4)多行文本域：不能用value屬性賦初始值
<textarea name="標識名" cols="顯示的列數(shù)" rows="顯示的行數(shù)">
自我評價
</textarea>
(5)數(shù)字number：限制輸入的數(shù)據(jù)為數(shù)字，設(shè)定最大值最小值、合法的數(shù)據(jù)間隔step或默認值等
<input type="number" name="num" min="0" max="100" step="10"/>
(6)滑塊range：作用和數(shù)字number一樣，只是外觀顯示為用滑動條選擇數(shù)值
<input type="range" name="range" min="0" max="100" step="10"/>
(7)search搜索框:在任意頁面中用于輸入搜索關(guān)鍵詞的文本框
<input type="search" name="sousuo" />
(8)文件域：多用于文件上傳
<input type="file" name="files"/>
<input type="submit" name="upfiles" value="上傳"/>
(9)當表單數(shù)據(jù)包含普通數(shù)據(jù)、文件數(shù)據(jù)等多部分內(nèi)容時，要設(shè)置表單的enctype編碼屬性為 multipart/form-data,表示把表單數(shù)據(jù)分為多部分提交。
(10)表單隱藏域hidden：數(shù)據(jù)不會頁面中顯示，但會隨表單一同提交。
<input type="hidden" name="userid" value="20"/>
(11)表單元素 只讀屬性readonly、禁用disabled
(12)W3CHTML5標準中，規(guī)定對布爾類型的屬性，屬性值可以省略。
(13)表單元素的標注label：當鼠標單擊標注的文本時，瀏覽器會自動對焦關(guān)聯(lián)的表單元素，for屬性規(guī)定label與哪個表單元素綁定。name和id屬性必需。
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
24.HTML5表單新標簽
<form> 供用戶輸入的表單
<input> 輸入域
<textarea> 文本域 (多行輸入)
<label> 定義 <input> 元素的標簽，一般為輸入標題
<fieldset> 定義一組相關(guān)的表單元素，并使用外框包含起來
<legend> 定義 <fieldset> 元素的標題
<select> 下拉選項列表
<optgroup> 選項組
<option> 下拉列表中的選項
<button> 點擊按鈕
<datalist> 指定一個預(yù)先定義的輸入控件選項列表
<keygen> 定義了表單的密鑰對生成器字段
<output> 計算結(jié)果
25.表單驗證
(1)好處：減輕服務(wù)器的壓力；保證數(shù)據(jù)的可行性和安全性。
(2)placeholder:為文本框提示用戶輸入
<input type="text" name="name" placeholder="請輸入你的姓名"/>
(3)required：規(guī)定文本框不能為空
<input type="email" name="email" required/>
(4)pattern：輸入的內(nèi)容必須符合正則表達式自定義的規(guī)則
<input type="text" name="tel" required pattern="^1[35]\d{9}"/>規(guī)定以13、15開頭的11位數(shù)字
26.utf-8和utf8的使用，只有mysql可以用“utf8”,但其他地方一律使用大寫"UTF-8"
網(wǎng)頁推薦使用長后綴名.html
有的瀏覽器中直接輸出中文會出現(xiàn)中文亂碼，可加聲明<meta charset="UTF-8">
  //空格
> //大于號
< //小于號
" //雙引號
© //版本符號
<em></em>斜體
<img src="地址" alt="圖片代替文字" title="鼠標懸停提示" width="" height=""/>
<a href="鏈接網(wǎng)址" target="目標">頁面間鏈接</a>
<a name="wo"></a>
<a href="#wo">錨鏈接</a>
<a href="mailto:bdqnWebmaster@bdqn.cn" target="_blank">功能性鏈接</a>
27.表格類
1、<table>：整個表格以<table>標記開始、</table>標記結(jié)束，table在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的。
2、<tbody>：如果不加<thead><tbody><tfooter> , table表格加載完后才顯示。加上這些表格結(jié)構(gòu)， tbody包含行的內(nèi)容下載完優(yōu)先顯示，
不必等待表格結(jié)束后在顯示，同時如果表格很長，用tbody分段，可以一部分一部分地顯示。（通俗理解table 可以按結(jié)構(gòu)一塊塊的顯示，不用等整個表格加載完后顯示。）
3、<tr>：表格的一行，所以有幾對tr 表格就有幾行。
4、<th>：表格的頭部的一個單元格，表格表頭，文本默認粗體且居中顯示。
5、<td>：表格的一個單元格，一行中包含幾對<td>這行中就有幾個單元格。
6、表格中列的個數(shù)，取決于一行中數(shù)據(jù)單元格的個數(shù)。
7.設(shè)置樣式border-collapse:collapse;可以把雙線邊框線合并為一條線邊框。
<table border="邊距寬度">
<tr>
<td rowspan="跨行數(shù)量" colspan="跨列數(shù)量" align="文本狀態(tài)"></td>
</tr>
</table>
表格可以添加標題和摘要標簽進行優(yōu)化。
(1)摘要：
摘要的內(nèi)容不會在瀏覽器中顯示。作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容。
語法：<table summary="表格簡介文本">
(2)標題：
描述表格內(nèi)容，標題的顯示位置：表格上方。
語法：
<table summary="表格簡介">
<caption>標題文本</caption>
<tr>
<td>…</td>
</tr>
</table>
28.<iframe></iframe>
內(nèi)聯(lián)框架iframe src="引用頁面地址" name="框架標識名" frameborder="邊框" scrolling="是否出現(xiàn)滾動條" noresize="noresize"更改頁面大小
配合<a>標簽的targer屬性及<iframe>標簽的name屬性，可實現(xiàn)窗口間的關(guān)聯(lián)
29.表單
文件域，ps：需要在表單中寫入enctype="multipart/form=data" 屬性
<form method="提交方式" action="提交地址">
隱藏域：type="hidden"
只讀：readonly="readonly"
禁用：disabled="disabled"
<input type="text" name="名稱" size="長度" maxlength="最大長度"/>
//password 密碼
//radio單選按鈕
<input type="radio" name="sex" value="男" id="nan"/>
<label for="nan">男</label>
<input type="radio" name="sex" value="女" id="nv"/>
<label for="nv">女</label>
checkbox多選按鈕
<input type="checkbox" name="n" value="1"/>
30.下拉列表
<select name="名稱">
<optoin value="值">1</option>
</select>
31.文本域textarea
<textarea name="名稱" rows="行高" cols="寬度"><textarea>
<a>標簽可以鏈接Email地址，使用mailto能發(fā)送電子郵件。
如果mailto后面同時有多個參數(shù)的話，第一個參數(shù)必須以“?”開頭，后面的參數(shù)每一個都以“&”分隔。
mailto寫法：
<a href="mailto:yy@imooc.com?subject=主題名稱 &body=郵件內(nèi)容">
33.文本格式化標簽：
<b> 文本加粗
<strong>文本加粗(加重語氣)
<i> 斜體字
<em> 斜體(強調(diào)文字)
<big> 字體放大
<small> 字體縮小
定義下標字
定義上標字
<ins> 插入字(字體下劃線)
<del> 字體刪除線
"計算機輸出" 標簽：
<code> 定義計算機代碼
<kbd> 鍵盤輸入
<samp> 定義計算機代碼樣本
<var> 定義變量
<pre> 預(yù)格式化文本(會保留文本的多個空格)
引文、引用、及標簽定義：
<abbr> 縮寫
<address> 地址聯(lián)系信息
<bdo> 文字方向(設(shè)置dir="rtl"為從右到左顯示)
<blockquote> 長文本引用(不會自帶雙引號，但會兩邊自動縮進)
<q> 短句引用語(自帶雙引號)
<cite> 定義引用、引證
<dfn> 定義一個定義項目。
