徑描述

<img src="picture.jpg"> 

picture.jpg 位于與當前網頁相同的文件夾

<img src="images/picture.jpg"> 

picture.jpg 位于當前文件夾的 images 文件夾中

<img src="/images/picture.jpg">

picture.jpg 當前站點根目錄的 images 文件夾中

<img src="../picture.jpg">

picture.jpg 位于當前文件夾的上一級文件夾中

HTML 文件路徑

文件路徑描述了網站文件夾結構中某個文件的位置。

文件路徑會在鏈接外部文件時被用到：

• 網頁
• 圖像
• 樣式表
• JavaScript

絕對文件路徑

絕對文件路徑是指向一個因特網文件的完整 URL：

實例

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"這種格式的文本我們稱之為標簽屬性

• 注意點:

• img標簽添加的圖片默認不是占一整行空間

• 如果想讓圖片等比拉伸, 只寫高度或者寬度即可

關注微信訂閱號：網頁設計輕松學 有更多內容

<h3 id="title10">br標簽(Break)</h3>

• 作用:

• 讓內容換行

• 格式:

• <br/>

• 注意點:

• br的意思是不另起一個段落進行換行, 而網頁中99.99%需要換行時都是因為另起了一個段落, 所以應該用p來做

<h3 id="title11">相對路徑和絕對路徑</h3>

• 圖片路徑分為兩種, 一種是絕對路徑, 一種是相對路徑, 我們重點學習相對路徑, 因為在企業級開發中沒有人使用絕對路徑

• 絕對路徑

• 從電腦的具體盤符開始尋找我們需要的資源

• ![](F:/lnj/girl.png)

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

• 相對路徑

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

• ![](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標簽的屬性

• 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>

• 假鏈接(本質是跳轉到當前頁面)

• 跳轉到當前頁面指定位置(錨點鏈接)

• 跳轉到指定頁面的指定位置

• 下載(極力不推薦使用)