整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、響應式設計
在HTML5真的要來改變移動開發平臺之前，必須要邁出極為重要的一步，那就是“響應式設計”，也就是屏幕可以由相對應的內容而自動的去調整大小。然而響應式設計也是一件特別不容易去做到的事情，因為在當今的社會，各式各樣設備的出現實在讓諸多開發者眼花繚亂，手足無措。
如果你想要做好響應式的設計理念，那么就必須洞悉內容與屏幕之間的不同反饋關系，響應式設計是需要完全的離開“流”，這一過程還在不斷的繼續著，而HTML5技術會讓它最終成為可能。
二、Canvas 標記
Canvas 標記很多年前就被當作一個新的 HTML 標記成員加入到了 HTML5 標準中。在此之前，人們要想實現動態的網頁應用，只能借助于第三方的插件，比如 Flash 或 Java，而引入了 Canvas 標記后，人們直接打通了通往神奇的動態應用網頁的大門。本教程內容只覆蓋了一小部分、但卻是非常重要的 canvas 標記的應用功能圖像顯示和處理。
圖像來源
最常見的在 canvas 上畫圖的方法是使用 Javascript Image 對象。所支持的來源圖片格式依賴于瀏覽器的支持，然而，一些典型的圖片格式(png，jpg，gif 等)基本上都沒有問題。
圖片可以從 DOM 中已經加載的元素中抓取，也可以按需即時創建。
// 抓取頁面上已有的圖片。
myImage=new Image ();
myImage.src=‘image.png’;
大多數支持 canvas 標記的瀏覽器的當前版本中，當圖片還沒有加載完成時，如果你要去畫它，結果是什么事情都不會發生。也就是說，如果你想畫一個圖片，你需要等它完全加載。你可以使用圖片對象的 onload 函數來進行判斷。
// Create an image.
myImage=new Image ();
myImage.onload=function () {
// Draw image.
myImage.src=‘image.png’;
HTML 5 是一個新的網絡標準，目標在于取代現有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 標準
它希望能夠減少瀏覽器對于需要插件的豐富性網絡應用服務（plug-in-based rich internet application，RIA)，如Adobe Flash, Microsoft Silverlight, 與 Sun JavaFX 的需求。
HTML 5 提供了一些新的元素和屬性，反映典型的現代用法網站。其中有些是技術上類似 <div> 和 <span> 標簽，但有一定含義，例如 <nav>（網站導航塊）和 <footer>。這種標簽將有利于搜索引擎的索引整理、小屏幕裝置和視障人士使用。同時為其他瀏覽要素提供了新的功能，通過一個標準接口，如 <audio> 和 <video> 標記。
一些過時的 HTML 4 標記將取消，其中包括純粹用作顯示效果的標記，如 <font> 和 <center>，因為它們已經被 CSS 取代。還有一些透過 DOM 的網絡行為（via）。
下面我們來看一下HTML 5提供的一些新的標簽用法以及和HTML 4的區別。
<article>標簽定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文本。亦或是來自其他外部源內容。
HTML5:<article></article>
HTML4:<div></div>
<aside>標簽定義 article 以外的內容。aside 的內容應該與 article 的內容相關。
HTML5:<aside>Aside 的內容是獨立的內容，但應與文檔內容相關。</aside>
HTML4:<div>Aside 的內容是獨立的內容，但應與文檔內容相關。</div>
<audio> 標簽定義聲音，比如音樂或其他音頻流。
HTML5:<audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>
<canvas> 標簽定義圖形，比如圖表和其他圖像。這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。
程序開發過程中，我們始終要謹記的一點就是：程序是寫給人看的，不是寫給機器看的。任何項目開發，都必須要考慮到人員迭代，我們不能讓下一個接手你代碼的人，在看到你寫的代碼時會說出這樣的話，“這個代碼是人寫出來的嗎？可讀性太差了”。因此，我們必須遵循一定的規范，讓代碼的可讀性更強。
今天，我們就一起來看下前端開發過程所能涉及到的跟HTML有關的規范問題。
HTML5
在HTML文件中，推薦使用支持HTML5特性的文檔聲明，<!DOCTYPE html>。
首先是在文件的命名上，應當采用駝峰式命名，首字母小寫，后面每個單詞首字母大寫，而且對于具體的文件應當具有語義化，能夠給人一種直觀的感受這個文件的作用是什么。現在前端開發開發過程中都講求模塊化開發，甚至是組件化開發，在文件命名時更應該以模塊名或者組件名來命名。
例如在寫一個AngularJS應用時，由于會涉及到Controller，Service，Filter等概念，我們會分別建立一個文件，假如這個模塊的名字是庫存管理stockManage，我們可以這樣來命名文件。
stockManageCtrl
stockChangeService
stockChangeFilter
我們所說的語義化指的是使用具有語義化的標簽，在H5中添加了類似于header, nav, article, section, aside, footer等標簽，從單詞的意思上我們也很容易看出標簽的含義。
我們不推薦使用只有div標簽的頁面，例如
不推薦使用
而是應該使用以下這種帶有語義化的標簽。
推薦使用
img標簽是網頁用來顯示照片的標簽，在頁面所有標簽中占據的比例非常之高，但是在使用img標簽時也有下面需要注意的點。
給定width和height屬性
因為瀏覽器在加載圖片的過程中，需要先下載圖片，然后再解析圖片的高度和寬度，如果不給img元素設定高度和寬度，這樣在圖片加載過程中會不斷的計算，重排頁面的布局，在網絡不好的時候就會經常出現元素出現不規律移動的情況。因此給img元素設定width和height屬性是必要的。
alt屬性
img標簽的alt屬性表示的是在圖片無法顯示時，使用文字來代替顯示，它可以用在以下幾個場景中：
網路延遲太大
src屬性指定路徑出錯
瀏覽器禁用圖像
由于其有良好的信息提示效果，并且有助于網頁SEO效果，強烈建議在img標簽中使用alt屬性。
而且很重要的一點是img標簽的引入是需要呈現出與頁面相關的內容，其他情況應該使用CSS樣式實現。例如我們不推薦下面這種情況。
不推薦
而推薦使用下面這種情況
推薦使用
前端文件主要包括HTML頁面文件，CSS樣式文件和Javascript腳本文件。我們應該讓三者各司其職，在HTML中不應該出現CSS和JS表達式；在JS文件中，不應該出現大量的HTML和CSS代碼。在HTML文檔中應當盡量少的引入CSS和JS文件。為了保證文件的純凈，我們應當遵循下面的原則。
一個HTML文件應該只引入一個CSS文件
合理運用JS合并技術（Gulp, Webpack插件），保證引入JS文件不多于兩個
不使用行內腳本元素（<script>alert('Hello World')</script>）
不在標簽上使用style內聯樣式
不要使用style屬性
腳本加載在網頁加載過程中是一個很耗性能的過程，如果把JS文件放在head標簽里，它的加載會一直阻塞DOM的解析，造成頁面延遲。
因此現在講求的是腳本的異步加載過程，我們會使用到async關鍵字，考慮到瀏覽器的兼容性，我們推薦使用下面的方式加載腳本。
推薦方式
合理使用ID和錨點可以非常方便的實現當前頁面間的跳轉，現在越來越多的教程網頁由于是單頁面，經常會用到錨點跳轉。
對錨點知識還不了解的，可以看看我寫的這篇文章《神奇的html錨點，讓你的網頁在內部自由的跳轉》。
今天這篇文章主要總結了前端開發過程中的HTML規范問題，相信大家也或多或少遇到過，希望這篇文章能加深大家的認識。
天，小編帶大家學習了一些基本的標簽和文件路徑，今天繼續給大家分享一些標簽，是每個網頁必備的的標簽，要認真看哦!
一個完整的網頁就想一本書，有頭部，中間內容部分，最后的腳本；在HTML中，有這么一些結構化標簽，它來區分各個部分是什么的，使得開發人員一眼看過去就知道文檔的結構是怎么怎么樣的，同時要想改一些代碼，結構化標簽能更快速的找到要修改的位置，這就是“語義化”；話不多說，我們先來了解下結構化標簽；<header><nav><section><article><footer><aside>以下是詳解這些標簽：
1.<header>：就是用作于網頁的頭部，可能包含的內容比如網頁標題、導航信息之類，<header>可以出現多次；語法規范：<header>這部分內容</header>，實際上<header></header>等價于<div id="header"></div>
2.<nav>：就是用作于導航，語法規范：<nav></nav>，實際上<nav></nav>等價于<div id="nav"></div>
3.<section>：就是用于標識網頁某一具體部分，舉個栗子購物網站分為母嬰類、零食類、水果類等等其他分類，那么就可以用<section>這個標簽要劃分各個區域；
4.<article>：就是一些文章，評論類；語法規范：<article>這部分內容</article>
5.<footer>：就是網頁最底端的腳部，一般用于定義一些聯系方式、合作伙伴、版權之類的；語法規范：<footer>這部分內容</footer>同理，等價于<div id="footer"></div>
6.<aside>：就是側邊欄，用于定義一些內容以外的部分
運用這些結構化標簽是不是很直觀的看出這個網頁的結構呢，小編建議在網頁中盡量運用這些結構化標簽，不僅僅自己能明白，后期維護小伙伴也能明白；
分享一些其他標簽：
1.浮動標簽<iframe>，這個標簽可以讓你的頁面里插入不同的多頁頁面，規范語法：<iframe src="網頁路徑" width="" height="" frameborder=""></iframe>，他需要一些屬性來實現，src屬性、width屬性、height屬性、frameborder屬性，其中src屬性就是你網頁的路徑（路徑在上一篇文章中有分享，不清楚的可以去看看哦）；width屬性就是寬度，height屬性就是高度，frameborder屬性就是邊框；
?。?！注意：在實際開發中盡量不要使用這個標簽，不利于SEO，搜索引擎；破不得那還得使用。
2.摘要與細節標簽<details><summary>，這2個標簽需要一起使用，就是一部分的內容進行縮進或者展開；規范語法：<details>
<summary>
標題
</summary>
<details>
3.度量元素標簽<meter>；它需要一些屬性來實現效果；min屬性、max屬性、value屬性，其中min屬性表示進度條最小值，max屬性表示進度條最大值，value屬性表示當前的進度的值，語法規范：<meter min="" max="" value=""></meter>
4.時間元素標簽<time>：表示具體的時間，語法規范：<time datetime="具體時間值"></time>
5.分組標簽<fieldset><legend>：這2個標簽需要一起使用；語法規范：<fieldset><legend>分組標題</legend>內容</fieldset>
6.文本高亮標簽<mark></mark>：就是特別突出一些文本，效果就是背景是黃色的文字
以上是一些網頁中使用的標簽，小編建議多多打代碼，不會的就是模仿的寫；有不懂的可以私信小編，小編樂意解答！
預告：下一篇 帶你玩轉前端之HTML(四) 主要內容為：form表單的分享
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
