1、html
- 20個標籤
1.1、例子
<!DOCTYPE html> <!-- 標準對應關係標頭 -->
<html lang="en"> <!-- 起始,類似html這種格式 ：<html>dadadfad</html>叫一個html標籤 -->
<!-- lang="en"叫標籤內部的屬性 -->
<head> <!-- 頭的開始 -->
<meta charset="UTF-8">
<meta http-equiv="Refresh" content="3"> <!-- 3秒之後刷新網頁 -->
<meta http-equiv="Refresh" content="3;Url=https://www.zhihu.com"> <!-- 3秒之後跳轉到新網頁 -->
<meta name="Keywords" content="星際2,地下城與知乎,賺網"> <!--關鍵字-->
<meta name="description" property="og:description" content="有問題，上知乎。知乎，可信賴的問答社區，以讓每個人高效獲得可信賴的解答爲使命。知乎憑藉認真、專業和友善的社區氛圍，結構化、易獲得的優質內容，基於問答的內容生產方式和獨特的社區機制，吸引、聚集了各行各業中大量的親歷者、內行人、領域專家、領域愛好者，將高質量的內容透過人的節點來成規模地生產和分享。用戶通過問答等交流方式建立信任和連接，打造和提升個人影響力，並發現、獲得新機會。"/>
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=IE7;"> <!--讓該網頁使用IE瀏覽器打開時,使用高版本模式打開-->
<!-- Title --><!--網頁頭部標籤-->
<title>Title</title>
<!--網頁頭部小圖標-->
<link rel="shortcut" href="image/aa.ico">
</head> <!-- 頭的結束 -->
<body> <!-- 身體的頭 -->
<a href="https://www.zhihu.com/">知乎</a>
</body> <!-- 身體的結束 -->
</html> <!-- 結束 -->
1.2、例子2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Python</title>
</head>
<body>
<!--<a href="https://www.zhihu.com">李 >a<尚</a>-->
<!-- 代表空格-->
<!--> 代表>-->
<!--< 代表<-->
<p>dadadasfsfffffwqrsadfffdd<br>dddddd</p>
<p>12345</p>
<p>12345</p>
<h1>LiShang</h1>
<h2>LiShang</h2>
<h3>LiShang</h3>
<h4>LiShang</h4>
<h5>LiShang</h5>
<h6>LiShang</h6>
<span>hello world</span>
<span>hello world</span>
</body>
</html>
網頁特殊符號HTML代碼大全:https://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
1.3、標籤分類
自閉和標籤(很少):
<meta charset="UTF-8">
主動閉合標籤:
<html lang="en"> ****** </html>
<head> ****** </head> head標籤中海油幾種標籤
<meta > 編碼、跳轉、刷新、關鍵字、描述、IE兼容
<title>Title</title> <!--網頁頭部標籤-->
<link /> 搞圖標
<style />
<script />
<body> ****** </body>
body標籤：
- 圖標, > <
- p標籤 <p>dadadasfsfffffwqrsadfffdd<br>dddddd</p>(塊級標籤)
- <p>12345</p>
<p>12345</p> ###一個p標籤代表一個段落
- br標籤 <p>dadadasfsfffffwqrsadfffdd<br>dddddd</p> ######<br>代表換行,還在本段中
======================#-#-#-小總結-#-#-#----------
所有標籤分爲:
塊級標籤: H 系列(加大加粗), p 系列(段落之間有間距), div 標籤(白板),
行內標籤: span 標籤(白板,無任何特性),
標籤間可以嵌套
標籤存在的意義, 定位操作, js操作、css操作更方便
ps: chorme審查元素的使用
- 定位
- 查看樣式
input系列：
input type='text' #name屬性, 用於讓後臺拿數據
input type='password' #name屬性, 用於讓後臺拿數據
input type='submit' value="提交" #提交按鈕, 提交表單
input type='button' value="登錄" #普通按鈕
input type='radio' name="gender" #單選框,value,name屬性(name相同則互斥)
input type='checkbox' #複選框,value,name屬性(批量獲取數據)
input type='file' #依賴form表單的一個屬性,enctype='multipart/form-data'
input type='rest' #重置
<textarea>默認值</textarea> -name屬性
select標籤 -name,內部option value,提交到後臺,size,multiple
- h 標籤(塊級標籤)
- span 標籤(行內標籤)
- div 標籤(塊級標籤)
a 標籤
- 跳轉
- 錨, 跳轉到目錄對應的位置處功能：標籤的id不允許重複
<a href="#i1">第一章</a>
<div id="i1" style="height:600px;">第一章的內容</div>
img 標籤,圖片,屬性可設置大小和超鏈接跳, yong<a>標籤括起來, 可以點圖片跳轉網頁
<a href="https://www.zhihu.com">
<img src="mygirlfriend.jpg" title="真是大美女" style="height: 600px;width: 375px" alt="美女">
</a>
<form action="http://localhost:8888/index" method="GET">
###一個表單, action是提交的地址, method是提交的方式, GET是在URL裏提交, POST是在內容裏提交
<input type="text"/> ##一個普通的文本輸入框
<input type="password"/> ##輸入進去顯示密文
<!--{'user':'用戶輸入的數據','psd':'xxx'}-->
<input type="button" value="登錄1"/> ##一個提交的按鈕
<input type="submit" value="登錄2"/>
</form>
列表
<ul>
<li>asda</li> #前面帶點 ·
</ul>
<ol>
<li>dadsas</li> #前面帶序號 1. 2. ··· 100.
</ol>
<dl>
<dt>ttt</dt> #dt是標題
<dd>ddd</dd> #dd縮進一個是dt的內容
<dt>qeqeda</dt>
<dd>321easda</dd>
</dl>
表格1： (簡單的，不太規範)
<table border="1">
<tr> ###<tr>代表行
<td>主機名</td> ###<td>代表列
<td>端口</td>
<td>備註</td>
<td>操作</td>
</tr>
<tr>
<td>172.16.1.1</td>
<td>80</td>
<td>web</td>
<td>
<a href="girlfriend.jpg">查看詳細</a>
</td>
</tr>
<tr>
<td>172.16.1.8</td>
<td>3306</td>
<td>mysql</td>
<td>
<a href="33.jpg">查看詳細</a>
</td>
</tr>
<tr>
<td>172.16.10.153</td>
<td>10053</td>
<td>zabbix</td>
<td>
<a href="dasdaf.png">查看詳細</a>
</td>
</tr>
</table>
表格2： (規範的, 就用這種方式)
<table border="1">
<thead> ###<thead>是表頭, 裏面是<th>
<tr>
<th>主機名</th>
<th>端口</th>
<th>備註</th>
<th>操作</th>
</tr>
</thead>
<tbody> ###<tbody>是內容, 裏面是<td>
<tr>
<td>192.168.1.1</td> <!--<th colspan="2">80</th>-->該行佔兩列
<td>80</td>
<td>web</td>
<td>
<a href="mygirlfriend.jpg">查看</a>
</td>
</tr>
<tr>
<td>192.168.10.10</td> <!--<th rowspan="2">192.168.10.10</th>-->該列佔兩行
<td>3308</td>
<td>mysql</td>
<td>
<a href="dasdaf.png">查看</a>
</td>
</tr>
<tr>
<td>192.168.10.253</td>
<td>1001</td>
<td>java</td>
<td>
<a href="33.jpg">查看</a>
</td>
</tr>
</tbody>
</table>
- label標籤
-用於點擊文字，是的關聯的標籤獲取光標
<label for="username">your name:</label>
<input id="username" type="text" name="user"/>
- fieldset標籤
<fieldset>
<legend>登錄框</legend>
<label for="username">your name:</label>
<input id="username" type="text" name="user"/>
</fieldset>
<p>請選擇性別:</p>
男：<input type="radio" name="gender"/> #可選擇, name一樣就表示只能選擇其一
女：<input type="radio" name="gender"/>
- h 標籤(塊級標籤)
<h1>LiShang</h1>
<h2>LiShang</h2>
<h3>LiShang</h3>
<h4>LiShang</h4>
<h5>LiShang</h5>
<h6>LiShang</h6> ###顯示內容大小不同,h1最大,h6最小
- span 標籤(行內標籤)
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span> ###會橫排顯示
- div 標籤(塊級標籤)
<div>1</div>
<div>2</div>
<div>3</div> ###塊級顯示
label標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label></label>
</body>
</html>
1.4、上文的http://localhost:8888/index的後臺程序
#-*- coding:utf-8 -*-
# Author: li Shang
import tornado.ioloop
import tornado.web
class MainHandler(tornado.web.RequestHandler):
def get(self):
print("有人登錄")
u = self.get_argument('user')
p = self.get_argument('psd')
if u == 'lishang' and p == 'zhaoxiaomeng':
self.write("Hello, world")
print("他驗證對了,這個用戶是:%s" %u)
else:
self.write("gun")
print("他驗證錯了,這個用戶是:%s" %u)
def post(self):
print(u, p)
self.write("hahaha")
application = tornado.web.Application([
(r"/index", MainHandler),
])
if __name__ == "__main__":
application.listen(8888)
tornado.ioloop.IOLoop.instance().start()
1.5、例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.sogou.com/web" >
<input type="text" name="query" />
<input type="submit" value="搜索一下" />
</form>
</body>
</html>
2、CSS
在標籤上設置style屬性:
background-color: #4594ff;
height: 66px;
編寫css樣式：
1.標籤的style屬性
2.卸載head裏面,style標籤中寫樣式
- id選擇區
#i1{
background-color: #4594ff;
height: 66px;
}
- class選擇器
.名稱{
...
}
<標籤 class='名稱'> dada</標籤>
- 標籤選擇器
div{
background-color: black;
color: white;
}
<div id="i2">2</div> 下面的div標籤都會選用上面定義的樣式
<div class="c1">4</div> 若是上面有定義好的c1樣式，還是會選用c1
- 關聯選擇器
span div{
background-color: black;
color: white;
}
<span id="i3">3
<div id="i4">ddadad</div>
</span> 這樣只會是span裏的div應用上述的樣式，其他的div不會
例子1：
因爲id不允許重複,這種方式也不好
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: #4594ff;
height: 66px;
}
#i2{
background-color: brown;
height: 48px;
}
#i3{
background-color: forestgreen;
height: 80%;
}
</style>
</head>
<body>
<div id="i1">1</div>
<div id="i2">2</div>
<div id="i3">3</div>
</body>
例子 2:
class是可以重複的，因此這種方式最多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: mediumorchid;
height: 10ch;
}
</style>
</head>
<body>
<div class="c1">4</div>
<div class="c1">5</div>
</body>
</html>
- 顏色
- 位置