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选择器

有什么前端的问题欢迎私信我~期待你的到来。

您的项目需求