整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
程序開發過程中，我們始終要謹記的一點就是：程序是寫給人看的，不是寫給機器看的。任何項目開發，都必須要考慮到人員迭代，我們不能讓下一個接手你代碼的人，在看到你寫的代碼時會說出這樣的話，“這個代碼是人寫出來的嗎？可讀性太差了”。因此，我們必須遵循一定的規范，讓代碼的可讀性更強。
今天，我們就一起來看下前端開發過程所能涉及到的跟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規范問題，相信大家也或多或少遇到過，希望這篇文章能加深大家的認識。
lt;h2 id="title1">開發工具(工欲善其事必先利其器)</h2>
為了讓大家更快的融入到編程的世界中, 不被繁瑣的英語單詞所困擾, 不用每天編寫很多沒有意義的重復代碼, 提升大家的開發效率今后的課程中我們統一采用最高級高發工具來編寫網頁
<h3 id="title2">常見的前端開發工具</h3>
記事本: 提示功能較差
editplus/nodepad++: 提示功能較差
Dreamwaver: 更偏向設計
Sublime: 輕量級,自帶功能不太全, 但是插件十分豐富
WebStorm: 重量級, 自帶功能全面
其它ide(zend studio、netbean等)
為了讓大家更快的融入到編程的世界中, 不被繁瑣的英語單詞所困擾, 今后的課程中我們統一采用最牛逼最高級的高發工具WebStorm
<h3 id="title3">WebStorm安裝和使用</h3>
安裝軟件
1.png
2.png
3.png
4.jpg
5.jpg
6.png
7.jpg
8.png
破解軟件
9.png
10.png
11.jpg
12.jpg
13.png
14.png
漢化軟件
15.png
16.jpg
設置模版
創建文件
17.png
18.jpg
關注微信訂閱號：網頁設計輕松學 有更多內容
19.png
WebStorm常見快捷鍵
如何在WebStorm中利用快捷鍵創建一個新的.html的文件
同時按下鍵盤上的Ctrl + Alt + Insert
如何在WebStorm中讓光標移動到當前行的末尾
按下鍵盤上的End鍵即可
如何在WebStorm中讓光標移動到當前行的最前面
按下鍵盤上的Home鍵即可
如何在WebStorm中讓光標在多行中閃爍
按住鍵盤上的Alt鍵不放, 然后再按住鼠標的左鍵不放, 然后再拖動鼠標即可
如何在WebStorm中快速的復制光標所在的那一行
按下鍵盤上的Ctrl + D
如何在WebStorm中快速的刪除光標所在的那一行
按下鍵盤上的Ctrl + X
如何在WebStorm中讓標簽包裹一段內容, 也就是自動在一段內容前后加上標簽
按下鍵盤上的Ctrl + Alt + T, 然后按下回車, 然后輸入對應的標簽即可
<h2 id="title4">基礎標簽學習</h2>
<h3 id="title5">H系列標簽(Header 1~Header 6)</h3>
作用:
用于給文本添加標題語義
格式:
<h1>xxxxxx</h1>
注意點:
H標簽是用來給文本添加標題語義的, 而不是用來修改文本的樣式的
H標簽一共有6個, 從H1~H6, 最多就只能到6, 超過6則無效
被H系列標簽包裹的內容會獨占一行
在H系列的標簽中, H1最大, H6最小
在企業開發中, 一定要慎用H系列的標簽, 特別是H1標簽. 在企業開發中一般情況下一個界面中只能出現一個H1標簽(和SEO有關)
<h3 id="title6">P標簽(Paragraph)</h3>
作用:
告訴瀏覽器哪些文字是一個段落
格式:
<p>xxxxxxxx</p>
注意點:
在瀏覽器中會單獨占一行
<h3 id="title7">Hr標簽(Horizontal Rule)</h3>
作用:
在瀏覽器上顯示一條分割線
格式:
<hr />
注意點:
在瀏覽器中會單獨占一行
通過我的觀察發現HR標簽可以寫/也可以不寫/, 如果不寫/那么就是按照HTML的規范來編寫, 如果寫上/那么就是按照XHTML的規范來編寫.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有寫不寫都可以.那么以后我們在做前端開發時到底寫還是不寫呢? 按照高級開發工具的提示來寫即可.
由于hr標簽是用來修改樣式的, 所以不推薦使用. 今后開發中添加水平線一般都使用CSS盒子來做
<h2 id="title8">HTML注釋(Annotation)</h2>
什么是注釋?
注釋是在所有計算機語言中都非常重要的一個概念，從字面上看，就是注解、解釋的意思
注釋可以用來解釋某一段程序或者某一行代碼是什么意思，方便直接或程序員之間的交流
為什么要使用注釋?
適當的注釋，能夠讓我們的程序更加可讀，所以用中文提示自己，這里的程序是干什么的
注釋格式
<!--被注釋的內容-->
注意點:
被注釋的內容不會在瀏覽器中顯示, 注釋是寫給我們自己看的
注釋不能嵌套使用
<!--<!--被注釋的內容-->-->
快捷鍵: ctrl + /
<h3 id="title9">img標簽(image)</h3>
作用: 在網頁上插入一張圖片
格式: 
標簽的屬性
寫在標簽中K="V"這種格式的文本我們稱之為標簽屬性
| 屬性名稱 | 作用 |
|---|---|
| src(source) | 告訴瀏覽器需要插入的圖片路徑, 以便于瀏覽器到該路徑下找到需要插入的圖片 |
| alt(alternate) | 規定圖像的替代文本, 只有在src指定的路徑下找不到圖片,才會顯示alt指定的文本 |
| title | 懸停文本(介紹這張圖片, 只有在鼠標移動到圖片上時才會顯示) |
| height | 設置圖片顯示的高度 |
| width | 設置圖片顯示的寬度 |
注意點:
img標簽添加的圖片默認不是占一整行空間
如果想讓圖片等比拉伸, 只寫高度或者寬度即可
關注微信訂閱號：網頁設計輕松學 有更多內容
<h3 id="title10">br標簽(Break)</h3>
作用:
讓內容換行
格式:
<br/>
注意點:
br的意思是不另起一個段落進行換行, 而網頁中99.99%需要換行時都是因為另起了一個段落, 所以應該用p來做
<h3 id="title11">相對路徑和絕對路徑</h3>
圖片路徑分為兩種, 一種是絕對路徑, 一種是相對路徑, 我們重點學習相對路徑, 因為在企業級開發中沒有人使用絕對路徑
絕對路徑
從電腦的具體盤符開始尋找我們需要的資源
以上代碼表示在F盤下查找lnj文件夾, 然后在lnj文件夾下查找girl.png圖片
相對路徑
一個文件相對于另外一個文件的位置尋找我們需要的資源
假設html文件和girl.png都在lnj文件夾下, 以上代碼表示在lnj文件夾下查找girl.png圖片
為什么沒人使用絕對路徑?
可以移植性太差.
什么是可移植性?
可以簡單的理解為把寫到的代碼拷貝到另外一臺電腦上是否能夠正常運行
為什么絕對路徑可移植性差?
假如我編寫的html文件放在我電腦的 F:/lnj 目錄下, html文件中用到的圖片放在F:/lnj/images目錄下, 我給src指定的絕對路為F:/lnj/images/girl.png. 那么將來我將整個lnj文件夾拷貝給你, 如果你將lnj文件夾放在非F盤下, 那么將無法顯示圖片
例如你存放在C盤根目錄, 那么圖片的絕對路徑會變為C:/lnj/images/girl.png, 而src會去F盤找, 所以不會顯示
你只有將lnj文件夾存放在F盤根目錄下時圖片才會正常運行, 這就叫做可移植性不好
Q群；162542073
為什么相對路徑可移植性好?
同上, 如果src指定的路徑為images/girl.png, 那么無論你拷貝到那個盤, 哪個文件夾. 系統都只會在當前文件夾中的images下去查找圖片, 不會受到盤符和存儲位置的影響, 只要保證頁面和圖片位置的相對關系不變就不會影響到圖片的顯示
相對路徑幾種查找方式
../代表訪問上級目錄
假設a文件夾下面有b文件夾, 圖片存放在a文件夾中, html文件存放在b文件夾中, 那么路徑為../girl.png
因為html文件在b文件夾中, 所以路徑是相對于b文件夾的, 所以../代表訪問b文件夾的上一級目錄, b文件夾的上一級目錄是a文件夾, 所以../girl.png就代表在a文件夾查找girl.png
直接編寫, 例如abc/girl.png
加上./ 編寫, 例如./abc/girl.png
相對當前目錄有幾個文件夾,就在后面依次補全幾個文件夾名稱即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
直接編寫, 例如: girl.png
加上./ 編寫, 例如./girl.png
./代表當前目錄, ./girl.png代表在當前目錄下查找
同級
下級
上級
注意事項:
相對路徑不會出現這種格式aaa/../bbb/girl.png
雖然可以顯示, 但是企業開發中千萬不要這么寫
<h3 id="title12">a標簽(anchor)</h3>
格式: <a >江哥博客</a>
作用: 用于從一個頁面鏈接到另一個頁面
注意事項:
在a標簽之間一定要寫上文字, 如果沒有, 那么在頁面上找不到這個標簽
a標簽也叫做超級鏈接或超鏈接
a標簽的屬性
| 屬性名稱 | 作用 |
|---|---|
| href(hypertext reference) | 指定跳轉的目標地址 |
| target | 告訴瀏覽器是否保留原始界面, _blank保留, _self不保留 |
| title | 懸停文本(介紹這個鏈接, 只有在鼠標移動到超鏈接上時才會顯示) |
base標簽和a標簽結合使用
如果每個a標簽都想在新頁面中打開,那么逐個設置a標簽的target屬性比較麻煩, 這時我們可以使用base和a標簽結合的方式,一次性設置有a標簽都在新頁面中打開
格式: <base target="_blank" />
注意事項:
base必須嵌套在head標簽里面
如果標簽上指定了target,base中也指定了target,那么會按照標簽上指定的來執行
a標簽其它用法
例如<a href="girl.zip">下載福利資源<a/>
格式: <a href="01-錨點鏈接.html#location">跳轉到指定位置</a>
只需要在01-錨點鏈接.html頁面添加一個id位置即可
2.1.格式<a href="#location">跳轉到指定位置</a>
2.2.在頁面的指定位置給任意標簽添加一個id屬性
例如 <p id="location">這個是目標</p>
格式<a href="#">江哥博客</a>
格式<a href="javascript：">江哥博客</a>
假鏈接(本質是跳轉到當前頁面)
跳轉到當前頁面指定位置(錨點鏈接)
跳轉到指定頁面的指定位置
下載(極力不推薦使用)
章摘要：
錨點（anchor），超鏈接等內容是我們在建設網站時經常會遇到的，但是很多網頁設計新手在看到這些內容時可能會迷茫，這其實是很正常的事情，畢竟大家都是從新手走過來的。那么今天這篇文章就會告訴你關于錨點和超鏈接的相關知識。
錨點，英文稱作anchor，是制作網頁時要用到的超鏈接中的一種，通俗的來講，它就像網頁中的定位器，幫助網頁瀏覽者快速跳轉至某個節點，也就是說我們在網站中設置錨點就可以讓瀏覽者快速地跳轉至另一個頁面。既然說到了錨點是超鏈接的一種，那么再講講超鏈接的內容，以便于你更好地理解。
超鏈接（英語：Hyperlink）簡單來講，就是指按內容鏈接。具體是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。而在一個網頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片后，鏈接目標將顯示在瀏覽器上，并且根據目標的類型來打開或運行。
看完了上述介紹，相信你已經對于錨點和超鏈接有一定的了解了，那么接下來再為大家講述錨點的具體應用。
在網頁設計中，你需要重視SEO，也就是搜尋引擎優化。SEO是為了讓我們的網站在搜尋引擎中獲得更多的曝光率，這樣就有利于我們的網站瀏覽量持續增長，獲得更多客戶。而讓錨點文字顯示在搜索的網頁中，就有助于SEO優化。錨點文字一般情況下在網頁上顯示為藍色字體，但是也可以通過HTML或CSS來更改鏈接的樣式。在設置錨點文字時，應注意以下幾點：
（1）避免重復
避免重復主要是指兩種情況：一是避免同樣的鏈接關鍵字過度使用，因為搜索引擎對于好的關鍵字認定是自然且合乎邏輯的，如果是重復過多，搜索引擎可能會認為網站是垃圾網站，或者認為你的網站是通過堆砌關鍵詞來作弊的，結果就是網站排名可能反而不好。
（2）指向明確
因為搜尋引擎需要通過一個網站的資訊來源來為網站派送流量，而錨點文字是網站的重要內容，也是一種重要的資訊來源，所以錨點文字是影響網站排名的一種重要元素。在設置時，錨點文字需要指向明確，要與網站的內容有關，且相關度要高，比如說錨點文字是“自助建站”，然后鏈接到像是「上線了」這種自助建站平臺，相關度就很高。
本展示頁所提供的模板及元素僅供展示功能效果，未經授權不得應用于其他用途
（3）具有特色
當我們設置錨點文字時，一般可能會設置為“點擊這里、跳轉”等字眼跳轉到網頁鏈接，這樣做雖然很方便，但是一來與內容的相關性不是很高，二來是沒什么特色，可能會降低瀏覽者的點擊欲望，也會使網站看起來缺乏個性。針對這種情況，我們可以讓錨點文字更具特色，通過修改錨點文字的顏色、格式、字體等方式就可以使瀏覽者識別到這是一個超鏈接，這是一種較為簡單的辦法。
綜上，你已經了解了錨點文字的相關知識了，那就可以自己動手設置一下。新手該如何操作嗯？你可以用「上線了」快速建立一個網站，在網頁中添加超鏈接，不需要懂任何技術知識。接下來，就為大家簡單地示范一下如何在網站中添加錨點。
首先，在「上線了」模板庫中任意找一個模板，在后臺編輯頁面中，我們可以給任意一個文本或圖片添加鏈接，可鏈接至其他網站、電子信箱、網頁中的其他版塊等，而且鏈接到的網站也可以勾選“在新標簽頁打開”，當然也可以取消勾選，非常方便。
你也可以添加自己需要的功能版塊，包括標題、相冊、商城、博客、自定義表單、產品展示、輪播圖等等……版塊可自由拖拽并修改，一個網頁就是由不同的版塊組成的。做好后點擊左下角“上線”即可。通過這樣的方式，小白也能很快搭建一個網站。
總之，不管是建站還是設置錨點，都非常簡單，個人也能很快做好。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
