基礎(chǔ)標(biāo)簽##

• H標(biāo)簽：
  作用: 用于給文本添加標(biāo)題語義
  格式:<h1>xxxxxx</h1>
  注意點: H標(biāo)簽是用來給文本添加標(biāo)題語義的, 而不是用來修改文本的樣式的
  H標(biāo)簽一共有6個, 從H1~H6, 最多就只能到6, 超過6則無效
  在瀏覽器中會獨占一行
  在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)簽：
  作用：告訴瀏覽器哪些文字是一個段落
  格式：<p>xxxxxx</p>
  注意點：在瀏覽器中會獨占一行

• Hr標(biāo)簽(Horizontal Rule)
  作用：在瀏覽器中顯示一條分割線
  格式：

  ---

  
  注意點：在瀏覽器中會獨占一行
  HR標(biāo)簽可以寫/也可以不寫/, 如果不寫/那么就是按照HTML的規(guī)范來編寫, 如果寫上/那么就是按照XHTML的規(guī)范來編寫.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有寫不寫都可以.以后我們在做前端開發(fā)時坊萝， 按照高級開發(fā)工具的提示來寫即可.
  由于hr標(biāo)簽是用來修改樣式的, 所以不推薦使用. 今后開發(fā)中添加水平線一般都使用CSS盒子來做

• HTML注釋(Annotation)
  作用：用來解釋某一段程序或者某一行代碼是什么意思胎食，方便直接或程序員之間的交流
  格式：
  快捷鍵：ctrl+/
  注意點：被注釋的內(nèi)容無法在瀏覽器中顯示喂江，注釋是寫給自己看的哨鸭。
  注釋不能嵌套使用

• img標(biāo)簽(image)
  作用：在網(wǎng)頁上插入一張圖片
  格式：[圖片上傳失敗...(image-107814-1542794773836)]

  標(biāo)簽屬性：寫在標(biāo)簽中K="V"這種格式的文本我們稱之為標(biāo)簽屬性
  屬性名稱 作用
  src(source) 告訴瀏覽器需要插入的圖片路徑, 以便于瀏覽器到該路徑下 找到需要插入的圖片
  alt(alternate) 規(guī)定圖像的替代文本, 只有在src指定的路徑下找不到圖片,才會顯示alt指定的文本
  title 懸停文本(介紹這張圖片, 只有在鼠標(biāo)移動到圖片上時才會顯示)
  height 設(shè)置圖片顯示的高度
  width 設(shè)置圖片顯示的寬
  注意點:
  img標(biāo)簽添加的圖片默認(rèn)不是占一整行空間
  如果想讓圖片等比拉伸, 只寫高度或者寬度即可

相對路徑和絕對路徑：圖片路徑分為兩種, 一種是絕對路徑, 一種是相對路徑, 在企業(yè)級開發(fā)中沒有人使用絕對路徑

絕對路徑：從電腦的具體盤符開始尋找我們需要的資源
[圖片上傳失敗...(image-659607-1542794773837)]
以上代碼表示在F盤下查找lnj文件夾, 然后在lnj文件夾下查找girl.png圖片

相對路徑：一個文件相對于另外一個文件的位置尋找我們需要的資源
[圖片上傳失敗...(image-1d5b0f-1542794773837)]
假設(shè)html文件和girl.png都在lnj文件夾下, 以上代碼表示在lnj文件夾下查找girl.png圖片

相對路徑幾種查找方式

• 同級
  直接編寫, 例如: girl.png
  加上./ 編寫, 例如./girl.png
  ./代表當(dāng)前目錄, ./girl.png代表在當(dāng)前目錄下查找
• 下級
  直接編寫, 例如abc/girl.png
  加上./ 編寫, 例如./abc/girl.png
  相對當(dāng)前目錄有幾個文件夾,就在后面依次補全幾個文件夾名稱即可, 例如 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

• br標(biāo)簽(Break)
  作用：讓內(nèi)容換行
  格式：
  
  注意點：br的意思是不另起一個段落進(jìn)行換行, 而網(wǎng)頁中99.99%需要換行時都是因為另起了一個段落, 所以應(yīng)該用p來做

• 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)移動到超鏈接上時才會顯示)

a標(biāo)簽其它用法
假鏈接(本質(zhì)是跳轉(zhuǎn)到當(dāng)前頁面)

 格式  <a href="#">文字</a>

 格式  <a href="javascript:">文字</a>

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

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

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

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

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

格式: <a href="01-錨點鏈接.html#location">跳轉(zhuǎn)到指定位置</a>

只需要在01-錨點鏈接.html頁面添加一個id位置即可

列表標(biāo)簽##

• 無序列表(unordered list)
  作用: 給一堆內(nèi)容添加無序列表語義(一個沒有先后順序整體), 列表中的條目是不分先后
  格式：<h4>選擇居住城市(CN)</h4>
  <ul>
  <li>北京</li>
  <li>上海</li>
  <li>廣州</li>
  <li>鐵嶺</li>
  </ul>

應(yīng)用場景： - 導(dǎo)航條璧亮、商品列表聂受、新聞列表等

注意點：瀏覽器會給無需列表自動添加先導(dǎo)符號但是一定一定千萬千萬要記住, ul的作用并不是給文字添加小圓點, 而是增加無序列表的語義
ul是一個組標(biāo)簽, 一定是一坨一坨的出現(xiàn), 也就是說li標(biāo)簽不能單獨存在, 必須包裹在ul里面
由于ul和li是一個整體, 所以ul里面不推薦包裹其它標(biāo)簽, 永遠(yuǎn)記住ul里面最好只寫li標(biāo)簽
雖然ul中推薦只能寫li標(biāo)簽, 但是li標(biāo)簽是一個容器標(biāo)簽, li標(biāo)簽中可以添加任意標(biāo)簽, 甚至可以添加ul標(biāo)簽

• 有序列表(ordered list)
  作用：給一堆內(nèi)容添加有序列表語義(一個有順序整體), 列表中的條目有先后之分
  格式：<h4>中國房價排行</h4>
  <ol>
  <li>北京</li>
  <li>上海</li>
  <li>廣州</li>
  <li>鐵嶺</li>
  </ol>
  應(yīng)用場景：排行榜

注意點：ol和ul就是語義不一樣酥馍，怎么使用都是一樣的以及注意點都一樣

• 定義列表(definition list)
  作用：給一堆內(nèi)容添加列表語義, 通過dt羅列出列表的條目, 然后再通過dd給每個條目進(jìn)行相應(yīng)的描述

       格式：<dl>
                       <dt>北京</dt>
                       <dd>國家的首都, 看升國旗的地方</dd>
                       <dt>上海</dt>
                       <dd>魔都, 遍地是黃金的地方</dd>
                 </dl>
  

應(yīng)用場景;網(wǎng)站底部相關(guān)信息故慈、但凡看到一堆內(nèi)容都是用于描述某一個內(nèi)容的時候就要想到dl

注意點：- dl是一個組標(biāo)簽, 一定是一坨一坨的出現(xiàn), 也就是說dt和dd標(biāo)簽不能單獨存在, 必須包裹在dl里面
由于dl和dt板熊、dd是一個整體, 所以dl里面不推薦包裹其它標(biāo)簽
dd和dt和li標(biāo)簽一樣是容器標(biāo)簽, 里面可以添加任意標(biāo)簽
定義列表非常靈活, 可以給一個dt配置多個dd, 但是最好不要出現(xiàn)多個dt對應(yīng)一個dd, dd的語義是描述離它最近的一個dt, 所以其它dt相當(dāng)于沒有描述, 而定義列表存在的意義就是既可以列出每一個條目又可以對每一個條目進(jìn)行描述
定義列表非常靈活, 可以將多個dt+dd組合拆分為多個dl

表格標(biāo)簽##

作用:以表格形式將數(shù)據(jù)顯示出來, 當(dāng)數(shù)據(jù)量非常大的時候, 表格這種展現(xiàn)形式被認(rèn)為是最為清晰的一種展現(xiàn)形式

格式:
table定義表格
tr定義行
td定義單元格

 <!--先定義一個表格, 然后通過tr告訴瀏覽器這個表格中一共有多少行, 然后再通過td告訴瀏覽器這一行中一共有多少個元素(一共有多少列)-->
 <table>
 <tr>
    <td></td>
    <td></td>
 </tr>
 <tr>
    <td></td>
    <td></td>
 </tr>
 </table>

able代表整個表格, 也就是一堆table標(biāo)簽就是一個表格
tr標(biāo)簽代表整個表格中的一行數(shù)據(jù), 也就是說一對tr標(biāo)簽就是表格中的一行
td標(biāo)簽代表表格中一行中的一個單元格, 也就是說一對td標(biāo)簽就是一行中的一個單元格