HTML|CSS總結與補充
知識內容：
1.HTML總結
2.CSS總結
一、HTML總結
詳細內容見：http://www.cnblogs.com/wyb666/p/8733699.html
1、HTML是一套規則，瀏覽器認識的規則
2、開發者：
學習Html規則
開發後臺程序：
- 寫html文件（充當模板的作用） ******
- 數據庫獲取數據，然後替換到html文件的指定位置（Web框架）
3、本地測試
- 找到文件路徑，直接瀏覽器打開
- pycharm打開測試
4、編寫Html文件
- doctype對應關系
- html標簽，標簽內部可以寫屬性 ====> 只能有一個
- 註釋： <!-- 註釋的內容 -->
5、標簽分類
- 自閉合標簽
<meta charset="UTF-8">
- 主動閉合標簽
<title>老男孩</title>
6.HTML常用標簽：
head內標簽：
- <meta -> 編碼，跳轉，刷新，關鍵字，描述，IE兼容
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- title標簽 網頁標題
- <link /> 引入CSS
- <style /> CSS有關
- <script> JavaScript有關
body內標簽：
- 圖標， > <
- p標簽，段落
- br，換行
======== 小總結 =====
所有標簽分為：
塊級標簽： div（白板），H系列（加大加粗），p標簽（段落和段落之間有間距）
行內標簽： span（白板）
標簽之間可以嵌套
標簽存在的意義，css操作，js操作
ps:chorme審查元素的使用
- 定位
- 查看樣式
- h系列(h1 h2 h3 h4 h5 h6 大小依次減小，均加粗加黑)
- div -> 塊級標簽
- span -> 內聯標簽
- input系列 + form標簽
input type=‘text‘ - name屬性，value="趙凡"
input type=‘password‘ - name屬性，value="趙凡"
input type=‘submit‘ - value=‘提交‘ 提交按鈕，表單
input type=‘button‘ - value=‘登錄‘ 按鈕
input type=‘radio‘ - 單選框 value，checked="checked"，name屬性（name相同則互斥）
input type=‘checkbox‘ - 復選框 value, checked="checked"，name屬性（批量獲取數據）
input type=‘file‘ - 依賴form表單的一個屬性 enctype="multipart/form-data"
input type=‘rest‘ - 重置
<textarea >默認值</textarea> - name屬性
select標簽 - name,內部option value, 提交到後臺，size，multiple
- a標簽
- 跳轉
- 錨 href=‘#某個標簽的ID‘ 標簽的ID不允許重復
- img
src
alt
title
- 列表
ul
li
ol
li
dl
dt
dd
- 表格
table
thead
tr
th
tbody
tr
td
colspan = ‘‘
rowspan = ‘‘
- label
用於點擊文件，使得關聯的標簽獲取光標
<label for="username">用戶名：</label>
<input id="username" type="text" name="user" />
- fieldset -> 分組
legend -> 定義標題
- 共計18組標簽
二、CSS總結
詳細內容見：http://www.cnblogs.com/wyb666/p/8970209.html
1. CSS樣式可以寫在標簽的style屬性中
2. 在head裏面 style標簽中寫樣式
- id選擇區
#i1{
background-color: #2459a2;
height: 48px;
}
- class選擇器 ******
.名稱{
...
}
<標簽 class=‘名稱‘> </標簽>
- 標簽選擇器
div{
...
}
所有div設置上此樣式
- 層級選擇器（空格） ******
.c1 .c2 div{
}
- 組合選擇器（逗號） ******
#c1,.c2,div{
}
- 屬性選擇器 ******
對選擇到的標簽再通過屬性再進行一次篩選
.c1[n=‘alex‘]{ width:100px; height:200px; }
PS:
- 優先級，標簽上style優先，編寫順序，就近原則
css樣式也可以寫在單獨文件中，再使用link標簽引入
<link rel="stylesheet" href="commons.css" />
3、註釋
/* */
4、CSS常用屬性
(1)字體
font-family 字體種類
font-size 字體大小
font-weight 字體加粗
color字體顏色
(2)文本屬性
text-align 對齊(重要)
text-decoration 裝飾 (去除a標簽的下劃線(text-decoration: none))
text-indent 首行縮進
(3)背景屬性
background-color 背景顏色
background-image 背景圖片(九宮格涮葫蘆娃) url() no-repeat 50% 50%
(4)color
red (直接寫名字)
#FF0000
rgb(255, 0, 0) --> rgba(255,0,0,0.5)
(5) 邊框屬性 border
1. border-width (邊框寬度)
2. border-style (邊框樣式)
3. border-color (邊框顏色)
簡寫:
border: 1px solid red;
(6)居中
text-align:ceter, 水平方向居中
line-height，垂直方向根據標簽高度
(7)高度寬度
height， 高度 百分比
width， 寬度 像素，百分比
6、float
讓標簽浪起來，塊級標簽也可以堆疊
老子管不住：
<div style="clear: both;"></div>
7、display
display: none; -- 讓標簽消失
display: inline;
display: block;
display: inline-block;
具有inline,默認自己有多少占多少
具有block，可以設置無法設置高度，寬度，padding margin
******
行內標簽：無法設置高度，寬度，padding margin
塊級標簽：設置高度，寬度，padding margin
8、CSS盒子模型
content (內容)
padding (內填充) 調整內容和邊框之間距離時使用這個屬性
border (邊框)
margin (外邊距) 多用於調整調整標簽之間的距離 (註意兩個挨著的標簽margin取最大值)
註意: 要習慣看瀏覽器console窗口那個盒子模型
9.偽類和偽元素
(1)偽類
:link
:visited
:hover (重要)
:active
:focus(input標簽獲取光標焦點)
(2)偽元素
:first-letter
:before(重要 在內部前面添加)
:after(重要 在內部後面添加)
HTML|CSS總結與補充