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

• 如何在WebStorm中利用快捷鍵創(chuàng)建一個(gè)新的.html文件
  • 同時(shí)按下Ctrl+Alt+Insert鍵
• 如何在Webstorm 移動(dòng)到當(dāng)前行末尾
  • 按下End鍵
• 如何在Webstorm 移動(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中自動(dòng)在內(nèi)容前后加標(biāo)簽闷畸？
  • Ctrl+Alt+t

H標(biāo)簽系列（Header 1~Header 6）

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

<h1>xxxxxxxxxxxx</h1>

• 注意點(diǎn)：
  -H標(biāo)簽是用來給文本添加標(biāo)題語義的，而不是修改文本樣式的
  • H標(biāo)簽一共有6個(gè)榛丢，從H1~H6（一到六級標(biāo)題）
  • 被H系列標(biāo)簽包裹的內(nèi)容獨(dú)占一行
    -在H系列標(biāo)簽中馏臭，H1最大，H6最小
    -在企業(yè)開發(fā)中名扛，慎用H標(biāo)簽谅年，一個(gè)界面中只能出現(xiàn)一個(gè)H1標(biāo)簽

P標(biāo)簽（Paragraph）

• 作用：
  • 告訴瀏覽器那些文字是一個(gè)段落
• 格式：

<p>xxxxxxxxxxxxx</p>

• 注意點(diǎn)：
  • 在瀏覽器中獨(dú)占一行

Hr標(biāo)簽（Horizontal Rule）

• 作用：
  • 在瀏覽器上顯示一條分割線
• 格式（單標(biāo)簽）：

<hr />

• 注意點(diǎn)：
  • 單獨(dú)占據(jù)一行
  • hr標(biāo)簽可以寫/也可以不寫/，若不寫/肮韧，則是按照HTML規(guī)范來編寫融蹂，若寫則是按照XHTML規(guī)范來編寫——按照高級開發(fā)工具自動(dòng)生成的規(guī)格來寫，比如：Webstorm中弄企，Tab鍵自動(dòng)生成的為

    ---

img標(biāo)簽

• 作用：
  • 告訴瀏覽器要顯示一張圖片
• 格式：

<img src="">

src即為source的縮寫超燃，為需要顯示的圖片名稱

• 注意點(diǎn)：
  • img標(biāo)簽不會獨(dú)占一行
• 其余屬性：
  • width：寬度
  • height：高度
  • title：告訴瀏覽器當(dāng)鼠標(biāo)懸停在圖片上時(shí)，需要彈出的描述框中顯示什么內(nèi)容
  • alt：告訴瀏覽器當(dāng)需要顯示的圖片找不到時(shí)顯示什么內(nèi)容

br標(biāo)簽

• 作用：
  -作用：換行
• 格式：

<br>

• 注意點(diǎn)：
  • 可以連續(xù)使用拘领，使用多少個(gè)就換多少行
  • 不另起一個(gè)段落換行意乓，在企業(yè)開發(fā)中很少使用

相對路徑和絕對路徑

• 給src屬性賦值有兩種方式：相對路徑和絕對路徑
• 通過相對路徑賦值：
  • 同級
    • 圖片和.html文件存儲在同一個(gè)文件夾中
    • 格式：

<src="xxxx.jpg">

• 下級
  • 存儲圖片的文件夾和.html文件在同一個(gè)文件夾中
  • 格式：

<src="image/xxxxx.jpg">

• 上級
  • 存儲圖片的位置和存儲代碼的文件夾在同一個(gè)文件夾中
  • 格式：

<src="../xxxxx.jpg">

(../表示從當(dāng)前位置找到上一級文件夾)

• 通過絕對路徑賦值（可移植性不好）
  • 從指定的盤符開始查找
  • 格式：

<src="C:\xxx\xxx\xxx.jpg">

• 注意：
  • 路徑中不能出現(xiàn)中文
  • 相對路徑指定不能跨盤符

a標(biāo)簽

• 作用：控制頁面之間的跳轉(zhuǎn)
• 格式：

<a href="目標(biāo)界面">內(nèi)容</a>

• 注意點(diǎn)：
  • 不僅能讓文字被點(diǎn)擊，還能讓圖片被點(diǎn)擊
  • 一個(gè)a標(biāo)簽必須有一個(gè)href屬性
  • 若通過a標(biāo)簽的href屬性指定一個(gè)URL地址约素，必須加上http://或https://
• target屬性
  • 作用：控制如何跳轉(zhuǎn)
  • _self:不新建界面届良，在當(dāng)前頁面跳轉(zhuǎn)
  • _blank:在新的選項(xiàng)卡中跳轉(zhuǎn)，即新建界面跳轉(zhuǎn)
• title屬性：控制鼠標(biāo)懸停時(shí)顯示提示文本
• 假鏈接
  • 點(diǎn)擊之后不會跳轉(zhuǎn)的鏈接
  • 格式：

<a href="#">XXXX</a>
<a href="javascript:">XXXX</a>

• 區(qū)別：
  • #：自動(dòng)回到網(wǎng)頁頂部圣猎，網(wǎng)頁中回到頂部可以用此方法
  • javascrpt: ：不會回到網(wǎng)頁頂部
• 錨點(diǎn)
  • 通過a標(biāo)簽跳轉(zhuǎn)到指定位置
  • 給目標(biāo)位置的標(biāo)簽添加一個(gè)id屬性士葫，指定一個(gè)獨(dú)一無二的值
  • 告訴a標(biāo)簽需要跳轉(zhuǎn)的目標(biāo)標(biāo)簽的id屬性的值
• 格式：

<a href="#center">跳轉(zhuǎn)到中部</a>
<h2 id="center">我是中部</h2>

• 注意點(diǎn)：
  • 通過a標(biāo)簽跳轉(zhuǎn)到指定位置時(shí)，是沒有過渡動(dòng)畫的送悔，而是直接跳轉(zhuǎn)到指定位置
  • 也可以跳轉(zhuǎn)到其他界面的指定位置
    • 格式：

<a href="13-錨點(diǎn)測試.html#three" target="_blank">跳轉(zhuǎn)到錨點(diǎn)測試界面</a>
<h2 id="three">我是錨點(diǎn)測試界面3</h2>

base標(biāo)簽

• 專門用來統(tǒng)一指定當(dāng)前網(wǎng)頁中的所有的超鏈接的打開方式
• 必須寫在head的開始和結(jié)束標(biāo)簽內(nèi)
• base標(biāo)簽和a標(biāo)簽內(nèi)同時(shí)指定target值時(shí)慢显，以a標(biāo)簽內(nèi)的為主
• 格式：

<base target="_blank">