技術標籤：html

1、頁面佈局的劃分和標籤的巢狀：

HTML網頁基本標籤的巢狀規則：
1)塊元素可以巢狀行元素
2)行元素可以巢狀行元素
3)行元素不可以巢狀塊元素
4)文字類塊元素不可以巢狀塊元素
5)容器類塊元素可以巢狀塊元素

2、塊級元素和內聯（行內）元素各自的特點？

html標籤分為兩種，內聯元素和塊級元素。

塊級元素：一般是其它元素的容器，可容納內聯元素和其它塊級元素，塊級元素排斥其它元素與其位於同一行，可設定寬度(width)高度(height)屬性，正常流中的塊級元素會垂直襬放。常見塊狀元素為“div”。（矩形）
內聯元素：（行內元素）：內聯元素只能容納文字或者其他內聯元素，是塊級元素的後代，它允許其他內聯元素與其位於同一行，不能設定高度（height）和寬度（width）。常見內聯元素為“a”。（線）

塊級元素特點：
1)總是在新行上開始，佔據一整行，其寬度預設自動填滿其父元素寬度
2)高度(height)、寬度（width）、行高以及外邊距(margin)和內邊距(padding)都可控制
3)他可以容納內聯元素和其他塊元素
4)給塊級元素加display:inline屬性，成為內聯元素
內聯元素特點：
1)和其他元素都在一行上
2)高度、行高以及外邊距內邊距不可改變
3)寬度就是它的文字或圖片的寬度，不可改變
4)內聯元素只能容納文字或者其他內聯元素
5)給內聯元素加display:block屬性，成為塊元素

3、常用標籤有哪些，分別有什麼含義
1、H系列標籤
作用：用於給文字新增標題語義

• H標籤用來給文字新增語義的，而不是用來修改文字的樣式的
• H標籤一共有6個，從H1~H6,最多就只能到6，超過6無效
• 被H系列標籤包裹的內容會獨佔一行
• 在H系列的標籤中，H1最大，H6最小
• 在企業開發中，一定要慎用H系列的標籤，特別是H1標籤，在企業開發中一般情況下，一個介面只能出現一個H1標籤（H1一般用來描述整個頁面中最重要的內容）

2、P標籤
作用：告訴瀏覽器哪些文字是一個段落
格式：<p></p>
注意點：在瀏覽器中會單獨佔一行

3、Hr標籤
作用：在瀏覽器上顯示一條分割線
格式：<hr/>
注意點：在瀏覽器中會單獨佔一行

4、img標籤
作用：告訴瀏覽器我們需要顯示一張圖片
格式：<img src="">
注意點：

• 不會獨佔一行
• 如果又想指定長款，又不想讓圖片變形，可以只指定長寬中的其中一個值，只要指定了高度（寬度），系統會自動根據高度計算出寬度（高度）
  其餘屬性：
• width:寬度
• height:高度（將來需要顯示的圖片的高度，寬度）
• title:用於告訴瀏覽器，當滑鼠懸停在圖片上時，需要彈出的描述框
• alt：其實就是alternate的縮寫，用於告訴瀏覽器，當需要顯示的圖片找不到時顯示什麼內容

5、br標籤：
作用：換行
格式：<br>
注意點：

• 多個br標籤可以連續使用，使用了多少br標籤就會換多少行
• br標籤這一段還沒有說完，只是單純的換行，代表著不另起一段，而在企業開發中換行一般是需要另起一段，所以企業開發中很少使用br標籤

6、a標籤（3個屬性）：
作用：用於控制頁面與頁面之間跳轉
格式：<a href="指定需要跳轉的目標介面">需要展現給使用者檢視的內容</a>
屬性：
target屬性：這個屬性的作用就是專門用於控制跳轉

• _self：用於在當前選項卡中跳轉，也就是不新建介面跳轉，預設為_self
• _blank：用於在新的選項卡中跳轉，也就是新建介面跳轉
  形式：target="_self"
  title屬性：與img標籤中的title一樣，都是用來控制滑鼠懸停時顯示提示文字的
  形式：title=“提示內容”
  注意點：
• a標籤不僅可以讓文字可以點選，還可以讓圖片也能夠被點選
• 一個a標籤必須有一個href屬性，否則a標籤不知道要跳轉到什麼地方
• 如果通過a標籤的href屬性指定一個URL地址，那麼必須在地址前面加上http://或https://
• a標籤的href屬性除了可以指定一個網路地址以外，還可以指定一個本地地址

7、base標籤
作用：base標籤就是專門用來統一的指定當前網頁中所有的超連結（a標籤）需要如何開啟
形式：<base target="_blank">
注意點：

• base標籤必須寫在head標籤的開始標籤和結束標籤之間
• 如果即在base中指定了target又在a標籤中指定了target，那麼瀏覽器會按照a標籤中指定的來執行

8、假連結
作用：點選之後不會跳轉的連結稱為假連結，在企業開發前期其他介面都沒寫出來，那麼我們就不能知道應該跳轉到什麼地方，所以就只能使用假連結來代替。當專案後期其他介面都已經完成時再將假連結替換為真連結。
形式：

• #：<a herf="#">點我呀</a>
• javascript：<a herf="javascript：">點我呀</a>
  區別：假連結#會自動回到網頁的頂部，而假連結javascript則不會返回到網頁的頂部

9、列表標籤
作用：給一堆資料新增列表語義，也就是告訴瀏覽器這一堆資料是一個整體。
分類：

• 無序列表（最多)（unordered list）
• 有序列表（最少）(ordered list)
• 定義列表（其次）(definition)

無序列表
作用：給一堆資料新增列表語義，並且這一堆資料中的所有資料沒有先後之分
形式：

<ul>
<li>需要顯示的條目內容</li>
</ul>

注意點：

• ul標籤是用來給一堆資料新增列表語義的，而不是用來給他們新增小圓點的
• ul標籤和li標籤是一個整體，是一個組合，所以一般情況下ul標籤和li標籤都是一起出現的，不會單個出現。
• 由於ul標籤和li標籤是一個組合，所以ul標籤中不推薦包含其他標籤，也就是說以後你在ul標籤中只會看到li標籤。(但li標籤可以放其他標籤來豐富介面，並且還可以新增ul標籤來豐富介面)

有序列表
作用：給一堆資料新增列表語義，並且這一堆資料中所有的資料都有先後之分
形式：

<ol>
<li>需要顯示的條目內容</li>
</ol>

其他用法同無序列表ul

定義列表
作用：
給一堆資料新增列表語義
先通過dt標籤定義列表中的所有標題，然後在通過dd標籤給每個標題新增描述資訊。
形式：

<dl>
<dt></dt>
<dd></dd>
</dl>

應用：

• 做網站尾部的相關資訊
• 做圖文混排
  注意點：
• 和ul/ol一樣，dl和dt/dd是一個整體，所以他們一般情況下不會單獨出現，都是一起出現
• 和ul/ol一樣，由於dl和dt/dd是一個組合標籤，所以dl中建議只放dt和dd標籤
• 一個dt可以沒有對應的dd,也可以有多個對應的dd,但是無論有或者沒有dd都不推薦使用；一般推薦使用一個dt對應一個dd.
• 與li標籤一樣，當需要豐富介面是，可以繼續新增別的標籤。
  dt：definition title 用來定義列表中的標題
  dd：definition description 用來定義標題對應的描述的

十、表格標籤
作用：用來給一堆資料新增表格語義
格式：

<table>
<tr>
<td></td>
</tr>
</table>

其實表格標籤中的table代表整個表格，也就是一對table標籤就是一個表格；tr標籤代表表格中的一行；td標籤就是一行中的一個單元格
注意點：

• 表格標籤中有一個邊框屬性border，這個屬性決定了邊框的寬度，預設情況下，這個屬性的值是0，所以看不到邊框
  屬性：（瞭解）
• 寬度和高度的屬性：可以給table標籤和td標籤使用
• 表格的寬度和高度預設是按照內容的尺寸來調整的，也可以通過給table標籤設定width/height屬性的方式來手動指定表格的寬度和高度
• 如果給td標籤設定width/height屬性，會修改當前單元格的寬度和高度，不會影響整個表格的寬度和高度
• 水平對齊和垂直對齊的屬性：其中水平對齊可以給table標籤、tr標籤和td標籤使用，垂直對齊只能給tr標籤和td標籤使用
• 給table標籤設定align屬性，可以控制表格在水平方向的對齊方式
• 給tr標籤設定align屬性，可以控制當前行中所有單元格內容的水平方向的對齊方式
• 給td標籤設定align屬性，可以控制當前單元格中內容在水平方向的對齊方式
• 給tr標籤設定valign屬性,可以控制當前行中所有單元格中的內容在垂直方向的對齊方式
• 給td標籤設定valign屬性，可以控制當前單元格中內容在垂直方向的對齊方式
• 外邊距和內邊距的屬性：只能給table標籤使用
• 外邊距（cellspacing）：單元格和單元格之間的距離，預設為2px
• 內邊距（cellpadding)：就是單元格的邊框和文字之間的間隙，預設為1
• rowspan:用來指定單元格縱向跨越的行數，合併行的；rowspan=2，合併兩行
• colspan:用來指定單元格橫向跨越的列數，合併列的；colspan=2，合併兩列

注意點：如果td中設定了align/valign屬性，tr中也設定了align/valign屬性，那麼單元格中的內容會按照td中設定的來對齊

小知識：
版權符號：&copy