程序開發(fā)過程中,我們始終要謹(jǐn)記的一點(diǎn)就是:程序是寫給人看的,不是寫給機(jī)器看的。任何項(xiàng)目開發(fā),都必須要考慮到人員迭代,我們不能讓下一個(gè)接手你代碼的人,在看到你寫的代碼時(shí)會(huì)說出這樣的話,“這個(gè)代碼是人寫出來的嗎?可讀性太差了”。因此,我們必須遵循一定的規(guī)范,讓代碼的可讀性更強(qiáng)。
今天,我們就一起來看下前端開發(fā)過程所能涉及到的跟HTML有關(guān)的規(guī)范問題。
HTML5
在HTML文件中,推薦使用支持HTML5特性的文檔聲明,<!DOCTYPE html>。
首先是在文件的命名上,應(yīng)當(dāng)采用駝峰式命名,首字母小寫,后面每個(gè)單詞首字母大寫,而且對于具體的文件應(yīng)當(dāng)具有語義化,能夠給人一種直觀的感受這個(gè)文件的作用是什么?,F(xiàn)在前端開發(fā)開發(fā)過程中都講求模塊化開發(fā),甚至是組件化開發(fā),在文件命名時(shí)更應(yīng)該以模塊名或者組件名來命名。
例如在寫一個(gè)AngularJS應(yīng)用時(shí),由于會(huì)涉及到Controller,Service,F(xiàn)ilter等概念,我們會(huì)分別建立一個(gè)文件,假如這個(gè)模塊的名字是庫存管理stockManage,我們可以這樣來命名文件。
stockManageCtrl
stockChangeService
stockChangeFilter
我們所說的語義化指的是使用具有語義化的標(biāo)簽,在H5中添加了類似于header, nav, article, section, aside, footer等標(biāo)簽,從單詞的意思上我們也很容易看出標(biāo)簽的含義。
我們不推薦使用只有div標(biāo)簽的頁面,例如
不推薦使用
而是應(yīng)該使用以下這種帶有語義化的標(biāo)簽。
推薦使用
img標(biāo)簽是網(wǎng)頁用來顯示照片的標(biāo)簽,在頁面所有標(biāo)簽中占據(jù)的比例非常之高,但是在使用img標(biāo)簽時(shí)也有下面需要注意的點(diǎn)。
給定width和height屬性
因?yàn)闉g覽器在加載圖片的過程中,需要先下載圖片,然后再解析圖片的高度和寬度,如果不給img元素設(shè)定高度和寬度,這樣在圖片加載過程中會(huì)不斷的計(jì)算,重排頁面的布局,在網(wǎng)絡(luò)不好的時(shí)候就會(huì)經(jīng)常出現(xiàn)元素出現(xiàn)不規(guī)律移動(dòng)的情況。因此給img元素設(shè)定width和height屬性是必要的。
alt屬性
img標(biāo)簽的alt屬性表示的是在圖片無法顯示時(shí),使用文字來代替顯示,它可以用在以下幾個(gè)場景中:
網(wǎng)路延遲太大
src屬性指定路徑出錯(cuò)
瀏覽器禁用圖像
由于其有良好的信息提示效果,并且有助于網(wǎng)頁SEO效果,強(qiáng)烈建議在img標(biāo)簽中使用alt屬性。
而且很重要的一點(diǎn)是img標(biāo)簽的引入是需要呈現(xiàn)出與頁面相關(guān)的內(nèi)容,其他情況應(yīng)該使用CSS樣式實(shí)現(xiàn)。例如我們不推薦下面這種情況。
不推薦
而推薦使用下面這種情況
推薦使用
前端文件主要包括HTML頁面文件,CSS樣式文件和Javascript腳本文件。我們應(yīng)該讓三者各司其職,在HTML中不應(yīng)該出現(xiàn)CSS和JS表達(dá)式;在JS文件中,不應(yīng)該出現(xiàn)大量的HTML和CSS代碼。在HTML文檔中應(yīng)當(dāng)盡量少的引入CSS和JS文件。為了保證文件的純凈,我們應(yīng)當(dāng)遵循下面的原則。
一個(gè)HTML文件應(yīng)該只引入一個(gè)CSS文件
合理運(yùn)用JS合并技術(shù)(Gulp, Webpack插件),保證引入JS文件不多于兩個(gè)
不使用行內(nèi)腳本元素(<script>alert('Hello World')</script>)
不在標(biāo)簽上使用style內(nèi)聯(lián)樣式
不要使用style屬性
腳本加載在網(wǎng)頁加載過程中是一個(gè)很耗性能的過程,如果把JS文件放在head標(biāo)簽里,它的加載會(huì)一直阻塞DOM的解析,造成頁面延遲。
因此現(xiàn)在講求的是腳本的異步加載過程,我們會(huì)使用到async關(guān)鍵字,考慮到瀏覽器的兼容性,我們推薦使用下面的方式加載腳本。
推薦方式
合理使用ID和錨點(diǎn)可以非常方便的實(shí)現(xiàn)當(dāng)前頁面間的跳轉(zhuǎn),現(xiàn)在越來越多的教程網(wǎng)頁由于是單頁面,經(jīng)常會(huì)用到錨點(diǎn)跳轉(zhuǎn)。
對錨點(diǎn)知識(shí)還不了解的,可以看看我寫的這篇文章《神奇的html錨點(diǎn),讓你的網(wǎng)頁在內(nèi)部自由的跳轉(zhuǎn)》。
今天這篇文章主要總結(jié)了前端開發(fā)過程中的HTML規(guī)范問題,相信大家也或多或少遇到過,希望這篇文章能加深大家的認(rèn)識(shí)。
lt;h2 id="title1">開發(fā)工具(工欲善其事必先利其器)</h2>
為了讓大家更快的融入到編程的世界中, 不被繁瑣的英語單詞所困擾, 不用每天編寫很多沒有意義的重復(fù)代碼, 提升大家的開發(fā)效率今后的課程中我們統(tǒng)一采用最高級(jí)高發(fā)工具來編寫網(wǎng)頁
<h3 id="title2">常見的前端開發(fā)工具</h3>
記事本: 提示功能較差
editplus/nodepad++: 提示功能較差
Dreamwaver: 更偏向設(shè)計(jì)
Sublime: 輕量級(jí),自帶功能不太全, 但是插件十分豐富
WebStorm: 重量級(jí), 自帶功能全面
其它ide(zend studio、netbean等)
為了讓大家更快的融入到編程的世界中, 不被繁瑣的英語單詞所困擾, 今后的課程中我們統(tǒng)一采用最牛逼最高級(jí)的高發(fā)工具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
設(shè)置模版
創(chuàng)建文件
17.png
18.jpg
關(guān)注微信訂閱號(hào):網(wǎng)頁設(shè)計(jì)輕松學(xué) 有更多內(nèi)容
19.png
WebStorm常見快捷鍵
如何在WebStorm中利用快捷鍵創(chuàng)建一個(gè)新的.html的文件
同時(shí)按下鍵盤上的Ctrl + Alt + Insert
如何在WebStorm中讓光標(biāo)移動(dòng)到當(dāng)前行的末尾
按下鍵盤上的End鍵即可
如何在WebStorm中讓光標(biāo)移動(dòng)到當(dāng)前行的最前面
按下鍵盤上的Home鍵即可
如何在WebStorm中讓光標(biāo)在多行中閃爍
按住鍵盤上的Alt鍵不放, 然后再按住鼠標(biāo)的左鍵不放, 然后再拖動(dòng)鼠標(biāo)即可
如何在WebStorm中快速的復(fù)制光標(biāo)所在的那一行
按下鍵盤上的Ctrl + D
如何在WebStorm中快速的刪除光標(biāo)所在的那一行
按下鍵盤上的Ctrl + X
如何在WebStorm中讓標(biāo)簽包裹一段內(nèi)容, 也就是自動(dòng)在一段內(nèi)容前后加上標(biāo)簽
按下鍵盤上的Ctrl + Alt + T, 然后按下回車, 然后輸入對應(yīng)的標(biāo)簽即可
<h2 id="title4">基礎(chǔ)標(biāo)簽學(xué)習(xí)</h2>
<h3 id="title5">H系列標(biāo)簽(Header 1~Header 6)</h3>
作用:
用于給文本添加標(biāo)題語義
格式:
<h1>xxxxxx</h1>
注意點(diǎn):
H標(biāo)簽是用來給文本添加標(biāo)題語義的, 而不是用來修改文本的樣式的
H標(biāo)簽一共有6個(gè), 從H1~H6, 最多就只能到6, 超過6則無效
被H系列標(biāo)簽包裹的內(nèi)容會(huì)獨(dú)占一行
在H系列的標(biāo)簽中, H1最大, H6最小
在企業(yè)開發(fā)中, 一定要慎用H系列的標(biāo)簽, 特別是H1標(biāo)簽. 在企業(yè)開發(fā)中一般情況下一個(gè)界面中只能出現(xiàn)一個(gè)H1標(biāo)簽(和SEO有關(guān))
<h3 id="title6">P標(biāo)簽(Paragraph)</h3>
作用:
告訴瀏覽器哪些文字是一個(gè)段落
格式:
<p>xxxxxxxx</p>
注意點(diǎn):
在瀏覽器中會(huì)單獨(dú)占一行
<h3 id="title7">Hr標(biāo)簽(Horizontal Rule)</h3>
作用:
在瀏覽器上顯示一條分割線
格式:
<hr />
注意點(diǎn):
在瀏覽器中會(huì)單獨(dú)占一行
通過我的觀察發(fā)現(xiàn)HR標(biāo)簽可以寫/也可以不寫/, 如果不寫/那么就是按照HTML的規(guī)范來編寫, 如果寫上/那么就是按照XHTML的規(guī)范來編寫.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有寫不寫都可以.那么以后我們在做前端開發(fā)時(shí)到底寫還是不寫呢? 按照高級(jí)開發(fā)工具的提示來寫即可.
由于hr標(biāo)簽是用來修改樣式的, 所以不推薦使用. 今后開發(fā)中添加水平線一般都使用CSS盒子來做
<h2 id="title8">HTML注釋(Annotation)</h2>
什么是注釋?
注釋是在所有計(jì)算機(jī)語言中都非常重要的一個(gè)概念,從字面上看,就是注解、解釋的意思
注釋可以用來解釋某一段程序或者某一行代碼是什么意思,方便直接或程序員之間的交流
為什么要使用注釋?
適當(dāng)?shù)淖⑨專軌蜃屛覀兊某绦蚋涌勺x,所以用中文提示自己,這里的程序是干什么的
注釋格式
<!--被注釋的內(nèi)容-->
注意點(diǎn):
被注釋的內(nèi)容不會(huì)在瀏覽器中顯示, 注釋是寫給我們自己看的
注釋不能嵌套使用
<!--<!--被注釋的內(nèi)容-->-->
快捷鍵: ctrl + /
<h3 id="title9">img標(biāo)簽(image)</h3>
作用: 在網(wǎng)頁上插入一張圖片
格式: 
標(biāo)簽的屬性
寫在標(biāo)簽中K="V"這種格式的文本我們稱之為標(biāo)簽屬性
屬性名稱 | 作用 |
---|---|
src(source) | 告訴瀏覽器需要插入 的圖片路徑, 以便于瀏覽器到該路徑下找到需要插入的圖片 |
alt(alternate) | 規(guī)定圖像的替代文本, 只有 在src指定的路徑下找不到圖片 ,才會(huì)顯示alt指定的文本 |
title | 懸停文本(介紹這張圖片, 只有在鼠標(biāo)移動(dòng)到圖片上時(shí)才會(huì)顯示) |
height | 設(shè)置圖片顯示的高度 |
width | 設(shè)置圖片顯示的寬度 |
注意點(diǎn):
img標(biāo)簽添加的圖片默認(rèn)不是占一整行空間
如果想讓圖片等比拉伸, 只寫高度或者寬度即可
關(guān)注微信訂閱號(hào):網(wǎng)頁設(shè)計(jì)輕松學(xué) 有更多內(nèi)容
<h3 id="title10">br標(biāo)簽(Break)</h3>
作用:
讓內(nèi)容換行
格式:
<br/>
注意點(diǎn):
br的意思是不另起一個(gè)段落進(jìn)行換行, 而網(wǎng)頁中99.99%需要換行時(shí)都是因?yàn)榱砥鹆艘粋€(gè)段落, 所以應(yīng)該用p來做
<h3 id="title11">相對路徑和絕對路徑</h3>
圖片路徑分為兩種, 一種是絕對路徑, 一種是相對路徑, 我們重點(diǎn)學(xué)習(xí)相對路徑
, 因?yàn)樵谄髽I(yè)級(jí)開發(fā)中沒有人使用絕對路徑
絕對路徑
從電腦的具體盤符開始尋找我們需要的資源

以上代碼表示在F盤下查找lnj文件夾, 然后在lnj文件夾下查找girl.png圖片
相對路徑
一個(gè)文件相對于另外一個(gè)文件的位置尋找我們需要的資源

假設(shè)html文件和girl.png都在lnj文件夾下, 以上代碼表示在lnj文件夾下查找girl.png圖片
為什么沒人使用絕對路徑?
可以移植性太差.
什么是可移植性?
可以簡單的理解為把寫到的代碼拷貝到另外一臺(tái)電腦上是否能夠正常運(yùn)行
為什么絕對路徑可移植性差?
假如我編寫的html文件放在我電腦的 F:/lnj
目錄下, html文件中用到的圖片放在F:/lnj/images
目錄下, 我給src指定的絕對路為F:/lnj/images/girl.png
. 那么將來我將整個(gè)lnj文件夾拷貝給你
, 如果你將lnj文件夾放在非F盤下, 那么將無法顯示圖片
例如你存放在C盤根目錄, 那么圖片的絕對路徑會(huì)變?yōu)?code>C:/lnj/images/girl.png, 而src會(huì)去F盤找, 所以不會(huì)顯示
你只有將lnj
文件夾存放在F盤根目錄下時(shí)圖片才會(huì)正常運(yùn)行, 這就叫做可移植性不好
Q群;162542073
為什么相對路徑可移植性好?
同上, 如果src指定的路徑為images/girl.png
, 那么無論你拷貝到那個(gè)盤, 哪個(gè)文件夾. 系統(tǒng)都只會(huì)在當(dāng)前文件夾中的images下去查找圖片
, 不會(huì)受到盤符和存儲(chǔ)位置的影響, 只要保證頁面和圖片位置的相對關(guān)系不變就不會(huì)影響到圖片的顯示
相對路徑幾種查找方式
../代表訪問上級(jí)目錄
假設(shè)a文件夾下面有b文件夾, 圖片存放在a文件夾中, html文件存放在b文件夾中, 那么路徑為../girl.png
因?yàn)閔tml文件在b文件夾中, 所以路徑是相對于b文件夾的, 所以../代表訪問b文件夾的上一級(jí)目錄, b文件夾的上一級(jí)目錄是a文件夾, 所以../girl.png就代表在a文件夾查找girl.png
直接編寫, 例如abc/girl.png
加上./ 編寫, 例如./abc/girl.png
相對當(dāng)前目錄有幾個(gè)文件夾,就在后面依次補(bǔ)全幾個(gè)文件夾名稱即可, 例如 abc/bbb/ccc/ddd/girl.png
或./abc/bbb/ccc/ddd/girl.png
直接編寫, 例如: girl.png
加上./ 編寫, 例如./girl.png
./代表當(dāng)前目錄, ./girl.png
代表在當(dāng)前目錄下查找
同級(jí)
下級(jí)
上級(jí)
注意事項(xiàng):
相對路徑不會(huì)出現(xiàn)這種格式aaa/../bbb/girl.png
雖然可以顯示, 但是企業(yè)開發(fā)中千萬不要這么寫
<h3 id="title12">a標(biāo)簽(anchor)</h3>
格式: <a >江哥博客</a>
作用: 用于從一個(gè)頁面鏈接到另一個(gè)頁面
注意事項(xiàng):
在a標(biāo)簽之間一定要寫上文字, 如果沒有, 那么在頁面上找不到這個(gè)標(biāo)簽
a標(biāo)簽也叫做超級(jí)鏈接
或超鏈接
a標(biāo)簽的屬性
屬性名稱 | 作用 |
---|---|
href(hypertext reference) | 指定跳轉(zhuǎn)的目標(biāo)地址 |
target | 告訴瀏覽器是否保留原始界面, _blank保留, _self不保留 |
title | 懸停文本(介紹這個(gè)鏈接, 只有在鼠標(biāo)移動(dòng)到超鏈接上時(shí)才會(huì)顯示) |
base標(biāo)簽和a標(biāo)簽結(jié)合使用
如果每個(gè)a標(biāo)簽都想在新頁面中打開,那么逐個(gè)設(shè)置a標(biāo)簽的target屬性比較麻煩, 這時(shí)我們可以使用base和a標(biāo)簽結(jié)合的方式,一次性設(shè)置有a標(biāo)簽都在新頁面中打開
格式: <base target="_blank" />
注意事項(xiàng):
base必須嵌套在head標(biāo)簽里面
如果標(biāo)簽上指定了target,base中也指定了target,那么會(huì)按照標(biāo)簽上指定的來執(zhí)行
a標(biāo)簽其它用法
例如<a href="girl.zip">下載福利資源<a/>
格式: <a href="01-錨點(diǎn)鏈接.html#location">跳轉(zhuǎn)到指定位置</a>
只需要在01-錨點(diǎn)鏈接.html
頁面添加一個(gè)id位置即可
2.1.格式<a href="#location">跳轉(zhuǎn)到指定位置</a>
2.2.在頁面的指定位置給任意標(biāo)簽添加一個(gè)id屬性
例如 <p id="location">這個(gè)是目標(biāo)</p>
格式<a href="#">江哥博客</a>
格式<a href="javascript:">江哥博客</a>
假鏈接(本質(zhì)是跳轉(zhuǎn)到當(dāng)前頁面)
跳轉(zhuǎn)到當(dāng)前
頁面指定位置
(錨點(diǎn)鏈接)
跳轉(zhuǎn)到指定
頁面的指定位置
下載(極力不推薦使用)
章摘要:
錨點(diǎn)(anchor),超鏈接等內(nèi)容是我們在建設(shè)網(wǎng)站時(shí)經(jīng)常會(huì)遇到的,但是很多網(wǎng)頁設(shè)計(jì)新手在看到這些內(nèi)容時(shí)可能會(huì)迷茫,這其實(shí)是很正常的事情,畢竟大家都是從新手走過來的。那么今天這篇文章就會(huì)告訴你關(guān)于錨點(diǎn)和超鏈接的相關(guān)知識(shí)。
錨點(diǎn),英文稱作anchor,是制作網(wǎng)頁時(shí)要用到的超鏈接中的一種,通俗的來講,它就像網(wǎng)頁中的定位器,幫助網(wǎng)頁瀏覽者快速跳轉(zhuǎn)至某個(gè)節(jié)點(diǎn),也就是說我們在網(wǎng)站中設(shè)置錨點(diǎn)就可以讓瀏覽者快速地跳轉(zhuǎn)至另一個(gè)頁面。既然說到了錨點(diǎn)是超鏈接的一種,那么再講講超鏈接的內(nèi)容,以便于你更好地理解。
超鏈接(英語:Hyperlink)簡單來講,就是指按內(nèi)容鏈接。具體是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系,這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置,還可以是一個(gè)圖片,一個(gè)電子郵件地址,一個(gè)文件,甚至是一個(gè)應(yīng)用程序。而在一個(gè)網(wǎng)頁中用來超鏈接的對象,可以是一段文本或者是一個(gè)圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后,鏈接目標(biāo)將顯示在瀏覽器上,并且根據(jù)目標(biāo)的類型來打開或運(yùn)行。
看完了上述介紹,相信你已經(jīng)對于錨點(diǎn)和超鏈接有一定的了解了,那么接下來再為大家講述錨點(diǎn)的具體應(yīng)用。
在網(wǎng)頁設(shè)計(jì)中,你需要重視SEO,也就是搜尋引擎優(yōu)化。SEO是為了讓我們的網(wǎng)站在搜尋引擎中獲得更多的曝光率,這樣就有利于我們的網(wǎng)站瀏覽量持續(xù)增長,獲得更多客戶。而讓錨點(diǎn)文字顯示在搜索的網(wǎng)頁中,就有助于SEO優(yōu)化。錨點(diǎn)文字一般情況下在網(wǎng)頁上顯示為藍(lán)色字體,但是也可以通過HTML或CSS來更改鏈接的樣式。在設(shè)置錨點(diǎn)文字時(shí),應(yīng)注意以下幾點(diǎn):
(1)避免重復(fù)
避免重復(fù)主要是指兩種情況:一是避免同樣的鏈接關(guān)鍵字過度使用,因?yàn)樗阉饕鎸τ诤玫年P(guān)鍵字認(rèn)定是自然且合乎邏輯的,如果是重復(fù)過多,搜索引擎可能會(huì)認(rèn)為網(wǎng)站是垃圾網(wǎng)站,或者認(rèn)為你的網(wǎng)站是通過堆砌關(guān)鍵詞來作弊的,結(jié)果就是網(wǎng)站排名可能反而不好。
(2)指向明確
因?yàn)樗褜ひ嫘枰ㄟ^一個(gè)網(wǎng)站的資訊來源來為網(wǎng)站派送流量,而錨點(diǎn)文字是網(wǎng)站的重要內(nèi)容,也是一種重要的資訊來源,所以錨點(diǎn)文字是影響網(wǎng)站排名的一種重要元素。在設(shè)置時(shí),錨點(diǎn)文字需要指向明確,要與網(wǎng)站的內(nèi)容有關(guān),且相關(guān)度要高,比如說錨點(diǎn)文字是“自助建站”,然后鏈接到像是「上線了」這種自助建站平臺(tái),相關(guān)度就很高。
本展示頁所提供的模板及元素僅供展示功能效果,未經(jīng)授權(quán)不得應(yīng)用于其他用途
(3)具有特色
當(dāng)我們設(shè)置錨點(diǎn)文字時(shí),一般可能會(huì)設(shè)置為“點(diǎn)擊這里、跳轉(zhuǎn)”等字眼跳轉(zhuǎn)到網(wǎng)頁鏈接,這樣做雖然很方便,但是一來與內(nèi)容的相關(guān)性不是很高,二來是沒什么特色,可能會(huì)降低瀏覽者的點(diǎn)擊欲望,也會(huì)使網(wǎng)站看起來缺乏個(gè)性。針對這種情況,我們可以讓錨點(diǎn)文字更具特色,通過修改錨點(diǎn)文字的顏色、格式、字體等方式就可以使瀏覽者識(shí)別到這是一個(gè)超鏈接,這是一種較為簡單的辦法。
綜上,你已經(jīng)了解了錨點(diǎn)文字的相關(guān)知識(shí)了,那就可以自己動(dòng)手設(shè)置一下。新手該如何操作嗯?你可以用「上線了」快速建立一個(gè)網(wǎng)站,在網(wǎng)頁中添加超鏈接,不需要懂任何技術(shù)知識(shí)。接下來,就為大家簡單地示范一下如何在網(wǎng)站中添加錨點(diǎn)。
首先,在「上線了」模板庫中任意找一個(gè)模板,在后臺(tái)編輯頁面中,我們可以給任意一個(gè)文本或圖片添加鏈接,可鏈接至其他網(wǎng)站、電子信箱、網(wǎng)頁中的其他版塊等,而且鏈接到的網(wǎng)站也可以勾選“在新標(biāo)簽頁打開”,當(dāng)然也可以取消勾選,非常方便。
你也可以添加自己需要的功能版塊,包括標(biāo)題、相冊、商城、博客、自定義表單、產(chǎn)品展示、輪播圖等等……版塊可自由拖拽并修改,一個(gè)網(wǎng)頁就是由不同的版塊組成的。做好后點(diǎn)擊左下角“上線”即可。通過這樣的方式,小白也能很快搭建一個(gè)網(wǎng)站。
總之,不管是建站還是設(shè)置錨點(diǎn),都非常簡單,個(gè)人也能很快做好。
*請認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。