嗯，這是本人的第一篇博客……比較稚嫩，望各位大神見諒。
以下是本人對H5前端基本標簽學習的一些學習筆記，與諸君分享。
文檔聲明格式：
<!DOCTYPE html>
注意：文檔聲明必有，而且必須在文檔頁面的第一行！HTML5已經簡化了，H4以前較為繁瑣，本着便(tou)捷(lan)的心思，就不重復描述以前繁瑣的格式。
meta標簽：描述文檔的類型和編碼；描述搜索關鍵字的描述（charset; content; http-equiv; name ;）
meta標簽中的屬性：
1，charset:設置文檔的字符集編碼格式
HTML5中設置字符集編碼：<meta charset="UTF-8">
>>>常見的字符集編碼格式：a.GB2312：國標碼，簡體中文；
b.GBK,擴展的國標碼；
c.UTF-8,萬國碼Unicode
2，http-equiv:將我們的信息寫給瀏覽器看，按照里面的要求去執行，需要配合content屬性使用。
（http-equiv屬性只是表明需要設置哪一部分，具體的設置內容放到content屬性中）
可選屬性值：content-type(文檔類型) ;refresh（網頁定時刷新） ;
set-cookie（設置瀏覽器cookie緩存）
3，name屬性：使用方法同http-equiv。常用且需要掌握的屬性值：author（作者） keyword（網頁關鍵字） description（網頁描述）。
keyword（網頁關鍵字） description（網頁描述）這兩個屬性設置，網頁必不可少
<!--作者-->
<meta name="author" content="http://www.jredu100.com" />
<!--網頁關鍵字用英文逗號分隔-->
<meta name="keywords" content="HTML5,網頁,web前端開發,Day1" />
<!--網頁描述：搜索網站時，title下面的解釋至關重要！！-->
<meta name="description" content="這是准備工作的第一天的學習內容，來自傑瑞教育" />
詳細屬性如下圖（上面介紹的是主要常用屬性）：
使用link標簽，鏈接網頁圖標（title前的小logo）
rel屬性：聲明鏈接文件的類型，此處選icon
type屬性：可以省略
href屬性：表示圖片的路徑地址
代碼：
<link rel="icon" type="imag/x-icon" href="img/day1標題圖標.png" />
標簽的分類
塊級標簽：顯示為塊，前后隔行（自動換行）；
行級標簽：從左往右按行逐一顯示；
常見的塊級標簽
<h1>-<h6>：標題標簽，自動加粗，h1最大，h6最小。
<hr />:水平線標簽，哪里需要放哪里。
<p></p>：段落標簽。
<br />,放在p標簽之中（塊級標簽中唯一不會換行的標簽）。
<blockquote cite="http://www.******.com">天道好輪回，蒼天繞過誰？（其中的換行和空格不好使）</blockquote>引用標簽：cite 屬性，表明引用的來源和網址。
<pre></pre> 預格式標簽pre:瀏覽器默認顯示樣式：1·顯示為等寬字體
2·代碼中的換行，空格等元素可在瀏覽器直接顯示
【補充】HTML文件中，空格表示： 
<ol></ol>:有序列表。其中包含<li>為列表項。
<ul></ul>:無序列表。其中包含<li>為列表項。
<dl></dl>:定義描述列表。<dt>列表標題。一般僅一項，標題頂格；<dd>列表描述項。可以有多項，對比標題縮進顯示。
<figure></figure>：組合標簽。用於顯示圖片及圖片標題
兩個子標簽：<img />圖片
<figcaption></figcaption>圖片的標題
<div></div>:分區標簽。在H5中具有重要地位，所有需要做的樣式都可以被div包裹呈現不同的樣式。
<!--span（文本）無實際意義，用於包裹某段或某個部分文字，修改特定樣式-->
<span>SPAN中的文字</span>
這是<span style="color: #F80;font-size: 45px;">Span</span>中的文字
<!--em（強調）-->
<em>這是EM中的標簽</em>
<br />
<!--strong（強調）-->
<strong>這是strong中的文字</strong>
<br />
<!--i（傾斜）-->
<i>這是I中的文字</i>
<br />
<!--b（加粗）-->
<b>這是B中的文字</b>
【strong,en,b,i標簽的區別】
1·Strong和em都表示強調，strong顯示為粗體，em顯示為傾斜。且strong的強調程度要比em更高。
2·strong和b都能表示加粗，em和i都能傾斜。但是strong和em多了一層強調的語義。
HTML5語言，要求標簽盡可能的實現語義話。
<!--q（短引用）:顯示為文字用“”引起來-->
<q cite="www.*******.com">這是短引用標簽Q中的文字</q>
<br/>
<!--small（縮小字體）small可以嵌套，big同理，直到字號最小或最大為止-->
<small>其間的文字會被small縮小一號</small>
<br />
<big>這是big標簽的效果</big>
<br />
<a>:（超鏈接）href="http//:www.jerui100.com"
href:超鏈接的路徑，可以是網絡鏈接，也可以是本地文件（路徑同img）。
target:超鏈接打開的位置。—self自身頁面（默認） —blank 新頁面。
title：鼠標指上時顯示的文字。
rel:用於標明被鏈接文檔與當前文檔的關系。
rel="prev"(被鏈接文檔是)前一篇文檔 rel="next"后一篇文檔
rel="icon"被鏈接圖片是當前文檔的圖標rel="stylesheet"被鏈接文檔是當前文檔的樣式表
rel="prefetch"預加載，在當前文檔加載完成后利用空余時間預加載即將鏈接的文檔。
錨鏈接
(1)本頁面錨鏈接設置：a.設置錨點：<a name="top"></a>
b.在超鏈接上，使用#name跳轉到對應錨點。<a href="#top" target="_self">這是一個超鏈接</a>
(2)頁面間錨鏈接：a.在即將跳轉的頁面的指定位置，設置錨點
b.在超鏈接的href屬性中，使用“頁面地址.html#name”
<a href="地址#name">跳轉到知指定地址
功能型鏈接：mailto:*******@***.com給指定郵箱發郵件
tencent://message/?uin=845870427給指定QQ發消息
file:///e:/***.*** 打開指定文件
<!--<s>有誤刪除線-->
<s>S標簽中的文字</s>
<!--cite標簽；瀏覽器顯示傾斜，常用語書，畫作，作品的引用-->
<cite>這是cite標簽</cite>
<!--code表示計算機代碼。只是表示是計算機代碼，但是不會保存代碼格式，需要配合pre使用-->
<pre>
<code>
setLayout(new BorderLayout());
setLocation(dimen.width / 3, dimen.height / 3);// dimen.width/3,dimen.height/3
setSize(FWIDTH, FHEIGHT);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setResizable(false);
setVisible(true);
</code>
</pre>
<!--bdo表示文本方向,dir="ltr"左往右；dir="rtl"右往左-->
<bdo dir="rtl">123456789</bdo>
<bdo dir="ltr">123456789</bdo>
<!--kbd:表示需要用戶用鍵盤輸入的內容，但是瀏覽器僅顯示為等寬字體-->
請輸入“<kbd>ESC</kbd>”退出系統
<!--sup:上標文本 sub下標文本-->
X<sup>4</sup>
X²
<!--版權符號-->
© ©
下划線
<u>傳說中的下划線</u>
<!--mark:高亮或標記文本，瀏覽器顯示為黃色背景。-->
<mark>笑而不語</mark>
效果：
表格：
表格的行：tr 每行中的列：td
表格的表頭：<th></th>單元格居中，默認加粗
【常用屬性】：
border:給表格添加邊框。當border屬性增大時，僅外圍框線增加，單元格的邊框始終為1px.
<table width="500" border="10">
Cellspacing:單元格與單元格之間的間隙，當cellspacing值為0時，間隙為0，但是線不重合。
【表格邊框合並】style="border-collapse: collapse;"
cellpadding:每個單元格中的內容，與邊框線的距離。
aligh:表格在屏幕的左中右位置顯示，left，center，right
注意：給表格加速align屬性，相當於讓表格浮動。會直接打破表格后面元素的原有排列方式。
bgcolor:背景顏色，等同於style=“background-color：；”
bgcolor="blanchedalmond"
background:背景圖片background=“img/aaa.png”等同於style="background-image:;"且背景圖會覆蓋背景顏色。
bordercolor=“blue” 邊框顏色
【tr和td的相關屬性】
1.width/height：單元格的寬高
2.bgcolor:單元格的背景顏色
3.align：left，center，right 單元格中的文字水平對齊方式
4.valign：top,center,bottom 單元格中的文字垂直對齊方式
5.nowrap：nowrap,單元格中文字不換行。
【注意】1.當表格屬性和行列屬性沖突時，以行列屬性為准。（近者優先）
2.表格的align屬性，是控制表格在瀏覽器中的顯示位置。
單元格的align屬性，是控制單元格中的文字在單元格中的位置；
3.表格的align屬性，並不影響表格內的文字的對齊方式
tr的align屬性，可以控制一行中所有單元格的水平對齊方式。
【表格的跨行與跨列】--td
colspan跨列，當某個格跨N列時，其右邊N-1個單元格需刪除
rowspan跨行，當某個格跨N行時，其下邊N-1個單元格需刪除
【表格的結構化】
完整表格結構：thead tbody tfoot
無論各部分在表格什么位置，顯示時，caption都會在表格外最上方；thead會在表格內最上方；tfoot會在表格內最下方
【表格的直列化】
<colgroup><col>
效果：
【form表單】
1.兩個重要屬性：action-表單提交的服務器地址，method-表單提交數據的方法（get/post）
2.get和post的區別：
(1)使用URL傳參：http://服務器地址？name1=value1&name2=value2（?表示傳遞參數?后面采用name=value的形式傳遞，多個參數之間，用&鏈接）
so,URL傳參不安全，所有信息可以在地址欄看到，並且可以通過地址欄隨意傳遞其他數據。
URL傳遞數據量有限，只能傳遞少量數據。
（2）使用HTTP請求傳遞數據。URL地址欄不可見，比較安全。且傳遞數據量沒有限制。
綜上所述：常用post傳遞數據
【input標簽及屬性】
（1）type：表示input輸入框的類型。可選值有：
（2）name：input輸入框的別名。一般情況下，必填。因為傳遞數據時，使用name=value的形式傳遞
（3）value：input 輸入框的默認值
（4）placeholder：input的提示內容,當輸入框有value的時候，placeholder消失。
【input特殊屬性值】
（1）checked=“checked”默認選中。
（2）disable=“disable”設置控鍵不能使用。用在按鈕上不能點擊，用在輸入框上不能修改。
而且，如果輸入框disable，輸入框信息不能往后台傳遞。
（3）hidden=“hidden”隱藏。等同於<input type="hidden" name="username" value="1234">
常用於配合disable，或者根據其他需要，使用隱藏域傳遞數據。
【input-type屬性詳解】
（1）text：文本輸入框
（2）password：密碼輸入框，輸入內容是顯示小黑點。
（3）radio：單選按鈕；
checkbox：多選按鈕。
》》》》name和value必須同時處在，提交的是value中的屬性值。例如：<input type="radio" name="sex" value="男" />男；提交時“sex=男”
》》》》radio憑借name屬性來區分是否為同一組。name相同，為同組，同組中只能選一個。
》》》》checked=“checked”默認選中。（radio只能選一個，checkbox可以選多個）
(4)submit：提交按鈕。提交表單數據。
(5)Reset：重置按鈕，將表單數據重置為初始狀態。
(6)file：文件上傳按鈕。
(7)image:圖形提交按鈕。功能同submit，可以提交數據。
（8）buttom:普通按鈕。無任何功能。
【下拉選擇控件select】
(1)寫法：<select>
<option></option>//可以有很多；
</select>
(2)name屬性應該寫在<select>上，所有選項只有一個name
(3)multiple=“multiple”可在選擇頁面按住Ctrl使用多選。
（4）option常用屬性：
value=“”：當option沒有value屬性值時，提交的是<option></option>中間的文字；
當option有屬性值時，提交的是value的值。
title：鼠放上的時候顯示的文字。
selected="selected"默認選中。
（5）<optgroup label="山東省"></optgroup>:用於將option個標簽進行分組，label屬性表示分組名。
代碼：
<td>
<select name="city">
<optgroup label="山東省">
<option value="1" title="青島市**區**地段**居民委員會" >青島</option>
<option value="2" selected="selected" title="煙台市萊山區煙台大學東門">煙台</option>
<option value="3">濟南</option>
</optgroup>
<optgroup label="北京市">
<option value="1" >朝陽區</option>
<option value="2" selected="selected">海淀區</option>
<option value="3">。。。</option>
</optgroup>
</select>
</td>
效果：
【文本域textarea】
（1）寫法<textarea></textarea>
（2）設置寬高style="width:200px;height:150px"自身有row和col兩個屬性，但不常用。
（3）readonly=“readonly”只讀屬性。不允許編輯。
（4）style="resize:none";設置為寬高不允許修改。
（5）style="overflow:;"設置當前文字超出區域時如何處理（滾動條）。
也可以通過overflow-x和overflow-y分別設置水平垂直方向的顯示方式。
常用屬性值：hidden 超出區域的文字，隱藏無法顯示。
scroll 無論文字多少，均會顯示滾動條
auto 自動，根據文字多少決定是否顯示滾動條。（默認為此）
代碼：
<td colspan="2">
<textarea style="width: 200px; height: 100px; resize: none; overflow-y: auto;
" readonly="readonly" >文本框內的內容。</textarea>
</td>
效果：
【表單的邊框與標題】
<fieldset></fieldset>邊框
<legend></legend>邊框標題
//如果想要讓標題嵌入到邊框中，需要標題標簽寫到邊框里面
//一個表單可以有多組邊框加標題的組合。
新添加input的屬性：tabindex=“1”，設置TAB鍵的順序（類似優先級。）
【H5智能表單】
（1）H5新增input的form屬性，用於指向特定from表單的id,實現input無需放在form標簽之中，即可通過表單進行提交。
<FORM id=foo>
...
</FORM>
<input ....form="foo">
(2)type新增屬性詳見表單。
input元素的新屬性：
input元素的新增屬性：
Autocomplete：自動完成功能，記錄用戶之前輸入的內容，並在下次輸入時自動提示完成輸入。
>>>屬性值：on/off
>>>可以在from表單上使用對整張表單的所有控件進行自動完成的開關
也可以在input上使用對特定輸入框進行修改
>>>絕大部分瀏覽器默認開啟。
Autofocus：自動獲得焦點,autofocus="autofocus",只能設置input元素中的一個自動獲得焦點。
Form：所屬表單。通過form表單的ID，確定次input輸入哪張表單。
Required：必填，required="required"，設置input必填，否則阻止提交。
Pattern：驗證input的模式使用正則表達式驗證input的模式。
Placeholder：提示，當有value時，取消提示。
