python學習day12

時間 2019-11-29

標籤 python 學習 day12 day 欄目 Python 简体版

原文原文鏈接

目錄css

html結構與標籤html

css樣式web

html結構之head瀏覽器

<head> 標籤用於定義文檔的頭部，它是全部頭部元素的容器。<head> 中的元素能夠引用腳本、指示瀏覽器在哪裏找到樣式表、提供元信息等等。服務器

文檔的頭部描述了文檔的各類屬性和信息，包括文檔的標題、在 Web 中的位置以及和其餘文檔的關係等。絕大多數文檔頭部包含的數據都不會真正做爲內容顯示給讀者。框架

下面這些標籤可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。ssh

<title> 定義文檔的標題，它是 head 部分中惟一必需的元素。佈局

<head>
    <meta charset="UTF-8"> <!--頁面編碼-->
    <!--<meta http-equiv="REFRESH" content="20"> &lt;!&ndash;刷新&ndash;&gt;-->
    <!--<meta http-equiv="REFRESH" content="2; Url=http://www.baidu.com"> &lt;!&ndash;跳轉&ndash;&gt;-->
    <meta name="keywords" content="百度,幫助,搜索"> <!--關鍵字-->
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> <!--模式選擇-->
    <title>測試頁面</title><!--標題-->
    <link rel="icon" href="favicon.ico"><!--標題圖片-->
</head>

html標籤之標籤分類、符號測試

一、文檔標籤(10 個)：<html>、<head>、<body>、<title>、<meta>、<base>、<style>、<link>、<script>、<noscript>字體

二、框架標籤(4個)：<frame>、<frameset>、<iframe>、<noframes>

三、佈局標籤(1個)：<div>

四、表格標籤(10 個)：<table>、<thead>、<tbody>、<tfoot>、<tr>、<td>、<th>、<col>、<colgroup>、<caption>

五、表單標籤(10 個)：<from>、<input>、<textarea>、<button>、<select>、<optgroup>、<option>、<label>、<fieldset>、<legend>

六、列表標籤(6個)：<ul>、<ol>、<li>、<dl>、<dt>、<dd>

七、連接標籤(1個)：<a>

八、多媒體標籤(5個)：<img>、<map>、<area>、<object>、<param>

九、文章標籤：<h1> - <h6> 、<p>、<br>、<span>、<bdo>、<pre>、<acronym>、<abbr>、<blockquote>、<q>、<ins>、<del>、<address>

十、字體樣式標籤：<tt>、<i>、<b>、<big>、<small>、<em>、<strong>、<dfn>、<code>、<samp>、<kbd>、<var>、<cite>、<sup>、<sub> 十一、特殊標籤(3個)：<!DOCTYPE>、、<hr>

備註：

一、當文檔中使用了<frameset>標籤和<body>標籤是互斥的，二者不能同時使用生效。

二、<thead>、<tfoot>、<tbody>這三個標籤必須一塊兒使用，並且順序是<thead>第一，<tfoot>第二，<tbody>第三。<tfoot>之因此排在<tbody>以前，聽說是爲讓瀏覽器先渲染<tfoot>，這樣當<tbody>中的單元格太多時不至於要等所有<tbody>單元格都渲染完再渲染<tfoot>。

三、<ul>無序列表，unordered list；<ol>有序列表，ordered list；<li>列表項，list item；<dl>定義列表，definition list；<dt>定義項，definition term；<dd>定義描述，definition description。

四、如下元素均是字體樣式元素。<tt> <i> <b> <big> <small> 標籤，如下元素都是短語元素<em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 標籤。雖然這些標籤訂義的文本大多會呈現出特殊的樣式，但實際上，短語元素標籤都擁有確切的語義。

符號詳見：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

html標籤之a標籤

<a> 標籤訂義超連接，用於從一張頁面連接到另外一張頁面。

<a> 元素最重要的屬性是 href 屬性，它指示連接的目標。

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="test2.html" target="_blank">test2</a><!--targer做用是打開一個新的頁面-->
<a href="#tt">跳轉章節</a>  <!--經過識別id進行跳轉-->

html標籤之select標籤

select 元素可建立單選或多選菜單。

<select&> 元素中的 <option> 標籤用於定義列表中的可用選項。

<select id="1">                         <!--通常都須要加id-->
    <option value="1">北京</option>   <!--通常都須要加value提交數據s時使用-->
    <option value="2">成都</option>
    <option value="3">上海</option>
</select>
<!--下拉框-->
<select size="2" multiple="multiple">   <!--size顯示多個選項,multiple:多選-->
    <option>北京</option>
    <option>成都</option>
    <option>上海</option>
</select>

<select>
    <optgroup label="浙江">   <!--用於分組-->
        <option>杭州</option>
        <option>溫州</option>
        <option>台州</option>
    </optgroup>
    <optgroup label="廣東">
        <option>廣州</option>
        <option>深圳</option>
        <option>珠海</option>
    </optgroup>
</select>

<select>
    <option>北京</option>
    <option>成都</option>
    <option selected="selected">上海</option> <!--selected選擇默認值-->
</select>

html標籤之input系列

<input> 標籤用於蒐集用戶信息。

根據不一樣的 type 屬性值，輸入字段擁有不少種形式。輸入字段能夠是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等。

<input type="checkbox" checked="checked" />  <!--複選框,checked設置默認選中(單選框也可用）-->

<input name="gender" type="radio" />      <!--單選框,name相同才能夠互斥-->
<input name="gender" type="radio" />      <!--單選框-->

<input type="text" />       <!--文本框-->

<input type="password" />   <!--密碼框-->

<input type="button" value="btn" /> <!--按鈕，value爲按鈕上的文字-->
<input type="submit" value="sub" /> <!--按鈕-->

<input type="file" />   <!--選擇文件，若是想要提交文件，須要在其所在的form標籤中添加一個特殊屬性-->

html標籤之span標籤

<span> 標籤被用來組合文檔中的行內元素。

<p><span>some text.</span>some other text.</p>

html標籤之form標籤

<form> 標籤用於爲用戶輸入建立 HTML 表單。

表單可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等等。

表單還能夠包含 menus、textarea、fieldset、legend 和 label 元素。

表單用於向服務器傳輸數據。

<form action="http://www.baidu.com"> <!--用於提交數據到後臺-->
    主機：<input name="host" type="text">  <!--name用於提交後臺後識別數據-->
    端口：<input name="port" type="text">
    用戶：<input name="user" type="text">
    密碼：<input name="passwd" type="text">
    <input type="button" value="提交">
    <input type="submit" value="提交表單">
</form>

html標籤之label標籤

<label> 標籤爲 input 元素定義標註（標記）。

label 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。若是您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。

<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。

<label for="cb1">婚否</label> <!--經過for與id屬性進行關聯-->
<input id="cb1" type="checkbox" />

html標籤之ul標籤

<ul> 標籤訂義無序列表。

<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>

html標籤之ol標籤

<ol> 標籤訂義有序列表。

<ol>
    <li>bbb</li>
    <li>aaa</li>
    <li>ddd</li>
    <li>ccc</li>
</ol>

html標籤之dl標籤

<dl> 標籤訂義了定義列表（definition list）。

<dl> 標籤用於結合 <dt> （定義列表中的項目）和 <dd> （描述列表中的項目）。

<dl>
    <dt>標題</dt>
    <dd>內容</dd>
    <dt>標題</dt>
    <dd>內容</dd>
</dl>

html標籤之table標籤

<table> 標籤訂義 HTML 表格。

簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。

tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。

更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

<table border="1"> <!--表，border邊框屬性-->
    <thead>     <!--表頭-->
        <tr>     <!--行-->
            <th>第一列</th>    <!--表頭列-->
            <th>第二列</th>
            <th>第三列</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">h1,h2</td>     <!--內容列,colspan橫向合併單元格-->
            <!--<td>h2</td>-->
            <td>h3</td>
        </tr>
        <tr>
            <td rowspan="2">a1,b1</td>  <!--內容列,rowspan縱向合併單元格-->
            <td>a2</td>
            <td>a3</td>
        </tr>
        <tr>
            <!--<td>b1</td>-->
            <td>b2</td>
            <td>b3</td>
        </tr>
    </tbody>
</table>

html標籤之fieldset標籤

fieldset 元素可將表單內的相關元素分組。

<fieldset> 標籤將表單內容的一部分打包，生成一組相關表單的字段。

當一組表單元素放到 <fieldset> 標籤內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可建立一個子表單來處理這些元素。

<fieldset> 標籤沒有必需的或惟一的屬性。

<legend> 標籤爲 fieldset 元素定義標題。

<fieldset>
    <legend>登錄</legend>     <!--在默認邊框的左上角顯示文字-->
    <p>用戶名：</p>
    <p>密碼：</p>
</fieldset>

css選擇器之類選擇器

類選擇器容許以一種獨立於文檔元素的方式來指定樣式。

該選擇器能夠單獨使用，也能夠與其餘元素結合使用。

提示：只有適當地標記文檔後，才能使用這些選擇器，因此使用這兩種選擇器一般須要先作一些構想和計劃。

要應用樣式而不考慮具體設計的元素，最經常使用的方法就是使用類選擇器。

.bb{
    color: antiquewhite;
    font-size: 29px;
}
<div class="bb">ggggg</div>

css選擇器之屬性選擇器

屬性選擇器能夠根據元素的屬性及屬性值來選擇元素。

簡單屬性選擇

若是但願選擇有某個屬性的元素，而不論屬性值是什麼，可使用簡單屬性選擇器。

a{
    color: antiquewhite;
}

根據具體屬性值選擇

除了選擇擁有某些屬性的元素，還能夠進一步縮小選擇範圍，只選擇有特定屬性值的元素。

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

css選擇器之ID選擇器

ID 選擇器容許以一種獨立於文檔元素的方式來指定樣式

#uu{
}
<div>123</div>
<div id="uu">123</div>

css選擇器以後代選擇器

後代選擇器（descendant selector）又稱爲包含選擇器。

後代選擇器能夠選擇做爲某元素後代的元素。

根據上下文選擇元素

咱們能夠定義後代選擇器來建立一些規則，使這些規則在某些文檔結構中起做用，而在另一些結構中不起做用。

<div class="c3">
    <a id="i8">
        <div>
            <span class="c4"></span>
        </div>
        <span class="c4"></span>
    </a>
</div>

css選擇器之選擇器分組

選擇器分組

假設但願 h2 元素和段落都有灰色。爲達到這個目的，最容易的作法是使用如下聲明：

h2, p {color:gray;}

將 h2 和 p 選擇器放在規則左邊，而後用逗號分隔，就定義了一個規則。其右邊的樣式（color:gray;）將應用到這兩個選擇器所引用的元素。逗號告訴瀏覽器，規則中包含兩個不一樣的選擇器。若是沒有這個逗號，那麼規則的含義將徹底不一樣。參見後代選擇器。

能夠將任意多個選擇器分組在一塊兒，對此沒有任何限制。

css樣式之backgroud屬性

參數	描述	值
background-color	設置元素的背景色。	color-name color-rgb color-hex transparent
background-image	設置背景圖像。	url(URL) none
background-repeat	設置背景圖像是否及如何重複。	repeat repeat-x repeat-y no-repeat
background-attachment	背景圖像是否固定或者隨着頁面的其他部分滾動。	scroll fixed
background-position	設置背景圖像的起始位置。	top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos

html樣式之border屬性

border 簡寫屬性在一個聲明設置全部的邊框屬性。

能夠按順序設置以下屬性：

border-width
border-style
border-color

若是不設置其中的某個值，也不會出問題，好比 border:solid #ff0000; 也是容許的。

p
  {
  border:5px solid red;
  }

html樣式之display屬性

<div style="display: none;background-color: coral">asdf</div>
<!--隱藏標籤-->
<span style="background-color: coral">asdf</span>
<span style="display: block;background-color: coral">asdf</span>
<!--內聯標籤變成塊級標籤-->
<hr/>
<div style="background-color: coral">asdf</div>
<div style="display: inline;background-color: coral">asdf</div>
<!--塊級標籤變成內聯標籤-->

display values

值	描述
none	此元素不會被顯示。
block	此元素將顯示爲塊級元素，此元素先後會帶有換行符。
inline	默認。此元素會被顯示爲內聯元素，元素先後沒有換行符。
list-item	此元素會做爲列表顯示。
run-in	此元素會根據上下文做爲塊級元素或內聯元素顯示。
compact	此元素會根據上下文做爲塊級元素或內聯元素顯示。
marker
table	此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。
inline-table	此元素會做爲內聯表格來顯示（相似 <table>），表格先後沒有換行符。
table-row-group	此元素會做爲一個或多個行的分組來顯示（相似 <tbody>）。
table-header-group	此元素會做爲一個或多個行的分組來顯示（相似 <thead>）。
table-footer-group	此元素會做爲一個或多個行的分組來顯示（相似 <tfoot>）。
table-row	此元素會做爲一個表格行顯示（相似 <tr>）。
table-column-group	此元素會做爲一個或多個列的分組來顯示（相似 <colgroup>）。
table-column	此元素會做爲一個單元格列顯示（相似 <col>）
table-cell	此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）
table-caption	此元素會做爲一個表格標題顯示（相似 <caption>）

css樣式之cursor屬性

<h5>基礎屬性</h5>
<span style="cursor: pointer;">pointer</span>||<span style="cursor: help;">help</span>||<span style="cursor: wait;">wait</span>||<span style="cursor: move;">move</span>||<span style="cursor: crosshair;">crosshair</span>
<h5>自定義</h5>
<span style="cursor: url(image/favicon.ico),auto;">pointer</span>

可能的值

值	描述
url	需被使用的自定義光標的URL 註釋：請在此列表的末端始終定義一種普通的光標，以防沒有由 URL 定義的可用光標。
default	默認光標（一般是一個箭頭）
auto	默認。瀏覽器設置的光標。
crosshair	光標呈現爲十字線。
pointer	光標呈現爲指示連接的指針（一隻手）
move	此光標指示某對象可被移動。
e-resize	此光標指示矩形框的邊緣可被向右（東）移動。
ne-resize	此光標指示矩形框的邊緣可被向上及向右移動（北/東）。
nw-resize	此光標指示矩形框的邊緣可被向上及向左移動（北/西）。
n-resize	此光標指示矩形框的邊緣可被向上（北）移動。
se-resize	此光標指示矩形框的邊緣可被向下及向右移動（南/東）。
sw-resize	此光標指示矩形框的邊緣可被向下及向左移動（南/西）。
s-resize	此光標指示矩形框的邊緣可被向下移動（北/西）。
w-resize	此光標指示矩形框的邊緣可被向左移動（西）。
text	此光標指示文本。
wait	此光標指示程序正忙（一般是一隻表或沙漏）。
help	此光標指示可用的幫助（一般是一個問號或一個氣球）。

html樣式之float屬性

float 屬性定義元素在哪一個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素均可以浮動。浮動元素會生成一個塊級框，而不論它自己是何種元素。

若是浮動非替換元素，則要指定一個明確的寬度；不然，它們會盡量地窄。

註釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間爲止。

<div style="background-color: cadetblue;widows: 300px;">
    <div style="background-color: coral;float: left;width: 20%; ">123</div>
    <div style="background-color: aqua;float: left;width: 50%">456</div>
    <div style="background-color: burlywood;float: right;width: 10%;">789</div>
    <div style="clear: both"></div>
</div>

可能的值

值	描述
left	元素向左浮動。
right	元素向右浮動。
none	默認值。元素不浮動，並會顯示在其在文本中出現的位置。
inherit	規定應該從父元素繼承 float 屬性的值。

html樣式之position屬性

定義和用法

position 屬性把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。

<h5>fixed(固定，針對窗口)</h5>
<h5>abslute(絕對)</h5>
<h5>relative(相對)</h5>
<div style="height: 5000px;background-color: aquamarine;"></div>
<div style="position: fixed;;right: 40px;bottom: 60px;">返回頂部</div>
<div style="position: relative;background-color: cadetblue;height: 400px;width: 500px;">
    <div style="position: absolute;bottom: 50px;right: 30px;">定位</div>
</div>

可能的值

值	描述
static	默認。位置設置爲 static 的元素，它始終會處於頁面流給予的位置（static 元素會忽略任何 top、bottom、left 或 right 聲明）。
relative	位置被設置爲 relative 的元素，可將其移至相對於其正常位置的地方，所以 "left:20" 會將元素移至元素正常位置左邊 20 個像素的位置。
absolute	位置設置爲 absolute 的元素，可定位於相對於包含它的元素的指定座標。此元素的位置可經過 "left"、"top"、"right" 以及 "bottom" 屬性來規定。
fixed	位置被設置爲 fixed 的元素，可定位於相對於瀏覽器窗口的指定座標。此元素的位置可經過 "left"、"top"、"right" 以及"bottom" 屬性來規定。不論窗口滾動與否，元素都會留在那個位置。工做於 IE7（strict 模式）。

html樣式之opacity屬性

opacity 屬性設置元素的不透明級別。

div
{
opacity:0.5;
}

可能的值

值	描述
value	規定不透明度。從 0.0 （徹底透明）到 1.0（徹底不透明）。
inherit	應該從父元素繼承 opacity 屬性的值。

html樣式之z-index屬性

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面。

註釋：元素可擁有負的 z-index 屬性值。

註釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！

說明

該屬性設置一個定位元素沿 z 軸的位置，z 軸定義爲垂直延伸到顯示區的軸。若是爲正數，則離用戶更近，爲負數則表示離用戶更遠。

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

可能的值

值	描述
auto	默認。堆疊順序與父元素相等。
number	設置元素的堆疊順序。
inherit	規定應該從父元素繼承 z-index 屬性的值。

html樣式之padding屬性

padding 屬性設置元素的內邊距。

padding 屬性定義元素邊框與元素內容之間的空間。

該屬性可採起 4 個值：

若是規定一個值，好比 div {padding: 50px} - 全部四個邊的 padding 都是 50 px。
若是規定兩個值，好比 div {padding: 50px 10px} - 上下內邊距是 50 px，左右內邊距是 10 px。
若是規定三個值，好比 div {padding: 50px 10px 20px} - 上內邊距是 50 px，左右內邊距是 10 px，下內邊距是 20 px。
若是規定四個值，好比 div {padding: 50px 10px 20px 30px} - 上內邊距是 50 px，右內邊距是 10 px，下內邊距是 20 px，左內邊距是 30 px。

<div style="height: 70px;border: 1px solid red;">
    <div style="height: 50px;background-color: aqua;padding-top: 10px;"></div>
</div>
<!--內邊距-->
<!--padding:10px 20px 10px 11px-->
<!--        上    右   下   左-->
<!--padding:10px 20px-->
<!--        上下 左右-->
<!--padding:10px 上下左右都加-->

Possible Values

值

描述

padding

設置內邊距。

值能夠是：

百分比（基於父對象總高度或寬度的百分比）
長度值（定義一個固定的邊距）
auto（瀏覽器設定的值）。

html樣式之margin屬性

margin 屬性設置元素的外邊距。

該屬性可以使用 1 到 4 個值：

若是規定一個值，好比 div {margin: 50px} - 全部的外邊距都是 50 px
若是規定兩個值，好比 div {margin: 50px 10px} - 上下外邊距是 50px，左右外邊距是 10 px。
若是規定三個值，好比 div {margin: 50px 10px 20px}- 上外邊距是 50 px，而左右外邊距是 10 px，下外邊距是 20 px。
若是規定四個值，好比 div {margin: 50px 10px 20px 30px} - 上外邊距是 50 px，右外邊距是 10 px，下外邊距是 20 px，左外邊距是 30 px。

<div style="height: 70px;border: 1px solid black;">
    <div style="height: 50px;background-color: slateblue;margin-top: 10px;"></div>
</div>
<!--外邊距-->
<!--margin:10px 20px 10px 11px-->
<!--        上    右   下   左-->
<!--margin:10px 20px-->
<!--        上下 左右-->
<!--margin:10px 上下左右都加-->