1 前端課程：
  2 
  3     1.後面要用到
  4     2.把前面學習的一些內容（數據）（靜態數據） 展示到前端，給用戶看 瀏覽器
  5     3.增加交互
  6     4.增加用戶體驗
  7     
  8     前端工程師主要工作：
  9         1.html5頁面 web移動端頁面
 10         2.跟後端交互（數據）
 11         3.遊戲的h5
 12         4.切圖（ui幹掉了）
 13         5.nodejs（後端語言）
 14 課程安排：
 15     前端三大語言：
 16     1.HTML
 
 17     2.CSS
 18     3.JS
 19 
 20     4.jQuery  一個模塊就是一個py文件  一個js文件就是一個模塊  jquery.js
 21     5.Bootstrap  HTML+CSS+JS +JQUERY
 22 
 23 
 24 
 25 前端自行補充內容：
 26     1.響應式
 27     2.移動端
 28     3.nodejs
 29     4.前端三大框架：
 30        1.react 2.angular 3.vue
 31         
 32 Django web框架
 33 
 34 
 35 今日內容：
 
 36     html標簽
 37     css
 38     結構：html。表示：css。行為：Javascript。
 39     
 40     
 41     **************html標簽分類********************************
 42     塊級標簽：==>blockdiv p ul ol dl
 43     （1）獨占一行
 44     （2）可以設置寬高
 45     （3）如果不設置寬，寬度是瀏覽器的100%
 46     
 47     行內標簽: a span ==》inline
 48     (1)在一行內顯示
 
 49    （2）不能設置寬 高
 50     （3）如果不設置寬高，默認是內容的寬高
 51     
 52     行內塊標簽：inline-block
 53     （1）在一行內顯示
 54     （2）可以設置寬高
 55     
 56     
 57     display: inline|block|none|inline-block；
 58     
 59     
 60     從學習p的第一天開始，就要死死記住：p標簽是一個文本級標簽，p裏面只能放文字、圖片、表單元素。
 61 
 62 其他的一律不能放。
 63     
 64     要想實現並排元素顯示： 必須要浮動，但是浮動會帶來問題，所以記得要浮動必須要清除浮動
 65     
 66     
 67     
 68     小馬哥
 69     山東濰坊人
 70     四年的時間（ios、web）
 71     
 72     
 73     上午內容回顧：
 74      html中的一堆標簽：
 75      
 76      行內標簽：display:inline
 77         a:超鏈接 href：連接資源地址 title:所有的標簽中都有title屬性
 78         span: 小的區域
 79         i：
 80         em:
 81         strong:
 82         
 83         
 84         (1)在一行內顯示 
 85         (2)不能設置寬高
 86         (3)它的寬和高是內容的寬高
 87      
 88         行內塊標簽：display:inline-block
 89         img    、input
 90         (1)在一行內顯示
 91         (2)可以設置寬高
 92         
 93      塊級標簽：
 94         div  p  
 95         (1)獨占一行
 96         (2)可以設置寬高
 97         (3)如果不設置寬度，默認是父盒子的100%寬
 98      
 99      
100      html+css 沒有邏輯可言
101      css就是帶你們挖坑 填坑 跳進坑（開個玩笑啦）
102      
103      （1）下午內容介紹：
104      ul:無序列表 它的孩子只能li。還有ol dl。dl中只能是dd和dt
105      
106      
107      
108      table  border=‘1‘    更細的邊框線
109       tr  行
110         td 單元格的數據
111         
112      form表單標簽
113       action: 提交的地址
114       method：提交的方式
115       
116       表單控件：
117        input 
118         屬性：type
119                   text:普通的文本
120                   password：密碼的文本
121                   radio:單選框
122                   checkbox:多選框
123                   file：上傳文件
124        select: 下拉列表
125            option：下拉列表的每一個選項
126        textarea：多行文本輸入框  rows:行數  cols:列數
127         
128        所有的表單控件中都有name屬性，這個name屬性與服務端有很大的聯系。
129         
130        
131        前端工具：
132         自行百度腦補
133         gulp
134         webpack
135         
136     css知識點介紹：
137     
138     1.css的三種引入方式
139        行內樣式  
140        內接樣式
141        外接樣式
142           鏈接式
143           導入式
144           
145     2.基礎選擇器
146         類選擇器
147         id選擇器
148         標簽選擇器
149         通配符選擇器
150     3.高級選擇器
151         後代選擇器
152         子代選擇器
153         組合選擇器
154         交集選擇器
155     4.選擇器補充
156         a標簽的偽類選擇器
157         偽元素選擇器（在博客上有，大家先看一下）
158     5.選擇器的繼承性和層疊性
159     
160     6.選擇器權重問題處理
161     
162     7.盒模型和盒模型的計算
163     
164     8.講了一點浮動的實現，但是有坑，下周詳細講這塊內容
165     
166     
167     
168     今日作業：
169     1.百度註冊頁面實現
170     2.小米頂部欄實現
171     
172     
173     預習：
174     http://www.cnblogs.com/majj/p/9039830.html 浮動

 1 回顧：
 2 html：語義化的標簽
 3 div：塊級標簽 將頁面進行分割
 4 
 5 span：行內標簽
 6 img
 7 
 8 ul ol dl 它的孩子只能是li
 9 
10 a：超鏈接標簽 href：鏈接地址 路徑一定要寫相對的 ./
11 
12 table
13 form ：與後端進行交互常用
14     input
15 思維導圖！！！
16 p：文本級標簽 p a span i em 只能放文本、圖片、表單元素
17 排版標簽：div、ul、ol、li
18 
19 行內標簽：文本級標簽中除了p，其它標簽都是行內標簽（行內塊標簽）
20 塊級標簽：所有的排版標簽都是塊級標簽，再加上p
21 *****************display、浮動、定位、z-index
22 行內標簽：display：inline;    .點是行內標簽
23     （1）在一行內顯示
24     （2）不能設置寬高
25     （3）它的寬和高是內容的寬高
26 塊級標簽：display:block;
27     （1）獨占一行
28     （2）可以設置寬高
29     （3）它的寬是父盒子的寬度100%；
30 行內塊標簽：img input   display:inline-block;
31      （1）在一行內顯示
32      （2）可以設置寬高
33      通過display屬性對標簽進行轉化  none|inline-block|block
34 display：none 當前盒子不顯示（隱藏）
35 
36 
37 css選擇器：
38 基礎選擇器：
39     標簽選擇器：選擇標簽的‘共性’，而不是特性 div{}、ul{}、ol{}、form{}
40     類選擇器：.box{}
41     id選擇器：#box{} 只能選擇特性，主要是為了js
42     *通配符選擇器：重置樣式
43 
44 高級選擇器：
45     後代選擇器（兒子、孫子...）
46     div p{}
47     子代選擇器（兒子）
48     div>p{}
49     組合選擇器：
50     div，ul，dl，form{}
51     交集選擇器：第一個選擇器是標簽選擇器，第二個選擇器是類選擇器
52     兩個標簽中間的一部分
53     form input.active{
54         width:200px;
55     }      //012 id 類 標簽
56     form input{}    //002
57     偽類選擇器：‘愛恨準則’
58     a:hover{}
59     偽元素選擇器：p:first-letter{}  p:before{content:‘lijie‘;}  before、after裏一定要加content
60     p:after{content:‘.‘; }------解決浮動帶來的問題
61     p::after{
62         /*解決浮動帶來的問題*/
63         content:‘‘;
64         display: block;
65         /*width: 100px;
66         height: 100px;
67         background-color: red;*/
68         visibility: hidden;
69         height: 0;
70         }
71 
72     權重問題： 繼承性 層疊性
73     數數的問題
74 
75     行內的樣式>內接樣式>外接
76     權重問題比較：id>類>標簽   （100>010>001）
77     繼承來的屬性權重為0，如果權重都為0，誰描述的近誰優先
78 #    總結：
79 # 1.先看標簽元素有沒有被選中，如果選中了，就數數 （id,class,標簽的數量） 誰的權重大 就顯示誰的屬性。權重一樣大，後來者居上
80 # 2.如果沒有被選中標簽元素，權重為0。
81 # 如果屬性都是被繼承下來的 權重都是0 。權重都是0:"就近原則" ： 誰描述的近，就顯示誰的屬性
82 
83 繼承：
84 例子  line-height=100px; ‘文本的行高‘
85 置灰的都不是繼承來的
86 
87 記住：有一些屬性是可以繼承下來 ： color 、 font-*、 text-*、line-* 。主要是文本級的標簽元素。
88 但是像一些盒子元素屬性，定位的元素（浮動，絕對定位，固定定位）不能繼承。
89 
90 盒模型：標準文檔流
91 margin：調整兄弟之間的距離
92 padding：調整父子標簽之間的位置，註意減width或height
93 
94 content（width,height）--padding（內邊距）--border（邊框）---margin
95 #ajax技術：預習

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css" media="screen">
 6         *{
 7             padding:0;
 8             margin: 0;
 9         }
10         div{
11             width: 200px;
12             height: 100px;
13             background-color: green;
14             color: red;
15             font-size: 20px;
16             text-align: center;
17             /*文本的行高*/
18             line-height: 100px;
19         }
20         /*p{
21             background-color: yellow;
22         }*/
23     </style>
24 </head>
25 <body>
26     <div>
27         <p>德國</p>
28     </div>
29     
30 </body>
31 </html>

 1 作業講解：
 2 1.註意結構
 3 css
 4 font
 5 img
 6 js
 7 mi_index
 8 2.加註釋，命名規範
 9 3.*重置樣式
10 4.搜索內容位置，加padding
11 5.邊框：border：none  border：1px solid red;

 1 1.坑一：margin垂直方向塌陷問題：   需要只設置一個盒子
 2 當設置第一個盒子為margin-bottom:50px;
 3 第二個盒子為margin-top:100px;那麽小的margin會掉到大的magin中，這就是margin塌陷
 4 
 5 水平方向上不會產生塌陷問題     
 6 ‘奇技淫巧’
 7 
 8 2.標準文檔流 三個特性;空白折疊；高矮不齊、底邊對齊；自動換行，一行寫不滿換行寫--記住！
 9 3.脫離標準文檔流：浮動、絕對定位、固定定位-------記住！
10 4.浮動：--聽課！！12:10-12：30
11 浮動的現象：----背過！！！
12     1.脫標：脫標的元素不在標準流下占位置
13     瀏覽器認為第一個盒子不是標準文檔流的盒子，認為第二個盒子為標準文檔流的盒子
14     2.浮動的元素互相貼靠
15     3.浮動的元素字圍效果（一般使用是字圍繞圖片）
16     第一個元素浮動，第二個元素不浮動，那麽第二個元素的文字會圍繞著第一個浮動元素顯示
17     看例子
18     
19     4.凡是脫標（浮動、絕對定位、固定定位）的元素，不區分行內標簽還是塊標簽，寬高可以任意設置
20 浮動永遠不是一個盒子在浮動，要浮動一起浮動
21 浮動帶來的好處：
22     1.實現元素並排
23     2.可以按照自己的規則走（設置盒模型的寬和高）
24 5.浮動帶來的問題：父盒子撐不起來了
25     加入父盒子， margin: 0 auto;設置盒子水平居中
26 6.浮動解決：
27     1.**給父盒子設置固定高度  百年不變導航欄
28     2.內墻法：給最後一個浮動的元素添加一個塊級標簽，並且該標簽設置屬性 clear:both;
29     例子 設置一個空的div   BFC
30     3.*****偽元素清除法：例子clearfix--常用背過 5條語句 
31     .clearfix:after {
32                         content: ".";
33                         display: block;
34                         height: 0;
35                         visibility: hidden;
36                         clear: both
37                     }
38     
39     4.**overflow:hidden
40 7.overflow:
41     visible默認值 hidden（超出部分隱藏）  auto  scroll    inherit繼承
42         visible    默認值。內容不會被修剪，會呈現在元素框之外。
43         hidden    內容會被修剪，並且其余內容是不可見的。
44         scroll    內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
45         auto    如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
46         inherit    規定應該從父元素繼承 overflow 屬性的值。
47 
48 數據驅動視圖（界面）的展示   先確定目的，再幹活
49 8.浮動元素margin塌陷不會出現任何問題
50     
51 標準流下的標簽，兄弟之間使用margin調整位置，父子之間使用padding調整子標簽的位置（小心盒模型的計算）
52 脫標的元素，margin和padding可以任意使用
53     margin: 0 auto;設置盒子水平居中 浮動的盒子margin: 0 auto;不起任何作用
54     使用margin：0 auto;註意點：
55         1.使用margin: 0 auto;水平居中盒子必須有width，要有明確width，文字水平居中使用text-align: center;
56         
57         2.只有標準流下的盒子 才能使用margin:0 auto; 
58         
59         當一個盒子浮動了，固定定位，絕對定位(後面會講)，margin:0 auto; 不能用了
60         
61         3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

 1 文本屬性：
 2     text-align：justify  兩端對齊，只對英文字母有效，中文無效
 3     text-indent：em 相對字體，根據父盒子的字體大小，來設置的單位
 4                 rem：移動端的單位，在html中設置font-size後，子盒子的大小也能進行縮放
 5 css單位選擇：
 6     px: 絕對單位 固定不變的
 7     em: 相對字體 根據父盒子的字體大小來設置的單位
 8     %：百分比
 9     rem: 只根據html的font-size來調整頁面所有標簽的盒模型的大小
10 
11 text-decoration屬性規定文本修飾的樣式
12 line-height：設置單行文本垂直居中；多行文本需要加padding（總高度-文本高度）/2 復制博客
13     (1)針對單行文本垂直居中
14     
15     公式：行高的高度等於盒子的高度，可以使當行文本垂直居中，註意只適用單行文本。
16     
17     (2)針對多行文本垂直居中
18     
19     行高的高度不能小於字體的大小，不然上下字之間會緊挨一起。
20     
21     第一步，一個寬度300*300的盒子，看盒子中一共顯示了幾行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那麽就知道行高*5=150px
22     
23     第二步，讓(盒子的高度-150px)/2=75;那麽設置盒子的padding-top:75px;同時保證盒子的高度為300px,那麽高度改為225px;
24 
25 
26 
27 圓：border-radius:100% 或50% 即可設置為圓形
28 背景顏色：一共有三種：單詞、rgb表示法、十六進制表示法
29 rgb（255,255,255） 白色  000黑色
30 
31 sublime 安裝colorPicker插件   ctrl+shift+c 出現顏色
32 
33 圖片處理;
34     background-image: url(./1.jpg);
35     background-repeat:repeat|no-repeat|repeat-x|repeat-y ;
36     background-position: x y;
37         x和y如果是正值，意味著調整當前圖片的位置信息，相對於原來的位置進行調整
38         x和y如果是負值，切背景圖，註意：一定要有明確的width和height ‘精靈圖技術‘
39     background-attachment:fixed   
40         為什麽有精靈圖技術？
41         audio音頻 video 視頻 script  link a  
42         img標簽  src屬性  往後端發get請求 優缺點
43         
44 字體圖標：
45     iconfont的使用：  例子  找到圖標添加到項目，在線鏈接或下載到本地，即可
46     vertical-align：垂直對齊

第10&11天--html、css