html標(biāo)簽

html 雙標(biāo)簽

head 雙標(biāo)簽，網(wǎng)頁的一些配置
meta 單標(biāo)簽，規(guī)范我們使用網(wǎng)頁的字符集。中文：gb2312(gbk)暖释，外文：utf-8

title 網(wǎng)頁標(biāo)題

1.h系列

• headline，分為六個等級墨吓，標(biāo)示一到六級標(biāo)題球匕，級別依次降低，重要程度也是依次降低帖烘。

• 約定俗成亮曹，一般一個頁面里h1標(biāo)簽權(quán)重最高，最便于搜索引擎搜索蚓让，一個頁面只寫一個h1標(biāo)簽乾忱，而且一般會給到logo

• 六級標(biāo)簽都是單獨書寫，不存在嵌套關(guān)系

  <!-- h標(biāo)簽 -->
  <h1 class="title biaoti t" id="1234">一級標(biāo)題</h1>
  <h2>二級標(biāo)題</h2>
  <h3>三級標(biāo)題</h3>
  <h4>四級標(biāo)題</h4>
  <h5>五級標(biāo)題</h5>
  <h6>六級標(biāo)題</h6>
  

6級h標(biāo)簽

2.p標(biāo)簽

paragraph历极，段落，文本級標(biāo)簽衷佃。只能放文本趟卸，圖片，表單元素氏义，或者廢棄的標(biāo)簽（font等）

<!-- h標(biāo)簽 -->
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
<p>第五段</p>

3.img標(biāo)簽

image锄列，圖片，引入一張圖片惯悠，屬于特殊文本邻邮，

• 單標(biāo)簽<img />

• 可插入圖片類型：png，jpg克婶，gif筒严。

• img標(biāo)簽屬性：
  src：source，資源情萤，表示圖片的來源鸭蛙，路徑，必須寫的屬性筋岛。
  width: 寬娶视，單位px，可以省略單位。設(shè)置后會等比例縮放圖片
  height: 高肪获，同上
  title：設(shè)置提示文本寝凌，鼠標(biāo)懸停在圖片上后顯示
  border：邊框，一般用css來控制孝赫，這里就不介紹了
  alt: 替換內(nèi)容硫兰，用做當(dāng)前圖片不能正確顯示時來顯示的內(nèi)容

   <!-- img標(biāo)簽 --> 
   <img src="preview.png" width="300" title="霉霉" alt="霉霉的圖片">
  

路徑

文件的位置，有相對路徑和絕對路徑

1.相對路徑

從html文件本身出發(fā)寒锚，找文件位置

• 同級查找（文件與html在同一文件夾內(nèi)）：直接屬性文件名字（包括文件名和擴展名）

• 子級查找（文件在html所在文件夾的子文件中）：需要加上子文件夾的名字劫映，有多級文件夾，都需要寫上

• 上級查找（文件在html在文件夾的上級文件夾中）：上級文件夾可以用..lai代替刹前，注意..只能代替一個泳赋，多級的話：../../../../

    <img src="preview.png">  同級查找
    <img src="Images/preview.png">  子級查找
    <img src="../preview.png">  上級查找
  

綜合事例：如下，在我們標(biāo)簽網(wǎng)頁的上級photo文件夾中也有一張preview.png圖片喇喉，這時候該怎么取到這張圖片呢

文件結(jié)構(gòu)

    <img src="../../photo/preview.png"> 

說明：首先祖今，圖片處于上級，但是呢拣技，是在上級的文件夾中千诬，要獲取上級文件夾，首先的得找到更高級的文件夾所以能得向上../../兩級進入Document文件夾膏斤，然后進入photo文件夾../photo/徐绑，最后再查找我們所需要的文件../photo/preview.png

2.絕對路徑

絕對路徑是從盤符出發(fā)，進行查找

    //本地圖片
    <img src="/Users/mac1/Documents/preview.png">
    //網(wǎng)絡(luò)圖片
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573573958279&di=c28b56f5c4c2a19d200e9701c42f5a85&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201503%2F21%2F20150321175635_HEWK4.jpeg">

4.a標(biāo)簽

anchor莫辨，錨傲茄，超鏈接的縮寫，雙標(biāo)簽沮榜，可以跳轉(zhuǎn)到相應(yīng)的網(wǎng)址
標(biāo)簽屬性：
href：hypertext reference 超文本傳輸協(xié)議
target: 目標(biāo)盘榨，設(shè)置我們的跳轉(zhuǎn)是否打開新窗口。默認(rèn)在原窗口打開蟆融，添加屬性值：“_blank”后草巡，在新窗口打開
title: 設(shè)置提示文本，鼠標(biāo)懸停在圖片上后顯示

<!-- a標(biāo)簽：原頁面跳轉(zhuǎn) -->
<a href="label2.html">跳轉(zhuǎn)到label2</a>
<!-- a標(biāo)簽：新頁面跳轉(zhuǎn) -->
<a  target="_blank" title="百度搜索">
    百度一下
    <img src="paperplane.png" width="30">
</a>

跳轉(zhuǎn)：
1.打開新頁面（見上文）
2.跳轉(zhuǎn)原頁面（見上文）
3.頁面內(nèi)位置跳轉(zhuǎn)
4.新頁面位置跳轉(zhuǎn)

<!-- #號加id -->
<a href="#1234">一級標(biāo)題</a>

位置跳轉(zhuǎn)有兩種方法：
1.需要借助id屬性

<!--跳轉(zhuǎn)鏈接 + #號 + id -->
<a href="label2.html#9981">跳轉(zhuǎn)到label2中的《我們不一樣》</a>
<!--設(shè)置id -->
<p id="9981">我們不一樣</p>

2.在需要的位置加入一個a標(biāo)簽型酥，不用寫href屬性山憨，設(shè)置name屬性，命名與id一樣

<!--跳轉(zhuǎn)鏈接 + #號 + name -->
<a href="label2.html#snowolf">跳轉(zhuǎn)到label2中的snowolf</a>
<!--位置a標(biāo)簽并添加name屬性 -->
<a name="snowolf"></a>

5.列表

將一些內(nèi)容或樣式類似相近冕末，相關(guān)的內(nèi)容一起書寫

• 有三種列表：無序列表萍歉，有序列表，定義列表

1.無序列表

• <ul></ul>档桃，unordered list 無序列表枪孩，添加一組無序列表。
• <li></li>，list item蔑舞，列表項拒担。
• ul和li 必須成對兒出現(xiàn)，它們之間是嵌套關(guān)系攻询，ul中可以存在一個或多個li
• 快速生成方法：輸入ul>li*4从撼，然后按tab鍵，其他嵌套等類似钧栖，自己實踐

<!-- ul標(biāo)簽 -->
<ul>
    <li>春天</li>
    <li>夏天</li>
    <li>秋天</li>
    <li>冬天</li>
</ul>

• li標(biāo)簽是一個經(jīng)典的容器級標(biāo)簽低零，可以嵌套任意標(biāo)簽，甚至繼續(xù)嵌套列表標(biāo)簽
• li標(biāo)簽并不會添加小圓點等樣式拯杠，需自己用css來設(shè)置掏婶，沒有順序之分

<!-- ul標(biāo)簽 -->
<ul>
    <li>文字</li>
    <li>
        <img src="paperplane.png" width="30">
    </li>
    <li>
        <h2>地形</h2>
        <ul>
            <li>平原</li>
            <li>高原</li>
            <li>丘陵</li>
        </ul>
     </li>
</ul>

無序列表

2.有序列表

• <ol></ol>，ordered list 無序列表潭陪，添加一組有序列表雄妥。與無序列表相似，不同的是他默認(rèn)會添加一個數(shù)字前綴依溯，實際情況是我們會清除這個默認(rèn)樣式老厌，然后通過css來添加

  <ol>
      <li>餐飲</li>
      <li>娛樂</li>
      <li>
          <p>服飾</p>
             <ol>
                 <li>女裝</li>
                 <li>男裝</li>
                 <li>童裝</li>
             </ol>
      </li>
  </ol>
  

有序列表

3.定義列表

• <dl></dl>，definition list黎炉， 定義列表枝秤，

• <dt></dt>，definition title拜隧，定義標(biāo)題宿百。

• <dd></dd>，definition description洪添，定義描述，對標(biāo)題的描述雀费。

• dt和dd都是容器級標(biāo)簽

• dl同時嵌套dt和dd干奢，其中dd可以有多個，也可以不添加盏袄》蘧快捷鍵為dl>(dt+dd)*3，再按tab鍵辕羽。還有dl>(dt+dd*3)*3等等逛尚，自己實踐...

  <!-- dl標(biāo)簽 -->   
  <dl>
      <dt>胡歌</dt>
          <dd>影視男演員</dd>
          <dd>作品：仙劍系列，《偽裝者》等等</dd>
  
      <dt>劉德華</dt>
          <dd>作品：《今天》刁愿，《練習(xí)》等等</dd>
          <dd>歌手绰寞，演員</dd>
            
      <dt>高圓圓</dt>
          <dd>演員</dd>
  </dl>
  

定義列表

6.div和span

通常稱為盒子，沒什么特殊語義，常用來布局

• div： division滤钱，范圍觉壶，區(qū)域，分割件缸。大范圍铜靶，可以嵌套任意標(biāo)簽
• span：小范圍，小區(qū)域的布局使用他炊，文本級標(biāo)簽争剿，不能嵌套容器級標(biāo)簽，一般認(rèn)為p>span>a