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