HTML5操做
- head（網頁標題，即網頁選項卡上的文字）
<!DOCTYPE html>
<!--
↑聲明文檔類型爲html5文件
文檔聲明，在HTML文檔必不可少。且必須放在文檔第一行。
HTML4.01以前的寫法：<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TRhtm14/strict.dtd>"
-->
<html>
<head>
<!--[meta標籤]
一、charset屬性：單獨使用。設置文檔字符集編碼格式。
>>>寫法：<meta charset="UTF-8">
>>>常見的中文編碼格式：
GB-2312:國標碼，簡體中文
GBK：擴展的國標碼，簡體中文
UTF-8：萬國碼Unicode碼，基本兼容各國語言
二、http-equiv屬性：需配合content屬性使用。主要聲明瀏覽器如何解釋編譯文
>>>寫法：<meta http-equiv="屬性值" content="屬性值詳細內容">
>>>經常使用屬性值：Content-Type HTML4.01以前的文檔內容編碼聲明
refresh 網頁刷新 set-Cookie設置瀏覽器cookie緩存
三、name屬性：需配合content屬性使用。主要用於給搜索引擎提供必要信息。
>>>寫法：<meta name="屬性值" content="屬性值詳細內容"
>>>重要屬性值：author 做者，聲明網站做者，經常使用公司網址表示
keywords 網站關鍵字，多個關鍵字，用英文逗號間隔
description 網頁描述，搜索引擎顯示在title下的描述內容
*http-equiv和name屬性，必須與content屬性配合使用。前二者只適用於聲明即將修改哪些屬性值，而實際的屬性值內容，在content中描述。
-->
<!--做者-->
<meta name="author" content="http://www.jredu100.com" />
<!--網頁關鍵字-->
<meta name="keywords" content="html5,網頁,Web前端開發" />
<!--網頁描述-->
<meta name="description" content="這是我在傑瑞教育開發的第一個網頁" />
<!--聲明文檔的編碼格式-->
<meta charset="UTF-8">
<!--[link標籤]
一、做用：用於爲網頁連接各類文件。
二、經常使用屬性：
rel：用於代表被連接文件與當前文件的關係。此處選icon，代表被連接圖片是當前網頁的icon圖標。
type：代表被連接文件是什麼類型。能夠省略。
href：代表連接文件的地址
-->
<link rel="icon" type="image/x-icon" href="img/alien.png" />
<!--網頁的標題，即網頁選項卡上的文字-->
<title>網頁</title>
</head>
<body>
</body>
</html>
- HTML標籤的分類
塊級標籤，顯示爲塊，自動換行，先後隔一行
行政標籤，按行逐一顯示
<body>
<!--HTML的標籤分類
一、塊級標籤：自動換行，先後隔一行
二、行級標籤：按行逐一顯示
是否換行是咱們判斷行級標籤的重要指標
-->
<!-- [常見的塊級標籤]
標題標籤<h1></h1>……<h6></h6>
水平線<hr/>
段落<p></p>
換行<br/>
引用<blockquote></blockquote >
預格式<pre></pre>
-->
<!--標題標籤<h1></h1>……<h6></h6>:默認加粗，H1最大，H6最小-->
<h1>一級標題</h1>
<h2>一級標題</h2>
<h3>一級標題</h3>
<h4>一級標題</h4>
<h5>一級標題</h5>
<h6>一級標題</h6>
<!--水平線<hr/>-->
<hr/>
<!--段落<p></p>-->
<!--換行<br/>-->
<p>這是P標籤中的一個段落。這是P標籤中的一個段落。這是P標籤中的一個段落。</p>
<p>這是P標籤中的一個段落。這是P標籤中的一個段落。<br/>這是P標籤中的一個段落。</p>
<!--引用<blockquote></blockquote >
一、代表標籤中的文字爲引用字體。瀏覽器顯示爲段落縮進。
二、cite屬性，代表引用來源，通常爲引用的網址URL
-->
<blockquote cite="http://www.jredu100.com">哈哈哈哈哈哈</blockquote >
<!--預格式<pre></pre>
瀏覽器解析時，會按照等寬字體顯示，而且保留標籤內的空格和回車。經常使用於保留代碼格式
-->
<hr />
<h1>基於佈局的塊級標籤</h1>
<!--[有序列表ol order list]-->
<ol>
<li>列表第一項</li>
<li>列表第二項</li>
<li>列表第三項</li>
<li>列表第四項</li>
</ol>
<!--[無序列表ul unorder list]-->
<ul>
<li>列表第一項</li>
<li>列表第二項</li>
<li>列表第三項</li>
<li>列表第四項</li>
</ul>
<!--定義描述列表
<dl>
<dt>標題</dt>
<dd>描述項</dd>
</dl>
通常狀況下，標題dt只有一項。描述項dd能夠有不少。
瀏覽器顯示時，標題頂格顯示，dd會縮進顯示。
*嵌套時，HTML標籤必定不能交叉
-->
<dl>
<dt>標題</dt>
<dd>描述項1</dd>
<dd>描述項2</dd>
<dd>描述項3</dd>
<dd>描述項4</dd>
</dl>
<!--[圖片組合標籤figure]
一、<figure></figure>標籤有兩個子標籤:
<img src="">一幅圖片，src表示圖片的路徑
<figcaption></figcaption>圖片的標題
二、瀏覽器顯示爲：圖片與標題上下排列，且總體向後縮進一個單位。
-->
<figure>
<img src="img/alien.png">
<figcaption>外星人</figcaption>
</figure>
<!--[分區標籤div]
常配合CSS使用，爲網頁中最經常使用分區標籤，經常使用於網頁佈局使用
-->
<div style="width: 100%; height:100px; ">
這是div裏面的文字。
<h1>我是div裏面的標題</h1></div>
</body>
<body>
<!-- [常見的行級標籤]
span（文本）
img（圖片）
em（強調）
strong（強調）
q（短引用）
a（超連接）
i（傾斜）
b（加粗）
small（縮小字體）
-->
<!--
span（文本）：用於包裹一部分文字，進行特定樣式的修改
-->
真<span style="color: red; font-size: 36px;">帥</span>
<!--
em（強調）：瀏覽器會顯示爲傾斜。
strong（強調）：瀏覽器會顯示爲加粗。
i（傾斜）
b（加粗）
一、em和strong都表示強調，strong程度強於em，可多層嵌套，表示強調程度遞增
二、em和i都可傾斜，strong和b都可加粗，但strong和em表示強調。可幫助搜索引
擎快速抓取網站重點。並且H5要求開發者儘量的實現代碼的語義化。
-->
<em>強調</em><br />
<strong>強調</strong><br />
<i>強調</i><br />
<b>強調</b><br />
<!--
q（短引用）：經常使用於一句話的引用，cite屬性表示引用來源
瀏覽器解析時，會在內容先後加雙引號。
-->
<q cite="http://jredu100.com">引用</q>
<!--
small(縮小字體)：small標籤能夠多層嵌套，表示比默認字體小一號，直到字體到最小爲止。
big（放大字體）：同small，但字體變大
可是，在新的規範中，small和big標籤，不被提倡使用。提倡使用style=「font-size:11px"CSS樣式代替。
-->
<small><small>縮小縮小</small></small>
<big>放大</big><br />
<!--
[img圖片標籤]
一、src屬性：表示圖片引用路徑。
>>> src中常見的路徑寫法：
①相對路徑：
·當圖片在當前文件下一層時：文件夾名/圖片名 img/aaa.png
·當圖片與當前文件在同一層時，圖片名 src="aaa.png"
·當圖片在當前文件上一層時，../圖片名 src="../aaa.png"
使用相對路徑時，圖片最外層只能放到網站根目錄（圖片必須在項目文件夾中）。
②絕對路徑：寫法file:///E:/aaa.png 可是，禁止使用
③網絡鏈接：直接使用圖片的網絡地址，可是因爲圖片在別人的服務器，不可控，故不建議使用
二、title：當鼠標指上時，顯示的文字
三、alt：當圖片沒法加載時，顯示的文字
四、width/height：圖片的寬度高度，至關於CSS中的style="width: ;height: ;"
五、align：圖片周圍的文字，相對於圖片的排列方式。可選值：top/center/bottom
-->
<img src="img/alien.png" title="當鼠標指上時，顯示的文字" alt="當圖片沒法加載時，顯示的文字" width="100px"
height="100px" align="center"/>
<!--
[超連接a]
一、href：超連接的跳轉地址。能夠寫網絡鏈接，或本地html文件的相對路徑，肯定方式同img的src路徑
二、target：設置超連接打開窗口的位置。_slef 自身頁面打開（默認） _blank新頁面打開
三、title：當鼠標指上時，顯示的文字
四、rel：代表即將跳轉的頁面與當前文檔的關係
rel="prev"即將跳轉的頁面是當前文檔的前一篇文章
rel="next"即將跳轉的頁面是當前文檔的後一篇文章
rel="prefetch"預加載，當前文檔加載完成後，利用空餘網絡，預加載即將跳轉的頁面
[功能性鏈接]
mailto://15506576257@163.com
tencent://message/?uin=778998580
[錨連接]
一、本頁面錨連接：
①設置一個錨點：<a name="top"></a>用name屬性表示錨點名稱
②在超連接的href屬性中，使用#name跳轉到指定錨點位置:
<a href="#top">跳轉到錨點</a>
二、其餘頁面錨連接：
①需跳轉的頁面設置錨連接
②在超連接的href屬性，文件名.html#name
<a href="aaaa.html#top">
注：因爲谷歌/IE瀏覽器的兼容問題，需在錨點中，插入一個空格 才能生效：
<a name="top"> </a>
-->
<a href="tencent://message/?uin=778998580" title="當鼠標指上時，顯示的文字" target="_self">聊天</a>
<!--s有誤文本：刪除線-->
<s>這是s標籤中的文字</s>
<!--cite標籤：瀏覽器顯示爲傾斜，經常使用於書、畫做、做品的引用-->
<cite>這是cite標籤</cite>
<!--code：只是表示計算機代碼。可是瀏覽器只會顯示等寬字體，不會保留代碼格式，需配合pre標籤使用-->
<pre>
<code>
StringBuffer sb = new StringBuffer();
for(String s : arr){
sb.append(s);
}
</code>
</pre>
<!--bdo：表示文本方向，dir="ltr" 從左往右 dir="rtl" 從右往左-->
<bdo dir="ltr">1234567</bdo>
<!--kbd:表示須要用戶用鍵盤輸入的內容。瀏覽器顯示爲等寬字體-->
請輸入「<kbd>Esc</kbd>」退出系統。
<!--sup：上標文本 sub：下標文本-->
X<sup>2</sup>
X²
<!--版權符號 空格-->
© 空格
<!--u:下劃線-->
<u>這是u標籤</u>
<!--mark:高亮或標記文本 瀏覽器顯示爲黃色背景-->
<mark>哈哈哈哈哈</mark>
</body>
<body>
<!--
【表格table】
表格<table></table>
表格的行<tr></tr>
表格的列<td></td>
表格的表頭列<th></th>（將tr中的td，替換爲th，表示本行的表頭）
th默認加粗，且在單元格居中顯示
【table的經常使用屬性】
Border：表格的邊框屬性；當使用border="1"設置邊框時，會在全部td以及table上嵌套邊框，
當border加大時，只有table最外層框線加粗，td單元格上的框線不會變化
Cellspacing：單元格與單元格之間的間隙，當cellspacing="0"時，單元格之間間隙爲0，
但邊框線並無合併（邊框線仍是兩條線的寬度）
[合併邊框的寫法]style="border-collapse: collapse;"使用邊框合併後，無需設置cellspacing
Cellpadding：單元格內邊距，單元格中文字與單元格邊框之間的距離
Width
Height
Align:表格在父容器的對齊方式，left/居左，center/居中，right/居右
【注意】當表格使用align屬性時，至關於使表格浮動，可能會致使表格後面的元素受表格浮動影響，致使佈局錯亂
Bgcolor：背景色
Background：背景圖片，後接相對路徑。當背景圖和背景色同時生效時，背景圖會覆蓋背景色
Bordercolor：邊框顏色
-->
<!--
【<tr><td><th>標籤屬性】
>>>當表格屬性與行列屬性衝突時，會以行列屬性爲準
屬性設置優先級：td > tr > table
一、width、height:給單個的行、列，設置寬度高度
二、Bgcolor：背景色
三、Align:設置單元格中的文字，在單元格的水平對齊方式left/center/right
四、Valign:設置單元格中的文字，在單元格的垂直對齊方式top/center(middle)/bottom
五、nowrap:nowrap="nowrap"設置單元格文字行末不斷行
-->
<!--
【表格的跨行與跨列】
一、跨列：colspan，某單元格跨N列，則該單元格右邊的N-1個td就不須要了
二、跨行：rowspan，某單元格跨N行，則該單元格右邊的N-1個td就不須要了
-->
<table width="500" border="1" cellspacing="0" style="border-collapse: collapse;" cellpadding="10"
align="left" bgcolor="aqua" background="img/alien.png" bordercolor="red">
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
</body>
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<!--
[form表單]
一、兩個重要屬性：
action：表單須要提交的服務器地址
method：表單提交數據使用的方法，get post
>>>get和post的區別
①get傳參使用URL傳遞，全部參數在地址欄可見，不安全；get傳參數據有限
②post傳參使用http請求傳參，比較安全；post能夠傳遞大量數據
可是，get請求的傳輸速率要快些
>>>URL傳參的形式：連接URL地址?name1=value1&name2=value2
二、input的經常使用屬性：
①type：設置input的輸入類型
②name：給input輸入框起名。通常狀況下，name屬性必不可少。由於，傳輸數據時，使用name=value（輸入內容）的形式傳遞。
③value：input輸入框的默認值。
④placeholder：輸入框的提示內容。當input有默認的value或者輸入值時，placeholder消失
三、input-type屬性的經常使用屬性值：
①text：文本輸入框
②password：密碼輸入框，輸入內容默認顯示小黑點
③radio：單選框
>>>使用radio/checkbox時，value屬性必填，提交時，提交的爲value中的默認值
>>>radio/checkbox憑藉name屬性，肯定是否屬於同一組，name相同爲同組只能選一個
>>>使用checked="checked"屬性，設置默認選中項
④file：文件上傳
>>>使用accept="類型"，設置只能上傳的文本類型，image/*任意格式圖片
⑤submit：提交按鈕。將全部表單數據提交至後臺服務器
⑥reset：重置表單數據。將表單數據恢復到默認狀態。
⑦image：圖形提交按鈕。跟submit同樣，具備表單提交功能
⑧button：普通按鈕，沒有功能
四、屬性名等於屬性值的狀況：
①checked="checked"設置radio或checkbox的默認選中項
②multiple="multiple"設置select控件，多爲選控件
③selected="selected"設置select控件,默認選中的option選項
④readonly="readonly"設置textarea只讀，不容許編輯
⑤disabled="disabled"禁用控件和value
>>>當input被disabled時，該input的name和value將沒法向後傳遞
⑥hidden="hidden"隱藏控件。等效於<input type="hidden" />
五、【下拉選擇控件 select】
① 寫法：<select>
<option></option> //能夠有N多個
</select>
② name屬性，應該寫在<select>上，全部選項只有一個name
③ multiple="multiple" 設置select控件爲多選，可在界面使用Ctrl+鼠標，進行多選。通常不用。
④ option經常使用屬性：
value="":當option沒有value屬性時，日後臺傳遞的是<option></option>標籤中的文字；
當option有value屬性時，日後臺傳遞的是value屬性的值。
title="":鼠標指上後顯示的文字。
selected="selected":默認選中。
⑤ <optgroup label="山東省"></optgroup> :用於將option標籤進行分組，label屬性表示分組名。
六、【文本域textarea】
①寫法：<textarea></textarea>
②設置寬高style="width: 200px; height: 150px;" 自身有cols=:"" rows=""兩個屬性，但不經常使用
③readonly="readonly"設置爲只讀模式，不容許編輯
④style="resize: none;"設置爲寬高不容許修改
⑤style="overflow： ；"設置當文字超出區域時，如何處理
>>>也能夠經過overflow-x/overflow-y分別設置水平垂直方向的顯示方
>>>經常使用屬性值：hidden 超出區域的文字，隱藏沒法顯示
scroll 不管文字多少，均會顯示滾動
auto 自動，根據文字多少自動決定是否現實滾動條（默認樣式）
七、【表格的邊框與標題】
<form>
<fieldset>表格的邊框
<legend>聯繫方式</legend>表格的標題
。。。N個表單元素(input/select/textarea)
<fieldset/>
<form/>
注：一個表單能夠有多組邊框+標題
-->
<!--
【HTML5智能表單】
①H5新增input的form屬性，用於指向特定form表單的ID，實現input無需放在form標籤之中，便可經過表單進行提交
<form id="foo">
...
</form>
<input ... form="foo">
②新增N多個type新屬性，詳見表格
③ 新增input的屬性：：
Autocomplete：自動完成功能
>>>記憶以前輸入過的內容，在下次輸入時，根據之前的內容提示，自動完成
>>>絕大部分瀏覽器自動開啓
>>>有兩個屬性值：off/on
>>>能夠在<form>標籤上設置Autocomplete,控制整張表單的自動完成開關。
但能夠在個別input上單獨設置，覆蓋form的總體設置
Autofocus：自動得到焦點。autofoucus="autofoucus"
Form：所屬表單,經過form表單的ID，指定特定表單
Required：必填。required="required"設置input爲必填
Pattern：驗證input的模式
Placeholder：提示
-->
<form action="" method="get">
<table>
<tr>
<td>用戶名：</td>
<td>
<input type="text" name="username" placeholder="請輸入用戶名" />
</td>
</tr>
<tr>
<td>密碼：</td>
<td>
<input type="password" name="password" placeholder="請輸入密碼" />
</td>
</tr>
<tr>
<td>性別：</td>
<td>
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
</td>
</tr>
<tr>
<td>愛好：</td>
<td>
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" checked="checked" />女
</td>
</tr>
<tr>
<td>頭像：</td>
<td>
<input type="file" name="head" />
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<select name="city">
<optgroup label="山東省">
<option>濟南</option>
<option>煙臺</option>
<option>濱州</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>用戶協議</td>
<td></td>
</tr>
<tr>
<td colspan="2">
<textarea style="width: 200px; height: 100px; resize: none; overflow-y: scroll; "></textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="登陸" />
</td>
<td>
<input type="button" value="重置" />
</td>
</tr>
<tr>
<td>
<input type="image" src="../練習/img/外星人.png" />
</td>
<td>
<input type="button" value="看看" />
</td>
</tr>
</table>
</form>
</body>
<head>
<meta charset="UTF-8">
<title>CSS經常使用選擇器</title>
<!--HTML註釋-->
<style type="text/css">
/*CSS語法必須寫在<style>標籤中*/
/*CSS註釋*/
【鎖定】
/*命名：body中table後+id="table" 如<table id="table1"
*寫法：以前+#table名 如;#tablle1 td
*做用：防止多個table的重名
*/
/*【選擇器命名規範】
* 一、只能有字母、數字、下劃線組成
* 二、開頭不能是數字
*/
/*【選擇器優先級】
* 一、就近原則，近者優先
* 二、看成用於同一層時，可用權重計算
權重劃分：標籤選擇器1
class選擇器10
id選擇器100
行級樣式表style=""1000
例：#first .list li 111
#first .list .list li 121
*/
/*【通用選擇器】
* 一、寫法：*{ }
* 二、做用：選中頁面中的全部HTML標籤
* 三、優先級：最低
*/
*{
}
/*【標籤選擇器】
* 一、寫法：HTML標籤名{ }
* 二、做用：選中全部對應的HTML標籤，並修改其樣式
*/
li{
color: red;
font-size: 36px;
}
/*【類選擇器class選擇器】
* 一、寫法：.選擇器名{ }
* 二、調用：在須要修改樣式的HTML標籤上，使用class="選擇器名"
* 三、優先級：看成用於同一層時，class選擇器>標籤選擇器
*/
.list{
color: blue;
}
/*【ID選擇器】
* 一、寫法：#選擇器名{}
* 二、調用：在須要修改樣式的HTML標籤上，使用id="選擇器名"
* 三、優先級：同一層時，id選擇器>class選擇器
* 四、id選擇器是惟一的！同一頁面嚴禁出現同名id！！！
*/
#first{
color: green;
}
/*【後代選擇器】
* 一、寫法：選擇器1 選擇器2 …… 選擇器N{}
* 二、生效規則：選擇器N必須是選擇器N-1的後代
*
*
* 【子代選擇器】
* 一、寫法：選擇器1>選擇器2>……>選擇器N{}
* 二、生效規則：選擇器N必須是選擇器N-1的【直接子代】
* */
div>ul>li{
}
/*【交集選擇器】
* 一、寫法：選擇器1選擇器2……選擇器N{}
* 二、生效規則：必須同時知足全部選擇器，纔會生效
*/
li.list#first{
}
/*【並集選擇器】
* 一、寫法：選擇器1,選擇器2,……選擇器N{}
* 二、生效規則：知足任意一個選擇器，都可生效
*/
.list,#first{
color: darkslategray;
}
</style>
<!--
【三種使用CSS的方式】
一、行內樣式表：直接在HTML開始標籤中使用style=""的方式引用
特色：將CSS代碼與HTML代碼徹底糅雜在一塊兒，不符合W3C關於內容與表現分離的要求，不利於樣式複用
優先級：最高
二、內部樣式表：在<head></head>中，使用<style type="text/css"></style>方式引用
特色：將CSS代碼與HTML代碼分離，可是沒有完全分離CSS文件與HTML文件，不利於多頁面複用樣式
三、外部樣式表：使用link標籤連接CSS文件
<link rel="stylesheet" type="text/css" href="css/01css.css" />
特色：實現了CSS與HTML的完全分離，有利於樣式複用幾後期維護
-->
</head>
<body>
<div >
<ul>
<li class="list" id="first">這是列表項1</li>
<li>這是列表項2</li>
<li class="list">這是列表項3</li>
<li>這是列表項4</li>
<li class="list">這是列表項5</li>
</ul>
</div>
<ul>
<li class="list" id="first">這是列表項1</li>
<li>這是列表項2</li>
<li class="list">這是列表項3</li>
<li>這是列表項4</li>
<li class="list">這是列表項5</li>
</ul>
</body>
<head>
<meta charset="UTF-8">
<title></title>
.div1{
width: 200px;
height: 200px;
/* [顏色經常使用單位]
* 十六進制：#ffffff
* 顏色名稱：red
* RGB顏色:RGB(255,255,255)
* RGBA:第四位數，表示透明度。可選值0~1
*/
/* [CSS經常使用文本屬性]
* 一、字體、字號：
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-size/line-height 必須做爲一對用/分割
③ font-size和font-family必須指定，其餘樣式不指定將採用默認樣式顯示；
>>> 例如：font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
斜體 加粗 字號/行高 字體族(微軟雅黑，非襯線字體族)
二、字體顏色：
color:字體顏色
opacity:透明度,0~1之間的數字。 調整時控件以及子控件均會透明，而使用rgba調整時，只會時本控件透明，
子控件不會發生透明度變化。
三、行距、對齊等：
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; 描邊的粗細，描邊的顏色
*/
</head>
/* 【CSS經常使用背景屬性】
background
text-align: left; line-height: 1.75; font-size: 14px;">
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分
*/
.div1{
width: 27px;
height: 27px;
background-image: url(css/icon.gif);
/**/
background-repeat: no-repeat;
/*background-size: 100% 100%;*/
background-position: -165px -27px;
white-space: nowrap;
text-indent: 30px;
line-height: 27px;
}
相關文章
- 1. HTML5+和MUI頁面操做
- 2. Html5原生拖拽操做
- 3. HTML5 的Audio對象操做
- 4. HTML5 Canvas 撤銷上一次操做
- 5. HTML5 中的文件（File）操做
- 6. HTML5繪圖筆記4：操做圖形
- 7. HTML5中的Canvas繪圖操做（三）
- 8. HTML5 Canvas操做圖像像素
- 9. [JS進階] HTML5 之文件操做(file)
- 10. Html5畫布操做-旋轉 | rotate()
- 更多相關文章...
- • SQL IN 操作符 - SQL 教程
- • SVN 檢出操作 - SVN 教程
- • RxJava操作符（十）自定義操作符
- • RxJava操作符（四）Combining
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
