標籤：檔案中 rda test 多行 oat 提交 a標籤 單選 規則
一、Html1、本質：一個規則，瀏覽器能任務的規則2、開發人員：<!DOCTYPE html> <!-- #doctype指定統一規範：html --><html>4、標籤 1、標籤分類
類似html這種格式（<html></html>），稱之為標籤，html標籤，head標籤等,標籤內部可以寫屬性<head lang="en"> #lang="en" 內部屬性， <meta charset="UTF-8"> #指定編碼 <title></title></head><body></body></html>
html、head、body是固定格式，不可變
<!-- 注釋內容-->，注釋
標籤可以嵌套
標籤存在的意義：用於定位，通過標籤+標籤裡面的屬性（如id=“1”，name=“xx”等），定位後，用於css、js操作
- 自閉和標籤 如：<meta> 後面不需要再跟個</meta>這樣的叫做自閉和標籤。為了方便查看自閉和標籤需要在後面加個/,例: <meta />
- 手動閉合標籤 如：<html> </html>
網頁頭部資訊
3、body標籤 1、各種符號http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
空格 大於符號> 小於符號<
<a href="www.baidu.com">lw </a> #倆個空格2、p標籤和br標籤
p標籤：段落，預設2個段落段落之間是有間距的
br標籤：換行
<p>1111<br />ggggggg</p> <p>123</p> #第一個段落（p標籤）和第二個段落在瀏覽器開啟的時候是有間隔的（2行），第一個段落加上br換行後，變成2行，但是沒有間距，是屬於一個段落
3、h標籤
標題標籤，h1到h6，從大到小
4、span標籤span標籤，白板一個，什麼屬性都沒有，行內標籤，所有標籤都是一行。通過css可使其變成任何特性的標籤
5、div標籤塊級標籤，也是白板，沒有任何屬性，因為是塊級標籤，一個div就是一行，但是行直接沒有間距，也是可以通過css使其變成任何標籤
6、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>
7、 textarea
多行文本輸入:
<div style="height: 50px;width: 100px;background-color: #dddddd"></div>
8、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>
9、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>註：錨：當一個頁面很長的時候，在點擊第一章的時候會跳轉到第一章的內容處；10、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>可以點擊圖片，查看這張圖片
11、列表--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>
效果：
12、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>
13、lable
<label form="username">使用者名稱：</label> #label就是一個普通的文本，和form一起使用 和下面的id=username聯絡起來，在點擊使用者名稱的時候，游標就會到下面input的輸入框中！ <input id="username" type="text" name="user">二、CSS
做html的時候先分為3塊（3個div）
在標籤上面設定style屬性
一般css檔案單獨寫在css的檔案中，在html中匯入：<link rel="stylesheet" href="commont.css" />
css檔案注釋：/* */
一個標籤可以應用2個樣式，如果不一樣，就全部應用，如果一樣，就按順序往下設定
選取器：#i1,#i2,#i3{ background-color: #dddddd; }<div id="i1">1</div> <div id="i2">2</div> <div id="i3">3</div>#對應id
.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: #ddddddfloat
python學習-day14-前端之html、css
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
