web前端之html基礎複習
------------恢復內容開始------------
web前端（網頁前端開發）主要由html超文字標記語言，css層疊樣式表，JavaScript指令碼語言組成
html基礎
html主要由標籤與內容組成
標籤結構
<!DOCTYPE html>
<html leng="en">
<!--語言選擇-->
<html>
<head>
<meta charset="utf-8">
<!-- 編碼選擇-->
<title>網頁標題</title>
</head>
<body>
</body>
</html>
標籤
標籤（單標籤，雙標籤），
標籤又稱元素（塊級元素，行內元素）
<></>,</>
塊級元素：獨佔一行可設定寬高可包含行內元素
例如：div（佈局標籤），p（段落標籤），h1，....，h6（字型大小，1最大6最小），ul（無序列表），ol（有序列表），li（列表項）,table，hr（分割線），br（換行）
注：div與p具有格式上的區別不應濫用具體辨析請訪問https://zhidao.baidu.com/question/177279208803866604.html
行內元素：共享一行，不可設定寬高（img標籤除外），外邊距只能設定左右不能設定上下
例如：span（文字框）,sub,sup,a,i,b，input
兩者顯示轉換
塊轉行內：display-inline；
行內轉塊：display：block；
塊，行內元素轉換為行內塊：display：inline-block
轉義字元：有時候程式碼文字上傳，瀏覽器會無法識別一些特殊符號如<>,空格等這時候就需要轉義字元幫助說明
 ；（空格）
<；(小於號<)
>；（大於號>)
© （© ）
公共屬性（修飾當前的元素）
id（唯一性）
class（類名屬性，一個元素可有多個屬性）
style（內聯樣式屬性，可設定寬高，顏色背景等）
align（設定水平居中屬性，有值left，center，right）
重要標籤
<div></div><p></p><span></span>
<img>
<a>
<input>
<elect></elect>
<table></table>
<ol></ol>
<ul></ul>
<label></label>
<textarea></textarea>
超連結：
<a herf="網頁地址、圖片地址、錨點位置" target="_self/_blank">內容</a>
功能一：跳轉
點選文字跳轉網頁
<a herf="http://www.baidu.com" target="_self">百度一下</a>
為了不讓連線顯得很平常，我們通常會改變他的初始顏色（這需要使用偽選擇器），並去掉下劃線等操作
去掉下劃線text-decoration:none;
點選文字跳轉圖片
<a href="圖片地址">點選文字跳轉圖片</a>
點選圖片跳轉網頁
<a href="http://www.baidu.com"><img src="圖片地址"></a>
功能二：壓縮檔案直接下載
<a herf="1.zip">你想要的壓縮檔案</a>
功能三：支援js程式碼
<a href="javascript:document.write('666666')">點選</a>
功能四： 支援返回頁面頂部
<div style="height: 5000px"></div>
<a href="#">返回頁面頂部</a>
功能五：錨點
錨點
步驟1 : 定義一個錨點(做一個記號)
可以通過a的name屬性實現定義
可以通過任意標籤的id屬性值定義
步驟2 : 通過a連結實現錨點的跳轉
<a href="#錨點名稱" >錨點的跳轉</a>
<!--步驟2 跳轉指定錨點-->
<a href="#red">女生專區</a>
<a href="#dy">大爺專區</a>
<a href="#dm">大媽專區</a>
<a href="#om">歐美專區</a>
<a href="#rh">日韓專區</a>
<!-- 跨頁面的錨點定義-->
<a href="02_hw.html#li">李白</a>
<!--步驟1 定義錨點 做標記-->
<div style="height: 500px;"></div>
<a href="" name="red">女生專區</a>
<div style="height: 500px;"></div>
<div style="height: 500px;background: #0ACD37" id="dy">大爺專區</div>
<div style="height: 500px;background: pink" id="dm">大媽專區</div>
<div style="height: 500px;background: aqua" id="om">歐美專區</div>
<div style="height: 500px;background: burlywood" id="rh">日韓專區</div>
<div style="height: 500px;"><a href="#">返回頁面頂部</a></div>
表格
表格目前很少被使用
應用: 購物車 很老的專案可能看的到
語法:
table 包裹所有的內容
tr 行
td 列
table的屬性
border 邊框
width 寬
height 高
cellspacing 邊框和邊框的距離 外邊距 一般給0
align 水平排列 center居中
cellpadding 內容和邊框之間的距離 一般給不給
bgcolor: 背景顏色的簡寫
tr的屬性
width無效
align
height
bgcolor
valign 垂直方向的定義 top頂部 middle中間 bottom底部
td的屬性
width 支援 同一列都會變
height 支援 同一行都會變
align
bgcolor
不規則表格的實現 格子和格子之間的合併
rowspan 行與行之間合併
colspan 列與列之間合併
遵循 從上到下 從左到右的順序進行合併
合併了n個格子 就需要刪除n-1個格子
案例演示