1------------------------------------------
<html>開始和結(jié)束</html>
<title>用來設(shè)置網(wǎng)頁標(biāo)題</title>
<meta> 設(shè)置網(wǎng)頁編碼方式
<hn>標(biāo)題標(biāo)簽</hn>
<p>段落標(biāo)簽</p>
<span>組合行內(nèi)元素</span>
<label>為 input 元素定義標(biāo)注</label>
<i>斜體文本</i>
<b>加粗文本</b>
<strong>strong 標(biāo)簽同樣加粗</strong>
<u>文本自帶下劃線</u>
<s>>刪除線文本</s> <del>刪除文本</del>
下標(biāo) 上標(biāo)
換行
分割線
<ul>
<li>無序列表</li>
</ul>
<ol>
<li>有序列表</li>
</ol>
<img src="路徑"> 圖片標(biāo)簽
2-------------------------------------------
<table>表格</table>
<thead>表格的頭部信息</thead>
<tbody>表格內(nèi)容</tbody>
<tfoot>表格尾部信息</tfoot>
<caption>表格標(biāo)題必須為表的第一個元素</caption>
<tr></tr>
<td></td>
<th>用法與td一樣掂榔，自帶文本居中和加粗效果</th>
<table border="1px" width="500" height="300" bgcolor="#EF82EF" align="center" valign="middle>
<caption>表格標(biāo)題</caption>
<tr>
<td colspan='3'></td>
</tr>
</table>
colspan 表示跨列合并
rowspan 表示跨行合并
cellspacing:設(shè)置表格與邊框之間的距離
cellpadding:設(shè)置單元格內(nèi)容與邊框之間的距離
<style type="text/css">樣式設(shè)置</style>
<div>容器標(biāo)簽 塊級元素</div>
<form action="文件的路徑" method="提交方式" >表單</form>向服務(wù)器發(fā)送數(shù)據(jù)
提交方式 get/post
<input type="text(顯示輸入)" name="uname" placeholder="提示文本" maxlength="最大字符數(shù)" />
<input type="password(隱式輸入)" name="upwd"/>
<input type="radio" name="gender(用來分組)" value="male(發(fā)送給服務(wù)端)" checked="默認(rèn)選中狀態(tài)">
radio 表示單選按鈕
checkbox 表示復(fù)選框
hidden 隱式發(fā)送一些附加信息，用戶不可見
file 文件上傳
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
<textarea name="uinfo" cols="20(默認(rèn)列數(shù))" rows="5(行數(shù))" disabled(禁用表單控件)></textarea>
class 規(guī)定類名
id 規(guī)定元素唯一id
lang 規(guī)定元素內(nèi)容的語言
style 規(guī)定行內(nèi)css樣式
? 空格
￥ 人民幣符號
? 版權(quán)符號
<>小于症杏，大于
3------------------------------
<style>樣式</style>
<link rel="stylesheet" href="url"> 引入外部CSS代碼
1.塊級元素：不與其他元素共行装获，可以手動設(shè)置寬高
代表元素：div hn p ul ol dl li table form
2.行內(nèi)元素：可以與其他元素共行，不能手動設(shè)置寬高厉颤，大小由內(nèi)容多少決定
代表元素 span lable a i b strong
3.行內(nèi)塊元素 既可以共行也可以手動設(shè)置寬高
代表元素 img input
開頭 id選擇器
. 開頭 類選擇器
穴豫，分隔 群組選擇器
空格分隔 后代選擇器
子代選擇器
- 匹配文檔中所有元素
:開頭偽類選擇器
:link 表示超鏈接未被訪問時的狀態(tài)
:visited 表示超鏈接被訪問過后的樣式
:hover 鼠標(biāo)懸停時的狀態(tài)
:active 鼠標(biāo)點(diǎn)按時的狀態(tài)
:focus 元素獲取到焦點(diǎn)時的樣式，常見于輸入框
按順序設(shè)置 LVHA 愛恨原則
a:active{
color: blue;
}
4-----------------------------
選擇器權(quán)重 # > . > 普通
overflow 內(nèi)容溢出處理- visible 默認(rèn)值,溢出部分可見
- hidden 溢出部分隱藏不可見
- scroll 設(shè)置內(nèi)容滾動顯示,顯示滾動條
- auto 自動 當(dāng)內(nèi)容溢出時,自動添加滾動條并且可用
border 邊框
border : 5px solid red;
border-width :設(shè)置邊框線的寬度
border-style :設(shè)置邊框線的樣式,取值 - solid 實(shí)線
- dashed 虛線
- dotted 點(diǎn)線
- double 雙線 (不常用)
上右下左四個方向的邊框
border-top/right/bottom/left :
網(wǎng)頁三角標(biāo)
元素尺寸為0逼友，其他三邊為透明transparent
border-radius 圓角邊框
border-radius : 5px 10px;第一個上下精肃，第二個左右
邊框陰影 box-shadow : h-offset v-offset blur spread color;
h-offset:陰影的水平偏移距離 取值為正，陰影向右
v-offset:陰影的垂直偏移距離 取值為正翁逞，陰影向下
blur:陰影的模糊程度 值越大肋杖，越模糊
spread:陰影擴(kuò)大或是縮小的距離 取值為正，陰影會擴(kuò)大
color:設(shè)置陰影顏色
外邊距margin 邊框border 內(nèi)邊距padding
margin:0 auto;表示自動挖函，可以用來設(shè)置元素居中
四個方向可單獨(dú)設(shè)置外邊距 margin-top/right/bottom/left:
具有默認(rèn)外邊距的元素 body,h1,h2,h3,h4,h5,h6,p,ul,ol
具有默認(rèn)內(nèi)邊距的元素 ol,ul,input
display 元素類型轉(zhuǎn)換
inline 行內(nèi)元素
block 塊元素
inline-block 行內(nèi)塊
none 元素隱藏 元素在文檔中就不占位了
水平居中:text-align : center;
垂直居中：設(shè)置元素 高度height 與行高line-height 保持一致
5-----------------------------
outline 輪廓線
background-color 背景顏色
background-image 背景圖片
background-repeat 背景圖片重復(fù)平鋪顯示
repeat-x
no-repeat 不平鋪
background-size 背景圖片尺寸
cover 圖片完全覆蓋元素状植，多出部分裁剪
contain 圖片剛好容納，不足的部分不管
auto 自動
background-position 背景圖片位置 上下左右
background-attachment 背景圖片是否固定
scroll 默認(rèn)值 跟隨滾動
fixed 固定位置
background 背景屬性簡寫
background:red url('') right no-repeat 100% 100% scroll;
font-family 指定字體
font-weight 字體粗細(xì)
lighter(100)/nomal(400)/bold(700) nomal正常粗細(xì)
font-size 字體大小
font-style 字體樣式(斜體)
italic 斜體
line-height 行高
使用簡寫怨喘，有必填的屬性值 family
font:style weight size family;
font:family size/line-height;
text-decoration 文本裝飾線
1.underline 下劃線
2.none 取消裝飾線
3.overline 上劃線
4.line-through 刪除線
text-indent 首行縮進(jìn) em為單位
border:1px solid black; 表格添加邊框
border-collapse 表格邊框合并
1.separate (默認(rèn))
2.collapse (邊框合并)
border-spacing 邊框邊距
list-style-type 設(shè)置項目符號
list-style-position:
設(shè)置項目符號的位置 默認(rèn)outside 項目符號與內(nèi)容框分離
設(shè)置inside 項目符號調(diào)整到內(nèi)容框中
list-style-image：url() 自定義項目符號
transition-property: 指定過渡屬性 all能過渡就過渡
transtion-duration 指定過渡時長
transition-timing-function
1.ease默認(rèn)值 慢速開始津畸，快速變快，緩慢結(jié)束
2.linear勻速變化
3.ease-in 慢速開始必怜，加速結(jié)束
4.ease-out 快速開始肉拓，慢速結(jié)束
5.ease-in-out 慢速開始和結(jié)束，中間先加速后減速的過程
tarnsition-delay 指定過渡效果的延遲時間
transition:property duration timing-fun delay; 屬性簡寫
float 浮動布局 left 元素向左浮動
6------------------------------------------------
clear 清除浮動帶來的影響
1.none 默認(rèn)不做任何處理
2.left 清除前面元素左浮動帶來的影響
3.right 清除前面元素右浮動帶來的影響
4.both 清除所有
position 定位布局
1.relative 相對定位
2.absolute 絕對定位
3.fixed 固定定位
4.static 靜態(tài)布局(默認(rèn)值)
top:以元素上邊為基準(zhǔn)進(jìn)行偏移
right:以元素右邊為基準(zhǔn)進(jìn)行偏移
bottom:以元素下邊為基準(zhǔn)進(jìn)行偏移
left:以元素左邊為基準(zhǔn)進(jìn)行偏移
z-index 元素堆疊次序 取值 數(shù)字梳庆，無單位暖途，值越大，元素越靠上
display:none/inline/block/inline-block 元素的隱藏與顯示
1.none元素隱藏不顯示膏执，在文檔中不占位
2.inline 顯示為行內(nèi)元素
3.block 顯示為塊元素
4.inline-block 顯示為行內(nèi)元素
visibility 元素顯示效果
1.visible 默認(rèn)值 可見的
2.hidden 隱藏驻售，元素隱藏仍然在文檔中占位
opacity 透明度 可被子元素繼承
0(完全透明)~1(不透明)
vertical-align 元素的垂直對齊方式
top / middle / bottom / baseline(默認(rèn)值，基線對齊)
cursor 光標(biāo)外觀
1.default
2.pointer 小手形狀
3.text 顯示為 I 樣式
7----------------------------------------------------
translate() 轉(zhuǎn)換函數(shù)
1.translate(x) 元素沿水平方向進(jìn)行移動等價于 translateX()
2.translate(x,y) 元素沿水平方向移動x更米，沿垂直方向移動y
3.translateY() 元素沿垂直方向平移
scale(x) 元素x軸和y軸都縮放 取值為負(fù)值欺栗，元素會反轉(zhuǎn)
scaleX(x) 元素沿X軸縮放
scaleY(x) 元素沿Y軸縮放
rotate(ndeg) 旋轉(zhuǎn)
transform-origin:left bottom 以左下角為旋轉(zhuǎn)原點(diǎn)
transform:rotate(45deg); 旋轉(zhuǎn)45°
作者：zh__quan
來源：CSDN
原文：https://blog.csdn.net/zh__quan/article/details/81461272
新人引用 以便后續(xù)查詢
html塊標(biāo)簽與行內(nèi)標(biāo)簽
轉(zhuǎn)自：http://blog.csdn.net/yuyanqiao/article/details/8558118
塊元素一般都從新行開始，它可以容納內(nèi)聯(lián)元素和其他塊元素,常見塊元素是段落標(biāo)簽'P"〕偌福“form"這個塊元素比較特殊消请，它只能用來容納其他塊元素。
如果沒有css的作用类腮，塊元素會順序以每次另起一行的方式一直往下排臊泰。而有了css以后，我們可以改變這種html的默認(rèn)布局模式蚜枢，把塊元素擺放到你想要 的位置上去因宇。而不是每次都愚蠢的另起一行。需要指出的是祟偷，table標(biāo)簽也是塊元素的一種，table based layout和css based layout從一般使用者（不包括視力障礙者打厘、盲人等）的角度來看這兩種布局修肠，除了頁面載入速度的差別外，沒有其他的差別户盯。但是如果普通使用者不經(jīng)意點(diǎn)了 查看頁面源代碼按鈕后嵌施，兩者所表現(xiàn)出來的差異就非常大了∶а迹基于良好重構(gòu)理念設(shè)計的css布局頁面源碼吗伤，至少也能讓沒有web開發(fā)經(jīng)驗(yàn)的普通使用者把內(nèi)容快 速的讀懂。從這個角度來說硫眨，css layout code應(yīng)該有更好的美學(xué)體驗(yàn)吧足淆。
你能夠把塊容器元素div想象成一個個box，或者如果你玩過剪貼文載的話礁阁，那就更加容易理解了巧号。我們先把需要的文章從各種報紙、雜志總剪 下來姥闭。每塊剪下來的內(nèi)容就是一個block丹鸿。然后我們把這些紙塊按照自己的排版意圖，用膠水重新貼到一張空白的新紙上棚品。這樣就形成了你自己獨(dú)特的文摘快報 了靠欢。作為一種技術(shù)的延伸，網(wǎng)頁布局設(shè)計也遵循了同樣的模式铜跑。.
內(nèi)聯(lián)元素(inline element)一般都是基于語義級(semantic)的基本元素门怪。內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素，常見內(nèi)聯(lián)元素 “a”疼进。
塊元素(block element)和內(nèi)聯(lián)元素(inline element)都是html規(guī)范中的概念薪缆。塊元素和內(nèi)聯(lián)元素的基本差異是塊元素一般都從新行開始。而當(dāng)加入了css控制以后，塊元素和內(nèi)聯(lián)元素的這種屬 性差異就不成為差異了拣帽。比如疼电，我們完全可以把內(nèi)聯(lián)元素cite加上display:block這樣的屬性，讓他也有每次都從新行開始的屬性减拭。
可變元素的基本概念就是他需要根據(jù)上下文關(guān)系確定該元素是塊元素或者內(nèi)聯(lián)元素蔽豺。可變元素還是屬于上述兩種元素類別拧粪，一旦上下文關(guān)系確定了他的類別修陡，他就要遵循塊元素或者內(nèi)聯(lián)元素的規(guī)則限制。大致的元素分類見全文可霎。
關(guān)于inline element的中文叫法魄鸦，有多種內(nèi)聯(lián)元素、內(nèi)嵌元素癣朗、行內(nèi)元素拾因、直進(jìn)式元素】跤啵基本上沒有統(tǒng)一的翻譯绢记，愛怎么叫怎么叫吧。另外提到內(nèi)聯(lián)元素正卧，我們會想到有個display的屬性是display:inline;這個屬性能夠修復(fù)著名的IE雙倍浮動邊界問題蠢熄。
塊元素(block element)
* address - 地址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄列表
* div - 常用塊級容易，也是css layout的主要標(biāo)簽
* dl - 定義列表
* fieldset - form控制組
* form - 交互表單
* h1 - 大標(biāo)題
* h2 - 副標(biāo)題
* h3 - 3級標(biāo)題
* h4 - 4級標(biāo)題
* h5 - 5級標(biāo)題
* h6 - 6級標(biāo)題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內(nèi)容炉旷，（對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
* noscript - 可選腳本內(nèi)容（對于不支持script的瀏覽器顯示此內(nèi)容）
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
內(nèi)聯(lián)元素(inline element)
* a - 鏈接
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字體
* br - 換行
* cite - 引用
* code - 計算機(jī)代碼(在引用源碼的時候需要)
* dfn - 定義字段
* em - 強(qiáng)調(diào)
* font - 字體設(shè)定(不推薦)
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤文本
* label - 表格標(biāo)簽
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義范例計算機(jī)代碼
* select - 項目選擇
* small - 小字體文本
* span - 常用內(nèi)聯(lián)容器签孔，定義文本內(nèi)區(qū)塊
* strike - 中劃線
* strong - 粗體強(qiáng)調(diào)
* sub - 下標(biāo)
* sup - 上標(biāo)
* textarea - 多行文本輸入框
* tt - 電傳文本
* u - 下劃線
* var - 定義變量
可變元素
可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。
* applet - java applet
* button - 按鈕
* del - 刪除文本
* iframe - inline frame
* ins - 插入的文本
* map - 圖片區(qū)塊(map)
* object - object對象
* script - 客戶端腳本
