HTML5快速入門（一）—— HTML簡介

前言：

1.HTML5的發展非常迅速，可以說已經是前端開發人員的標配，在電商類型的APP中更是運用廣泛，這個系列的文章是本人自己整理，儘量將開發中不常用到的剔除，將經常使用的拿出來，使需要的朋友能夠真正快速入門，如果有哪些不清楚的地方或者錯誤，歡迎聯繫我
2.更新時間沒有規律，一般會在3天左右更新一篇（全系列預計會有12篇）因爲需要工作，所以只能在閒暇之餘整理，如果有喜歡的朋友可以關注我，將會第一時間獲得更新信息
3.如果有需要Reactive Native + H5跨平臺開發的朋友，可以聯繫我，在本系列結束之前會根據需求的程度決定是否繼續
4.全系列文章最後儘可能地附上綜合實例，幫助朋友更好地理解
5.此係列會涉及到HTML、CSS、JavaScript等

Web大概發展史

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

網頁組成

網頁一般由下面3部分組成
- HTML —— 網頁具體內容和結構
- CSS —— 網頁的樣式（網頁美化的主要模塊）
- JavaScript —— 網頁的交互效果，比如對用戶鼠標事件做出響應

HTML5簡介

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

HTML5開發前準備

開發工具
- iOS
  - XCode
- Android
  - eclipse、MyEclipse、android studio
- HTML5
  - eclipse、MyEclipse（後端的夥伴最愛）
  - Dreamwaver（網頁三劍客之一，平面設計師和前段最愛）
  - WebStrom（個人最喜歡，默認集成各式各樣插件，而且配色各種666，特別豐富）

HTML簡介

HTML（Hypertext Markup Language）超文本標記語言，本質其實就是文本，由瀏覽器負責將它解析成具體的網頁內容。
HTML語法鬆散，目前最新版本5.0，也稱HTML5
HTML和XML相似，也是由各種標籤（元素、標記、節點）組成
HTML5新增了27個標籤元素，廢棄16個標籤元素（涵蓋了結構性標籤、行內語義性標籤、交互性標籤、級塊性標籤）

HTML常見標籤


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

效果：

：段落標籤


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

效果：

：表單標籤


<input>
<input type="color">
<input type="file">
<input type="radio">
<input type="password">
<input placeholder="佔位文字">
<input value="默認內容">
<input type="checkbox">

效果：

圖像標籤
- 圖像標籤需要我們給其src屬性傳入路徑
  - 相對路徑：資源在當前項目內 ./ .// 形式
  - 絕對路徑：資源不在當前項目內 ftp:// file:// https:// http:// 形式
圖像標籤簡單使用


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

效果：


<!-- 當圖片顯示不出來的時候,我們一般會顯示圖片名稱，這個時候就需要使用alt屬性來實現 -->
    ![blog頭像](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)
    <!-- 圖像標籤的高 -->
    ![](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)

效果：

超鏈接標籤
- href屬性：告訴瀏覽器我們要跳轉的地址
  - 如果不想跳轉可以設置爲’#’表示當前窗口
- target屬性：告訴瀏覽器以什麼樣的形式跳轉
  - _blank：在新窗口中打開
  - _parent:在父窗口打開
  - _self：在當前窗口打開（一般移動端最常用這個，默認）
  - _top：回到當前窗口頂部

超鏈接標籤

超鏈接簡單使用

“`html

超鏈接

```
效果：

![超鏈接基本使用.gif](http://upload-images.jianshu.io/upload_images/1923109-1123263d583a1ae4.gif?imageMogr2/auto-orient/strip)

```html

<!-- 如果想在新窗口打開,可以使用target屬性
(_blank:在新窗口中打開 _parent:在父窗口打開 _self:在當前頁面打 開 _top:回到當前窗口頂部)
-->
<a href="http://blog.csdn.net/yeshaojian" target="_blank">在新窗口中打開</a>
<a href="http://blog.csdn.net/yeshaojian" target="_parent">在父窗口打開</a>
<a href="http://blog.csdn.net/yeshaojian" target="_self">在當前頁面打開</a>
<a href="http://blog.csdn.net/yeshaojian" target="_top">回到當前窗口頂部</a>

“`
效果：

超鏈接嵌套使用


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

效果：

容器標籤：用來容納其它標籤，相當於移動開發中最純潔的UIView，裏面寫什麼，就會顯示什麼，不會有渲染等效果 —— 所寫即所得，正因爲這個特性，開發中經常用它來自定義
- ：屬於塊元素：是以另起一行開始渲染的元素
html <div>div容器div容器div容器div容器</div> <div>div容器div容器div容器</div> <div>div容器div容器div容器div容器</div>
效果：

- <span>：屬於行內元素：不需另起一行
    <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>

    ```
    效果：

換行和橫線

：換行

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

：橫線

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

效果：

列表標籤：在開發中，列表幾乎無處不在，打開任何網頁都能見到列表的身影，html中分爲有序列表和無序列表2種標籤，其中無序列表最爲常用


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

效果：

- <ol>：有序列表：有序列表就是列表結構中的列表項有先後順序的列表形式，從上到下可以有各種不同的序列編號


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

效果：

HTML5新增常用標籤(以後詳細講解)

HTML5新增了27個標籤元素,廢棄了16個標籤元素,主要包括：結構性標籤、級塊性標籤、行內語義性標籤、交互性標籤
結構性標籤：負責web上下文件結構的定義
- article：文章主體內容（比如一篇博客、一段用戶評論、插件等）
- hearder：頭部區域內容
- footer：尾部區域內容
- section：章節區域內容
- nav：菜單導航，鏈接導航
塊級性標籤：完成web頁面區域的劃分，確保內容有效分隔
- aside：標記、側欄、摘要、插入引用作爲補充主體內容
- figure：將多個元素組合並展示元素，常和figcaption一起使用
- code：表示一段代碼塊（目前並不兼容主流瀏覽器）
- dialog：聊天的對話，包括dt和dd兩個組合元素（dt表示說話者，dd表示說話者說的內容）
行內語義性標籤：完成web頁面具體內容的引用和表述，豐富展示的內容
- meter：特定範圍內的數值，如工資、硬盤容量、數量、百分比的圖像化展示
- time：時間值（目前不兼容主流瀏覽器）
- progress：進度條，用max、min、step屬性進行控制，常與javascript結合使用完成對進度的表示和監聽
- video：視頻元素，用來播放視頻，支持緩存和預加載而且支持多種視頻媒體格式
- audio：音頻元素，用來播放音頻，支持緩存和預加載而且支持多種視頻媒體格式
交互性標籤：功能性內容的表達，有一定的內容和數據管理，是各種事件的基礎
- details：表示一段具體的內容，默認不顯示，通過某種方式與legend交互纔會顯示
- datagrid：控制客戶端數據與顯示，用來動態腳步及時更新
- menu：用於交互菜單
- command：用來處理命令按鈕

綜合使用實例

上面的標籤和概念都是必須熟悉且經常用到的，這裏就將使用上面的東西做個實例來幫助大家理解，但並不會使用到全部的標籤，因爲有的標籤涉及到後面的知識，隨着學習深入，慢慢爲大家展示它們的使用場景和方式
這邊我隨便挑選自己的一篇博文作爲本章的示例 —— iOS指南針根據博文樣式，我將博文分成頭部、章節、尾部3部分來處理
- 頭部
  ![頭部.png]
  ](http://upload-images.jianshu.io/upload_images/1923109-bd700eda173dbc4f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 章節
- 尾部

1.首先我們設置網頁標題和編碼格式


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

2.接下來就是網頁內容了


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

3.完成，是不是很簡單，當然，這邊的效果和原版會有區別，因爲涉及到後面的CSS樣式等相關內容，在後面的章節中會慢慢深入

黑森林工作室

發佈了80 篇原創文章 · 獲贊 249 · 訪問量 18萬+

私信關注

HTML5快速入門（一）—— HTML簡介

Web大概發展史

網頁組成

HTML5簡介

HTML5開發前準備

HTML簡介

HTML常見標籤

HTML5新增常用標籤(以後詳細講解)

綜合使用實例

CORS error 但是 status code 是200 OK

壓縮上傳的GPU數據的方案

使用skopeo同步鏡像

CoreLocation 定位

HTML5快速入門（三）—— 標籤綜合運用

swift 2.2 語法（下）

Touch ID使用

HTML5快速入門（四）—— JavaScript

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結