前言：

1.HTML5的發(fā)展非常迅速，可以說已經(jīng)是前端開發(fā)人員的標配，在電商類型的APP中更是運用廣泛，這個系列的文章是本人自己整理泪姨，盡量將開發(fā)中不常用到的剔除凸椿，將經(jīng)常使用的拿出來削祈，使需要的朋友能夠真正快速入門，如果有哪些不清楚的地方或者錯誤脑漫，歡迎聯(lián)系我
2.更新時間沒有規(guī)律髓抑，一般會在3天左右更新一篇（全系列預計會有12篇）因為需要工作，所以只能在閑暇之余整理优幸，如果有喜歡的朋友可以關(guān)注我吨拍，將會第一時間獲得更新信息
3.如果有需要Reactive Native + H5跨平臺開發(fā)的朋友，可以聯(lián)系我网杆，在本系列結(jié)束之前會根據(jù)需求的程度決定是否繼續(xù)
4.全系列文章最后盡可能地附上綜合實例羹饰，幫助朋友更好地理解
5.此系列會涉及到HTML伊滋、CSS、JavaScript等

Web大概發(fā)展史

• Web1.0
  • 主流技術(shù) —— HTML + CSS
• Web2.0
  • 主流技術(shù) —— Ajax(JavaScript/DOM/異步數(shù)據(jù)請求)
• Web3.0
  • 主流技術(shù) —— HTML5 + CSS3
    • HTML5亮點：Canvas队秩、Web存儲笑旺、Geolocation、Workers多線程處理馍资、HTML5音視頻
    • CSS3亮點：2D變形筒主、設計動畫等等新特性 （具體可以參考 http://html5test.com/）

網(wǎng)頁組成

• 網(wǎng)頁一般由下面3部分組成
  • HTML —— 網(wǎng)頁具體內(nèi)容和結(jié)構(gòu)
  • CSS —— 網(wǎng)頁的樣式（網(wǎng)頁美化的主要模塊）
  • JavaScript —— 網(wǎng)頁的交互效果，比如對用戶鼠標事件做出響應

HTML5簡介

• 用了8年時間鸟蟹，HTML5在2014年才正式制定完畢并發(fā)布乌妙，更偏向于拓展移動市場，當然在別的平臺也表現(xiàn)不凡
• HTML5的優(yōu)勢
  • 最主要的還是跨平臺建钥，利用HTML5編寫的應用可以說只要有瀏覽器的平臺都可以運行并使用
  • 開發(fā)速度快藤韵，API強大，某些功能可以輕易完成
  • 流暢程度相對于原生可以達到一致
• HTML5的劣勢
  • HTML5也有不能完成的功能熊经，比如常用的拍照荠察、訪問相冊等需要橋接才能實現(xiàn)的功能（橋接越多，性能越差）
  • 畢竟不是原生奈搜，所以肯定存在性能比原生差的問題
• HTML5開發(fā)主要有2種形式
  • 自己編寫大量代碼（慢）
  • 使用線程的HTML5框架（快）
    • sencha-touch
    • phoneGap
    • jQuery mobile
    • Bootstrap （個人比較喜歡）
• 一般在移動端主要有4種形式開發(fā)
  • 原生：與系統(tǒng)無縫兼容
  • 純HTML5：成本低悉盆，覆蓋廣，效率高
  • 原生+ HTML5：最佳方案

HTML5開發(fā)前準備

• 開發(fā)工具
  • iOS
    • XCode
  • Android
    • eclipse馋吗、MyEclipse焕盟、android studio
  • HTML5
    • eclipse、MyEclipse（后端的伙伴最愛）
    • Dreamwaver（網(wǎng)頁三劍客之一宏粤，平面設計師和前段最愛）
    • WebStrom（個人最喜歡脚翘，默認集成各式各樣插件，而且配色各種666绍哎，特別豐富）

HTML簡介

• HTML（Hypertext Markup Language）超文本標記語言来农，本質(zhì)其實就是文本，由瀏覽器負責將它解析成具體的網(wǎng)頁內(nèi)容崇堰。
• HTML語法松散沃于，目前最新版本5.0，也稱HTML5
• HTML和XML相似海诲，也是由各種標簽（元素繁莹、標記、節(jié)點）組成
• HTML5新增了27個標簽元素特幔，廢棄16個標簽元素（涵蓋了結(jié)構(gòu)性標簽咨演、行內(nèi)語義性標簽、交互性標簽蚯斯、級塊性標簽）

HTML常見標簽

• <h1…h(huán)6>：標題標簽

<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>

效果：

標題標簽.png

• <p>：段落標簽

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>

效果：

段落標簽.png

• <input>：表單標簽

<input>
<input type="color">
<input type="file">
<input type="radio">
<input type="password">
<input placeholder="占位文字">
<input value="默認內(nèi)容">
<input type="checkbox">

效果：

表單標簽.png

• 圖像標簽

  • 圖像標簽需要我們給其src屬性傳入路徑
    • 相對路徑：資源在當前項目內(nèi) ./ .// 形式
    • 絕對路徑：資源不在當前項目內(nèi) ftp:// file:// https:// http:// 形式

• 圖像標簽簡單使用

<!-- 基本格式 -->
![](http://upload-images.jianshu.io/upload_images/1923109-0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

效果：

圖像標簽基本格式.png

<!-- 當圖片顯示不出來的時候,我們一般會顯示圖片名稱薄风，這個時候就需要使用alt屬性來實現(xiàn) -->
    ![blog頭像](http://upload-images.jianshu.io/upload_images/1923109-0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

效果：

圖片未加載成功顯示文字.gif

• 圖像標簽的可選屬性
  • 如果只給圖片設置高或者寬,那么圖片會根據(jù)高或者寬自動調(diào)整等比例尺寸
  • 如果使用百分比設置寬高,指的是相對于父標簽的百分比,這邊圖片的父標簽是body

<!-- 圖像標簽的可選屬性 -->
    <!-- 圖像標簽的寬 -->
    ![](http://upload-images.jianshu.io/upload_images/1923109-0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    <!-- 圖像標簽的高 -->
    ![](http://upload-images.jianshu.io/upload_images/1923109-0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    <!-- 使用百分比來設置圖像標簽的寬度饵较，百分比相對于父標簽，比如這里的父標簽是body遭赂，這也是屏幕適配的一種方式 -->
    ![](http://upload-images.jianshu.io/upload_images/1923109-0b3f122765fcbb9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

效果：

設置圖像標簽寬高.gif

• 超鏈接標簽

  • href屬性：告訴瀏覽器我們要跳轉(zhuǎn)的地址
    • 如果不想跳轉(zhuǎn)可以設置為'#'表示當前窗口
  • target屬性：告訴瀏覽器以什么樣的形式跳轉(zhuǎn)
    • _blank：在新窗口中打開
    • _parent:在父窗口打開
    • _self：在當前窗口打開（一般移動端最常用這個循诉，默認）
    • _top：回到當前窗口頂部

• 超鏈接標簽

  • 超鏈接簡單使用
    
    
    

  
  <!-- 超鏈接 -->
      <!-- 如果不想跳轉(zhuǎn)可以填'#'表示當前窗口 -->
      <a >超鏈接</a>
  
      ```
      效果：
   
      ![超鏈接基本使用.gif](http://upload-images.jianshu.io/upload_images/1923109-1123263d583a1ae4.gif?imageMogr2/auto-orient/strip)
  
      ```html
  
      <!-- 如果想在新窗口打開,可以使用target屬性
      (_blank:在新窗口中打開 _parent:在父窗口打開 _self:在當前頁面打 開 _top:回到當前窗口頂部)
      -->
      <a  target="_blank">在新窗口中打開</a>
      <a  target="_parent">在父窗口打開</a>
      <a  target="_self">在當前頁面打開</a>
      <a  target="_top">回到當前窗口頂部</a>
  
     ```
  

效果：

超鏈接target屬性.gif

• 超鏈接嵌套使用
  
  
  

  
  <!-- 給圖片一個超鏈接屬性,讓用戶點擊能夠在新窗口中打開新頁面 -->
      <a target="_blank" >
      [站外圖片上傳中……(6)]
      </a>
  
  

效果：

超鏈接嵌套.gif

• 容器標簽：用來容納其它標簽，相當于移動開發(fā)中最純潔的UIView嵌牺，里面寫什么打洼，就會顯示什么龄糊，不會有渲染等效果 —— 所寫即所得逆粹，正因為這個特性，開發(fā)中經(jīng)常用它來自定義

  • <div>：屬于塊元素：是以另起一行開始渲染的元素
    
    
    

       <div>div容器div容器div容器div容器</div>
       <div>div容器div容器div容器</div> 
       <div>div容器div容器div容器div容器</div>
      ```
      效果：
  
  

div.png

- <span>：屬于行內(nèi)元素：不需另起一行
    <br><br>

```html
    <span>span容器span容器span容器span容器</span>
    <span>span容器span容器span容器</span>
    <span>span容器span容器span容器span容器</span>
    <span>span容器span容器span容器</span>

    ```
    效果：

span.png

• 換行和橫線

  • 
    ：換行
    
    
    

  <div>一行文字一行文字一行文字一行文字</div><br>
  <div>一行文字一行文字一行文字一行文字</div><br>
  <div>一行文字一行文字一行文字一行文字</div><br>
  
  

  • ---

    ：橫線
    
    
    

  <div>一行文字一行文字一行文字一行文字</div>
  <hr>
  <div>一行文字一行文字一行文字一行文字</div>
  <hr>
  <div>一行文字一行文字一行文字一行文字</div>
  <hr>
  
  

效果：

橫線和換行效果.png

• 列表標簽：在開發(fā)中炫惩，列表幾乎無處不在僻弹，打開任何網(wǎng)頁都能見到列表的身影，html中分為有序列表和無序列表2種標簽他嚷，其中無序列表最為常用
  • <ul>：無序列表：無序列表就是列表結(jié)構(gòu)中的列表項沒有先后順序的列表形式蹋绽。大部分網(wǎng)頁應用中的列表均采用無序列表

    
    <!-- 無序列表 -->
    <ul>
        <li>無序列表</li>
        <li>無序列表</li>
        <li>無序列表</li>
        <li>無序列表</li>
        <li>無序列表</li>
    </ul>

效果：

無序列表.png

- <ol>：有序列表：有序列表就是列表結(jié)構(gòu)中的列表項有先后順序的列表形式，從上到下可以有各種不同的序列編號

    
<!-- 有序列表    type表示序號類型    reversed表示降序-->
<ol type="A" reversed="reversed">   
<li>有序列表</li>    
<li>有序列表</li>  
<li>有序列表</li>  
<li>有序列表</li>  
<li>有序列表</li>
</ol>
    

效果：

有序列表.png

HTML5新增常用標簽(以后詳細講解)

• HTML5新增了27個標簽元素,廢棄了16個標簽元素,主要包括：結(jié)構(gòu)性標簽筋蓖、級塊性標簽卸耘、行內(nèi)語義性標簽、交互性標簽
• 結(jié)構(gòu)性標簽：負責web上下文件結(jié)構(gòu)的定義
  • article：文章主體內(nèi)容（比如一篇博客粘咖、一段用戶評論蚣抗、插件等）
  • hearder：頭部區(qū)域內(nèi)容
  • footer：尾部區(qū)域內(nèi)容
  • section：章節(jié)區(qū)域內(nèi)容
  • nav：菜單導航，鏈接導航
• 塊級性標簽：完成web頁面區(qū)域的劃分瓮下，確保內(nèi)容有效分隔
  • aside：標記翰铡、側(cè)欄、摘要讽坏、插入引用作為補充主體內(nèi)容
  • figure：將多個元素組合并展示元素锭魔，常和figcaption一起使用
  • code：表示一段代碼塊（目前并不兼容主流瀏覽器）
  • dialog：聊天的對話，包括dt和dd兩個組合元素（dt表示說話者路呜，dd表示說話者說的內(nèi)容）
• 行內(nèi)語義性標簽：完成web頁面具體內(nèi)容的引用和表述迷捧，豐富展示的內(nèi)容
  • meter：特定范圍內(nèi)的數(shù)值，如工資胀葱、硬盤容量党涕、數(shù)量、百分比的圖像化展示
  • time：時間值（目前不兼容主流瀏覽器）
  • progress：進度條巡社，用max膛堤、min、step屬性進行控制晌该，常與javascript結(jié)合使用完成對進度的表示和監(jiān)聽
  • video：視頻元素肥荔，用來播放視頻绿渣，支持緩存和預加載而且支持多種視頻媒體格式
  • audio：音頻元素，用來播放音頻燕耿，支持緩存和預加載而且支持多種視頻媒體格式
• 交互性標簽：功能性內(nèi)容的表達中符，有一定的內(nèi)容和數(shù)據(jù)管理，是各種事件的基礎(chǔ)
  • details：表示一段具體的內(nèi)容誉帅，默認不顯示淀散，通過某種方式與legend交互才會顯示
  • datagrid：控制客戶端數(shù)據(jù)與顯示，用來動態(tài)腳步及時更新
  • menu：用于交互菜單
  • command：用來處理命令按鈕

綜合使用實例

• 上面的標簽和概念都是必須熟悉且經(jīng)常用到的蚜锨，這里就將使用上面的東西做個實例來幫助大家理解档插，但并不會使用到全部的標簽，因為有的標簽涉及到后面的知識亚再，隨著學習深入郭膛，慢慢為大家展示它們的使用場景和方式
• 這邊我隨便挑選自己的一篇博文作為本章的示例 —— iOS指南針根據(jù)博文樣式，我將博文分成頭部氛悬、章節(jié)则剃、尾部3部分來處理

  • 頭部
    ![頭部.png]
    ](http://upload-images.jianshu.io/upload_images/1923109-bd700eda173dbc4f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  • 章節(jié)
    

    章節(jié).png

  • 尾部

    
    
    尾部.png

1.首先我們設置網(wǎng)頁標題和編碼格式

<head>
    <!-- 編碼格式 -->
    <meta charset="UTF-8">
    <!-- 網(wǎng)頁標題 -->
    <title>iOS指南針 - 博客頻道 - CSDN</title>
</head>

標題.png

2.接下來就是網(wǎng)頁內(nèi)容了

<body>
    <!-- 結(jié)構(gòu)性標簽 -->
    <!-- 文章主體內(nèi)容 -->
    <article>
        <!-- hearder頭部內(nèi)容-->
        <header>
            <!-- 標題 -->
            <h3>iOS指南針</h3>
            <p>分類:iOS開發(fā) 隨手筆記</p>
            <hr>
        </header>
        <!-- 將內(nèi)容添加到一個div內(nèi),以便統(tǒng)一管理(涉及到后面的CSS樣式,這邊先知道這樣寫就好,后面章節(jié)會詳細講解) -->
        <div>
            <!-- 章節(jié) -->
            <section>
                <!-- 段落 -->
                <p>前言：</p>
                <p>這個小項目使用到了CoreLocation框架里面的設備朝向功能，對CoreLocation感興趣的可以翻一下之前的文章</p>
                <p>有朋友發(fā)現(xiàn)一個尷尬的問題（圖片的東西2個方向是不對的）如捅，原諒我的大意棍现，趕時間就直接百度了張圖片，大家注意下就好了哈镜遣！sorry~
                </p>
                <h2>指南針實現(xiàn)</h2>
                <p>先來看看效果</p>
                <!-- 插入圖片 -->
                <img src="http://upload-images.jianshu.io/upload_images/1923109-9cf1d42c0f0808b7.gif?imageMogr2/auto-orient/strip" alt="指南針效果圖.gif">
                <p>項目主要部分就是接收到設備朝向后計算出旋轉(zhuǎn)的角度己肮，然后旋轉(zhuǎn)一下我們指南針圖片就可以了</p>
                // 接收到設備朝向<br>
                - (void)locationManager:(CLLocationManager *)manager didUpdateHeading:(CLHeading *)newHeading<br>
                {<br>
                // 判斷朝向是否有效<br>
                if (newHeading.headingAccuracy < 0) {<br>
                return;<br>
                }<br><br>
                // 獲取設備朝向<br>
                CLLocationDirection angle = newHeading.magneticHeading;<br><br>
                // 將角度轉(zhuǎn)成弧度（角度 / 180.0 * M_PI）<br>
                CGFloat hudu = angle / 180.0 * M_PI;<br><br>
                // 因為如果沒有動畫的話旋轉(zhuǎn)的時候回出現(xiàn)卡頓的現(xiàn)象，為了更流暢烈涮，我們給它加個動畫<br>
                [UIView animateWithDuration:0.1 animations:^{<br>
                // 旋轉(zhuǎn)圖片<br>
                self.comPassImage.transform = CGAffineTransformMakeRotation(-hudu);<br>
                }];<br><br>
                }<br>
                <p>是不是很簡單朴肺，但是有一點需要注意 —— 調(diào)用磁力傳感器前我們需要先判斷一下設備的磁力計是否可以用，以防止磁力計壞掉而沒有運行成功</p>
                // 判斷當前設備磁力計是否正常<br>
                if (![CLLocationManager headingAvailable]) {<br>
                return;<br>
                }<br>
                <p>考慮到網(wǎng)絡速度問題坚洽，我將完整的項目放到了國內(nèi)版的github（碼云）上了 ——
                    <!-- 超鏈接 -->
                    <a target="_blank" >網(wǎng)絡地址</a>
                </p>
                <p>版權(quán)聲明：本文為博主原創(chuàng)文章戈稿，轉(zhuǎn)載請注明出處！</p>
                <p>頂1 踩0</p>
            </section>
        </div>
        <!-- 尾部內(nèi)容 -->
        <footer>
            <!-- 這邊直接用截圖代替尾部的分享模塊 -->
            [站外圖片上傳中……(7)]
        </footer>
    </article>
</body>

3.完成讶舰，是不是很簡單鞍盗，當然，這邊的效果和原版會有區(qū)別跳昼，因為涉及到后面的CSS樣式等相關(guān)內(nèi)容般甲，在后面的章節(jié)中會慢慢深入

實例效果.gif