基礎(chǔ)標(biāo)簽
開發(fā)工具(工欲善其事必先利其器)
為了讓大家更快的融入到編程的世界中, 不被繁瑣的英語單詞所困擾, 不用每天編寫很多沒有意義的重復(fù)代碼, 提升大家的開發(fā)效率今后的課程中我們統(tǒng)一采用最高級高發(fā)工具來編寫網(wǎng)頁
常見的前端開發(fā)工具
記事本: 提示功能較差
editplus/nodepad++: 提示功能較差
Dreamwaver: 更偏向設(shè)計
Sublime: 輕量級,自帶功能不太全, 但是插件十分豐富
WebStorm: 重量級, 自帶功能全面
其它ide(zend studio、netbean等)
為了讓大家更快的融入到編程的世界中, 不被繁瑣的英語單詞所困擾, 今后的課程中我們統(tǒng)一采用最牛逼最高級的高發(fā)工具WebStorm
WebStorm安裝和使用
安裝軟件
破解軟件(工作之后一定要用正版)
漢化軟件
設(shè)置模版
創(chuàng)建文件
WebStorm常見快捷鍵
如何在WebStorm中利用快捷鍵創(chuàng)建一個新的.html的文件
同時按下鍵盤上的Ctrl + Alt + Insert
如何在WebStorm中讓光標(biāo)移動到當(dāng)前行的末尾
按下鍵盤上的End鍵即可
如何在WebStorm中讓光標(biāo)移動到當(dāng)前行的最前面
按下鍵盤上的Home鍵即可
如何在WebStorm中讓光標(biāo)在多行中閃爍
按住鍵盤上的Alt鍵不放, 然后再按住鼠標(biāo)的左鍵不放, 然后再拖動鼠標(biāo)即可
如何在WebStorm中快速的復(fù)制光標(biāo)所在的那一行
按下鍵盤上的Ctrl + D
如何在WebStorm中快速的刪除光標(biāo)所在的那一行
按下鍵盤上的Ctrl + X
如何在WebStorm中讓標(biāo)簽包裹一段內(nèi)容, 也就是自動在一段內(nèi)容前后加上標(biāo)簽
按下鍵盤上的Ctrl + Alt + T, 然后按下回車, 然后輸入對應(yīng)的標(biāo)簽即可
基礎(chǔ)標(biāo)簽學(xué)習(xí)
H系列標(biāo)簽(Header 1~Header 6)
作用:
用于給文本添加標(biāo)題語義
格式:
<h1>xxxxxx</h1>
注意點(diǎn):
H標(biāo)簽是用來給文本添加標(biāo)題語義的, 而不是用來修改文本的樣式的
H標(biāo)簽一共有6個, 從H1~H6, 最多就只能到6, 超過6則無效
被H系列標(biāo)簽包裹的內(nèi)容會獨(dú)占一行
在H系列的標(biāo)簽中, H1最大, H6最小
在企業(yè)開發(fā)中, 一定要慎用H系列的標(biāo)簽, 特別是H1標(biāo)簽. 在企業(yè)開發(fā)中一般情況下一個界面中只能出現(xiàn)一個H1標(biāo)簽(和SEO有關(guān))
P標(biāo)簽(Paragraph)
作用:
告訴瀏覽器哪些文字是一個段落
格式:
<p>xxxxxxxx</p>
注意點(diǎn):
在瀏覽器中會單獨(dú)占一行
Hr標(biāo)簽(Horizontal Rule)
作用:
在瀏覽器上顯示一條分割線
格式:
<hr />
注意點(diǎn):
在瀏覽器中會單獨(dú)占一行
通過我的觀察發(fā)現(xiàn)HR標(biāo)簽可以寫/也可以不寫/, 如果不寫/那么就是按照HTML的規(guī)范來編寫, 如果寫上/那么就是按照XHTML的規(guī)范來編寫.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有寫不寫都可以.那么以后我們在做前端開發(fā)時到底寫還是不寫呢? 按照高級開發(fā)工具的提示來寫即可.
由于hr標(biāo)簽是用來修改樣式的, 所以不推薦使用. 今后開發(fā)中添加水平線一般都使用CSS盒子來做
HTML注釋(Annotation)
什么是注釋?
注釋是在所有計算機(jī)語言中都非常重要的一個概念骂蓖，從字面上看倚搬，就是注解秫舌、解釋的意思
注釋可以用來解釋某一段程序或者某一行代碼是什么意思款青，方便直接或程序員之間的交流
為什么要使用注釋?
適當(dāng)?shù)淖⑨尩樗剑軌蜃屛覀兊某绦蚋涌勺x，所以用中文提示自己泥从，這里的程序是干什么的
注釋格式
<!--被注釋的內(nèi)容-->
注意點(diǎn):
被注釋的內(nèi)容不會在瀏覽器中顯示, 注釋是寫給我們自己看的
注釋不能嵌套使用
<!--<!--被注釋的內(nèi)容-->-->
快捷鍵:ctrl + /
img標(biāo)簽(image)
作用: 在網(wǎng)頁上插入一張圖片
格式:[圖片上傳失敗...(image-fd0503-1522164219949)]
標(biāo)簽的屬性
寫在標(biāo)簽中K="V"這種格式的文本我們稱之為標(biāo)簽屬性
屬性名稱作用
src(source)告訴瀏覽器需要插入的圖片路徑, 以便于瀏覽器到該路徑下找到需要插入的圖片
alt(alternate)規(guī)定圖像的替代文本,只有在src指定的路徑下找不到圖片,才會顯示alt指定的文本
title懸停文本(介紹這張圖片, 只有在鼠標(biāo)移動到圖片上時才會顯示)
height設(shè)置圖片顯示的高度
width設(shè)置圖片顯示的寬度
注意點(diǎn):
img標(biāo)簽添加的圖片默認(rèn)不是占一整行空間
如果想讓圖片等比拉伸, 只寫高度或者寬度即可
br標(biāo)簽(Break)
作用:
讓內(nèi)容換行
格式:
<br/>
注意點(diǎn):
br的意思是不另起一個段落進(jìn)行換行, 而網(wǎng)頁中99.99%需要換行時都是因為另起了一個段落, 所以應(yīng)該用p來做
相對路徑和絕對路徑
圖片路徑分為兩種, 一種是絕對路徑, 一種是相對路徑, 我們重點(diǎn)學(xué)習(xí)相對路徑, 因為在企業(yè)級開發(fā)中沒有人使用絕對路徑
絕對路徑
從電腦的具體盤符開始尋找我們需要的資源
[圖片上傳失敗...(image-272290-1522164219949)]
以上代碼表示在F盤下查找lnj文件夾, 然后在lnj文件夾下查找girl.png圖片
相對路徑
一個文件相對于另外一個文件的位置尋找我們需要的資源
[圖片上傳失敗...(image-2aceec-1522164219949)]
假設(shè)html文件和girl.png都在lnj文件夾下, 以上代碼表示在lnj文件夾下查找girl.png圖片
為什么沒人使用絕對路徑?
可以移植性太差.
什么是可移植性?
可以簡單的理解為把寫到的代碼拷貝到另外一臺電腦上是否能夠正常運(yùn)行
為什么絕對路徑可移植性差?
假如我編寫的html文件放在我電腦的F:/lnj目錄下,? html文件中用到的圖片放在F:/lnj/images目錄下, 我給src指定的絕對路為F:/lnj/images/girl.png. 那么將來我將整個lnj文件夾拷貝給你, 如果你將lnj文件夾放在非F盤下, 那么將無法顯示圖片
例如你存放在C盤根目錄, 那么圖片的絕對路徑會變?yōu)镃:/lnj/images/girl.png, 而src會去F盤找, 所以不會顯示
你只有將lnj文件夾存放在F盤根目錄下時圖片才會正常運(yùn)行, 這就叫做可移植性不好
為什么相對路徑可移植性好?
同上, 如果src指定的路徑為images/girl.png, 那么無論你拷貝到那個盤, 哪個文件夾. 系統(tǒng)都只會在當(dāng)前文件夾中的images下去查找圖片, 不會受到盤符和存儲位置的影響, 只要保證頁面和圖片位置的相對關(guān)系不變就不會影響到圖片的顯示
相對路徑幾種查找方式
同級
直接編寫, 例如:girl.png
加上./ 編寫, 例如./girl.png
./代表當(dāng)前目錄,./girl.png代表在當(dāng)前目錄下查找
下級
直接編寫, 例如abc/girl.png
加上./ 編寫, 例如./abc/girl.png
相對當(dāng)前目錄有幾個文件夾,就在后面依次補(bǔ)全幾個文件夾名稱即可, 例如abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
上級
../代表訪問上級目錄
假設(shè)a文件夾下面有b文件夾, 圖片存放在a文件夾中, html文件存放在b文件夾中, 那么路徑為../girl.png
因為html文件在b文件夾中, 所以路徑是相對于b文件夾的, 所以../代表訪問b文件夾的上一級目錄, b文件夾的上一級目錄是a文件夾, 所以../girl.png就代表在a文件夾查找girl.png
注意事項:
相對路徑不會出現(xiàn)這種格式aaa/../bbb/girl.png
雖然可以顯示, 但是企業(yè)開發(fā)中千萬不要這么寫
a標(biāo)簽(anchor)
格式:<a >江哥博客</a>
作用: 用于從一個頁面鏈接到另一個頁面
注意事項:
在a標(biāo)簽之間一定要寫上文字, 如果沒有, 那么在頁面上找不到這個標(biāo)簽
a標(biāo)簽也叫做超級鏈接或超鏈接
a標(biāo)簽的屬性
屬性名稱作用
href(hypertext reference)指定跳轉(zhuǎn)的目標(biāo)地址
target告訴瀏覽器是否保留原始界面, _blank保留, _self不保留
title懸停文本(介紹這個鏈接, 只有在鼠標(biāo)移動到超鏈接上時才會顯示)
base標(biāo)簽和a標(biāo)簽結(jié)合使用
如果每個a標(biāo)簽都想在新頁面中打開,那么逐個設(shè)置a標(biāo)簽的target屬性比較麻煩, 這時我們可以使用base和a標(biāo)簽結(jié)合的方式,一次性設(shè)置有a標(biāo)簽都在新頁面中打開
格式:<base target="_blank" />
注意事項:
base必須嵌套在head標(biāo)簽里面
如果標(biāo)簽上指定了target,base中也指定了target,那么會按照標(biāo)簽上指定的來執(zhí)行
a標(biāo)簽其它用法
假鏈接(本質(zhì)是跳轉(zhuǎn)到當(dāng)前頁面)
格式<a href="#">江哥博客</a>
格式<a href="javascript:">江哥博客</a>
跳轉(zhuǎn)到當(dāng)前頁面指定位置(錨點(diǎn)鏈接)
2.1.格式<a href="#location">跳轉(zhuǎn)到指定位置</a>
2.2.在頁面的指定位置給任意標(biāo)簽添加一個id屬性
例如<p id="location">這個是目標(biāo)</p>
跳轉(zhuǎn)到指定頁面的指定位置
格式:<a href="01-錨點(diǎn)鏈接.html#location">跳轉(zhuǎn)到指定位置</a>
只需要在01-錨點(diǎn)鏈接.html頁面添加一個id位置即可
下載(極力不推薦使用)
例如<a href="girl.zip">下載福利資源<a/>
作者：極客江南
鏈接：http://www.reibang.com/p/cc669b19f09f
來源：簡書
著作權(quán)歸作者所有织鲸。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)舔腾，非商業(yè)轉(zhuǎn)載請注明出處。
