python第七十七天－－－HTML_ZenDei技術網路在線

HTML5 :規則, 瀏覽器的通用規則 1 1、規則, 瀏覽器的通用規則 2 2、開發者: 3 學習html 規則 4 開發後臺程式 5 - 寫html文件 (當作模板) 6 - 資料庫獲取數據,替換到指定的HTML文件中的位置 7 3、本地測試 8 －找到文件，用瀏覽器直接打開 9 － pych ...

HTML5 :規則, 瀏覽器的通用規則

 1 1、規則, 瀏覽器的通用規則
 2  2、開發者: 
 3        學習html 規則
 4        開發後臺程式
 5         - 寫html文件   (當作模板)
 6         - 資料庫獲取數據,替換到指定的HTML文件中的位置
 7  3、本地測試
 8     － 找到文件，用瀏覽器直接打開
 9     － pycharm打開測試
10  4、編寫 html 文件
11     － doctype 對應關係
12     － html 標簽，標簽有內部屬性   一個頁面只能有一個html標簽
13     － 註釋   <!--  -->
14  5、標簽分類
15     － 自閉合標簽
16         <meta charset='utf-8;> 字元編碼
17         <link> 外鏈接
18     － 手動閉合標簽
19         〈tilte〉</tilte> 頁面名稱  
20  6、 head 標簽 內部
21     － <meta  >  編碼  跳轉  刷新，關鍵字，描述   IE相容 
22         <meta http-equiv="X-IA-Compatible" content="IE=IE9;IE=IE8">
23         〈tilte〉</tilte> 頁面名稱 標題
24         <link /> 外鏈接
25         <style /> CSS 內鏈接
26         <script/> js 內鏈接
27 7、body標簽
28     
29     -圖標，  &nbsp; &gt; &lt;
30     p 標簽 ，段落 －－－塊級標簽
31     br 換行 －－－行內標簽（內聯標簽）
32 ＝＝＝＝＝＝＝＝＝＝＝＝＝小結＝＝＝＝＝＝＝＝＝＝＝＝
33     塊標簽
34         p標簽（段落之間間距），H系列（加大加粗）  div(白板)
35     內聯標簽 
36         span  標簽    （自身無特性－－白板）
37     標簽之間可以嵌套
38     標簽的意義， CSS操作  ，JS 操作
39     chorme 審查元素的使用
40         定位
41         查看樣式
42 
43 =============================================================
44     - input 標簽
45         input type='text'    name屬性， value='顯示字元'
46         input type='password'    name屬性， 密碼輸入
47         input type='submit'    value='提交' 提交按鈕  ，所對應的表單
48         input typy='button'    value='進入' 成為普通的按鈕
49 
50         input type='radio'    單選框 value, checked='checked' , name 屬性（相同則互斥 ）
51         input type='checkbox'    覆選框 value, checked='checkde' name 屬性 （可以多選 批量獲取數據）
52         input type='file'    依賴form表單的一個屬性 enctype='multipart/form-data'
53         input type='rest'    重置 對應表單的內容
54         <textarea>預設值</textarea>  name 屬性
55     - select 標簽
56         －name ,內部 option value, 提交到後臺 size, multiple
57     
58     - a 標簽
59         - 跳轉 
60         - 錨   href= '#一個標簽的ID' 使用時，當前頁面所有的ID 必須唯一
61     
62     - img 
63         src 
64         alt
65         title
66     - 列表
67         ul
68           li
69         ol
70           li
71         dl
72           dt
73           dd
74     - 表格
75         table  表格
76             thead   表頭，第一行
77               tr
78                 th
79             tbody    表身  中間行
80               tr
81               　td
82         colspan= ''
83         rewspan= ''
84     - label
85         用於點擊文件 ，使得關聯的標簽獲取游標
86         <label for='username'>用戶名：</label>
87         <input id='username' type='text' name='user'/>
88     fieldset

View Code

CSS 樣式

 1 CSS
 2 1、    樣式
 3         - 標簽內設置的style屬性
 4         - 在head 中 <style></style>
 5             在標簽內設置class 、id
 6             - id 選擇器
 7                 # id
 8 
 9             - class 選擇器
10                 . class
11             層級選擇
12                 div span {}    /* 表示 div  內的 span 才應用*/
13                 span a{}
14             組合選擇
15                 #id1,#id2{}   /* 表示組合 選擇*/
16             屬性選擇
17                 對選擇到的標簽再通過屬性進行一次 篩選
18                 .c1[n='name']{}
19 
20 
21         標簽 選擇器
22             div \ a \span \input
23             
24             
25 
26     
27 
28     
29 2、 CSS 樣式可以寫在單獨的文件中
30     <link rel='stylesheet' href='cssname.css'/>
31 3、註釋  /*  */
32 4、邊框  
33     － 寬度 ，樣式， 顏色 border: 4px  dotted  red;
34     - border-left  左對齊
35 5、
36     height 高
37     width 寬
38     text-aling:ceter 左右居中
39     line-height 行高 上下居中
40     color  字體顏色
41     font-size 字體大小
42     font-weight 字體加粗
43 6、背景
44 
45 7、float 浮動
46     塊標簽 堆疊效果
47     <div style='clear: both;'></div> 清除浮動效果
48 8、display 彈性盒子
49     display: inline;  內行
50     display: block; 塊
51     內行標簽： 無法設置高度，寬度  padding margin 
52     塊級標簽： 可以設置
53 9、padding margin(0,auto) 內 外 邊距  
54     padding 內邊距
55     margin 外邊距

View Code

附上一個特殊字元的網頁代碼：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <title></title>
  6     </head>
  7     <body>
  8         <h1 align="center">HTML特殊字元編碼對照表</h1>
  9         <table style="COLOR: #666666; FONT-SIZE: 12px" border="1" cellspacing="1" bordercolordark="#ffffff" cellpadding="2" width="100%" align="center">
 10             <tbody>
 11                 <tr height="26">
 12                     <td bgcolor="#f6f6f6" align="center">特殊符號</td>
 13                     <td bgcolor="#f6f6f6">命名實體</td>
 14                     <td bgcolor="#f6f6f6">十進位編碼</td>
 15                     <td bgcolor="#f6f6f6" align="center">特殊符號</td>
 16                     <td bgcolor="#f6f6f6">命名實體</td>
 17                     <td bgcolor="#f6f6f6">十進位編碼</td>
 18                     <td bgcolor="#f6f6f6" align="center">特殊符號</td>
 19                     <td bgcolor="#f6f6f6">命名實體</td>
 20                     <td bgcolor="#f6f6f6">十進位編碼</td>
 21                 </tr>
 22                    <tr>
 23                     <td bgcolor="#f6f6f6" align="center">Α</td>
 24                     <td>&amp;Alpha;</td>
 25                     <td>&amp;#913;</td>
 26                     <td bgcolor="#f6f6f6" align="center">Β</td>
 27                     <td>&amp;Beta;</td>
 28                     <td>&amp;#914;</td>
 29                     <td bgcolor="#f6f6f6" align="center">Γ</td>
 30                     <td>&amp;Gamma;</td>
 31                     <td>&amp;#915;</td>
 32                 </tr>
 33                 <tr>
 34                     <td bgcolor="#f6f6f6" align="center">Δ</td>
 35                     <td>&amp;Delta;</td>
 36                     <td>&amp;#916;</td>
 37                     <td bgcolor="#f6f6f6" align="center">Ε</td>
 38                     <td>&amp;Epsilon;</td>
 39                     <td>&amp;#917;</td>
 40                     <td bgcolor="#f6f6f6" align="center">Ζ</td>
 41                     <td>&amp;Zeta;</td>
 42                     <td>&amp;#918;</td>
 43                 </tr>
 44                 <tr>
 45                     <td bgcolor="#f6f6f6" align="center">Η</td>
 46                     <td>&amp;Eta;</td>
 47                     <td>&amp;#919;</td>
 48                     <td bgcolor="#f6f6f6" align="center">Θ</td>
 49                     <td>&amp;Theta;</td>
 50                     <td>&amp;#920;</td>
 51                     <td bgcolor="#f6f6f6" align="center">Ι</td>
 52                     <td>&amp;Iota;</td>
 53                     <td>&amp;#921;</td>
 54                 </tr>
 55                 <tr>
 56                     <td bgcolor="#f6f6f6" align="center">Κ</td>
 57                     <td>&amp;Kappa;</td>
 58                     <td>&amp;#922;</td>
 59                     <td bgcolor="#f6f6f6" align="center">Λ</td>
 60                     <td>&amp;Lambda;</td>
 61                     <td>&amp;#923;</td>
 62                     <td bgcolor="#f6f6f6" align="center">Μ</td>
 63                     <td>&amp;Mu;</td>
 64                     <td>&amp;#924;</td>
 65                 </tr>
 66                 <tr>
 67                     <td bgcolor="#f6f6f6" align="center">Ν</td>
 68                     <td>&amp;Nu;</td>
 69                     <td>&amp;#925;</td>
 70                     <td bgcolor="#f6f6f6" align="center">Ξ</td>
 71                     <td>&amp;Xi;</td>
 72                     <td>&amp;#926;</td>
 73                     <td bgcolor="#f6f6f6" align="center">Ο</td>
 74                     <td>&amp;Omicron;</td>
 75                     <td>&amp;#927;</td>
 76                 </tr>
 77                 <tr>
 78                     <td bgcolor="#f6f6f6" align="center">Π</td>
 79                     <td>&amp;Pi;</td>
 80                     <td>&amp;#928;</td>
 81                     <td bgcolor="#f6f6f6" align="center">Ρ</td>
 82                     <td>&amp;Rho;</td>
 83                     <td>&amp;#929;</td>
 84                     <td bgcolor="#f6f6f6" align="center">Σ</td>
 85                     <td>&amp;Sigma;</td>
 86                     <td>&amp;#931;</td>
 87                 </tr>
 88                 <tr>
 89                     <td bgcolor="#f6f6f6" align="center">Τ</td>
 90                     <td>&amp;Tau;</td>
 91                     <td>&amp;#932;</td>
 92                     <td bgcolor="#f6f6f6" align="center">Υ</td>
 93                     <td>&amp;Upsilon;</td>
 94                     <td>&amp;#933;</td>
 95                     <td bgcolor="#f6f6f6" align="center">Φ</td>
 96                     <td>&amp;Phi;</td>
 97                     <td>&amp;#934;</td>
 98                 </tr>
 99                 <tr>
100                     <td bgcolor="#f6f6f6" align="center">Χ</td>
101                     <td>&amp;Chi;</td>
102                     <td>&amp;#935;</td>
103                     <td bgcolor="#f6f6f6" align="center">Ψ</td>
104                     <td>&amp;Psi;</td>
105                     <td>&amp;#936;</td>
106                     <td bgcolor="#f6f6f6" align="center">Ω</td>
107                     <td>&amp;Omega;</td>
108                     <td>&amp;#937;</td>
109                 </tr>
110                 <tr>
111                     <td bgcolor="#f6f6f6" align="center">α</td>
112                     <td>&amp;alpha;</td>
113                     <td>&amp;#945;</td>
114                     <td bgcolor="#f6f6f6" align="center">β</td>
115                     <td>&amp;beta;</td>
116                     <td>&amp;#946;</td>
117                     <td bgcolor="#f6f6f6" align="center">γ</td>
118                     <td>&amp;gamma;</td>
119                     <td>&amp;#947;</td>
120                 </tr>
121                 <tr>
122                     <td bgcolor="#f6f6f6" align="center">δ</td>
123                     <td>&amp;delta;</td>
124                     <td>&amp;#948;</td>
125                     <td bgcolor="#f6f6f6" align="center">ε</td>
126                     <td>&amp;epsilon;</td>
127                     <td>&amp;#949;</td>
128                     <td bgcolor="#f6f6f6" align="center">ζ</td>
129                     <td>&amp;zeta;</td>
130                     <td>&amp;#950;</td>
131