HTML5初探學習總結
阿新 • • 發佈：2018-12-16
一.Web標準及瀏覽器核心
Web標準：
- 結構標準：結構對網頁進行整理和分類，主要包括XML和HTML兩個部分
- 樣式標準：表現用於設定網頁元素的板式、顏色、大小等外觀樣式，主要是CSS
- 行為標準：行為是指網頁模型的定義及互動的編寫，主要包括DOM和ECMAScript兩個部分-JS
瀏覽器核心：
- Trident(IE核心)
- Gecko(firefox)
- webkit(safari)
- Chromium/Blink(chrome)
- Presto/Blink(Opera)
二.標籤學習
-----1.排版標籤-----
<h1>標題1</h1> <h6>標題6</h6> <p>段落標籤</p> <hr />水平線標籤 <br />換行標籤 <div>分割槽標籤</div> <span>跨度，範圍標籤</span>
-----2.文字格式化標籤-----
<b>加粗</b>
<strong>推薦加粗文字</strong>
<br />
<b>傾斜文字</b>
<em>推薦傾斜文字</em>
<br />
<s>刪除線文字</s>
<del>推薦刪除線文字</del>
<br />
<u>下劃線文字</u>
<ins>推薦下劃線文字</ins>
-----3.影象標籤-----
<img src="image/timg.jpeg" alt="我是圖片描述's" title="懸停文字" width="300" border="10" /> <br /> 1.img 是單標籤<br /> 2.src 屬性是圖片的必須屬性，圖片地址<br /> 3.alt 屬性，當圖片顯示不出來時，會替換的文字<br /> 4.title 屬性當滑鼠懸停的時候，顯示的文字<br /> 5.widht,height 寬高屬性，一般只改其中一項就行，另一個會等比縮放<br /> 6.border 邊框屬性<br />
-----4.連結標籤-----
<a href="http://www.baidu.com">百度</a> <br />
<a href="test4.html" target="_self">影象標籤</a> <br />
1.href 要跳轉的連結 <br />
2.內部連結只需寫上頁面名稱就可以了，別忘了字尾名<br />
<h4>-----錨點定位-----</h4>
<a href="#zhushi">定位註釋標籤</a>
1.配合#，加id=<br />
<h4>-----base標籤-----</h4>
base 單標籤<br />
1.head裡面標註，_balnk，開啟新的頁面<br />
2.單個連結裡面用_self,當前頁開啟<br />
-----5.特殊字元標籤-----
空格符： <br />
小於號<：<<br />
大於號>：><br />
和號&:&<br />
人民幣￥:¥<br />
版權©️:©<br />
註冊商標®️:®<br />
攝氏度℃:°<br />
正負號±:&plusms;<br />
乘號✖️:×<br />
除號➗:÷<br />
平方2(上標2)：²<br />
立方3（上標3):³<br />
-----6.列表標籤-----
<h3>無序列表</h3>
<p>喜歡的水果</p>
<p>其它標籤只可以寫在li裡面，li用ul包裹</p>
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>榴蓮</li>
</ul>
<h3>有序列表</h3>
<p>喜歡的國家</p>
<ol>
<li>中國</li>
<li>美國</li>
<li>義大利</li>
</ol>
<h3>-----自定義列表-----</h3>
<dl>
<dt>定義標題</dt>
<dd>定義描述、解釋</dd>
</dl>
<p>------------------------</p>
<h2>籍貫</h2>
<dl>
<dt>廣州</dt>
<dd>天河區</dd>
<dd>海珠區</dd>
<dd>黃浦區</dd>
</dl>
-----7.表格-----
<table border="1" cellspacing="0" cellpadding="5" width="500" height="250" align="center"> <!--- 表格標籤 -->
<caption>表格標題</caption>
<thead> <!-- 表頭部分，沒有的就是主體部分-->
<tr> <!-- 行標籤 -->
<th>姓名</th> <!--表頭標籤 第一行或第一列-->
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tr>
<td rowspan="2">跨行合併</td> <!--單元格標籤,rowspan 跨行合併 刪從下到上 -->
<td>男</td>
<td>18</td>
</tr>
<tr>
<td colspan="2">跨列合併</td> <!--單元格標籤,colspan 跨列合併 刪從左到右 -->
</tr>
</table>
<h3>-----注意事項-----</h3>
<ul>
<li>其它標籤只能放td裡面</li>
</ul>
<h3>-----表格屬性-----</h3>
<ol>
<li>border 邊框</li>
<li>cellspacing cell單元格間距，預設2</li>
<li>cellpadding 字和單元格距離，預設1</li>
<li>align 表格在網頁中的位置，預設left,有right,center</li>
</ol>
-----8.表單和表單控制元件-----
<!-- 表單的目的： 手機使用者資訊<br/>
表單域： 存放表單的區域，表表單控制元件裡面的資訊全部收集提交
input表單控制元件
1.input是個單標籤 <input/>
2.input可以通過type來改變形狀樣式 -->
<hr>
<h2>表單控制元件</h2>
<h3>-----input-----</h3>
<p><label>使用者名稱：<input type="text" name="userNmae" value="2" maxlength="5"></label></p>
<p>密 碼：<input type="password" name="mima" size="50"></p>
<p>性別 ：男<input type="radio" name="sex"> 女<input type="radio" name="sex" checked=""></p>
<p>普通按鈕 <input type="button" name="" value="普通按鈕"></p>
<p>提交按鈕 <input type="submit" name="" value="提交按鈕"></p>
<p>重置按鈕 <input type="reset" name="" value="重置按鈕" ></p>
<p>預設複選框 <input type="checkbox" name="ch" checked=“ch”></p>
<p>圖片按鈕 <input type="image" name="" src="image/wo.jpg"></p>
<p>檔案域 <input type="file" name=""></p>
<hr>
<h3>type</h3>
<ul>
<li>text 單行文字輸入框</li>
<li>password 密碼輸入框</li>
<li>radio 單選按鈕</li>
<li>checkbox 複選框</li>
<li>button 普通按鈕</li>
<li>submit 提交按鈕</li>
<li>reset 重置按鈕</li>
<li>image 影象形式的提交按鈕</li>
<li>file 檔案域</li>
</ul>
<hr>
<h3>其它</h3>
<ol>
<li>name 使用者自定義 控制元件的名稱,name相同表示同一組</li>
<li>value 使用者自定義 input控制元件中的預設文字值</li>
<li>size 正整數 input控制元件在頁面中的顯示寬度</li>
<li>checked checked 定義選擇控制元件預設被選中的項</li>
<li>maxlength 正整數 控制元件允許輸入的最多字元數</li>
<li>label 包住input 點選旁邊也能進入輸入框for,to來盡心定位</li>
</ol>
<hr>
<h3>------文字域-----</h3>
<p>留言板：</p>
<textarea cols="50" rows="10"></textarea>
<hr>
<h3>------下拉選單-----</h3>
<p>籍貫：</p>
<select>
<option>點選選擇省會</option>
<option>北京</option>
<option>廣州</option>
<option selected="selected">安徽</option>
</select>
<select>
<option>點選選擇城市</option>
<option>中央</option>
<option>天河</option>
<option>安慶</option>
</select>
<hr>
<h2>表單域</h2>
<form action="demo.php" method="get" name="userInfo">
<p>使用者名稱：<label><input type="text" name="name"></label></p>
<p>密碼： <label><input type="password" name="pwd"></label></p>
<br>
<input type="submit" name="" value="提價">
<input type="reset" name="" value="重置">
</form>
-----9.新增標籤-----
<header>定義頁面的頭部 頁面</header>
<nav>語義：定義導航欄</nav>
<footer>語義：定義底部</footer>
<article>語義：文章</article>
<section>語義：定義區域</section>
<aside>語義：定義其所內容之外的內容 側邊</aside>
<input type="text" value="輸入明星" list="star">
<datalist id="star">
<option value="謝軍"></option>
<option value="劉德華"></option>
<option value="張學友"></option>
<option value="吳彥祖"></option>
</datalist>
<br>
<br>
<fieldset>
<legend>使用者登入</legend> <!-- 定義標題 -->
使用者名稱：<input type="text" name="">
</fieldset>
<fieldset>
<legend>HTML5新增的input type 型別 那些表單</legend>
<form action="">
郵箱：<input type="email" placeholder="請輸入" autofocus="autofocus"><br> <!-- autofocus自動獲得焦點 -->
手機：<input type="tel" name="" required="required"><br> <!-- required必填項 -->
數字：<input type="number" autocomplete name="name"><br> <!-- autocomplete記住輸入 -->
url:<input type="url" name=""><br>
搜尋：<input type="search" name="" accesskey="s"><br> <!-- accesskey快速定位游標 -->
區域滑塊：<input type="range" name=""><br>
時間:<input type="time" name=""><br> <!-- 小時分鐘 -->
年月日：<input type="date" name=""><br> <!-- weak，month,datetime -->
顏色：<input type="color" name=""><br>
上傳頭像：<input type="file" multiple="multiple"> <br>
<input type="submit" name="">
</form>
</fieldset>
-----10.音視訊播放-----
<h3>播放網路視訊（大型，網址）</h3>
<embed src="https://v.youku.com/v_show/id_XMzgyMjExNTM5Ng==.html?spm=a2h0j.11185381.listitem_page1.5~A"></embed>
<h3>播放音訊</h3>
<audio src="vedio/報備提示.mp3" autoplay="autoplay" controls="controls" loop="-1"></audio>
為了瀏覽器相容，我們需要做三種聲音檔案 ogg mp3 wav
<!-- <audio controls autoplay>
<source src="">
<source src="">
</audio> -->
<h3>播放視訊(小的）</h3>
支援ogg,mp4,webM 三種視訊格式
<video src="vedio/mp4.mp4" autoplay controls></video>
-----11.路徑-----
<h4>1.-----相對路徑-----</h4>
1.同級路徑 直接引用<br />
<img src="img.png"><br />
2.下一級路徑 用反斜槓/來進入<br />
<img src="image/img.png"><br />
3.上一級路徑 用../表示 <br />
<img src="../img.png">><br />
<h4>-----2.絕對路徑-----</h4>
1.檔案的實際位置路徑，不建議用
2.檔案的網址路徑