Python之路-python(html、css)

本文轉載自查看原文 2016-11-07 17:37 23687 前端

html：

概述：

　　HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，他是一種制作萬維網頁面標准語言（標記）。相當於定義統一的一套規則，大家都來遵守他，這樣就可以讓瀏覽器根據標記語言的規則去解釋它。

瀏覽器負責將標簽翻譯成用戶“看得懂”的格式，呈現給用戶！

Doctype

　　Doctype告訴瀏覽器使用什么樣的html或xhtml規范來解析html文檔

有和無的區別

BackCompat：標准兼容模式未開啟（或叫怪異模式[Quirks mode]、混雜模式）
CSS1Compat：標准兼容模式已開啟（或叫嚴格模式[Standards mode/Strict mode]）

這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面，那么，在不同的瀏覽器就會顯示不同的樣式。如果你的頁面添加了那么，那么就等同於開啟了標准模式，那么瀏覽器就得老老實實的按照W3C的標准解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。

有，用什么？

Doctype告訴瀏覽器使用什么樣的html或xhtml規范來解析html文檔, dtd文件則包含了標記、attributes 、properties、約束規則。

現在我們告訴了瀏覽器要用什么樣的標准去打開html文件了，但是只知道這些還是不行的，網頁的具體內容是什么樣的呢。

<!DOCTYPE html><!--這里定義標准-->
<html lang="en"><!--網頁詳細從這里開始-->
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
#大體上除了告訴瀏覽器用什么樣的標准打開，還得head（頭）、body（身體）。
#頭里面主要存放例如用什么編碼，網頁的title（title里面例如有圖片文字之類的），頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞都是放到head里面的。
body里面是網頁上的主要的顯示給用戶的東西，例如文字，樣式、圖片都放在這里
注意：
　　書寫規范,例如：<head>表示開始</head>表示結束

標簽：

什么是標簽呢，例如<head> 張三</head>，這種出現在html文件中以<括號開始並以>結束的都叫標簽，例如上面寫的，head標簽，body標簽，html標簽。

　　分類：

　　　　自閉合標簽：

　　　　例如meta和link標簽

　　　　主動閉合標簽：

　　　　例如a標簽：

<a> </a>#有斜杠的這種稱作主動閉合標簽，換句話說，你寫一個標簽從左往右依次寫，它能主動給你不全並加上/的是主動閉合標簽，否則就是自閉合標簽。

注釋：

python中我們用#注釋一行用用三個單引號或者3個雙引號表示注釋多行，在html文件中這種才是注釋方式，多行的也是這種方式。

注意事項：

　　html文件中，只能有一個html標簽。

head標簽：

head標簽中除了title其它的都不在網頁上顯示（title是打開一個網頁表頭的文字）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
</body>
</html>

Meta(metadata information)

　　提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞

　　1、頁面編碼（告訴瀏覽器是什么編碼）

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

　　2、刷新和跳轉

< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

　　3、關鍵詞（例如百度利用關鍵字搜索相關關鍵字的網站）

< meta name="keywords" content="html，學習，python" >

　　4、描述

　　　　例如（別人在看你的網頁的時候，只要通過網頁地址就知道你的網站是做什么用的）：

　　　　<meta name="description" content="這個網站是用用來測試使用的" />

5、X-UA-Compatible

　　　微軟的IE6是通過XP、Win2003等操作系統發布出來，作為占統治地位的桌面操作系統，也使得IE占據了通知地位，許多的網站開發的時候，就按照IE6的標准去開發，而IE6自身的標准也是微軟公司內部定義的。到了IE7出來的時候，采用了微軟公司內部標准以及部分W3C的標准，這個時候許多網站升級到IE7的時候，就比較痛苦，很多代碼必須調整后，才能夠正常的運行。而到了微軟的IE8這個版本，基本上把微軟內部自己定義的標准拋棄了，而全面的支持W3C的標准，由於基於對標准徹底的變化了，使得原先在早期IE8版本上能夠訪問的網站，在IE8中無法正常的訪問，會出現一些排版錯亂、文字重疊，顯示不全等各種兼容性錯誤。

與任何早期瀏覽器版本相比，Internet Explorer 8 對行業標准提供了更加緊密的支持。因此，針對舊版本的瀏覽器設計的站點可能不會按預期顯示。為了幫助減輕任何問題，Internet Explorer 8 引入了文檔兼容性的概念，從而允許您指定站點所支持的 Internet Explorer 版本。文檔兼容性在 Internet Explorer 8 中添加了新的模式；這些模式將告訴瀏覽器如何解釋和呈現網站。如果您的站點在 Internet Explorer 8 中無法正確顯示，則可以更新該站點以支持最新的 Web 標准（首選方式），也可以強制 Internet Explorer 8 按照在舊版本的瀏覽器中查看站點的方式來顯示內容。通過使用 meta 元素將 X-UA-Compatible 標頭添加到網頁中，可以實現這一點。

當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用指令來確定如何顯示該網頁。如果該指令丟失或未指定基於標准的文檔類型，則 Internet Explorer 8 將以 IE5 模式（Quirks 模式）顯示該網頁。更多

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

link標簽：

　　如果你想讓自己的網頁頭部除了在title里顯示文字，還得顯示圖片，那么就得在head標簽中加上這句，前面都是固定寫法，后面href里面是你的圖片路徑，這里是相對路徑。　

<link rel="shortcut icon" href="../image/logo.ico">

body部分：

各種符號（多個符號直接用分號隔開）：

　　空格：&nbsp

　　小於號：&lt

　　大於號：&gt

　　更多：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p標簽（段落）：

寫法：內容

　　我們知道段落直接跟段落直接是有空行的，但是有人要說了，那你段落跟段落直接是有空行的，那我一個段落里面不能行行都有空行吧，我們往下看。

br標簽：

寫法：

例如：內 容（段落里面行與行直接的換行）

　　在內容直接加上br標簽，行與行之間就沒有空行了。

h標簽（標題）：

　　h1-h6，沒有h7

<h1>A</h1>
<h2>A</h2>
<h3>A</h3>
<h4>A</h4>
<h5>A</h5>
<h6>A</h6>

View Code

　　現象：　

A

span標簽（白班）：

　　寫法：

<span>AAA </span>
<span>AAA </span>
<span>AAA </span>
<span>AAA </span>
<span>AAA </span>

View Code

　　現象：

　　AAA AAA AAA AAA AAA

　　不知道你有沒有發現，span是橫着顯示的，沒有加大加粗。但是H標簽是豎着顯示的，而且還加大加粗。

標簽的分類：

　　上面我們說了，標簽分為自閉合標簽和主動閉合標簽，這個只是標簽的一種寫法，下面我們看看真正的分類。

　　塊級標簽：h（加大加粗）、div（白班）、p（段落）

　　行內標簽（內聯標簽）：span

　　特性：

　　標簽與標簽之間是可以互相嵌套的。

　　標簽存在的意義，可以再標簽上加上屬性，就知道它的具體位置，好方便css和js渲染時候找到位置。

div標簽：

　　div是一個使用非常頻繁的標簽。

<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>

View Code

　　現象：　

　　123

　　特點：

　　沒有加大加粗，是一個塊級標簽。

input標簽：

輸入框和按鈕：

　　我們都知道很多網頁上都提供了讓用戶輸入和確認提交之類的按鈕，這些都叫做輸入框和按鈕。

　　寫法：

    <form action = "http://127.0.0.1:8888/index" method = "GET">
        <input type="text" name="user"/>
        <input type="password" name="pwd"/>
        <input type="text" name="email">
        <input type="submit" value="登錄"/>
        <input type="button" value="登錄"/>
    </form>

<input type="text" name="user"/>普通輸入框，用戶可以看到自己的內容

<input type="password" name="pwd"/>密碼輸入框，用戶只能看到小黑點。
那為什么要放到form標簽中呢？是因為網頁中要是有很多這樣的輸入框，程序無法判斷哪個跟哪個是一起的，所以放到form標簽中。action是告訴html這組數據提交到什么位置。

method是提交方法：
    GET：用戶輸入的數據會放到url里面提交給后台程序。
    POST：會一字典的方式提交給后台程序，后面跟的name其實就是key名。

View Code

　　例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
    <link rel="shortcut icon" href="..html/image/name.ico">
</head>
<body>
    <form action = "http://127.0.0.1:8888/index" method = "GET">
        <input type="text" name="user"/>
        <input type="password" name="pwd"/>
        <input type="text" name="email">
        <input type="submit" value="登錄"/>
        <input type="button" value="登錄"/>
    </form>
    <br>
        <form action = "http://127.0.0.1:8888/index" method = "GET">
        <input type="text" name="user"/>
        <input type="password" name="pwd"/>
        <input type="text" name="email">
        <input type="submit" value="登錄"/>
        <input type="button" value="登錄"/>
    </form>
</body>
</html>
注意:
    submit是提交，它是真正會給后台程序傳參數的，但是button只是一個按鈕，具體需要它做什么還得告訴它該干什么。

View Code

　　GET和POST區別：

　　本質上沒有任何區別，只是GET把用戶輸入的數據放到url里面一起傳送給后台程序，而POST是以字典的形式把用戶輸入的內容發送給后台程序。


input type="radio" 單選按鈕，不過需要在需要單選按鈕的屬性里面把一組需要單選的按鈕name名字定義成一樣的，后台不知道你這個單選按鈕是什么，所以你還需要加上一個value值，也就是說是互斥關系，只能選擇一個。

input type="checkbox"復選框，name值批量取值，value值是多少

input type="file"選擇文件框，點擊后會自動彈出一個框，可以選擇文件，我們上面說了程序是不知道誰是誰的所以想要后台回去到數據，需要在form標簽屬性中定義enctype="multipart/form-data"html就會把文件一點一點的發送給后台。

input type="reset"重置，把網頁上所有的值恢復到默認

<textarea name = " 1"> 哈哈哈</textarea>其實就是一個很大的文本輸入框，name屬性也是方便獲取到這個框的輸入數據，哈哈哈就是默認寫的是什么。



例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
    <link rel="shortcut icon" href="..html/image/name.ico" />
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            <p>姓名</p>
            <input type="text" name="user" />
            <p>性別:</p>
            男：<input type="radio" name="gender" value="1" checked="checked"/>
            女：<input type="radio" name="gender" value="2" />
            <p>愛好:</p>
            籃球：<input type="checkbox" name="favor" value="1" checked="checked" />
            足球：<input type="checkbox" name="favor" value="2" />
            網球：<input type="checkbox" name="favor" value="3" />
            跑步：<input type="checkbox" name="favor" value="4" />
            <p>技能:</p>
            上天：<input type="checkbox" name="shang" checked="checked" />
            入地：<input type="checkbox" name="xia"/>
            <p>上傳文件</p>
            <input type="file" name="fname" />
            <br>
            <br>
        </div>
        <p>建議:</p>
        <textarea name = " 1"> 哈哈哈</textarea>
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>
</html>

View Code

select標簽：

　　我們都知道在一些網頁上可以看到很多類似下圖的選項：

            <select name = "city" size="4" multiple = "multiple">
                <option value="1" selected = selected>北京 </option>
                <option value="2">上海</option>
                <option value="3">深圳</option>
                <option value="4">北京</option>
            </select>
select屬性中，name是告訴后台程序底下這些是做什么的，size是同時能顯示幾行，multiple是多選（一次可以選擇多個）
value其實就是區別一下這個選項而已，selected=selected是默認程序已經選中的。

a標簽：

　　跳轉功能：

<a href="http://www.baidu.com" target="_blank">百度</a>
href是代表要跳轉到哪里，百度是頁面顯示的文字（不過這個文字像是一個超鏈接一樣是藍色的字體），target=“_blank”是在一個網頁新的簽中打開，默認是在當前頁面跳轉。

　　錨點：

　　如下，如果我想通過點擊的第一章或者其它任意一章的文本，就跳轉到下面具體的那一章位置，怎么做呢。

　　我先定義四個div標簽，讓它們都占高600像素的文字，每張內容的名字。而上面a標簽中寫的就好像是一本書的目錄，固定寫法是href=“#”，#號后面才是下面每個div快的名字。這樣的話我點擊第幾章，網頁就能自動跳轉到我想去的位置，再也不用鼠標滑輪傻傻的往下翻了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a href="#i1"> 第一章</a>
<a href="#i2"> 第二章</a>
<a href="#i3"> 第三章</a>
<a href="#i4"> 第四章</a>
<div id="i1" style="height: 600px">第一章</div>
<div id="i2" style="height: 600px">第二章</div>
<div id="i3" style="height: 600px">第三章</div>
<div id="i4" style="height: 600px">第四章</div>
</body>
</html>

image標簽：

　　其實就是現實圖片的標簽

　　需求：

　　1、我想讓一點擊這個圖片就自動跳轉到什么位置，就是放到a標簽中，a標簽的屬性寫上跳轉到的網頁地址，切記一定要加上http://否則必須不跳轉。

　　2、下面的圖片是因為放到當前目錄，如果有個image目錄里面專門放標簽的話，就寫上相對路勁即可。

　　3、title就是你鼠標放到這個圖片上的時候顯示的文字。

　　4、style就是風格，我讓它高200和寬都是兩百像素。

　　5、alt意思是如果服務器找不到圖片了，就會在圖片的位置顯示的文字。

    <a href="http://www.baidu.com">
    <img src="圖片.png"  title="大大頭兵" style="height: 200px;width: 200px;" alt="大頭兵">
    </a>

ul、ol、dl標簽：

    <!-- ul和li標簽搭配使用-->
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <!-- 0l和li標簽搭配使用-->
    <ol>
        <li>456</li>
        <li>456</li>
        <li>456</li>
    </ol>
    <!-- dl和dt、dd標簽搭配使用-->
    <dl>
        <dt>1</dt>
        <dd>1.1</dd>
        <dd>1.2</dd>
        <dd>1.3</dd>
        <dt>2</dt>
        <dd>2.1</dd>
        <dd>2.2</dd>
        <dd>2.3</dd>
    </dl>

　　現象：

表格標簽（table中的tr和td標簽）：

　　一般寫法：

　　1、table是一個大的表格，border是一個加上邊框。

　　2、tr是行，td是列。

　　3、下面是在td行中給特點文字用a標簽給做了個跳轉。

<table border="1">
    <tr>
        <td>主機名</td>
        <td>端口</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>127.0.0.1</td>
        <td>80</td>
        <td>
            <a href="input.html">查看詳情</a>
            <a href="input.html">修改</a>
        </td>
    </tr>
    <tr>
        <td>127.0.0.1</td>
        <td>80</td>
        <td>
            <a href="input.html">查看詳情</a>
            <a href="#">修改</a>
        </td>
    </tr>
    <tr>
        <td>127.0.0.1</td>
        <td>80</td>
        <td>
            <a href="input.html">查看詳情</a>
            <a href="input.html">修改</a>
        </td>
    </tr>
</table>

　　標准寫法：

　　1、加了一個thead標簽和tbody標簽，把td換成了th標簽。

　　2、thead是表格的頭部。

　　3、tbody就是表格的內容。

<table border="1">
    <thead>
    <tr>
        <th>表頭一</th>
        <th>表頭二</th>
        <th>表頭三</th>
        <th>表頭四</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>

    </tbody>
</table>

　　合並單元格：

　　1、我想讓第二行第二列和第三列合並，怎么寫呢？讓第二行第二列把第三列的位置也占用了，這樣的話這行就會超出去，怎么辦呢，我們可以把原來第二行第4列刪了，這樣就好了(colspan)。

　　2、我想讓第二行和第三行中的第一個框合並單元格，這樣我就需要讓第二行第一列占用兩個位置，然后把第第五行第一列這個th標簽刪了，這樣就能上下合並單元了(rowspan)。

　　現象:

　　代碼：

<table border="1">
    <thead>
    <tr>
        <th>表頭一</th>
        <th>表頭二</th>
        <th>表頭三</th>
        <th>表頭四</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>1</th>
        <th colspan="2">2</th>
        <th>4</th>
    </tr>
    <tr>
        <th rowspan="2">1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    </tbody>
</table>

label標簽：

　　現象：

　　如下，我們每次要往網頁上一個框輸入的時候必須要選擇一下這個文本框，但是如下，我想還可以通過點擊用戶名的這三個字也可以把內容輸入到文本框里，就需要label標簽了。

　　代碼：

　　1、通過在label標簽屬性中定義一個for和input標簽屬性中的id做一個關聯，這樣的話就可以通過點擊用戶名也可以往文本框里輸入內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <label for="username">用戶名：</label>
    <input id = username type="text" name="user">
</body>
</html>

fiedsed標簽：

　　fieldset標簽其實就是一個很大框，這個框有個缺口需要用legend標簽里面寫上內容

　　現象：

　　寫法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <fieldset>
        <legend>
            詳細信息
        </legend>
    </fieldset>
</body>
</html>

css樣式：

RGB顏色對照表:http://www.114la.com/other/rgb.htm

所謂css其實就是顏色和位置;

　　顏色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="background-color: #AAAAAA;;height:30px;width: 100%"></div>
    <div style="background-color: #004461;;height:30px;width: 100%"></div>
    <div style="background-color: #f57900;;height:30px;width: 100%"></div>
</body>
</html>

　　我們知道了，在網頁可以切割為很多的塊，每個塊（div）有不同的北京顏色和字體顏色，還有這個塊的高和寬。上面代碼幫我們實現了下面的這三個塊。

　　那顏色必須要放到代碼中的div屬性里嗎？答案NO

選擇器：

　　id選擇器：

　　在head頭部里面定義好的style風格，在body里面不能同時好幾個標簽都是用它。

　　例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    #i1 {background-color: #AAAAAA;
    height:30px;
    width: 100%
    }

    #i2 {
        background-color: #004461;
        height: 30px;
        width: 100%
    }
    </style>
</head>
<body>
    <div id="i1">哈哈</div>
    <span id="i2">呵呵</span>
</body>
</html>

　　class選擇器：

　　特點：在body里面可以同時有多個標簽引用head里面定義的style中的一個風格。

　　寫法：如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .i1 {background-color: #AAAAAA;
    height:30px;
    width: 100%
    }
    </style>
</head>
<body>
    <div class=".i1">哈哈</div>
    <span class="i2">呵呵</span>
</body>
</html>

　　標簽選擇器：

　　特性：按照下面的方法在head里面定義一個style，名字就叫div，這樣的話body里面只要事div標簽都會引用這個風格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    div{background-color: #AAAAAA;
    height:30px;
    width: 100%
    }
    </style>
</head>
<body>
    <div class=".i1">哈哈</div>
    <span class="i2">呵呵
    <div>dafdas</div></span>
    <div>哈哈</div>
</body>
</html>

　　關聯選擇器（層級選擇器）：

　　特點：讓某一類應用head里面的style風格。

　　寫法：

　　如下，我只想讓所有span里面的div使用head里面定義的 span div風格。當然這都是隨意組合的，你想怎么用就怎么用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    span div{background-color: #AAAAAA;
    height:30px;
    width: 100%
    }
    </style>
</head>
<body>
    <div>哈哈</div>
    <span >呵呵
    <div>dafdas</div></span>
    <div>哈哈</div>
</body>
</html>

　　組合選擇器：

　　特點：其實就是多個class選擇器，本質上就是一個style可以有多個名字，名字直接用逗號隔開，然后在body里面的標簽的屬性中class幾都行，也可以用id選擇器，讓body中的標簽通過id=什么來獲取風格。

　　寫法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    #c1,.c2,.c3{background-color: #AAAAAA;
    height:30px;
    width: 100%
    }
    </style>
</head>
<body>
    <div id="c1">哈哈</div>
    <div class="c2">dafdas</div>
    <div class="c3">哈哈</div>
</body>
</html>

　　屬性選擇器：

　　特性：可以讓某一中標簽屬性的的標簽是用一個風格，具體如下：

　　表現形式：

　　寫法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        input[type="text"]{height:100px;width: 50px}
    </style>
</head>
<body>
    <input type="text">
    <input type="password">
</body>
</html>

注意：在css中注釋一行或者多行是這樣/* 注釋的內容 */

選擇器的優先級：

　　先在自己的標簽中找樣式，其它的按照編寫的順序，就近原則。

樣式標准寫法：

　　一般情況下我們在當前目錄下再建立一個文件文件格式是stylesheet的文件后綴是.css，專門寫各種css樣式，這樣的話多個html文件都能引用。

寫法：

　　先建立一個css樣式文件：

.css文件中存樣式

在html文件中可以引用，在head里面鏈接上css樣式文件<link rel="stylesheet" href="comment.css" />，后面href是.css文件名字，至於body里面原來怎么用還怎么用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="comment.css" />
</head>
<body>
    <div class="c1">測試</div>
</body>
</html>

　　邊框：

　　寫法：

　　如下，div標簽中有一個border就是邊框是1像素，然后solid是紅色的（就是這個邊框的顏色），注意注意注意寫法。

　　邊框線一個是實線solid一個是dotted虛線。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border:1px solid red;">測試</div>
    <br/>
    <div style="border:1px dotted red;">測試</div>
</body>
</html>

常用樣式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border:1px solid red;
    height: 48px;#高度，一般不給百分比
    width: auto;寬度，auto就是自動適應網頁的大小
    line-height: 48px;這個是上下居中，跟height高度一樣的時候保持在最中間
    text-align: center;自適應左右居中
    font-size: smaller;字體的大小樣式
    font-weight: 800;字體加粗
    color: #999999">測試</div>字體顏色
</body>
</html>

　　float（飄）：

　　float就是飄起來，如下原本是兩個不同的div應該是兩行，但是我讓它們都往左飄，這樣的話就成了一行（如果div寬度超過百分之百就會另起一行）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="background-color: #999999;height: 80px;width: 20%;float: left">123</div>
    <div style="background-color: #3465a4;height: 80px;width: 80%;float: left">456</div>
</body>
</html>

　　display：

　　我們知道標簽可分為行內標簽和塊級標簽。display就是幫我們互相轉換的。如下：　

  display: inline（讓這個標簽變成行內標簽）

  display: none（讓這個標簽消失）
　
  display:inline-bock(讓這個標簽既有行內標簽的特性也有塊級標簽的特性)

display: block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="background-color: #00A000;display: inline">123</div>
    <span style="background-color: #3465a4;display: block">456</span>
</body>
</html>

注意：

　　行內標簽不支持高度、寬度、padding、margin

　　塊級標簽支持設置高度、寬度等樣式。

　　如何才能讓行內標簽頁設置高度、寬度呢？

  通過設置這個標簽的屬性，display:inline-bock(讓這個標簽既有行內標簽的特性也有塊級標簽的特性)

　　padding：

　邊距：

　　　　內邊距：

　　　　padding：

　　　　外邊距：

　　 margin

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 python之路--初識html前端【Python之路】第十篇--HTML Python之路【第十一篇】前端初識之HTML python3之HTML、CSS學習 Python之路 Python之路 python之路[14] - css樣式選擇器 Python之路-python(堡壘機) python之路之一pyspark Python學習之路（二）爬蟲（一）