精選13個HTML5學(xué)習(xí)必備網(wǎng)站

選13個HTML5學(xué)習(xí)必備網(wǎng)站

Tim.D? 少先隊科技產(chǎn)品經(jīng)理 5小時前

給大家推薦一下學(xué)習(xí)研究HTML5必備的一些個網(wǎng)站，更加有利于大家對html5的學(xué)些和研究。

1. W3C HTML 5 權(quán)威教程，學(xué)習(xí)HTML5的各種標(biāo)簽，查詢參考手冊。

2. HTMLDemos可以插件HTML5標(biāo)簽在各瀏覽器的兼容性，同時你還可以查看各種HTML5的標(biāo)準(zhǔn)Demo演示。

3. 蘋果提供的HTML5演示站點，提供很多很絢麗的HTML5Demo。鏈接

4. 測試瀏覽器對HTML5的支持，并打分，可以知道你當(dāng)前的瀏覽器對HTML5的支持情況如何，各種標(biāo)簽和組件的支持情況。鏈接

5.360的HTML5基地。鏈接

6. WHATWG博客是網(wǎng)絡(luò)超文本應(yīng)用技術(shù)工作小組（Web Hypertext Application Technology Working Group）的博客。鏈接

7. HTML5醫(yī)生發(fā)表了許多文章，都是關(guān)于HTML5及其語義、及如何正確使用它的。他們也通過“詢問醫(yī)生”收集了很多問題，并在文章中予以回答，所有人都可從中受益。鏈接

8. 這是一個以表格制成的備忘單形式的單頁面，描述了HTML5、CSS3、SVG及其他未來網(wǎng)絡(luò)技術(shù)的特征。鏈接

9. 這個備忘單就是一個簡單的可視網(wǎng)格，包含了所有HTML5標(biāo)簽和相關(guān)的屬性。鏈接

10 .一個提供HTML5各種功能演示的網(wǎng)站，提供各種HTML5的顯示Demo。鏈接

11. 這個網(wǎng)站提供了大量的HTML5游戲資源，喜歡HTML5游戲的童鞋們，可以千萬別錯過哦。鏈接

12. 一個HTML 5的文檔資料網(wǎng)站，做得很出色。介紹的圖片全是用了涂鴉的方式，很直觀，很可愛的網(wǎng)站。鏈接

13.h5之家（中文學(xué)習(xí)園地）。鏈接

今天就給大家推薦到這里，這15個網(wǎng)站，基本上可以算得上是HTML5學(xué)習(xí)研究的上上至寶了。如果你也有更好的HTML5網(wǎng)站推薦，歡迎評論并留下網(wǎng)址信息，方便整理。

出于對PMCAFF用戶的尊重，任何在PMCAFF產(chǎn)品經(jīng)理社區(qū)發(fā)布的內(nèi)容，在未經(jīng)允許的情況下，不得在任何平臺被直接或間接發(fā)布使用或被用于其他任何商業(yè)目的。如有違反上述聲明者本網(wǎng)站將追究其相關(guān)法律責(zé)任。

微信公眾號：pmcaffcom

投稿郵箱：tougao@pmcaff.com

Greated by PMCAFF產(chǎn)品經(jīng)理社區(qū) - www.pmcaff.com

.標(biāo)簽

1.1meta標(biāo)簽

meta主要用于設(shè)置網(wǎng)頁中的一些元數(shù)據(jù)，元數(shù)據(jù)不是給用戶看 charset 指定網(wǎng)頁的字符集 name 指定的數(shù)據(jù)的名稱 content 指定的數(shù)據(jù)的內(nèi)容

keywords 表示網(wǎng)站的關(guān)鍵字，可以同時指定多個關(guān)鍵字，關(guān)鍵字間使用,隔開

<meta name="Keywords" content="網(wǎng)上購物,網(wǎng)上商城,手機(jī),筆記本,電腦,MP3,CD,VCD,DV,相機(jī),數(shù)碼,配件,手表,存儲卡,京東"/>

description 用于指定網(wǎng)站的描述

<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購物商城,銷售家電、數(shù)碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數(shù)萬個品牌優(yōu)質(zhì)商品.便捷、誠信的服務(wù)，為您提供愉悅的網(wǎng)上購物體驗!"/>

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

將頁面重定向到另一個網(wǎng)站

1.2title標(biāo)簽

title標(biāo)簽的內(nèi)容會作為搜索結(jié)果的超鏈接上的文字顯示

<title>Document</title>

1.3標(biāo)題

h1 ~ h6 一共有六級標(biāo)題
從h1~h6重要性遞減，h1最重要，h6最不重要
h1在網(wǎng)頁中的重要性僅次于title標(biāo)簽，一般情況下一個頁面中只會有一個h1
標(biāo)題元素是塊元素
<h1>一級標(biāo)題</h1>
<h2>二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>
<h4>四級標(biāo)題</h4>
<h5>五級標(biāo)題</h5>
<h6>六級標(biāo)題</h6>
hgroup標(biāo)簽用來為標(biāo)題分組，可以將一組相關(guān)的標(biāo)題同時放入到hgroup
<hgroup>
<h1>回鄉(xiāng)偶書二首</h1>
<h2>其一</h2>
</hgroup>
其他標(biāo)簽

p標(biāo)簽表示頁面中的一個段落
<p>在p標(biāo)簽中的內(nèi)容就表示一個段落</p>
em標(biāo)簽用于表示語音語調(diào)的一個加重
<p>今天天氣<em>真</em>不錯！</p>
strong表示強(qiáng)調(diào)，重要內(nèi)容！
<p>你今天必須要<strong>完成作業(yè)</strong>！</p>
blockquote 表示一個長引用
<blockquote>
這句話我是從來沒有說過的！
</blockquote>
q表示一個短引用
子曰<q>學(xué)而時習(xí)之，樂呵樂呵！</q>
br標(biāo)簽表示頁面中的換行
<br>

1.4布局標(biāo)簽

header 表示網(wǎng)頁的頭部 main 表示網(wǎng)頁的主體部分(一個頁面中只會有一個main) footer 表示網(wǎng)頁的底部 nav 表示網(wǎng)頁中的導(dǎo)航 aside 和主體相關(guān)的其他內(nèi)容（側(cè)邊欄） article 表示一個獨立的文章 section 表示一個獨立的區(qū)塊，上邊的標(biāo)簽都不能表示時使用section

div 沒有語義，就用來表示一個區(qū)塊，目前來講div還是我們主要的布局元素

span 行內(nèi)元素，沒有任何的語義，一般用于在網(wǎng)頁中選中文字

<header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

1.5列表

1.1.1分類

1.1.1.1有序列表

使用ol標(biāo)簽來創(chuàng)建無序列表，使用li表示列表項

<ul>
       <li>結(jié)構(gòu)</li>
       <li>表現(xiàn)</li>
       <li>行為</li>
   </ul>

1.1.1.2 無序列表

使用ul標(biāo)簽來創(chuàng)建無序列表，使用li表示列表項

<ol>
       <li>結(jié)構(gòu)</li>
       <li>表現(xiàn)</li>
       <li>行為</li>
   </ol>

1.1.1.3定義列表

使用dl標(biāo)簽來創(chuàng)建一個定義列表，使用dt來表示定義的內(nèi)容，使用dd來對內(nèi)容進(jìn)行解釋說明

<dl>
       <dt>結(jié)構(gòu)</dt>
       <dd>結(jié)構(gòu)表示網(wǎng)頁的結(jié)構(gòu)，結(jié)構(gòu)用來規(guī)定網(wǎng)頁中哪里是標(biāo)題，哪里是段落</dd>
       <dd>結(jié)構(gòu)表示網(wǎng)頁的結(jié)構(gòu)，結(jié)構(gòu)用來規(guī)定網(wǎng)頁中哪里是標(biāo)題，哪里是段落</dd>
       <dd>結(jié)構(gòu)表示網(wǎng)頁的結(jié)構(gòu)，結(jié)構(gòu)用來規(guī)定網(wǎng)頁中哪里是標(biāo)題，哪里是段落</dd>
   </dl>

1.1.1.4列表之間可以互相嵌套

<ul>
       <li>
          aa
           <ul>
               <li>aa-1</li>
               <li>aa-2
                   <ul>
                       <li>aa-1</li>
                       <li>aa-2</li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>

1.6超鏈接

1.6.1 作用

超鏈接可以讓我們從一個頁面跳轉(zhuǎn)到其他頁面，或者是當(dāng)前頁面的其他的位置

1.6.2 定義

使用 a 標(biāo)簽來定義超鏈接

<a href="https://www.baidu.com">超鏈接</a>

1.6.3 屬性

1.6.3.1屬性1：href

指定跳轉(zhuǎn)的目標(biāo)路徑

值可以是一個外部網(wǎng)站的地址

也可以寫一個內(nèi)部頁面的地址

超鏈接是也是一個行內(nèi)元素，在a標(biāo)簽中可以嵌套除它自身外的任何元素

1.6.3.2 屬性2：target

用來指定超鏈接打開的位置

_self 默認(rèn)值在當(dāng)前頁面中打開超鏈接

_blank 在一個新的要么中打開超鏈接

<a href="07.列表.html" target="_blank">超鏈接</a>

1.6.4其他

將#作為超鏈接的路徑的展位符使用

javascript：; 來作為href的屬性，此時點擊這個超鏈接什么也不會發(fā)生

將超鏈接的href屬性設(shè)置為#，這樣點擊超鏈接以后頁面不會發(fā)生跳轉(zhuǎn)，而是轉(zhuǎn)到當(dāng)前頁面的頂部的位置

跳轉(zhuǎn)到頁面的指定位置，只需將href屬性設(shè)置 #目標(biāo)元素的id屬性值

<a href="#bottom">去底部</a>
   <br><br>
<a href="#p3">去第三個自然段</a>
   <br><br>
<p>
  內(nèi)容多一點
</p>
<a href="#">這是一個新的超鏈接</a>
   <br><br>
<a href="javascript：;">這是一個新的超鏈接</a>
   <br><br>
<a id="bottom" href="#">回到頂部</a>

1.7圖片標(biāo)簽

img標(biāo)簽來引入外部圖片，img標(biāo)簽是一個自結(jié)束標(biāo)簽

屬性：src 屬性指定的是外部圖片的路徑（路徑規(guī)則和超鏈接是一樣的）

alt 圖片的描述，這個描述默認(rèn)情況下不會顯示，有些瀏覽器會圖片無法加載時顯示

<img src="./img/1.gif" alt="松鼠">

1.8內(nèi)聯(lián)框架

用于向當(dāng)前頁面中引入一個其他頁面

src 指定要引入的網(wǎng)頁的路徑
frameborder 指定內(nèi)聯(lián)框架的邊框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音視頻標(biāo)簽

1.8.1音頻

audio 標(biāo)簽用來向頁面中引入一個外部的音頻文件的

1.8.1.1 屬性

controls 是否允許用戶控制播放
autoplay 音頻文件是否自動播放

如果設(shè)置了autoplay 則音樂在打開頁面時會自動播放

loop 音樂是否循環(huán)播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

除了通過src來指定外部文件的路徑以外，還可以通過source來指定文件的路徑

<audio controls>
       <!-- 對不起，您的瀏覽器不支持播放音頻！請升級瀏覽器！-->
       <source src="./source/audio.mp3">
       <source src="./source/audio.ogg">
       <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
   </audio>

1.8.2視頻

與 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>

2.表格table

在table中使用tr表示表格中的一行，有幾個tr就有幾行
在tr中使用td表示一個單元格，有幾個td就有幾個單元格
rowspan 縱向的合并單元格
colspan 橫向的合并單元格

<table border="1" width='50%' align="center">
      <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
      </tr>
      <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td rowspan="2">D2</td>
      </tr>
      <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
      </tr>
      <tr>
          <td>A4</td>
          <td>B4</td>
          <td colspan="2">C4</td>
      </tr>
  </table>

長表格

可以將一個表格分成三個部分：

頭部 thead
主體 tbody
底部 tfoot

th 表示頭部的單元格

<table border="1" width='50%' align="center">  
      <thead>
          <tr>
              <th>日期</th>
              <th>收入</th>
              <th>支出</th>
              <th>合計</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td></td>
              <td></td>
              <td>合計</td>
              <td>300</td>
          </tr>
      </tfoot>

  </table>

表格樣式

border-spacing: 指定邊框之間的距離

border-spacing: 0px;

border-collapse: collapse; 設(shè)置邊框的合并

border-collapse: collapse;

如果表格中沒有使用tbody而是直接使用tr，那么瀏覽器會自動創(chuàng)建一個tbody，并且將tr全都放到tbody中tr不是table的子元素

3.表單（form）

使用form標(biāo)簽來創(chuàng)建一個表單
action 表單要提交的服務(wù)器的地址
數(shù)據(jù)要提交到服務(wù)器中，必須要為元素指定一個name屬性值

<input type="text" name="username">

單選按鈕

像這種選擇框，必須要指定一個value屬性，value屬性最終會作為用戶的填寫的值傳遞給服務(wù)器
checked 可以將單選按鈕設(shè)置為默認(rèn)選中

<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

多選框

<input type="checkbox" name="test" value="1">
      <input type="checkbox" name="test" value="2">
      <input type="checkbox" name="test" value="3" checked>

下拉列表

<select name="haha">
          <option value="i">選項一</option>
          <option selected value="ii">選項二</option>
          <option value="iii">選項三</option>
      </select>

提交按鈕

<input type="submit" value="注冊">

屬性

autocomplete="off" 關(guān)閉自動補(bǔ)全
readonly 將表單項設(shè)置為只讀，數(shù)據(jù)會提交
disabled 將表單項設(shè)置為禁用，數(shù)據(jù)不會提交
autofocus 設(shè)置表單項自動獲取焦點

<form action="target.html">
      <input type="text" name="username" value="hello" readonly>
      <br><br>
      <input type="text" name="username" autofocus>
      <br><br>
      <input type="text" name="b">

      <br><br>

      <!-- <input type="color"> -->
      <br><br>
      <!-- <input type="email"> -->
      <br><br>

      <input type="submit">
      <!-- 重置按鈕 -->
      <input type="reset">
      <!-- 普通的按鈕 -->
      <input type="button" value="按鈕">

      <br><br>
       

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按鈕</button>
  </form>

4.注釋

<!--
我是注釋中的注釋 注釋不能嵌套
-->

5.屬性

屬性，在標(biāo)簽中（開始標(biāo)簽或自結(jié)束標(biāo)簽）還可以設(shè)置屬性
屬性是一個名值對（x=y）
屬性用來設(shè)置標(biāo)簽中的內(nèi)容如何顯示
屬性和標(biāo)簽名或其他屬性應(yīng)該使用空格隔開
屬性不能瞎寫，應(yīng)該根據(jù)文檔中的規(guī)定來編寫，有些屬性有屬性值，有些沒有。如果有屬性值，屬性值應(yīng)該使用引號引起來

6.文檔聲明

<!doctype html>

嚴(yán)正聲明：本文僅限于技術(shù)討論與教育目的，嚴(yán)禁用于非法途徑。

近期，來自Imperva Vitaly Simonovich和Dima Bekerman的安全研究專家發(fā)現(xiàn)了一種基于HTML5超鏈接審計功能（Ping標(biāo)簽）的大規(guī)模DDoS攻擊。

新型DDoS攻擊技術(shù)

在此次攻擊活動中，DDoS攻擊請求峰值達(dá)到了7500次請求/秒，在大概4個小時內(nèi)攻擊者總共利用了4000多個不同的用戶向攻擊目標(biāo)發(fā)送了超過7000萬次惡意請求。

Imperva的研究人員在其發(fā)布的安全分析報告中指出：“我們對此次DDoS攻擊進(jìn)行了深入分析，并且發(fā)現(xiàn)攻擊活動中涉及到的攻擊流量大多數(shù)來自于亞洲地區(qū)。而且，攻擊者主要使用的是常用的HTML5屬性，即<a>標(biāo)簽中的ping屬性，并以此欺騙用戶讓他們在毫不知情的情況下參與到攻擊者的DDoS攻擊活動中來。整個攻擊活動持續(xù)了大約4個小時，并成功向攻擊目標(biāo)發(fā)送了大約7000萬次惡意請求?！?/p>

研究人員還表示，在此次攻擊活動中，攻擊者并沒有利用任何安全漏洞，而是將合法的HTML5功能轉(zhuǎn)換為了他們的攻擊工具。值得一提的是，幾乎所有“參與“到此次攻擊中的用戶都是QQ瀏覽器的用戶，而這款瀏覽器的用戶幾乎全部都是我們自己人。

通過對日志進(jìn)行分析后，專家們發(fā)現(xiàn)所有的惡意請求中都包含“Ping-From”和“Ping-To”這兩個HTTP頭，這也是迄今為止第一次發(fā)現(xiàn)攻擊者使用<a>標(biāo)簽的Ping屬性來實施DDoS攻擊。

Ping屬性

在攻擊活動中，“Ping-From”和“Ping-To”的值都引用了“http://booc[.]gz[.]bcebos[.]com/you[.]html”這個URL地址。

而且，請求中的User-Agent都跟我們每天都會用到的一款聊天App-微信有關(guān)。

專家認(rèn)為，攻擊者利用了社工技術(shù)以及惡意廣告來欺騙微信用戶打開默認(rèn)瀏覽器，下面是安全專家描述的攻擊場景：

1、攻擊者搭建釣魚網(wǎng)站，并注入惡意廣告。

2、在iframe中注入廣告并關(guān)聯(lián)合法網(wǎng)站，然后將其發(fā)送到微信群。

3、合法用戶訪問該網(wǎng)站后，惡意JavaScript代碼將會執(zhí)行，并針對用戶點擊的鏈接創(chuàng)建”Ping”屬性。

4、創(chuàng)建后將生成一個HTTP Ping請求，并通過合法用戶的瀏覽器發(fā)送給目標(biāo)域名。

專家還表示，除了QQ瀏覽器之外，還有很多瀏覽器都會受到這種新型DDoS攻擊技術(shù)的影響。不過好消息就是，F(xiàn)irefox默認(rèn)禁用了Ping屬性。

簡單分析

攻擊者在搭建惡意網(wǎng)站時，使用了兩個外部JavaScript文件，其中一個包含了DDoS攻擊目標(biāo)的URL地址數(shù)組，另一個JS文件主要用來從地址數(shù)組中隨機(jī)選取一個URL地址，并創(chuàng)建帶有Ping屬性的<a>標(biāo)簽，然后通過代碼實現(xiàn)每秒訪問一次目標(biāo)地址。

用戶只要不停瀏覽或停留在這個網(wǎng)頁上，他們的設(shè)備就會不斷向目標(biāo)站點發(fā)送Ping請求。研究人員表示，如果這個網(wǎng)站有4000個用戶訪問的話，每個小時大約可以生成1400萬次惡意請求。

應(yīng)對方案

如果你的Web服務(wù)器不希望或不需要接收來自于外部的Ping請求，你可以在邊緣設(shè)備（防火墻或WAF等等）上屏蔽包含了“Ping-To”或“Ping-From”這兩個HTTP頭的任何Web請求，這樣就可以抵御這種攻擊了。

* 參考來源：securityaffairs，F(xiàn)B小編Alpha_h4ck編譯，轉(zhuǎn)載自FreeBuf.COM

在線咨詢

上一篇：HTML5開發(fā)工程師簡歷項目經(jīng)驗填寫樣本
下一篇：滬科版小學(xué)書法三年級上冊《第6課豎》優(yōu)質(zhì)課教案

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商