2020-04-06

基礎(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)載請注明出處。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末搂擦,一起剝皮案震驚了整個濱河市稳诚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌瀑踢,老刑警劉巖扳还,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異橱夭,居然都是意外死亡氨距,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進(jìn)店門棘劣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來俏让,“玉大人,你說我怎么就攤上這事∈孜簦” “怎么了寡喝?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長勒奇。 經(jīng)常有香客問我拘荡,道長,這世上最難降的妖魔是什么撬陵? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任珊皿,我火速辦了婚禮,結(jié)果婚禮上巨税,老公的妹妹穿的比我還像新娘蟋定。我一直安慰自己,他們只是感情好草添,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布驶兜。 她就那樣靜靜地躺著,像睡著了一般远寸。 火紅的嫁衣襯著肌膚如雪抄淑。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天驰后,我揣著相機(jī)與錄音肆资,去河邊找鬼。 笑死灶芝,一個胖子當(dāng)著我的面吹牛郑原,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播夜涕,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼犯犁,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了女器?” 一聲冷哼從身側(cè)響起酸役,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎驾胆,沒想到半個月后涣澡,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡俏拱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年暑塑,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片锅必。...
    茶點(diǎn)故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出搞隐,到底是詐尸還是另有隱情驹愚,我是刑警寧澤,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布劣纲,位于F島的核電站逢捺,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏癞季。R本人自食惡果不足惜劫瞳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望绷柒。 院中可真熱鬧志于,春花似錦、人聲如沸废睦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽嗜湃。三九已至奈应,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間购披,已是汗流浹背杖挣。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留刚陡,地道東北人程梦。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像橘荠,于是被迫代替她去往敵國和親屿附。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內(nèi)容