標籤：寬度 content 根目錄 表格 html cli 壓縮 div check
HTML之基本結構
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>標題</title>
<link href="XXX.css" rel="stylesheet">
<script type="text/javascript" src="XXX.js"></script>
</head>
<body>
本文內容
<script>JS動態指令碼</script>
<body>
</html>
[meta標籤]
1.charset屬性：設定文檔字元編碼格式。
>>>寫法： <meta charset="UTF-8">
>>>常見的編碼格式：
GB-2312：國標碼，簡體中文
GBK：擴充的國標碼，簡體中文
UTF-8：萬國碼Unicode碼，基本相容各國語言
2.http-equiv屬性：需配合content屬性使用，主要聲明瀏覽器如何編譯檔案。
>>>寫法：<meta http-equiv="屬性值" content="屬性值詳細內容">
>>>常用屬性值：Content-Type HTML4.01之前的文檔內容編碼聲明
refresh 網頁重新整理 set-Cookie設定瀏覽器cookie緩衝
3.name屬性：需配合content屬性使用。主要用於給搜尋引擎提供必要資訊。
>>>寫法:<meta name="屬性值" content="屬性值詳細內容"
>>>重要屬性值：author:作者，聲明網站作者，常用公司網站表示
keyword：網站關鍵字，多個關鍵字，用英文逗號分隔
description：網頁描述，搜尋引擎顯示在title下的描述內容
[link標籤]
1.作用：用於為網頁連結各種檔案。
2.常用屬性：
rel：用於表明被連結檔案與當前檔案的關係。
此處選icon，表明被連結圖片是當前網頁的icon表徵圖。
type：表明被連結檔案是什麼類型，可以省略。
href：表明連結檔案的地址。
[title]
網頁的標題，即網頁選項卡上的文字
HTML之塊級標籤
[常見的塊級標籤]
標題標籤<h1></h1>……<h6></h6>
水平線<hr/>
段落<p></p>
換行<br/>
引用<blockquote></blockquote >
預格式<pre></pre>
[有序列表 ol order list]
[無序列表ul unorder list]
[定義描述列表]
<dl>
<dt>標題</dt>
<dd>描述項</dd>
</dl>
一般情況下，標題dt只有一項，描述項dd可以有N多項
瀏覽器顯示時，標題頂格顯示，dd會縮排顯示
[圖片組合標籤figure]
1.<figure></figure> 有兩個子標籤：
<img src="">:一幅圖片，src表示圖片路徑
<figcaption></figcaption> 圖片的標題
2.瀏覽器顯示效果：圖片與標題上下排列，同時圖片和標題縮排一個單位。
[分區標籤div]
常配合CSS使用，為網頁中的最常用分區標籤，常用於網頁布局使用
HTML之行級標籤
[常見的行級標籤]
span（行內文本）
img（圖片）
strong（強調）
a（超連結）
u（底線）
[img（圖片）]
1、src：表示圖片引用路徑。
>>>路徑地址的寫法：
① 相對路徑：以當前檔案為準，去尋找圖片地址。
a、與當前檔案處於同一層的圖片，直接寫圖片名
b、圖片在當前檔案下一層：檔案夾名/圖片名[img/xiaowo]
c、圖片在當前檔案上一層：../圖片名
使用相對路徑時圖片最外層只能放在網站根目錄[圖片必須在專案檔夾中]
② 絕對路徑：file:///盤符:/檔案夾/圖片.尾碼名。但是，嚴禁使用。
③ 網路連結：網路上的圖片連結。但是，一般不使用，因為圖片在別人伺服器。
2、title:圖片標題。當滑鼠指上後顯示的提示文字。
3、alt:當圖片無法載入的時候，顯示的文字。
4、height="" width="" 圖片的寬度高度。【屬性】
可以用css【樣式】(style="width: ; height: ;")代替
5、align：設定圖片周圍文字相對於圖片的位置。[top， center ，bottom]
[超連結a]
1、href:超連結的跳轉地址,可以是網路連結，也可以是本地檔案（路徑確定同img）
2、target：超連結開啟的位置。_self 自身頁面（預設） _blank 新頁面
3、title：滑鼠指上後顯示的文字。
4、rel:表明即將跳轉的頁面，與當前頁面的關係：
rel="prev" 即將跳轉的頁面，是當前頁面的前一篇文檔
rel="next" 即將跳轉的頁面，是當前頁面的後一篇文檔
rel="prefetch" 預先載入。在當前文檔載入完成後，利用空餘時間，
預先載入即將連結的文檔
[錨連結]
1.本頁面錨連結：
a.設定錨點：<a name="top"></a> 用name屬性工作表示錨點名稱
b.在超連結上，使用#name 跳轉到對應錨點。
<a href="#top">跳轉錨點</a>
2.頁面間錨連結：
a.在需跳轉頁面的指定位置，設定錨點
b.在超連結的href屬性中，使用“頁面地址.html#name”
<a href="頁面地址.html#top">跳轉到新頁面指定部分</a>
註：由於Google/IE的相容問題，需錨點中插入一個空格[ ]才會生效：
<a name="top"> </a>
[功能性連結]
mailto://[email protected] 給指定郵箱發送郵件
tencent://message/?uin=QQ號碼 給指定QQ發送訊息
HTML之表格
<table>
<tr>
<th>表頭</th>
<th>表頭</th>
</tr>
<tr>
<td>表列</td>
<td>表列</td>
</tr>
<tr>
<td>表列</td>
<td>表列</td>
</tr>
<tr>
<td>表列</td>
<td>表列</td>
</tr>
</table>
[表格table]
表格的表頭<th></th>（預設加粗，且在儲存格置中顯示）
表格的行<tr></tr>
表格的列<td></td>
[table的常用屬性]
1.Border：表格的邊框屬性；當使用border=""設定邊框時，會在
所有td以及table上嵌套邊框當border加大時，只有table最外層框線會
加粗，td儲存格上的框線不會變化。
2.Cellspacing：儲存格與儲存格之間的間隙，當Cellspacing="0"時，
儲存格之間的間隙為0但邊框線並沒有合并（邊框線還是兩條線的寬度）。
[合并邊框的寫法]style="border-collapse:collapse;"
使用邊框合并後，無需設定cellspacing
3.Cellpadding：儲存格內邊距，儲存格中文字與儲存格邊框之間的距離。
4.Width/Height：表格的寬高;
5.Align:設定表格在父容器中的對其方式：left/居左，center/置中
right/居右
[注意]:當表格使用align屬性時，相當於將表格浮動，
可能會導致表格後面的元素受表格浮動影響，導致布局錯亂
6.Bgcolor：背景色
7.Background：背景圖片，後接相對路徑。當背景圖和背景色同時
生效時，背景圖會覆蓋背景色
8.Bordercolor：邊框顏色
[<tr><td><th>標籤的屬性]
>>>當表格屬性，與行列屬性衝突時，會以行列屬性為準
屬性設定優先權：td>tr>table
1.width/height：給單個的行，列設定寬高.
2.bgcolor：背景色
3.align:設定儲存格中的文字在儲存格中的水平對其方式：left/center/right
4.valign：設定儲存格中的文字在儲存格的垂直對齊：top/center/bottom
5.nowrap：設定儲存格文字行末不斷行nowrap="nowrap"
[表格的跨行和跨列]
1.跨列：colspan，某儲存格跨N列，則該儲存格的右側的N-1個td就不需要了。
2.跨行：rowspan，某儲存格跨N行，則該儲存格的下側的N-1個td就不需要了。
HTML之表單
[from表單]
<form method="POST" action="url">
<label>請輸入郵箱地址：</label>
<input type="text" name="" placeholder="請輸入郵箱地址">
<br>郵箱格式請按要求格式輸入
<br>
<label>請輸入密碼：</label>
<input type="password" name="" placeholder="請輸入密碼">
<label>請再次輸入密碼：</label>
<input type="password" name="" placeholder="請再次輸入密碼">
<br>
密碼請為6-16位英文數字
<br>
<label>性別:</label>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
<label>城市：</label>
<select>
<option value="北京" selected>北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="珠海">珠海</option>
</select>
<label>愛好：</label>
<input type="checkbox" name="sports">運動
<input type="checkbox" name="art">藝術
<input type="checkbox" name="science">科學
<label>個人描述:</label>
<textarea rows="2">這是一個多行輸入框，輸入您的個人描述"</textarea>
<input type="submit" name="確認提交" value="確認提交">
</form>
1.兩個重要屬性
action：表單需要提交的伺服器位址
method：表單提交資料使用的方法，get/post
>>>get和post的區別
a.get傳參使用URL傳遞，所有參數在地址欄可見，不安全。get傳參資料有限；
b.post傳參使用http請求傳遞，比較安全；post傳遞大量資料；
但是，get傳遞速率比post快。
>>>URL傳參的形式:連結URL地址?name1=value1&name2=value2
2.input的常用屬性：
type：設定input的輸入類型
name：給input輸入框起名。一般情況下，name屬性必不可少。因為傳遞資料時，
使用name=value（輸入內容）的形式傳遞
value：input輸入框的預設值
placeholder:輸入框的提示內容，當input有預設的value或者輸入值時，
placeholder消失。
3.input-type屬性的常用屬性值
text；文本輸入框
password：密碼輸入框，輸入內容預設顯示小黑點。
radio：單選框/checked：複選框
>>>使用radio/checked時，value屬性必填；提交時，提交的為value中的預設值。
>>>radio/checkbox憑藉name屬性確定是否屬於同一組，name相同為同組
>>>使用checked="checked"屬性，設定預設選中項
flie：檔案上傳
>>>使用accept="類型"，設定只能上傳的檔案類型，比如image/*
submit：提交按鈕。將所有表單資料提交至後台伺服器
reset：重設表單資料。將所有表單資料恢複到預設狀態。
image：圖形提價按鈕。跟submit一樣，具有表單提交功能。
>>>使用src屬性，選擇圖片路徑
button：普通按鈕，沒有任何軟用
4.屬性名稱等於屬性
checked="checked" 設定radio或checkbox的預設選中項
multiple="multiple" 設定select控制項為多選，可在介面使用Ctrl+滑鼠，進行多選。一般不用。
selected="selected":設定selected控制項，預設選中option選項。
readonly="readonly":設定為唯讀，不允許修改
disabled="disable":禁用控制項
>>>當input被disabled時，該input的name和value將無法向後台傳遞
hidden="hidden":隱藏控制項；等效於，<input type="hidden" />
5.[下拉選擇select]
a.寫法：<select>
<option></option> //可以有N多個
<lect>
b.name屬性，應該寫在<select>上，所有選項只有一個name
c.option常用屬性：
value="":當option沒有value屬性時，往後台傳遞的是<option></option>標籤中的文字；
當option有value屬性時，往後台傳遞的是value屬性的值。
title="":滑鼠指上後顯示的文字。
selected="selected":預設選中。
d.<optgroup label="山東省"></optgroup> :用於將option標籤進行分組，label屬性工作表示分組名。
6.[文本域 textarea]
① 寫法：<textarea></textarea>
② 設定寬高style="width: 200px; height: 150px;" 自身有cols="" rows=""兩個屬性，但不常用
③ readonly="readonly" 設定為唯讀模式，不允許編輯。
④ style="resize: none;" 設定為寬高不允許修改。
⑤ style="overflow: ;" 設定當文字超出地區時，如何處理。
>>> 也可以通過overflow-x/overflow-y分別設定水平垂直方向的顯示方式。
>>> 常用屬性值:
hidden 超出地區的文字，隱藏無法顯示
scroll 無論文字多少，均會顯示滾動
auto 自動，根據文字多少自動決定是否顯示捲軸（預設樣式）
7.表格的邊框和標題
<fieldset>
<legend>表格的標題</legend>
。。。N多個表單元素[input/select/textarea]
</fieldset>
註：一個表單可以有多個邊框和標題
CSS之選取器
【通用選取器】
1、寫法： *{}
2、作用： 選中頁面中的所有HTML標籤
3、優先順序：最低！
【標籤選取器】
1、寫法： HTML標籤名{ }
2、作用： 選中所有對應的HTML標籤，並修改其樣式
【類別選取器 class選取器】
1、寫法： .選取器名{}
2、調用： 在需要修改樣式的HTML標籤上，使用class="選取器名"
3、優先順序： 當作用於同一層時，class選取器>標籤選取器
【ID選取器】
1、寫法： #選取器名{}
2、調用： 在需要修改樣式的HTML標籤上，使用id="選取器名"
3、優先順序：同一層時，id選取器>class選取器
4、ID選取器是唯一的！同一頁面嚴禁出現同名ID！！！
【後代選取器】
1、寫法： 選取器1 選取器2 …… 選取器N {}
2、生效規則： 選取器2必須是選取器1的【後代】……以此類推
【子代選取器】
1、寫法： 選取器1>選取器2>……>選取器N{}
2、生效規則： 選取器2必須是選取器1的【直接子代】……
【交集選取器】
1、寫法： 選取器1選取器2……選擇N{}
2、生效規則： 必須同時滿足所有選取器，才會生效
【並集選取器】
1、寫法： 選取器1,選取器2,……,選擇N{}
2、生效規則： 滿足任意一個選取器，均可生效
【選取器命名規範】
1、只能有字母、數字、底線組成；
2、開頭不能是數字。
【選取器優先順序】
1、就近原則：近者優先。
2、當作用於同一層時：可有權重計算
權重劃分： 標籤選取器 1
class選取器 10
id選取器 100
行級樣式表style="" 1000
#ul .li .li2 li{} 優先順序權重121
li .li1 .li2 .lis2 {} 優先順序權重31
#ul #li li{} 優先順序201
【三種使用CSS的方式】
1、行內樣式表：直接在HTML開始標籤中使用style=""的方式引用；
特點：將CSS代碼與HTML代碼完全糅雜在一起，不符合W3C關於內容與表現分離的要求。不利於樣式複用；
優先順序：最高。
2、內部樣式表： 在<head></head>中，使用<style type="text/css"></style>方式引用；
特點：將CSS代碼與HTML代碼分離，但是沒有徹底分離CSS檔案與HTML檔案，不利於多頁面複用樣式。
3、外部樣式表：使用link標籤連結CSS檔案。
<link rel="stylesheet" type="text/css" href="css/01css.css" />
特點：實現了CSS與HTML的徹底分離，有利於樣式複用及後期維護。
CSS之文字屬性
1、字型、字型大小：
font-weight:字型的粗細，可選屬性值：bold加粗 lighter細體 100~900數值(400正常，700 bold)
font-size:字型大小 **PX **%（瀏覽器預設字型大小的百分比，絕大部分預設16px）
font-family:字型族，設定字型。
>>>多個字型樣式間用逗號分隔，瀏覽器解析時，會從左往右依次解析，選擇可用字型。
>>>一般前面使用具體字型名稱，最後一個使用字型族類名稱。
（常用字型族名稱：襯線體serif 非襯線體sans-serif(常用) 等寬體Monospace）
>>>例如：font-family:Arial, ‘Microsoft Yahei‘, sans-serif;
font-style:字型樣式,正常(normal) 斜體(italic)
font-variant：small-caps; 將字母轉為小型大寫字型。
(瞭解)font縮寫形式：font-style font-variant font-weight font-size line-height font-family
>>> 使用注意事項 ：
① 順序必須嚴格按照上述順序；
② 多個樣式之間用空格分割，而且font-sizene-height 必須作為一對用/分割
③ font-size和font-family必須指定，其他樣式不指定將採用預設樣式顯示；
>>> 例如：font:italic bold 75%/1.8 ‘Microsoft Yahei‘, sans-serif;
斜體加粗字型大小/行高 字型族(微軟雅黑，非襯線字型族)
2、字型顏色：
color:字型顏色
opacity:透明度,0~1之間的數字。 調整時控制項以及子控制項均會透明，而使用rgba調整時，只會時本控制項透明，子控制項不會發生透明度變化。
3、行距、對齊等：
line-height:行高 ① 像素單位 48px ② 不帶px 正常行高的倍數 ③百分數 同2
>>> 典型應用，調整控制項中文垂直置中的方式：控制項的height=控制項的line-height
text-align:區塊層級元素中文字的水平對齊 left center right
letter-spacing:字元間距,字與字之間的間距
text-decoration:文本修飾 底線underline、刪除線line-through、上劃線overline、none
overflow:控制超出範圍文本的顯示方式(auto 根據文字多少自動顯示捲軸，scroll始終顯示捲軸， hidden 超出範圍文本隱藏) 可以通過overflow-x overflow-y分別設定水平垂直方向
text-overflow:設定多餘文字的顯示方式 clip裁剪掉 ellipsis省略符號
>>>【重點】讓每行多餘文字顯示省略符號：
① white-space: nowrap; 如果是中文，需設定行末不斷行
② overflow: hidden; 設定控制項超出範圍隱藏
③ text-overflow: ellipsis; 設定多餘文本省略符號顯示
white-space: nowrap; 設定中文行末不斷行顯示
word-break: 瀏覽器預設在空格處斷行，當一個單詞長度超出範圍時，會不斷行顯示， break-all 允許在單詞內換行。
text-shadow:文本陰影，有四個屬性值：
①水平陰影距離 必選，數值越大，陰影右移
②垂直陰影距離 必選，數值越大，陰影下移
③陰影模糊距離 可選，數值越大，陰影越模糊。預設為0，不模糊
④陰影顏色 可選，預設為黑色
text-indent:首行縮排，可用像素值調整縮排大小
text-stroke: -webkit-text-stroke: 0.2px #008000; 描邊的粗細，描邊的顏色
CSS之背景屬性
background
padding: 0px;">
background-image:背景圖,background-image: url(圖片地址相對路徑);背景圖和背景色同時存在時，背景圖會覆蓋背景色
background-repeat：背景圖重複方式 ，no-repeat不平鋪 repeat平鋪(預設) repeat-x水平平鋪 repeat-y垂直平鋪
background-size:背景圖大小。
【指定寬度高度】
>>> 寬高的寫法，第一個屬性值為寬度，第二個屬性值為高度，可以：①直接寫像素 ②寫百分比（父容器寬高的百分比）
>>> 當只有一個屬性值時，預設為寬度。高度等比縮放。
當有兩個屬性值時，會按照指定的高度寬度進行壓縮/展開顯示。
【其他屬性值】
>>> contain:圖片等比縮放，縮放到寬或高的某一邊等於父容器的寬高，另一邊按照圖片大小縮放（可能導致部分空餘地區無法覆蓋）
>>> cover:圖片等比縮放，使背景映像完全覆蓋背景地區。(可能導致背景圖部分地區無法顯示)
background-position：位置座標、位移量
>>> 指定位置：left/center/right top/center/bottom
當唯寫一個屬性值時，另一個預設置中
>>> 填寫座標：水平位置 垂直位置 (像素或百分比形式)
① 當唯寫一個屬性值時，預設寫的為水平方向，則垂直置中
② 當使用像素時：圖片的左上方往各個方向移動的實際距離
水平方向：正數右移 負數左移 垂直方法：正數下移 負數上移
(左負有正 上負下正)
③ 當使用百分數時，一般只能是正數。代表去掉圖片後，剩餘空白距離的分布比例。例如 background-position：30%; 水平方向去掉圖片後，剩餘地區3:7分
重溫HTML和CSS知識
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
