python學習-day14-前端之html、css
1、Html
一、本質：一個規則，瀏覽器能認識的規則
二、開發者：
學習Html規則
開發後臺程序：
- 寫Html文件（充當模板的做用） ******
- 數據庫獲取數據，而後替換到html文件的指定位置（Web框架）
三、html固定格式介紹
<!DOCTYPE html> <!-- #doctype指定統一規範：html --> <html>
相似html這種格式（<html></html>），稱之爲標籤，html標籤，head標籤等,標籤內部能夠寫屬性 <head lang="en"> #lang="en" 內部屬性， <meta charset="UTF-8"> #指定編碼 <title></title> </head> <body> </body> </html>
html、head、body是固定格式，不可變
<!-- 註釋內容-->，註釋
四、標籤
一、標籤分類
標籤能夠嵌套css
標籤存在的意義：用於定位，經過標籤+標籤裏面的屬性（如id=「1」，name=「xx」等），定位後，用於css、js操做html
- 自閉和標籤 如：<meta> 後面不須要再跟個</meta>這樣的叫作自閉和標籤。爲了方便查看自閉和標籤須要在後面加個/,例: <meta /> web
- 手動閉合標籤 如：<html> </html>數據庫
- 行內標籤（內聯標籤）：全部標籤佔據一個行。
- 塊級標籤：不管內容有多少，一個標籤就佔據一行
二、head標籤
一、meta標籤
屬性：編碼、刷新、設置頁面編碼、關鍵詞（針對搜索引擎），跳轉，描述
-
-
- 頁面編碼（告訴瀏覽器是什麼編碼）：< meta http-equiv=「content-type」 content=「text/html;charset=utf-8」>
-
-
-
- 刷新：<meta http-equiv="Refresh" content="10"> #每過10秒刷新一次
- 跳轉：<meta http-equiv="Refresh" content="3;Url=http://www.baidu.com"> #過3秒跳轉到www.baidu.com
- 關鍵詞：<meta name="keywords" content="老男孩，博客，小遊戲"> #設置關鍵詞，用於爬蟲爬，百度搜索引擎搜索這些關鍵詞的時候，將頁面（網站）加入搜索結果
- 描述：描述網站是作什麼的
-
二、title標籤
網頁頭部信息瀏覽器
三、link標籤框架
-
- css
< link rel="stylesheet" type="text/css" href="css/common.css" >post
-
- icon
< link rel="shortcut icon" href="image/favicon.ico"> #瀏覽器上的圖片學習
三、body標籤
一、各類符號
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html字體
空格 大於號> 小於號<網站
<a href="www.baidu.com">lw </a> #倆個空格
二、p標籤和br標籤
p標籤：段落，默認2個段落段落之間是有間距的
br標籤：換行
<p>1111<br />ggggggg</p>
<p>123</p>
#第一個段落（p標籤）和第二個段落在瀏覽器打開的時候是有間隔的（2行），第一個段落加上br換行後，變成2行，可是沒有間距，是屬於一個段落
三、h標籤
標題標籤，h1到h6，從大到小
四、span標籤
span標籤，白板一個，什麼屬性都沒有，行內標籤，全部標籤都是一行。經過css可以使其變成任何特性的標籤
五、div標籤
塊級標籤，也是白板，沒有任何屬性，由於是塊級標籤，一個div就是一行，可是行直接沒有間距，也是能夠經過css使其變成任何標籤
一、div標籤中能夠加屬性，js經過屬性查找div標籤中的內容及css裝飾
六、input輸入框標籤
get和post區別：
http請求的時候會有2部分，一部分是請求頭，一部分是請求內容
get提交方式，請求的數據是在請求頭中，也就是在url中能夠直接看到，
post方式，請求的數據在請求內容中（body），url中看不到
input type=‘text’ name屬性，value （默認）
input type=‘password’ name屬性
input type=‘submit’ #提交表單
input type=‘button’ #按鈕（能夠經過css修飾屬性）
input type=‘radio’ #單選框，value，check=「checked」，name屬性（name相同則互斥）
input type=‘checkbox’ #複選框，value，checked=「checked」 （默認就能夠），name屬性（批量獲取數據）
input type=‘file’ #上傳文件屬性，依賴form表單中的一個屬性，chctype=「multipart/form-data」 #若是沒有這個屬性，則不會傳輸文件，
只有加了這個屬性，點擊上傳的時候纔會一點點的將文件傳輸過去
input type=‘rest’ #重置，點擊後會重置輸入（或選擇）的東西
後臺只能拿到input中的內容
<input type="text" /> #input標籤的text屬性：文本
<input type="password" /> #type屬性：password屬性，輸入的時候是加密的
<input type="button" value="登陸"/> #button，按鈕，button僅僅是按鈕，並不能提交
<input type="submit" value="登陸"/> #submit，提交
注：僅僅是這樣並不能提交，須要在外面加入一個form標籤（表單），上面點擊按鈕，即將表單提交到form屬性裏面定義的地方（action）。
例：
<form action="http://localhost:8888/index">
<input type="text" name="user" /> #後臺根據name屬性「user」去匹配值，後臺程序裏面定義根據user獲取（後臺去獲取什麼值，這裏就寫什麼）
<input type="text" email="email"/ >
<input type="password" password="pwd"/>
<input type="button" value="登陸1"/>
<input type="submit" value="登陸2"/>
</form>
例：
<body>
<form action="http://192.168.16.35:8888/index" method="POST">
<input type="text" name="user" / value=「默認」> #value後面的東西是默認值，就是打開瀏覽器在輸入框中默認存在的值
<input type="text" name="email"/>
<input type="password" name="pwd"/>
<!--{'user': '用戶輸入的用戶','email': 'xx', 'pwd': 'xx' }-->
<input type="button" value="登陸1"/>
<input type="submit" value="登陸2"/>
</form>
<br/>
<form>
<input type="text" />
<input type="password" />
<input type="button" value="登陸1"/>
<input type="submit" value="登陸2"/>
</form>
</body>
選框：
<form>
<div>
<p>請選擇性別</p>
男：<input type="radio" name="gender" value="1"/> #name屬性，互斥，就是隻能選擇一個，經過value判斷選擇的是哪個
女: <input type="radio" name="gender" value="2"/> #name後面的東西能夠隨意，只有和後臺程序中寫的程序獲取的一致便可
</div>
</form>
<div>
<p>愛好</p>
籃球：<input type="checkbox" name="favor" value="1"/> #多選框，能夠選擇多個,仍是經過value判斷選擇了哪些
足球：<input type="checkbox" name="favor" value="2"/>
檯球：<input type="checkbox" name="favor" value="3"/>
網球：<input type="checkbox" name="favor" value="4"/>
</div>
七、textarea
多行文本輸入:
<div style="height: 50px;width: 100px;background-color: #dddddd"></div>
八、select標籤
選擇標籤，下拉框選擇
<select name="city"size="3" multiple="multiple"> #提交到後臺後根據name（city）獲取，size：顯示多少，默認顯示一個，即size=1；multiple：多選（能夠選擇多個）
<optgroup label="中國城市"> #optgroup分組：下面的選項在這個分組中，分組不能選，只能顯示
<option value="1">北京</option> #根據value獲取選擇的是哪一個
<option value="2">河北</option>
<option value="3" selected="selected">南京</option> #selectd默認選擇哪個
</optgroup>
</select>
九、a標籤
跳轉
<a href="http://www.baidu.com">百度</a> #href 超連接，必須加http，不然出錯 <a href="http://www.baidu.com" target="_blank">百度</a> #target="_blank"表示在新的標籤頁打開
錨：
<a href="#i1">第一章</a> -- #id和下面的id對應
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<div id="i1">第一章的內容</div>
<div id="i2">第二章的內容</div>
<div id="i3">第三章的內容</div>
注：錨：當一個頁面很長的時候，在點擊第一章的時候會跳轉到第一章的內容處；
十、img標籤
圖片標籤
<img src="1.jpg" style="height: 200px;width: 200px"> #--src後面直接跟圖片的路徑，style後面能夠設置圖片的尺寸！
<img src="1.jpg" title="博客園" style="height: 200px;width: 200px" alt="啦啦圖">
注：title：將鼠標放到圖片上方時將出現文字：博客園
alt：當這張圖片不存在的時候，圖片位置顯示文字：啦啦圖。
點擊圖片跳轉，能夠將img標籤放到a標籤裏面
<a href="http://www.xxx.com/1.jpg">
<img src="1.jpg" style="height: 200px;width: 200px">
</a>
能夠點擊圖片，查看這張圖片
十一、列表--ul，ol，dl
不經常使用，通常經過css改造
代碼、效果：
<ul> #ul、ol和li對應，配對的
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<ol>
<li>test4</li>
<li>test5</li>
<li>test6</li>
</ol>
<dl>
<dt>www</dt>
<dd>test7</dd>
<dd>test8</dd>
<dt>www2</dt>
<dd>test9</dd>
<dd>test10</dd>
</dl>
效果：
十二、table表格標籤
tr表示行
td表示列
<table border="1"> #border表示加上邊框，不加則沒有邊框
<tr>
<td>第一行，第一列</td>
<td>第一行，第二列</td>
<td>第一行，第三列</td>
</tr>
<tr>
<td>第二行，第一列</td>
<td>第二行，第二列</td>
<td>第二行，第三列</td>
</tr>
</table>
上面代碼效果：
表頭都單獨的標籤
<table border="1">
<thead>
<tr>
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>查看詳細</td>
</tr>
<tr>
<td>2.2.2.2</td>
<td>80</td>
<td>
<a href="s1.html">查看詳細</a> #能夠點擊查看詳細
</td>
</tr>
</tbody>
</table>
合併單元格：
<table border="1">
<thead>
<tr>
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="2">1</td> #至關於合併單元格，佔兩列，可是第三列須要刪掉，不然就擠出單元格了。
</tr>
<tr>
<td>2</td>
<td rowspan="2">2</td> #至關於合併丹陽，佔兩行，下面一行的相對應得列須要刪掉，不然就擠出單元格
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
1三、lable
<label form="username">用戶名：</label> #label就是一個普通的文本，和form一塊兒使用
和下面的id=username聯繫起來，在點擊用戶名的時候，光標就會到下面input的輸入框中！
<input id="username" type="text" name="user">
2、CSS
作html的時候先分爲3塊（3個div）
在標籤上面設置style屬性
通常css文件單獨寫在css的文件中，在html中導入：<link rel="stylesheet" href="commont.css" />
css文件註釋：/* */
一個標籤能夠應用2個樣式，若是不同，就所有應用，若是同樣，就按順序往下設置
選擇器：
- id選擇器：
#i1,#i2,#i3{
background-color: #dddddd;
}
<div id="i1">1</div>
<div id="i2">2</div>
<div id="i3">3</div>
#對應id
- class選擇器：
.c1{
background-color: #dddddd;
}
<div class="c1">4</div>
點.對應class，上面用點定義，下面用class調用，class能夠重複，c1是名稱
- 標籤選擇器
div{
background-color: #dddddd;
}
#下面全部div標籤的所有設置上div標籤選擇器裏面的樣式。
- 層級選擇器
span div{
ackground-color: #dddddd;
}
#span div中間空格，下面span裏面的div標籤設置上上面的樣式
其餘的同樣，.c1 div span...下面能夠寫不少，可是很深了就不合適了。
- 屬性選擇器
input[type='text']{
width: 10px;
height: 20px;
}
#找到input標籤，裏面的text的屬性，設置樣式，中括號【】裏面是屬性，能夠在input標籤裏面隨意寫
input[n='eeee']{
width: 10px;
height: 20px;
}
<input type="text" n="eee"/>
CSS單獨文件例子：
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="zcss.css" /> #引入css
</head>
<body>
<div id="i1">1</div>
<div id="i2">2</div>
<div id="i3">3</div>
<div class="c1 c2">4</div> #css裏面定義的c1和c2樣式
</body>
CSS文件zcss：
.c1{
font-size: 50px;
color: black;
}
.c2{
background-color: red;
color: white;
}
邊框
c3{
border: 1px solid red; #border：邊框（四面全都有，想要一面有，使用border-top），1px，solid：實體的，還有虛線的等等（本身能夠經過ptcharm試驗）。
能夠總結爲：寬帶，樣式，顏色
}
屬性介紹
height：高度，通常使用像素（px），也可使用百分比 width：寬度，像素，百分比 text-align:center ：水平方向居中 line-height：根據標籤高度居中 color：字體顏色 font-size：字體大小 font-weight：字體加粗
背景
background-color: #dddddd
float
相關文章
- 1. Python學習-day14-前臺總結 HTML和CSS總結
- 2. python前端學習之css
- 3. 前端學習html css js
- 4. 前端HTML、css、javascript學習
- 5. web前端學習之HTML與CSS
- 6. 前端學習之html+css（三）
- 7. 前端學習之html+css（二）
- 8. python-前端-html&css
- 9. 前端之HTML&CSS
- 10. 前端學習之路：我的HTML、CSS學習之路
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
