整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          前端開發(fā)過程中的HTML規(guī)范,來學(xué)習(xí)一下吧

          程序開發(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>。

          命名規(guī)范

          首先是在文件的命名上,應(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)簽

          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è)場景中:

          1. 網(wǎng)路延遲太大

          2. src屬性指定路徑出錯(cuò)

          3. 瀏覽器禁用圖像

          由于其有良好的信息提示效果,并且有助于網(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)遵循下面的原則。

          1. 一個(gè)HTML文件應(yīng)該只引入一個(gè)CSS文件

          2. 合理運(yùn)用JS合并技術(shù)(Gulp, Webpack插件),保證引入JS文件不多于兩個(gè)

          3. 不使用行內(nèi)腳本元素(<script>alert('Hello World')</script>)

          4. 不在標(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)

          合理使用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é)

          今天這篇文章主要總結(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/girl.png)

            • 以上代碼表示在F盤下查找lnj文件夾, 然后在lnj文件夾下查找girl.png圖片

          • 相對路徑

            • 一個(gè)文件相對于另外一個(gè)文件的位置尋找我們需要的資源

            • ![](girl.png)

            • 假設(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)、超鏈接是什么
          • 錨點(diǎn)文字的優(yōu)化方案
          • 手把手教你如何設(shè)置錨點(diǎ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í)。


          1.錨點(diǎn)、超鏈接是什么

          錨點(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)用。

          2.錨點(diǎn)文字的優(yōu)化方案

          在網(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è)超鏈接,這是一種較為簡單的辦法。

          3.錨點(diǎn)設(shè)置實(shí)操

          綜上,你已經(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è)人也能很快做好。


          主站蜘蛛池模板: 精品性影院一区二区三区内射| 国产激情з∠视频一区二区 | 亚洲一区精彩视频| 亚欧免费视频一区二区三区| 99久久精品费精品国产一区二区 | 日韩在线视频一区二区三区| 无码av人妻一区二区三区四区| 国产福利91精品一区二区三区| 色欲综合一区二区三区| 亚洲AV成人一区二区三区在线看| 精品成人乱色一区二区| 能在线观看的一区二区三区| 国产另类ts人妖一区二区三区 | 国产视频一区二区在线播放| 精品一区二区三区中文字幕 | 国产成人精品一区二区秒拍 | 中文字幕无码不卡一区二区三区| 日本一区二三区好的精华液 | 天堂va在线高清一区| 成人无号精品一区二区三区| 精品一区二区三区免费毛片| 美女福利视频一区| 国产福利电影一区二区三区久久久久成人精品综合 | 久久99国产精品一区二区| 国产成人综合一区精品| 97精品国产福利一区二区三区| 亚洲无删减国产精品一区| 精品3d动漫视频一区在线观看| 消息称老熟妇乱视频一区二区| 毛片一区二区三区无码| 色狠狠一区二区三区香蕉| 国产在线一区二区在线视频| 国产成人午夜精品一区二区三区| 精品国产香蕉伊思人在线在线亚洲一区二区 | 在线成人综合色一区| 精品深夜AV无码一区二区| 国产亚洲3p无码一区二区| 一区二区三区在线| 中文字幕亚洲一区| 久久精品国产一区二区电影| 日本精品高清一区二区2021|