前言

這個(gè)是我之前整理好了的學(xué)習(xí)筆記，現(xiàn)在分享出來與大家共享塑悼，現(xiàn)在也算再復(fù)習(xí)一遍锻狗，希望自己得到提高，也方便自己以后復(fù)習(xí)狰住。

基礎(chǔ)標(biāo)簽的學(xué)習(xí)

第一行代碼：

第一行代碼

運(yùn)行效果：

HTML5之中一般標(biāo)簽都包含開始和結(jié)束標(biāo)簽张吉，例：

h系列標(biāo)簽（h1~h6）

作用：用于給文本添加標(biāo)題語義

格式：

第一行代碼

注意點(diǎn)：h標(biāo)簽是用來給文本添加標(biāo)題語義的，而不是用來修改文本樣式的催植。

h系列標(biāo)簽一共6個(gè)肮蛹，h1~h6，其中h1標(biāo)簽是主標(biāo)題標(biāo)簽（字號(hào)最大）创南，在企業(yè)開發(fā)之中伦忠，要小心慎用h系列標(biāo)簽。在實(shí)際開發(fā)之中一般情況下一個(gè)界面只允許使用一個(gè)h1標(biāo)簽稿辙。

p標(biāo)簽（段落標(biāo)簽）

作用：告訴瀏覽器哪些文字是一個(gè)段落昆码。

格式：

<p>Hello world!</p>

hr標(biāo)簽（是一條分割線）

作用：在瀏覽器上顯示一條分割線

格式：<hr/>

注意點(diǎn)：hr標(biāo)簽沒有開始標(biāo)簽，結(jié)束標(biāo)簽邻储，與一般基本標(biāo)簽有所不同赋咽。

由于hr標(biāo)簽是用來修改樣式的，所以不推薦使用吨娜。今后開發(fā)中添加水平項(xiàng)目一般都使用CSS盒子來做

HTML注釋：

什么是注釋脓匿？

注釋就是注解，解釋文中段落的意思宦赠。注釋是寫給人看的陪毡，計(jì)算機(jī)語言一般不識(shí)別注釋。

注釋可以用來解釋某一段程序或者某一行代碼是什么意思勾扭，方便直接或程序員之間的交流毡琉。

注釋格式：

<!--hhhh-->

注意點(diǎn)：

被注釋的內(nèi)容不會(huì)在瀏覽器中顯示，注釋是寫給我們自己看的

注釋不能嵌套使用：<!--<!--hhhh-->-->（這種寫法是錯(cuò)誤的）

快捷鍵：Ctrl+/

img標(biāo)簽（image）

作用：在網(wǎng)頁上插入一張圖片

格式：

../girl.png

標(biāo)簽的屬性：寫在標(biāo)簽中K=”V”這種格式的文本我們稱之為標(biāo)簽屬性

src（source）：作用為告訴瀏覽器需要插入的圖片路徑尺借，以便于瀏覽器到該路徑下找到需要插入的圖片

alt（alternate）：作用為規(guī)定圖像的替代文本绊起，只有在src指定的路徑下找不到圖片，才會(huì)顯示指定的文本

title：懸停文本燎斩。

height：設(shè)置顯示圖片的高度虱歪。

width：設(shè)置顯示圖片的寬度蜂绎。

注意點(diǎn)：img標(biāo)簽添加的圖片默認(rèn)不是占一整行空間

如果想讓圖片等比拉伸，只寫高度或?qū)挾燃纯伞?/p>

br標(biāo)簽（break）

作用：讓內(nèi)容換行笋鄙。

格式：<br/>

注意點(diǎn)：br的意思是不另起一個(gè)段落進(jìn)行換行师枣。br標(biāo)簽沒有開始標(biāo)簽，結(jié)束標(biāo)簽萧落，與一般基本標(biāo)簽有所不同践美。

相對(duì)路徑和絕對(duì)路徑（重點(diǎn)為相對(duì)路徑）

絕對(duì)路徑：

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

例如：C:/Users/Xiong J/Desktop/girl.png

相對(duì)路徑：

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


假設(shè)html文件和girl.png都在Desktop文件夾下,以上代碼表示在Desktop文件夾下查找girl.png圖片

為什么沒人使用絕對(duì)路徑找岖？

因?yàn)榻^對(duì)路徑的可移植性差陨倡。

為什么相對(duì)路徑可移植性好?

同上,如果src指定的路徑為images/girl.png,那么無論你拷貝到那個(gè)盤,哪個(gè)文件夾.系統(tǒng)都只會(huì)在當(dāng)前文件夾中的images下去查找圖片,不會(huì)受到盤符和存儲(chǔ)位置的影響,只要保證頁面和圖片位置的相對(duì)關(guān)系不變就不會(huì)影響到圖片的顯示

相對(duì)路徑幾種查找方式

同級(jí)

直接編寫,例如:?girl.png

加上./編寫,例如./girl.png

./代表當(dāng)前目錄,?./girl.png代表在當(dāng)前目錄下查找

下級(jí)

直接編寫,例如abc/girl.png

加上./編寫,例如./abc/girl.png

相對(duì)當(dāng)前目錄有幾個(gè)文件夾,就在后面依次補(bǔ)全幾個(gè)文件夾名稱即可,例如abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png

上級(jí)

../代表訪問上級(jí)目錄

假設(shè)a文件夾下面有b文件夾,圖片存放在a文件夾中, html文件存放在b文件夾中,那么路徑為../girl.png

因?yàn)閔tml文件在b文件夾中,所以路徑是相對(duì)于b文件夾的,所以../代表訪問b文件夾的上一級(jí)目錄, b文件夾的上一級(jí)目錄是a文件夾,所以../girl.png就代表在a文件夾查找girl.png

注意事項(xiàng):

相對(duì)路徑不會(huì)出現(xiàn)這種格式aaa/../bbb/girl.png

雖然可以顯示,但是企業(yè)開發(fā)中千萬不要這么寫

a標(biāo)簽（anchor）

格式：<a >baidu</a>

作用：用于從一個(gè)頁面鏈接到另一個(gè)頁面

注意事項(xiàng):

在a標(biāo)簽之間一定要寫上文字,如果沒有,那么在頁面上找不到這個(gè)標(biāo)簽

a標(biāo)簽也叫做超級(jí)鏈接或超鏈接

a標(biāo)簽的屬性

href：作用是指定跳轉(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)簽都在新頁面中打開

格式:?

注意事項(xiàng):

base必須嵌套在head標(biāo)簽里面

如果標(biāo)簽上指定了target,base中也指定了target,那么會(huì)按照標(biāo)簽上指定的來執(zhí)行

a標(biāo)簽其它用法

假鏈接(本質(zhì)是跳轉(zhuǎn)到當(dāng)前頁面)

格式<a href="#">baidu</a>

格式<a href="javascript">baidu</a>

跳轉(zhuǎn)到當(dāng)前頁面指定位置(錨點(diǎn)鏈接)

格式<a href="#location">跳轉(zhuǎn)到指定位置</a>

在頁面的指定位置給任意標(biāo)簽添加一個(gè)id屬性

例如

<p id="location">這個(gè)是目標(biāo)</p>

跳轉(zhuǎn)到指定頁面的指定位置

格式: <a href="demo.html#location">跳轉(zhuǎn)到指定位置</a>

只需要在demo.html頁面添加一個(gè)id位置即可

總結(jié)

寫了這么多许布，不僅僅是一種分享兴革，希望更多的人看到，能對(duì)他們有所幫助蜜唾，也是自己的一種總結(jié)杂曲，寫在筆記本里的筆記只屬于自己，而寫在這里的筆記袁余，屬于大家擎勘。

共勉！