組件(html)

第一部分

1.<p></p>段落
2.<hx></hx>標題
3.<strong></strong>粗體字
4.<em></em>斜體字
5.<span></span>沒有語義，作用是爲了設置單獨樣式
6.<q></q>引號（短文本引用）
7<blockquote></blockquote>在我看來類似於段落標籤（長文本引用）
8.<br />換行
9.&nbsp空格
10.<hr />水平橫線
11.<code></code>加入單行代碼（用於編程技術類網站）
12.<pre></pre>加入多行代碼（用於編程技術類網站）

第二部分

1.無序新聞標籤

<ul>
    <li>item名稱</li>
    <li>item名稱</li>
</ul>

2.有序新聞標籤

<ol>
    <li>item名稱</li>
    <li>item名稱</li>
</ol>

3.<div></div>
可以把一些獨立的邏輯部分劃分出來，放在一個div裏面，div相當於一個容器。

4.<div id="a1"></div>比起上面多了ID，加ID用於排版方便
如圖：

5.表格

<table summary="摘要">
    <caption>表格標題</caption>
    <tbody>
        <tr>
            <th>粗體</th>
        </tr>
        <tr>
            <td>粗體</td>
        </tr>
    </tbody>
</table>

解釋：

table:表示表格，所有的組件都在裏面。
tbody:當內容非常多時，表格內容會加載一點顯示一點，如果加上本標籤，會全部加載完成在顯示本標籤
tr:用於表示一行，裏面嵌套th或者td
td/th:單個item，其中th顯示爲粗體字，td顯示爲正常字體
summary:摘要，它不會再瀏覽器中顯示出來。他的作用是增加表格的可讀性，是搜索引擎跟好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。
caption:表格標題

6.使用mailto在網頁中添加鏈接Eamil地址

注意：如果mailto後面有多個參數的話，第一個參數必須使用“？”來間隔，以後的參數都以“&”來間隔。
完整的實例：

7.使用img標籤，爲網頁中添加圖片
語法：<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">

src:標識圖片的位置
alt:當圖片下載失敗時，可以看到此文本
title:當圖片下載成功時，鼠標劃過提示文本
圖像可以是GIF,PNG,JPEG圖片

第三部分

1.表單標籤
表單標籤作用很大，可以把瀏覽器輸入的數據傳到服務器。
語法：
<form method="傳送方式" action="服務器文件"> </form>

form:表單標籤，成對出現
method:傳送方式，分兩種，post/get
action:數據被傳送到的地方

2.文本輸入框/密碼輸入框
語法：

<form>
    <input type="text/password" name="名字" value="默認文本">
</form>

type:當值爲text時，輸入框爲文本輸入框，當值爲password時，輸入框爲密碼輸入框
name:爲文本框命名，以備後臺程序ASP、PHP使用。
value:默認文本

3.文本域，多行文本輸入
語法：

<textarea cols="列數" rows="行數"></textarea>

textarea:成對出現，兩標籤中間可以設置默認文本
cols:列數
rows:行數

4.單選框，複選框
語法：

<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>

type:值爲“radio”時，爲單選框，值爲“checkbox”時，爲複選框
value:提交到服務器的值
name:爲控件命名（單選框中，只有name一致，他們纔算一組）
checked:當設置checked=“checked”時，該選項被默認選中

5.下拉列表框
語法：

<select multiple="multiple">
    <option value="向服務器提交的值">顯示的值</option>
    <option value="向服務器提交的值" selected="selected">顯示的值</option>
</select>

value:向服務器提交的值
selected:默認選中的item,如果有多個item添加了此屬性，那麼最下面的有效。
multiple:在select標籤中設置此屬性，那麼就可以進行多選。

6.提交按鈕
語法：

<input type="submit" value="顯示的文本"/>

語法：
type=”submit”:只有當type=”submit”時候，按鈕纔有提交作用。
value:按鈕上顯示的文本。

7.重置按鈕
語法：

<input type="reset" value="重置按鈕"/>

type=”reset”：只有當type=”reset”時，表單信息纔會回到初始狀態
value:按鈕上顯示的文本。

8.label控件：
作用：可以和其他控件關聯，點擊此控件=點擊關聯控件。
語法：

<label for="控件ID名稱"></label>

屬性

1.color顏色
2.font-size字體大小
3.

層疊樣式表（css）

第一部分

1.認識css
簡介：全稱爲層疊樣式表，主要用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小，顏色等。
優勢：單處定義樣式，多處調用。
語法：

p{color:blue}

p:選擇符
{}聲明：大括號即爲聲明，聲明內又有屬性和值，如果又多個屬性，使用“;”分隔。

2.內聯式css樣式：直接寫在現有的HTML標籤中
語法：<p style="color:red">哈哈哈</p>
所有的樣式都要寫在style中，如果有多個屬性，那麼使用“；”分隔。

3.嵌入式CSS標籤，寫在當前文件中.
語法：
寫一個單獨的標籤

span{
color:red
}

然後所有的span標籤內的字體都爲紅色

4.外部css樣式，寫在一個單獨的文件中
用法：
1.創建一個文件，後綴名必須爲.css，在裏面寫樣式表
2.在html文件中調用,語法如下:

<link href="css文件全稱" rel="stylesheet" type="text/css" />

href:值爲將要調用的css文件全稱。
rel=”stylesheet”
type=”text/css”
爲固定寫法，不可修改

5.css樣式選擇器：

選擇器{
    樣式；
}

選擇器的作用是指明{}中的樣式的作用對象。

6.標籤選擇器

就是HTML代碼中的標籤。如代碼編輯器中的<html><body><h1><p><img>都屬於標籤選擇器。

7.類選擇器
在html中最常用到的就是類選擇器
語法：
一..類選擇器名稱{css樣式代碼;}
二.在合適的標籤中加入class=”類標籤名稱”即可
注意：
定義類選擇器時，需要在名稱前面添加一個”.”

8.ID選擇器
語法：
一.#id選擇器名稱{}
二.在合適的標籤中加入id=”id選擇器名稱”
注意：
定義ID選擇器時，需要在名稱前面添加一個”#”

9.類選擇器和ID選擇器的不同
有兩點不同
1.類選擇器可以使用多次，id選擇器只可以使用一次
2.舉例說明：

    <span class="a1 a2">哈哈</span>  正確
    <span id="a1 a2">哈哈</span>  錯誤

10.子選擇器
語法：

.foot>li{border:1px solid red}

用法：

<ul class="foot">
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
</ul>

此時foot的樣式就會作用在li標籤裏面了。
注意：子選擇器裏面定義的樣式只作用於屬性設置標籤的兒子標籤，像孫子標籤是無效的.

11.包含（後代）選擇器
語法：

.foot li{border:1px solid red}

和子選擇器大致相同，唯一不同點是：後代選擇器定義的樣式不止作用於兒子標籤，只要是它的後代標籤，統統作用。

12.通用選擇器：
語法：

*{
    color:red;
}

它作用於整個HTML。

13.僞類選擇符
語法：

a:hover{color:red;}

作用：當鼠標在標籤a上劃過時，字體就會顯示設置的樣式。
注意：
一：它允許給不存在的標籤設置樣式。
二：他不止可以給”a”標籤設置僞類選擇符，也可以給p，h1等標籤設置，但是兼容性不太好，唯獨“a”標籤可以兼容所有的瀏覽器。

14.分組選擇符
語法：

h1,span{
    color:red;
}

解析：

h1,span{
    color:red;
}
等於
h1{color:red;}
span{color:red;}

第二部分

1.繼承
CSS中部分樣式具有繼承性，部分樣式不具有繼承性。
繼承性：集成性是一種規則，它允許樣式不僅應用於某個特定HTML標籤元素，而且應用於其後代碼，比如：

p{
    color:red;
}
<p>哈哈哈<span>嘿嘿嘿</span>呵呵</p>

這樣“哈哈哈嘿嘿嘿呵呵”都爲紅色了，包括了”span”標籤裏面的。這是具有繼承性的css樣式。

但是還有有一部分css樣式不具有繼承性.
比如：

p{
    border:1px
    solid:red;
}
<p>哈哈哈<span>嘿嘿嘿</span>呵呵</p>

這時，”span”標籤裏面的字並沒有被繼承.

2.特殊性
如果對同一段元素設置了不同的CSS樣式，那麼元素會啓用哪一個CSS樣式呢？
做個實驗試一下：

p{color:red;}
.first{color:green;}/*因爲權值高顯示爲綠色*/
span{color:pink;}/*設置爲粉色*/

<p class="first">哈哈哈哈<span>哈哈哈哈哈哈哈</span>哈哈哈哈哈哈</p>

瀏覽器是根據權值來判斷使用哪種CSS樣式的，誰的權值高就調用誰。

p{color:red;} /*權值爲1*/
p span{color:green;} /*權值爲1+1=2*/
.warning{color:white;} /*權值爲10*/
p span.warning{color:purple;} /*權值爲1+1+10=12*/
#footer .note p{color:yellow;} /*權值爲100+10+1=111*/

注意：還有一個權值比較特殊–繼承，它也有權值，但是很低，只有0.1，可以理解爲繼承的權值最低。

3.層疊
問：如果一個元素具有相同的CSS樣式(等於具有相同的CSS權重)，那麼誰的優先級大呢？
答：位於最後面的樣式會被應用。

4.重要性
問：如果在開發中有一個CSS樣式需要設置最高權限，那麼應該怎麼設置呢？
答：可以使用”!important”來解決
語法：

p{color:red!important;}
p{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的奧特曼。</p>

第三部分

1.元素分類
在HTML中，標籤元素大體被分爲三種不同的類型：塊狀元素，內聯元素，內聯塊狀元素.
常用的塊狀元素有：

<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的內聯元素有

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的內聯塊狀元素有

<img>、<input>

2.塊狀元素
塊狀元素特點：
1.每個塊狀元素都是從新的一行開始。
2.塊狀元素的寬度，高度，行高及頂邊距都可以設置。
3.塊狀元素的寬度在不設置的情況下，是它父容器的100%，除非設定一個高度。

3.內聯元素
內聯元素特點：
1.和其他元素都在一行上。
2.元素的高度、寬度及頂部邊距不可設置；
3.元素的寬度就是它的文字或圖片的高度，不可改變。

4.內聯塊狀元素
內聯塊狀元素就是指同時具有塊狀元素和內聯元素的元素。
特點：
1.和其他元素都在一行上；
2.元素的高度，寬度，行高，以及頂部間距都可以設置。
5.盒模型-邊框(一)

紅色部分就是邊框。
語法：

div{
    border:2px solid red;
}
上面是縮寫,可以分開寫
div{
border-width:2px;
border-style:solid;
border-color:red;
}

6.盒模型-邊框(二)
單獨給一邊設置邊框。

語法：

div{
    border-bottom:1px solid red;
}

給其他三遍單獨設置邊框：

div{
    border-top/right/left:1px solid red;
    }

7.佈局模型
分爲三種佈局模型：
1.流動模型（Flow）
2.浮動模型（Float）
3.層模型（Layer）
8.流動模型
特點：組件以自上而下，自左而右分佈。
9.浮動模型
特點：
1.可以讓兩個塊狀元素並排顯示。
10.層模型
層模型有三種形式
1.絕對定位（position:absolute）
使用top,bottom,right,left屬性相對於其最接近的一個具有定位屬性的父包含塊，進行定位，如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器窗口。

2.相對定位（position:relative）

3.固定定位（position:fixed）

11.盒模型代碼簡寫
語法：

margin:上下右左;

1.
margin:10px 10px 10px 10px;
可以縮寫爲：
margin:10px;

2.
margin:10px 20px 10px 20px;
可縮寫爲：
margin:10px 20px;

3.
margin:10px 20px 30px 20px;
可縮寫爲：
margin:10px 20px 30px;

12.顏色值縮寫

#000000可縮寫爲：#000
#336699可縮寫爲：#369

13.字體屬性縮寫

body{
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:12px;
    line-height:1.5em;
    font-family:"宋體",sans-serif;
}
可以縮寫爲：
body{
    font:italic small-caps bold 12px/1.5em "宋體",sans-serif;
}

注意：
1.使用這一簡寫方式至少要指定font-size,font-family屬性；其他屬性如果未加入，則使用默認值；
2.在縮寫font-size和font-height時中間要加入/斜槓。
14.顏色值
有三種方式：
1.英文表示：p{color:red}
2.RGB表示：p{color:rgb(133,45,200)}
3.十六進制顏色p{color:#ffffff}
15.長度單位

p{font-size:13px;text-indent:1em/100%}

此時首行縮進就等於前面的13px
16.水平居中
1.容器內居中
text-align:center;
2.容器居中
margin:20px auto;

屬性：

1.文字排版

font-size:12px<!-- 字體大小 -->
font-weight:bold<!-- 字體加粗 --><!--  -->
color:red/#eee <!-- 字體顏色 -->
font-family:"宋體"<!-- 使用css樣式爲網頁中設置字體
注意：如果用戶本地沒有設置的字體，那麼將會顯示網頁默認字體。 -->
font-style:italic;<!-- 斜體 -->
text-decoration:underline;<!-- 下劃線 -->
text-decoration:line-through;<!-- 中劃線 -->

2.段落排版

text-indent:2em<!-- 縮進 -->
line-height:1.5em<!-- 行間距 -->
letter-spacing:50px<!-- 字間距 -->
text-align:center/left/right<!-- 爲塊狀元素設置居中、居左、居右>

display:block<!-- 將內聯元素轉換爲塊狀元素 -->
display:inline;<!--將塊狀元素轉換爲內聯元素 -->
width:20px<!--寬度，作用於塊狀元素-->
height:20px<!--高度，作用於塊狀元素-->
padding:20px<!--元素內容與邊框之間的距離，稱爲填充（使當前元素擴大20px）-->
margin:20px<!--元素與其他元素之間的距離，稱爲邊界（當前元素距離周圍20px）-->
inline-block;<!--將元素轉換成內聯塊狀元素 -->

html/css基本使用

組件(html)

第一部分

第二部分

第三部分

屬性

層疊樣式表（css）

第一部分

第二部分

第三部分

屬性：

webView使用大全

QQ聯繫人菜單2：

動態使用Fragment

android Xml控件屬性

SharedPreferences存儲與讀取

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結