pd.set_option數據出現省略號

d.set_option('display.width', None) # 數據出現省略號

pd.set_option('display.width', 1000) # 不換行顯示

pd.set_option('display.max_rows',xxx) # 最大行數

pd.set_option('display.min_rows',xxx) # 最小顯示行數

pd.set_option('display.max_columns',xxx) # 最大顯示列數

pd.set_option ('display.max_colwidth',xxx) #最大列字符數

pd.set_option("display.max_colwidth", 10) #自定義列寬，不換行顯示

pd.set_option( 'display.precision',2) # 浮點型精度

pd.set_option('display.float_format','{:,}'.format)#用逗號格式化大值數字

pd.set_option('display.float_format', '{:.2f}%'.format) #百分號格式化

pd.set_option("display.float_format", "{:,.2f}".format) #不顯示科學計數法，設置浮點精度

pd.set_option('plotting.backend', 'altair') # 更改后端繪圖方式

pd.set_option('display.max_info_columns', 200) # info輸出最大列數

pd.set_option('display.max_info_rows', 5) # info計數null時的閾值

pd.describe_option() #展示所有設置和描述

pd.reset_option('all') #重置所有設置選項

#對齊

pd.set_option('display.unicode.ambiguous_as_wide', True)

pd.set_option('display.unicode.east_asian_width', True)

小白從頭開始學所做的筆記）

Web標準構成

主要包括：結構、表現和行為三個方面

<!DOCTYPE>文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁；

lang用來定義當前文檔顯示的語言；

字符集（cahracter set）是多個字符的集合，以便計算機能夠識別和存儲各種文字；

charset常用的值有：GB2312，BIG5，GBK和UTF-8，其中UTF-8也被稱為萬國碼，基本包含了全世界所有國家需要用到的字符集。

HTML常用標簽

標題標簽：<h1></h1>,<h2></h2>，<h3></h3>，<h4></h4>，<h5></h5>，<h6></h6>（字體大小依次來變小）

段落標簽：<p></p>

換行標簽：<br/>

加粗標簽：<strong></strong>或<b></b>(推薦使用strong標簽,因為atrong效果更好)

傾斜標簽：<em></em>;<i></i>(推薦使用em標簽,因為em效果更好)

刪除線標簽： <del></del>或<s></s>(推薦使用del標簽,因為del效果更好)

下劃線標簽：<ins></ins>或<u></u>(推薦使用ins標簽,因為ins效果更好)

div和span標簽：是一個盒子，用來裝內容，div是塊級標簽，span是行內標簽

圖像標簽：<img src="圖像 URL"/>

水平線標記：<hr/>

圖像路徑

相對路徑：以引用文件所在位置為參考基礎，而建立出的目錄路徑

絕對路徑：是指目錄下的絕對位置，直接到達目標位置，通常是從盤符開始的路徑

超鏈接標簽：<a href="跳轉地址" target="目標窗口的彈出方式"> </a>作用從一個頁面跳轉到另外一個頁面

描點連接：配合id選擇器使用

注釋：<!-- --!>

/**/

特殊字符： (空格)等

表格標簽：<table></table> 作用于展示數據

<th></th>----表頭單元格

<tr></tr> ----行

<td></td>----單元格，列

row="行數" cols="每行的字數"

<thead></thead>標簽用于表格的頭部區域；<tbody></tbody>標簽用于表格的主題區域

無序列表：<ul><li></li></ul>

有序列表：<ol><li></li></ol>

自定義列表：<dl><dt><dd></dd></dt></dl>-----------dt是用于標題，dd是內容

表單的組成：

在HTML中，表單通常由表單域、表單控件和表單信息

from用于定義表單域，以實現用戶信息的收集和傳遞

表單域標簽：<from action="url地址" method="提交方式" name="表單域名稱"></form>

其中name屬性是表單的名字，相同的名字可以實現多選一

<lable>標簽：用于綁定一個表單元素，當點擊《lable》標簽內的文本時，瀏覽器就會自動將焦點（光標）轉到或者選擇對應的表單元素上，用來增加用戶體驗

<select>表單元素：下拉表單元素，

</select>

select中至少包含一對option

textarea表單元素：<textarea></textarea>-----文本域標簽

做登錄界面可以用表格來做，能直接對齊

后續會更新后面的知識

TML及CSS選擇器

一、html基本結構
二、html標簽

1、標題標簽
2、a標簽
3、img標簽
4、div和span標簽
5、列表標簽
6、表格標簽
7、form表單
8、select下拉框標簽
9、textarea標簽

三、CSS

1、css樣式引入方式
2、標簽嵌套
3、css選擇器

一、html基本結構

html是一種超文本標記語言，進行網頁頁面的文本編輯
html注釋寫法：

基本結構如下：

<!DOCTYPE html>                <!--文檔聲明-->
<html 	lang="en">             <!--lang="en"表示語言-->
<head>                         <!--頭部信息：網站的配置信息-->
	<meta charset="UTF-8"> 	   <!--解碼方式-->
	<title>我是標題</title>	   <!--網站標題-->
</head>
<body>
</body> 					   <!--body體：網站顯示內容-->
</html>

link圖標：
標題圖標：
寫法：<link rel=“icon” href=“圖片路徑”>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <link rel="icon" href="timg.jpeg">
</head>
<body>

</body>
</html>

二、html標簽

標簽寫法分類：
1、全封閉標簽，如<h1>xxx</h1>
標簽屬性：<h1 xx=“ss”>xxx</h1> xx:屬性名 ss:屬性值
2、自封閉標簽：<meta charset=“UTF-8”>

1、標題標簽

<h1></h1>-<h6></h6>：表示一級標題到六級標題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
公司
<b>Asir</b>     <!--加粗-->
<s>Bsir</s>     <!--加劃線-->


<h1>小王</h1>
<h2>小李</h2>
<h3>小趙</h3>
<h4>小<br>胡</h4> <!--<br>換行-->
<hr>             <!--<hr>加分割線-->
<h5>小周</h5>
<h6>小李</h6>
</body>
</html>

頁面效果：

2、a標簽

跳轉對應網址的頁面
未訪問之前是藍色字體，訪問后變紫色

# 要a標簽的效果，但不刷新或跳轉頁面：
<a href="#">xxx</a>
<a href=“javascript：void(0);”>xxx</a>

錨點：
頁面內容進行跳轉
標簽設置id屬性=值(xx),a標簽href屬性的值寫法href=’#xx’,點擊這個a標簽就能跳轉到id屬性為xx的那個標簽所在位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
<div id="top">頂部位置</div>  <!--設置錨點-->
<a>公司</a>
<a href="">potal</a>
<a href="http://www.baidu.com" target="_blank">百度</a>  <!--_blank表示在新標簽頁打開-->
<a href="#">potal</a>
<a href="javascript：void(0);">potal</a>
<a href="#top">回到頂部</a>  <!--返回錨點-->
</body>
</html>

頁面效果：

可通過第二個按鈕跳轉到百度：

3、img標簽

img標簽：頁面插入圖片
src屬性：圖片路徑必須寫
alt屬性：圖片加載失敗或者正在加載時提示的內容
title屬性：鼠標懸浮時顯示的內容，不是img標簽獨有的
width：設置圖片寬度（建議用css設置）
height：設置圖片高度（建議css設置）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1319369445,160835837&fm=26&gp=0.jpg" alt="圖片未成功加載" title="清新辦公" width="300" height="500">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1941575090,3819526635&fm=26&gp=0.jpg" alt="圖片未成功加載" title="未聞花名">
<img src="timg.jpeg" alt="圖片未成功加載" title="未聞花名2" width="1000" height="500">
</body>
</html>

頁面效果：

4、div和span標簽

沒有任何文本修飾效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
<span>小王</span>
<p>小李</p>
<span>小文</span>
<div>小林</div>
</body>
</html>

頁面效果：

擴展：標簽分類
塊級標簽(行外標簽)：獨占一行，h1-h6、p、br、hr、div、ul、li
塊級標簽可以包含內聯標簽，以及某些塊級標簽
內聯標簽(行內標簽)：不獨占一行，img/a/span，只能包含內聯標簽，不能包含塊級標簽

5、列表標簽

1）ul標簽：
寫法：

<ul type="none">
	<li>內容1</li>
	<li>內容2</li>
	......
<ul>

2）ol標簽
寫法：

<ol type="指定標注種類" start="指定標注起始值">
	<li>內容1</li>
	<li>內容2</li>
	......
</ol>

3）dl標簽

<dl>
	<dt>無空位內容</dt>
	<dd>有空位內容<dd>
	......
</dl>

頁面效果：

6、表格標簽

可以在網頁中生成表格
寫法：

<table border="表框粗細" cellpadding="表格大小" cellspacing="表線寬度">
	<thead>  <!--表頭信息-->
		<tr>
			<th>表頭1</th>
			<th>表頭2</th>
			...
		</tr>
	<thead>
	<tbody>  <!--body-->
		<tr>
			<td>內容1</td>
			<td>內容2</td>
			...
		</tr>
	</tbody>
</table>

colspan：橫行合并
rowspan：縱列合并
示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="8">
    <thead>    <!--表頭信息-->
        <tr>
            <th>名稱</th>
            <th>年齡</th>
            <th>愛好</th>
        </tr>
    </thead>
    <tbody>    <!--body-->
        <tr>
            <td>小王</td>
            <td>18</td>
            <td>籃球</td>
        </tr>
        <tr>
            <td rowspan="2">小李</td>
            <td>20</td>
            <td>游泳</td>
        </tr>
        <tr>
            <td colspan="2">小王</td>
        </tr>
    </tbody>
</table>
</body>
</html>

頁面效果：

7、form表單

<form action="http://127.0.0.1:8001">
</form>

action屬性：指定提交路徑，提交到哪里去
form表單標簽會將嵌套在form標簽里面的輸入框的數據全部提交到指定路徑

input標簽輸入框：
input標簽，如果要提交數據，一定要寫name屬性

<input type=“text”> 普通文本輸入框
<input type=“password”> 密文輸入框
<input type=“submit” value=“登陸”> 提交按鈕觸發form表單提交數據動作
<input type=“reset”> 重置按鈕清空輸入內容
<input type=“button” value=“注冊”> 不會觸發form表單提交數據的操作
<input type=“date”> 時間日期輸入框
<input type=“file”> 文件選擇框
<input type=“number”> 純數字輸入框

單選框：
<input type=“redio”>
多選框：
<input type=“checkbox”>

單選框和多選框請務必加name屬性和value默認值
單選和多選value默認值可將存儲的數據變短

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標簽</title>
</head>
<body>
<form action="http://127.0.0.1:8001">
    <div>
        <h1>歡迎來到xxx公司</h1>
        用戶名：<input type="text" name="username">
        <br>
        密碼：<input type="password" name="password">
        <br>
        性別：
        <input type="radio" name="sex" value="0">女
        <input type="radio" name="sex" value="1">男
        <br>
        愛好：
        <input type="checkbox" name="hobby" value="1">籃球
        <input type="checkbox" name="hobby" value="2">足球
        <input type="checkbox" name="hobby" value="3">乒乓球
        <br>
        <input type="reset">
        <br>
        <hr>
        數字：
        <input type="number">
        <br>
        <input type="date">
        <br>
        <input type="file">
        <br>
        <input type="submit" value="點擊確認">

    </div>
</form>
</body>
</html>

頁面效果：

8、select下拉框標簽

<select name="屬性">
	<option value="默認值">
</select>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標簽</title>
</head>
<body>
選擇性別：
<select name="sex">
    <option value="0">男</option>
    <option value="1">女</option>
</select>
<br>
喜歡的明星：
<select name="star" multiple>  <!--允許多選-->
    <option value="1">明星1</option>
    <option value="2">明星2</option>
    <option value="3">明星3</option>
</select>
</body>
</html>

頁面效果：

9、textarea標簽

多行文本輸入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標簽</title>
</head>
<body>
<span>請輸入內容：</span>
<br>
<textarea name="message" cols="30" rows="10"></textarea>
</body>
</html>

頁面效果：

三、CSS

1、css樣式引入方式

第一種：
直接在頭部添加<style>引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        span{
            width:100px;
            height:100px;
            background-color:navajowhite;
        }
        div{
            width:100px;
            height:50px;
            background-color:red;
        }
    </style>
</head>
<body>
<div>hello</div>
<span>How are you?</span>
</body>
</html>

頁面效果：

第二種：
外部文件引入
<link rel=“stylesheet” href=“css文件路徑”>
html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<div>hello</div>
<span>How are you?</span>
</body>
</html>

css文件：

span{
    width:100px;
    height:100px;
    background-color:navajowhite;
}
div{
    width:100px;
    height:50px;
    background-color:red;
}

頁面效果：

第三種：
內聯樣式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<div style="background-color:red;weight:100px;height:100px">hello</div>
<span style="background-color:wheat">How are you?</span>
</body>
</html>

頁面效果：

塊級標簽能夠設置高度寬度，能夠嵌套某些塊級標簽和內聯標簽，p不能嵌套塊級標簽，也不能嵌套p標簽

內聯標簽不能設置高度寬度，它的高度寬度由內容來決定，只能嵌套內聯標簽

2、標簽嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
<div>
    <span>hello</span>
</div>
<p>
    <p>how old are you?</p>
</p>
</body>
</html>

頁面效果：

3、css選擇器

元素選擇器：
標簽名稱{css屬性:值}
id選擇器：
html寫標簽時：

<div id="d1">內容</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        #d1{
            width:100px;
            height:100px;
            background-color:red
        }
        #d2{
            background-color:wheat;
        }
    </style>
</head>
<body>
<div id="d1">你好啊</div>
<span id="d2">最近還好嗎</span>
</body>
</html>

頁面效果：

3）類選擇器
class后面跟類，表示一類，可統一改渲染效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        .c1{
            width:100px;
            height:100px;
            background-color:red
        }
    </style>
</head>
<body>
<div id="d1" class="c1">你好啊</div>
<span id="d2" class="c1">最近還好嗎</span>
</body>
</html>

頁面效果：

4）屬性選擇器
可自定義屬性選擇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        [ss]{
            width:100px;
            height:100px;
            background-color:red
        }
        [ss="dd"]{
            background-color:wheat;
        }
    </style>
</head>
<body>
<div id="d1" class="c1" ss="xx">你好啊</div>
<span id="d2" class="c2" ss="dd">最近還好嗎</span>
</body>
</html>

頁面效果：

后代選擇器
加>為子代選擇器，只渲染子代，不加為后代選擇器，子代及所有后代皆渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        #d1 > span{
            width:100px;
            height:100px;
            background-color:red
        }
        .c2 .c4{
            background-color:wheat;
        }
    </style>
</head>
<body>
<div id="d1" class="c1" ss="xx">
    <span id="d3" class="c3">hello</span>
</div>
<div id="d2" class="c2" ss="dd">
    <span class="c4">how old are you?</span>
</div>
</body>
</html>

頁面效果：

6）組合選擇器
后代選擇器用逗號組合：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        #d1 span,#d2 span{
            width:100px;
            height:100px;
            background-color:red
        }
    </style>
</head>
<body>
<div id="d1" class="c1" ss="xx">
    <span id="d3" class="c3">hello</span>
</div>
<div id="d2" class="c2" ss="dd">
    <span class="c4">how old are you?</span>
</div>
</body>
</html>

頁面效果：

建議收藏，不然刷著刷著就可能找不到了。

有什么前端的問題歡迎私信我~期待你的到來。

學習是一個艱苦的過程，當然如果能把技術學成，最后也一定可以獲得高薪工作。掌握一個好的學習方法，跟對一個學習的人非常重要。今后要是大家有啥問題，可以隨時來問我，能幫助別人學習解決問題，對于自己也是一個提升的過程。自己整理了一份2020最全面前端學習資料，從最基礎的HTML+CSS+JS到HTML5的項目實戰的學習資料都有整理web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取

在線咨詢

上一篇：你應該要掌握的，前端開發中的Javascript規范
下一篇：Html js將網頁轉成圖片

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

pd.set_option數據出現省略號

小白從頭開始學所做的筆記）

TML及CSS選擇器

一、html基本結構

二、html標簽

1、標題標簽

2、a標簽

3、img標簽

4、div和span標簽

5、列表標簽

6、表格標簽

7、form表單

8、select下拉框標簽

9、textarea標簽

三、CSS

1、css樣式引入方式

2、標簽嵌套

3、css選擇器

有什么前端的問題歡迎私信我~期待你的到來。

您的項目需求