首页 文章 精选 留言 我的

精选列表

搜索[全栈管理],共10011篇文章
优秀的个人博客,低调大师

Python Web(Django框架、概述、安装)

Django 框架 WEB 与 服务器 WEB : 表示用户可以浏览的网页内容(HTML,CSS,JS) 服务器 专门给用户提供服务的一台机器 1.硬件与软件 硬件范畴:一台机器 软件范畴:一个能够接受用户请求并给出响应的程序 1.APACHE 2.TOMCAT 3.IIS(Internet Information Service) 4.Nginx 2.服务器的作用 1.存储WEB上所需要的信息(HTML,图片,js,css,音视频) 2.处理用户的请求(request)并给出响应(response) 3.执行服务器端的程序 : 查找数据库 3.服务器 与 WEB之间的关系 WEB需要放在服务器上才能够被用户访问 框架 什么是框架 框架是一个为了解决开放性问题而存在的一种结构.框架本身会提供一些最基本的功能.我们只需要在基本功能之上搭建属于自己的操作即可. PYTH

优秀的个人博客,低调大师

Python Web(JavaScript DOM节点、事件)

1.查询节点 1.根据节点的层级查询节点 1.childNodes 元素节点,文本节点, 2.children 元素节点 3.parentNode 获取父节点 4.nextSibling 获取下一个兄弟节点 有可能是文本节点 5.nextElementSibling 获取下一个兄弟元素节点 6.previousSibling 获取上一个兄弟节点 有可能是文本节点 7.previousElementSibling 获取上一个兄弟元素节点 2.通过标签名查询节点 - 返回数组 document|elem.getElementsByTagName("标签名"); document:整个文档内查找 elem:某个元素内查找 3.通过元素的name属性值查询节点 document.getElementsByName("name属性值"); 返回值:包含指定name属性值的元素的数组 <

优秀的个人博客,低调大师

Python Web(CSS常用样式大全)

常用内联样式: func-size color background-color 内部样式表: <style> 选择器1{ 属性:值; } 选择器2{ 属性:值; } ... </style> 外链方式: <link rel="stylesheet" type="text/css" href=".css文件名"> 样式优先级: 默认 < 稳文档内嵌/元素选择器 < 行内 不发生冲突 同步 发生冲突 后来者居上 选择器: 标签选择器: p{ color: red; } 类选着器: .cls{ 样式 } <p class="cls">文本</p> <p class="cls1 cls2"> 文本 </p> 标签类结合: p.cls{ 样式 } 表示在指定标签中匹配class属性 id选着器: #nav{ 样式 } <div id="nav"></div> 群组选择器: div, p{ 样式 } <div></div> <p></p> 后代选择器: #nav #npc/div{ 样式 } 子代选择器: 选择器1>选择器2/标签{ 样式 } 伪类选择器: 超链接伪类选择器: :link 访问前 :visited 访问后 :active 鼠标点按 :hover 鼠标滑过 其他元素伪类选择器: :hover 鼠标滑过 :active 鼠标点按 伪类选择器只能和其他选择器/元素结合使用 p:hover{ 鼠标滑过p元素的新样式 } 选择器优先级: 标签选择器: 1 类/伪类选择器: 10 id选择器: 100 行内选择器: 1000 尺寸单位: px % in 英寸 1in 2.54cm pt 榜 1pt = 1/72 in cm m deg 角度 颜色单位: 英文单词(transparent: 透明) rgb(r,g,b) 0~255 rgba(r,g,b,a)透明度 十六进制:#fff 元素分类: 块元素 独占一行 支持宽高 div h1 p ul ol table form 行内元素 可以共行 大小由内容决定 span i b label u sub sup 行内块元素 可以共行 支持宽高 img input 常用属性: img{ width: 300px; height: 300px; color: red; background-color: #fff; font-size: 24px; font-weight: normal; 取消字体加粗 text-decoration: none; 取消下划线 vertical-align: top/middle/bottom; 左右元素与其的对齐方式(只能在行内块元素中使用) } 尺寸: img{ width: 300px/50%; height: 300px/50%; 溢出处理: overflow: visible/hidden/scroll/auto; 默认可见/溢出部分不显示/始终有滚动条溢出可用/自动产生滚动条 } 边框: div{ border: width style color; 宽度 样式 颜色 缺一不可 border: 1px solid/dashed/dotted/double; 实线/虚线/点线/双线 border: none; 取消边框 单独设置: border-top: 上 border-right: 右 border-bottom: 下 border-left: 左 border-width: 宽度 border-style: 样式 border-color: 颜色 三角标: width: 0px; height: 0px; border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid transparent; border-left: 100px solid transparent; } 轮廓线: div{ outline: width style color; outline: none; 取消轮廓线 } 圆角边框: div{ border-radius: 10px/10%; 超过50%就是圆形 border-radius: 10px 20px 30px 40px; 上 右 下 左 一个值:表示是个角相等 两个值:表示上下、左右相等 三个值:左右相等 其他分别设置 四个值:表示上右下左全不分别设置 } 边框阴影: div{ box-shadow: offset-x offset-y blur spread color 水平偏移 垂直偏移 延伸距离(可以省略) 阴影颜色 box-shadow: 10px 10px 10px pink; } 盒模型: 外边距: div{ margin: 10px/10%; 有四个值 最少一个 最多4个 效果同上(圆角边框) margin: 0px; 清除外边距 margin: 0px auto; 在父元素内水平居中 margin: -10px; 位置微调 单独设置: margin-top: 上 margin-right: 右 margin-bottom: 下 margin-left: 左 可以是像素也可以是百分比 默认具有外边距的元素: body p h1~h6 ul ol } 内边距: div{ padding: 10px/10%; 有四个值 最少一个 最多4个 效果同上(圆角边框) padding-top 上 padding-right 右 padding-bottom 下 padding-left 左 具有默认内边距的元素: ol ul 文本框 密码框 按钮 td } 声明盒模型计算方式: div{ box-sizing: border-box/content-box; 内边距+边框+内容的共同尺寸/默认值 } 改变元素类型: div{ display: block/inline/inline-block/none; 转换为块元素(显示元素)/转换为行内元素/行内块元素/隐藏元素 } 背景相关属性: 背景颜色: background-color:red; 背景图片: div{ background-image:url("./1.jpg") 图片平铺: background-repeat: repeat/no-repeat/repeat-x/repeat-y; 水平和垂直平铺/不重复平铺/水平平铺/垂直平铺 图片尺寸: background-size: 10px 10px/10%/cover/contain; 当前元素宽 高/元素比例/将图片拉伸全部覆盖元素超出部 分裁剪掉/将图片拉至刚好被容纳 超出部分不管 拉伸:图片比例不变 图片的位置: background-position: x/x% y/y%; 水平偏移/垂直偏移 百分比参照尺寸获取 background-position: 0% 0%; 图片左上角显示 background-position: 100% 100%; 图片右下角显示 background-position: 50% 50%; 图片居中显示 background-position: left/center/right top/center/bottom; 方位值表示:左/中/右 上/中/下 } 简写: div{ background: color/url()/repeat/position; } 文本相关属性: 字体: div{ 字体大小: font-size: 24px; 设置字体大小 font-family: "微软雅黑", "黑体", "KaiTi"; 设置字体类型 字体类型: font-weight: normal/bold/lighter; 正常显示/加粗显示/极细文本 字体加粗: font-weight: 400/700/100; 数字越大越粗 400=normal/700=bold 字体样式: font-style: normal/italic/oblique; 正常显示/使用倾斜显示/使文本倾斜达到斜体效果 简写: font: style weight size family; family 必须写 不写没效果 } 文本: div{ color: green; 文本颜色 文本对齐: text-align: left/center/right/justify; 默认水平左对齐/居中/右对齐/两端对齐 文本行高: line-height: 32px/2; 设置行高位32像素/设置行高为字体大小的2倍 文本居中方式: 将行高设置为和元素一样的高度 一行文本一定的垂直居中的 上下空隙由浏览器默认分配 文本装饰线: text-decoration: underline/overline/line-through/none; 下划线/上划线/删除线/取消下划线 } 表格属性: div{ width:; height:; background:; color:; margin:; padding:; 边框合并: border-collapse: separate/collapse; 默认边框分离/合并边框 td不支持外边距 只能写在table里 边框边距: border-spacing: h-Value v-Value; border-spacing: 10px 10px; 只能在表格分离的状态下使用 } 过渡效果: div{ 过渡属性: transition-property: width/height; 指定某个属性添加过渡效果 宽度过渡/高度过渡 transition-property: all; 将所有能过渡的属性都进行过渡 能够添加过渡的属性:所有颜色相关的、取值为数值的 过渡时长: transition-duration: 1s/100ms; 1秒完成过渡/100毫秒 时间曲率: transition-timing-function: ease/linear/ease-in/ease-out/ease-in-out; 默认开始结束满中间块/匀速/开始慢结束块/开始块结束慢/慢开始结束中间加速后减速 过渡延迟: transition-delay: 1s/100ms; 1秒后开始过渡/100毫秒 过渡时长必须设置其他可以省略 必须写在默认样式中 简写: transition:property duration timing-function delay; duration必须写 } 布局: 普通流布局: 默认方式 浏览器默认布局方式 浮动布局: div{ float: left/right/none; 元素向左浮动停靠在其他元素便于/向右浮动/默认 特点: 元素飘浮会脱流 后面的元素会补位 所有的元素只要设置浮动都可设置宽高 行内元素或行内块元素浮动后 水平方向之间没有空隙 浮动元素特殊效果: 文字环绕效果 浮动元素会遮挡正常元素 但是不会遮挡内容 解决不占位影响: 1.指定父元素的高度 2.父元素中设置 :overflow: hidden; 3.清除浮动: clear: none/left/right/both; 默认不处理/清除左浮影响/正常元素左边不允许出现浮动元素/两边都不允许 4.父元素末尾添加空块元素 设置:clear: both; } 定位布局: div{ position: relative/absolute/fixed/static; 相对定位/绝对定位/固定定位/默认文档流布局 只有设置了非默认属性 才算是已经定位的元素 偏移属性: 用来配合已定位的属性 进行位置移动 top: 10px; 以元素的上边界向下为正方向 right: 10px; 以元素的右边界向左为正方向 bottom: 100px; 以元素的下边界向上为正方向 left: 10px; 以元素的左边界向右为正方向 } 定位方式: div{ 相对定位: position: relative; 按照当前位置偏移 绝对定位: position: absolute; 定位后会脱流 脱流的所有元素都可以设置宽高 按照离他最近的祖先元素偏移 如果没有按照body位置偏移 一般采用父元素相对定位 子元素绝对行为方式 浮动 + 外边距调整元素位置 = 绝对定位 + 偏移属性 固定定位: position: fixed; 按照浏览器窗口进行定位 配合偏移属性使用 定位后元素都会变成块元素 层叠次序调整: z-index: 0~n; 默认0 数字越大越靠上 数值相同 后来者居上 只能用在已经定位的元素上 子元素永远在父元素之上 不受层次影响 } 显示方式: div{ display: none/block/inline/inline-block; 隐藏元素并且不占位/转换为块元素/转换为行内元素/转换为行内块元素 } 显示效果: div{ visibility: visible/hidden; 默认显示/隐藏元素并占位 opacity: 0~1; 设置元素的透明度 继承效果: 子元素最终效果 = 父元素opacity * 自身opacity vertical-align: top/middle/bottom; 调整垂直对齐方式 常见于行内块元素 cursor: default/pointer/text/crosshair; 默认值/设置为小手形状/输入I形状/ +形状 } 转换属性: div{ transform: 转换函数1 转换函数2...; 转换原点设置: transform-origin: x y; transform-origin: 像素/百分比/方位值; 默认以元素中心为原点 转换函数: 平移转换: transform: transform(x,y); x:水平方向平移距离 y:垂直方向 一个值等于translateX(value) transform: translateX(value) 水平方向位移 transform: translateY(value) 垂直方向位移 缩放变换: transform: scale(value)/scaleX()/scaleY(); 正常缩放/横向缩放/垂直缩放 value:默认1 大于1会等比放大 0~1会缩小 小于0会翻转 旋转变换: transform: rotate(90deg/-90deg); 顺时针旋转90度/逆时针旋转90度 transform: rotate3d(45deg/-45deg); transform: rotateX(ndeg); 沿x轴翻转 transform: rotateY(ndeg); 沿y轴翻转 transform: rotateZ(ndeg); 沿z轴旋转 旋转原点会影响旋转效果 如果涉及旋转操作 会连带坐标轴一起旋转,影响后面的位移 } HTML 会跳动的小心心 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> #box{ width: 200px; height: 160px; /*background-color: pink;*/ margin: 100px auto; position: relative; } #box:hover{ transform: scale(1.2); } .c1,.c2{ width: 100px; height: 160px; position: absolute; border-radius: 50px 50px 0 0; background-color: red; } .c1{ top:0; left:0; transform:rotate(45deg); transform-origin: right bottom; } .c2{ top:0; right: 0; transform:rotate(-45deg); transform-origin: left bottom; } </style> </head> <body> <div id="box"> <span class="c1"></span> <span class="c2"></span> </div> </body> </html>

优秀的个人博客,低调大师

Python Web(定位布局、定位方式)

定位布局: 属性:position 取值: static 默认值 按照文档流布局 relative 相对定位 absolute 绝对定位 fixed 固定定位 只有元素的position属性设置为非默认属性 才算是已经定位的元素 偏移属性: top right bottom left 用来配合已经定位的元素实现位置移动 取值:px top:以元素的上边界为基准移动元素 right:以元素的右边界为基准移动元素 bottom:以元素的低边界为基准移动元素 left:以元素的上左界为基准移动元素 定位方式: 相对定位: 属性:position:relative; 元素采用相对定位时会参照它在文档中原本的位置进行偏移 绝对定位: 属性:position:absolute; 特点: 1.绝对定位的元素,会脱离文档流不占位 2.绝对定位元素会参照离他最近的已经定位的祖先元素进行偏移 3.如果没有已经定位的祖先元素 元素会参照body(浏览器窗口左上角)进行偏移 注意: 所有元素只要脱流就可以设置宽高大小 通常使用“父相子绝”的方式页面布局 限制其他元素的布局方式 浮动和绝对定位点都可以实现元素脱流,采用浮动+外边距调整元素的位置 等价于绝对定位+偏移属性 浮动更常见于外围结构标签,做网页整体布局时 使用,绝对定位更常见于内部元素的调整 浮动和相对定位可以共存 设置相对定位只是为了辅助内部子元素+的定位布局 堆叠次序的调整: 已经定位的元素堆叠在一起是的排列顺序 语法: 属性:z-index 取值:整数 数值越大越靠上 注意: 如果我们元素z-index属性值相同,后来者居上 父子元素都设置z-index 永远都是子元素在上 不受影响 z-index属性只能用在已经定位的元素上 固定定位: 可以使元素的位置固定在浏览器窗口的某个位置 不会随网页内容的滚动而滚动 语法: 属性:position 取值:fixed 配合偏移属性实现元素位置的固定 注意: 固定定位的元素永远是参照浏览器的窗口定位的 固定定位的元素都会变成块元素 显示方式: 1.决定元素以何种样式显示在网页中 属性:display 取值: none 设置元素隐藏 隐藏后不占位 block 设置元素显示 或 将元素转换为块元素 inline 转换为行内元素 inline-block 转换为行内块元素 显示效果: 属性:visibility 取值: visible 默认值 表示显示 hidden 元素隐藏 仍然在文档中占位 元素透明度: 属性:opacity 设置元素透明度 取值:0~1 0:透明 1:不透明 元素设置opacity属性 所有的内容都会实现透明效果 子元素会继承父元素的透明效果 如果父子元素都设置了opacity 子元素最终的效果是在父元素半透明的基础上 在进行半透明 子元素最终效果=父元素opacity*本身opacity 设置垂直对齐方式: 属性:vertical-align 取值:top middle bottom 可以用在行内元素上 但更常见于为行内快元素设置vertical-align 调整行内快元素左右内容与它的对齐方式 光标显示: 改变鼠标悬停在元素上时的显示外观 属性:cursor 取值: default 默认 pointer 显示为小手形状 text 显示为 I crosshair 显示为 + 列表属性: 列表本身是块级元素,自带外边距,电邮项目符号 属性: 属性:list-style-type 设置项目符号 取值: none 取消项目符号 disc 实心原点 circle 空心原点 square 实心方块 ... 设置项目符号为图片: 属性:list-style-image 取值: url(“图片路径”) 设置项目符号的位置: 属性:list-style-position 取值:inside outside 设置项目符号出现在内容框的外部还是内部 **简写属性: list-style:none; 常用来取消列表的项目符号 转换属性: 主要是用来改变元素在页面中的位置、尺寸、角度 属性:transform 取值: 转换函数 多个函数之间用空格隔开 转换原点: 转换原点实际上就是元素转换操作的基准点 属性:transform-origin 取值:x y; 表示以元素左上角为原点进行选取旋转原点的坐标 可以使用像素值、百分比、方位值 top center bottom left center right 默认以元素的中心点为原点 转换函数: 平移变换: 改变元素在网页中的位置 属性:transform 取值:translate(x, y) x表示元素在水平方向上平移的距离 y表示元素在垂直方向上平移的距离 可以填写正值或负值 其他情况: translateX(value) 指水平方向位移 translateY(value) 指垂直方向位移 translate(value) 等价于translateX 缩放变换: 改变元素在页面中的大小 属性:transform 取值:scale(value) value为无单位的素值 表示缩放比例 默认值是1 正常比例显示 value > 1 会等比放大 0 < value < 1 等比缩小 value < 0 元素会等比反转 其他情况: scaleX(v) 横向缩放 scaleY(v) 垂直缩放 旋转变换: 元素旋转一定的角度显示 属性:transform 取值:rotate(ndeg) 表示元素按照指定的角度旋转 正值:顺时针 负值:逆时针 3D变换: rotateX(ndeg)沿X轴旋转 rotateY(ndeg)沿Y轴旋转 rotateZ(ndeg)沿Z轴旋转 旋转原点会影响转换效果 元素如果涉及旋转操作 会连带坐标轴一起旋转,影响后面的位移

优秀的个人博客,低调大师

Python Web(边框、盒模型、背景)

CSS常用的属性: width height color background-color font-size font-weight text-decoration vertical-align 尺寸单位和颜色: px % red rgb(255, 0, 0) reba(255, 0, 0, 0.5) #ff0000 #f00 尺寸 和 边框: 尺寸属性: width、height 用来改变元素的宽高大小 取值:px为单位的数字 或 % 快元素和行内快元素都可以设置宽高大小 行内元素不起作用,大小有内容自适应 溢出处理: 溢出属性:overflow 取值:visible(默认可见) hidden 隐藏 溢出部分不可见 scroll 显示滚动条 溢出时可用 始终显示 auto 自动当发生溢出的时 产生滚动条并可用 边框: 边框的实现: 1.简写设置 通过一个属性为4个方向设置边框 可以设置边框的宽度、样式、颜色 属性:border 取值:width style color(缺一不可) width:宽度 px style:边框样式 取值: solid:实线 dashed:虚线 dotted:点线 double:双线 color:设置边框颜色 特殊用法: 取消边框:border:none; 2.单独设置某个方向的边框 属性: border-top 上 border-right 右 border-bottom 下 border-left 左 取值:width style color(缺一不可) 3.单独定义边框的宽度、样式、颜色(了解) border-width: border-style: border-color: 4.边框实现三角标 元素的宽高尺寸为0 元素分别设置四个方向相同宽度 指定方向可以见 剩余的设置为不可见 透明(transparent) 想要设置三角标必须设置4个方向的边框 否则就是矩形 轮廓线: 围绕在元素边框周围的线 常见于表单元素 如:输入框焦点线 属性:outline 取值:width style color 一般多取消元素的默认轮廓线 outline:none 圆角边框: 设置元素的圆角 属性:border-radius 取值:px、%(参照元素尺寸) 取值情况: border-radius:20px; 一个值表示4个圆角程度都是20px 两个值表示 1和3 2和4 对角相等 三个值表示最后一个角和对角相等 四个值表示分别表示4个圆角程度 圆形:取一个值:%50; 边框阴影(盒阴影): 属性: box-shadow 取值: offset-x 水平偏移 offset-y 垂直偏移 blur 阴影的模糊度 值越大越模糊 spread 阴影的 延伸距离 color 阴影颜色 浏览器坐标系: 不管是窗口还是元素都以左上角为原点 作为x,y轴的正方向 盒模型/框模型: 一切元素皆为框 定义在文档中实际占据的尺寸 包含内容: 外边距、边框、内边距、元素尺寸 默认情况下元素最终占据的尺寸大小: 最终宽度 = 左右的外边距 + 左右边框的宽度 + 左右内边距 + 元素宽度 最终高度 = 上下的外边距 + 上下边框的高度 + 上下内边距 + 元素高度 1.外边距: 元素边框与其他元素边框之间的距离 设置元素与元素之间的距离 属性: margin 取值:px、% 取值情况: margin:10px; 一个值表示四个方向都设置外边距 两个值表示上下,左右的外边距相等 三个值表示左右相等其他不等 四个值表示分别设置上右下左的外边距 特殊用法: 1.清除元素的外边距 margin:0px; 2.设置元素在父元素中水平居中 margin:0px auto; 3.取值可以是负值 如果给负值表示位置微调 四个方向的外边距单独设置: 属性: margin-top margin-right margin-bottom margin-left 可以是一个值也可以是百分比 具有默认外边距的元素: 2.内边距: 元素的内容与元素边框的距离 属性:padding 取值:px、% 取值情况: padding:10px; 一个值表示四个方向的内边距 两个值表示上下,左右相等 三个值表示左右相等 其他不等 四个值表示分别设置四个方向的内边距 四个方向的内边距单独设置: padding-top padding-right padding-bottom padding-left 具有默认内边距的元素: ol ul 文本框 密码框 按钮 td box-sizing: 指定盒模型的计算方式 属性:box-sizing 取值: content-box 默认值 border-box: 元素的width height属性 设置包含边框 内边距和内容部分共同的尺寸 元素显示设置: 属性;display 作用;改变元素类型 取值: block 转换为块元素(可以设置隐藏显示) inline 转换为行内块元素 inline-block 转换为行内块元素 none 设置元素隐藏 背景相关的属性: 背景颜色是从边框位置开始绘制的 如果元素加内边距,也会按照背景颜色进行补充 所有的元素默认颜色都为透明 新建窗口为白色不是body的颜色 而是浏览器渲染的效果 属性: background-color 背景图片的设置: 属性;background-image 取值 url(图片地址) 图片平铺显示: 如果背景图片小于元素尺寸,会自动对图片重复平铺 属性: background-repeat 取值: repeat(默认) 水平和垂直方向平铺 no-repeat 不重复平铺 repeat-x 水平方向平铺 repeat-y 垂直方向平铺 图片尺寸: 属性:background-size 取值: px %: 采用当前元素的尺寸获取包含width height两个值 cover: 将图片等比拉伸至完全覆盖元素 超出部分裁剪掉 contain: 将图片等比拉伸至刚好被元素容纳 图片比例不变 图片的位置: 默认情况下 背景图片重从元素的左上角显示 属性: background-position 取值:x y 以像素为单位的数值没使用空格隔开 x 水平偏移距离(正负数都可以) y 垂直偏移距离(正负数都可以) x% y%: 百分比参照元素尺寸获取 0% 0%: 图片左上角显示 100% 100%: 背景图片右下角显示 50% 50%: 背景图片中间显示 使用方位值表示: x y x:left center right y:top center bottom 如果要一个方向 背景属性简写: 属性:background 取值: color url() repeat position 背景图片的大小需要单独设置

优秀的个人博客,低调大师

Python Web(概述、HTML基础语法)

Web: 什么是Web? Web就是网页 是一种基于B/S的应用程序 Web应用程序是由多个Servlet、JSP页面、HTML文件以及图像文件等组成 B:Browser 浏览器 S:Server 服务器 —————————————————— C/S C:client 客户端 S:Server 服务器 Web组成: 浏览器:代替用户向服务器发送请求 服务器:接受用户响应 通信协议:规范数据在网络中是如何打包即传递的 HTTP:HyoerText transfer portocal 超文本传输协议 Web服务器: 作用; 接受用户请求并且响应 存储Web信息 具备安全性 产品: Apache Tomcat IIS -Internet Information Server Nginx .... 技术: JSP - Java Server page PHP ASP.net Python Web (Django、Flask..) Web浏览器: 作用: 代替用户向服务器发送请求 作为响应用户的解释引擎,向用户呈现界面 主流产品: 根据浏览器内核/引擎划分 Microsoft IE Google Chrome Mozilla FireFox Apple Safari Opera Opera 浏览器引擎: 渲染引擎 - 解析 HRML、CSS 控制页面渲染效果 JS引擎 - 解释网页脚本文件 前段开发技术: HTML CSS JavaScript HTML: HTML概述: 什么是HTML? HyperText Markup language 超文本标记语言 作用: 书写网页结构 超文本: 具备特殊功能的文本 例如超链接 标记: 也叫标签 主要是用来标记网页中的内容 实现网页的布局和JS操作 HTML在技术算中的表现: 所有的网页文件在计算机中都是以.html、.htm文件储存的 开发工具: 记事本 Editplus、DreamWeaver sublime、Webstorm、Hbuilder、VSCode、Atom 运行工具: Chrome 浏览器 调试工具: 开发者工具 快捷键:F12 HTML基础语法: 标签/标记/元素: 在网页中具有特殊功能的符号 HTML所有的标签都以<>为标致区分 标签分类: 双标记: 成对出现 有开始有结束 语法: <开始> 内容 </结束> <h1> hello world </h1> 单标记: 只有开始没有结束 可以手动添加/表示结束 语法: <标签名> 或 <标签名/> <br> --- <br/> <hr> --- <hr/> 标签的嵌套: 在双标记中出现其他的标记 超链接: <a>首页</a> 文本加粗: <b>首页</b> 加粗超链接: <a> <b>首页</b> </a> 嵌套结构中 外层元素成为父元素 内层元素叫子元素 文档结构: <html> <head> </head> <body> hello world! </body> </html> 书写规范: HTML不区分大小写 推荐用小写 保持适当的缩进 增强代码可读性 标签属性: 主要用来修饰标签的显示效果 语法: 属性由属性名和属性值组成: 属性名=“属性值” 属性的声明须写在开始标签中 <开始 属性名=“属性值”> ... </结束> 每个标签都可以设置多个属性, 属性之间使用空格隔开 HTML注释: <!-- 注释内容 --> 注意: 注释不能写在标签里 注释不能嵌套 HTMl的换行于空格: HTML会忽略多余的 空只显示一个空格 如果需要多个空格或者<> 都需要使用特殊符号来代替 HTML结构组成: 文档类型声明: <!doctype html> //H5的声明方式 作用: 告诉浏览器当前使用的HTML版本 以便浏览器能正确解析HTML的标签和渲染样式 书写位置: 文档的第一行代码 文档的开始和结束: 在文档类型声明之后使用 <html></html> 表示文档的开始和结束 在HTML标签中包含连个子元素 <head> </hesd>: 网页的头部信息 包含网页的标题,选项卡的图标 网页的关键字 作者 描述信息等 还可以引用外部的资源文件 子元素: 1.设置网页的标题: <title> 我的第一个网页 </title> 2.设置字符编码: <meta charset="utf-8"> 浏览器按照utf-8编码格式解析网页 <body> </body>: 网页的主体信息 网页所呈现的内容 都要写在body里 文本相关的标签: 字符实体(具有 特殊意义的符号) &nbsp; 表示一个空格 &lt; 表示小于号 < &gt; 表示大于号 > &copy; 表示版权符号 @ &yen; 表示人民币符号 ¥ 文本样式标签: 斜体显示文本: <i> </i> 斜体显示 <u> </u> 文本添加下划线 <b> </b> 文本加粗 <s> </s> 删除线 <sup> </sup>上标 <sub> </sub>下标 这些标签可以与其他的标签或文本共行显示 标题标签: 可以以不同的文字大小和加粗方式显示文本 语法: <hn> </hn> n:取值1~6 可以改变文字大小和自动加粗 每个标题都会具备垂直的空白距离 每个标题都独占一行 不与其他元素共行显示 每个标题都可以添加属性align 取值: left center right 默认左对齐 段落标签: 突出显示一段文本 每一段的文本都独占一块/行 不与其他元素共行 并且具备垂直空白距离 语法: <p> </p> 属性: align 设置文本水平对齐方式 left center right 格式标签: <br> --- <br/> 换行标签 <hr> --- <hr/> 水平线 分区标签: 块分区: <div> </div> 划分页面结构 配合CSS实现页面布局 独占一块/行显示 行内分区元素: <span> </span> 设置同一行文本的不同样式(结合CSS) 可以与其他元素或文本共行显示 允许一行文本中使用span元素 标签分类: 块级元素: 只要是在网页中独占一行 不予其他元素共行显示 的元素都是块级元素 都可以来做布局 所有的块级元素都可以添加align属性设置内容的水平对齐方式 行内元素: 可以与其他元素共行显示 列表标记: 按照重是上到下的方式排列数据 并且能够显示项目符号在数据前面 列表的组成: 列表的类型: 有序列表 <ol> </ol>(ordered list) 默认按照数字排列 无序列表 <ul> </ul> (unordered list) 默认以实心原点作为标识 列表项: 列表中的每一天数据都是一个列表项 语法: <li> </li> 列表项需要嵌套在列表标签中使用 列表属性: 有序列表--- ol type属性:设置项目符号 1:按照数字排列(默认) a:按照小写字母顺序排列 A:按照大小字母顺序排列 i:罗马数字排列(分大小写) start属性:设置从第几个字符开始排列 只能取值数字 无序列表--- ul type属性:设置项目符号 disc:实心原点(默认) circle:空心圆的 square:空心方框 none:不显示项目符号 列表嵌套: 在一个列表中又出现了其他的列表 图像与超链接: URL(Uniform resource Locator) 统一资源定位符 用来表示网络中资源的位置 俗称路径 URL的组成: 协议、域名、主机名、文件 URL分类: 绝对路径: 从根目录开始查找 常用于网络文件路径 相对路径: 从当前所在的目录开始查找 根相对路径: 从Web程序所在的目录开始查找资源文件 URL中不能出现中文 URL严格区分大小写 图像标签: 在网页中插入一张图片 语法: <img> 属性: src:指定文件路径 width:设置宽度以像素为单位px height:设置高度(px) sorc必填 宽高可以省略 省略为图片默认大小 title: 用来设置图片的标题 当鼠标悬停在图片上方时显示 alt: 用来设置显示文件加载失败提示 非常简单没什么东西.............

优秀的个人博客,低调大师

Python工程师(元组、字典)

ParisGabriel 感谢 大家的支持 你们的阅读评价就是我最好的更新动力 我会坚持吧排版做的越来越好 每天坚持 一天一篇 点个订阅吧灰常感谢 当个死粉也阔以 Python人工智能从入门到精通 函数:tyup(x) 用来返回x对应的数据类型 range(x) 返回可迭代对象sublime编辑器: 中文空格查找方法 空格中间没有小点 行首小黑点 语法不规范 大黑点语法错误 中文空格也会出错元组 tuple: 元组是不可变的序列,同list一样,元组可以存放任意数据类型的容器元组的表示方法: 用小括号()括起来,单个元素括起来后面加 “,”逗号区分单个对象还是元组 元组的小括号可以省略 但元素低于2个 “,” 不能省略元组的构造函数: tuple() 生成一个空元组,等同于() tuple(iterable) 用可迭代对象生成一个元组元组的运算: + += * *= < > <= >= == != in , not in 索引[ ], 切片[ : ] [ : : ] + 拼接元组 * 生成重复元组元祖的比较: 规则与列表规则完全相同 in , not in 规则与列表规则完全相同索引和切片: 索引取值和切片取值的规则与列表相同 元组不支持索引赋值和切片赋值(因为元组是不可变的序列)元组的方法: T.index(v[, begin[, end]]) 返回对应圆的索引下表 T.count(x) 返回对应元素个数序列相关函数:len(x)、max(x)、min(x)、sum(x)、any(x)、all(x) str(x) 创建字符串构造函数: (构造函数一定是他的类型名 返回对应类型) list(inerable) 创建列表 tuple(inerable) 创建元组 reversed(x) 返回反向顺序的可迭代对象 sorted(inerable,key = None,reverse = false) 返回已排列列表 inerable:可迭代对象 (key = None,reverse = false:后面将)例如: t = (4, 5, 8, 3, 2, 1) L = [x for x in reversed(t)] print(L) 容器小结: 字符串str # 不可变序列, 只能存字符 列表 list # 可变序列,可存任意数据 元组 tuple #不可变序列,可以存任意数据字典 dict: 1.字典是一种可变容器,可以储存任意类型数据 2.字典中的每个数据都是用“键”(key)进行索引 ,而不像序列可以用整数下标来进行索引 3.字典中的数据没有先后关系,字典的储存是无序的 4.字典的数据以键(key)- 值(value)对形式进行映射储存 5.字典的键不能重复,只能用不可变类型作为字典的键字典的字面值的表示方法: 字典的表示方式是以{ }括起来的,以冒号开头“:” 分隔键-值对,各键-值对之间用逗号分开创建字典: d = { } #空字典 d = { “Nemo”:“yang”,“age”: 35} #非空字典 键:“Nemo”值:“yang”(一个键值对) 键(只能用不可变类型) 值可以任意类型 字符串str 列表 list 元组 tuple 字典 dict 都是可以任意包含关系的 字典的构造函数dict: dict() 生成一个字的字典 等同于{ } dict(iterable) 用可迭代对象初始化一个字典 dict(** keargs) 用关键字传参形式创建字典 关键字传参:(dict(name = “tarena”,age = 15)) 索引:d [key ] 字典的key:不可变数据类型: bool,int,float,complex,str,tuple,frozeset,bytes可变数据类型有四种: list 列表 dict 字典 set 集合 bytearray 字节数组 字典的基本操作: 键索引 用 [ ] 运算符获取字典内“键”对应的值 也可以修改 字典[ 键 ] = 值 如果键不存在时,创建键,并绑定对应的值 当存在时,修改键绑定的值 del 字典 [ 键 ] (删除元素)字典的成员资格判断 in 运算符: 可以用 in 运算符判断一个键是否存在于字典中,如果存在则返回true 否则返回false not in 与 in 结果相反例如: d = {"name": "Gabriel", "age": 20} if "name" in d: print("name 在字典中 ") print(15 in d) # false 只判断键 不判断值 字典的迭代访问: 字典是可迭代对象,字典只能对键进行迭代访问例如: d = {"name":"tarena", age: 15} for x in d: print(x, d[ x ])内建函数:(内建:代表系统内直接有的函数) len(d) 返回的是键值对个数 max(d) 返回的是键最大值 min(d) 返回的是键最小值 sum(d) 返回的是键得和 any(d) 一个键为true则为true all(d)所有键为true 则为true字典的方法: 函数 说明 D代表字典对象 D.clear() 清空字典 D.pop(key) 移除键,同时返回此键所对应的值 D.copy() 返回字典D的副本,只复制一层(浅拷贝) D.update(D2) 将字典 D2 (合并)到D中,如果键相同,则此键的值取D2的值作为新值 D.get(key, default) 返回键key所对应的值,如果没有此键,则返回default D.keys() 返回可迭代的 dict_keys 集合对象(返回键) D.values() 返回可迭代的 dict_values 值对象(返回值) D.items() 返回可迭代的 dict_items 对象(返回键值对)字典推导式: 是用可迭代对象创建字典的表达式语法: {键表达式:值表达式 for 变量 in 可迭代对象 if 真值表达式} if子句可以省略 d = { x:x ** 2 for x in range(10)}字典VS列表: 1.都是可变对象 2.索引方式不同,列表用整数(下标)索引 ,字典用键(key)索引 3.字典的插入,删除,修改数据的速度可能会快于列表 4.列表的存储是有序的(内存中一般用排列算法),字典的储蓄是无序的(内存中一般用散列算法插入数据) 练习: 1.已知有两个等长的列表 list1 和 list2 以list1中的元素为键,以list2中的元素为值,生成相应的字典 list1 = [1001, 1002, 1003, 1004] list2 = ['Tom', 'Jerry', 'Spike', 'Tyke'] 答案: list1 = [1001, 1002, 1003, 1004] list2 = ['Tom', 'Jerry', 'Spike', 'Tyke'] d = {list1[x]: list2[x] for x in range(len(list1))} print(d) 2. 输入任意个学生的姓名,年龄,成绩,每个学生的信息存入字典中,然后放入至列表中,每个学生的信息需要手动输入 当输入姓名为空时结束输入: 如: 请输入姓名: xiaozhang 请输入年龄: 20 请输入成绩: 100 请输入姓名: xiaoli 请输入年龄: 18 请输入成绩: 98 请输入姓名: <回车> 结束输入 要求内部存储格式如下: [{'name':'xiaozhang', 'age':20, 'score':100}, {'name':'xiaoli', 'age':18, 'score':98}] 打印所有学生的信息如下: +---------------+----------+----------+ | name | age | score | +---------------+----------+----------+ | xiaozhang | 20 | 100 | | xiaoli | 18 | 98 | +---------------+----------+----------+ 答案: L = [] while True: n = input("请输入姓名:") if n == '': break a = int(input("请输入年龄:")) s = int(input("请输入成绩:")) d = {} d['name'] = n d['age'] = a d['score'] = s L.append(d) # print(L) print("+---------------+----------+----------+") print("| name | age | score |") print("+---------------+----------+----------+") for d in L: n = d['name'].center(15) a = str(d['age']) ac = a.center(10) s = str(d['score']) sc = s.center(10) line = "|%s|%s|%s|" % (n, ac, sc) print(line) print("+---------------+----------+----------+")

优秀的个人博客,低调大师

Python工程师(列表、拷贝)

ParisGabriel 感谢 大家的支持 你们的阅读评价就是我最好的更新动力 我会坚持吧排版做的越来越好 每天坚持 一天一篇 点个订阅吧灰常感谢 当个死粉也阔以 Python人工智能从入门到精通 列表创建函数: list(可迭代对象)序列有5种: star 字符串 list 列表 tuple 元组 bytes 后面讲 bytearray 后面讲 序列运算符: in 、 not in > >= < <= + * 列表的索引可以增加、删除、修改、列表的元素值切片赋值: 步长不等于1时切片赋值,赋值运算符的右侧的可迭代对象提供的元素 的个数一定要等于切片切出的片数del语句: 用于删除列表的元素 del 列表 [索引] del 列表 [切片]Python3中常用的序列相关函数: len(x) 返回序列的长度 max (x) 返回最大元素 min(x) 返回序列最小元素 sum(x) 返回序列中所有原素的和 any(x) 真值测试,如果列表中有一个值为真返回true all(x) 真值测试,如果列表中所有值为真返回true 列表的方法(method):help(list) [ ]内的参数代表可以省略 方法 意义L.index(v [, begin[, end]]) 返回对应元素的索引下标, begin:为开始索引,end:为结束索引,当 value 不存在时触发ValueError错误L.insert(index, obj) 将某个元素插放到列表中指定的位置 index:索引 obj:要插入的元素L.count(x) 返回列表中元素的个数 x:元素L.remove(x) 从列表中删除第一次出现在列表中的值 x:元素(例如列表内有2个3 删除第一个 依次进行)L.copy() 复制此列表(只复制一层,不会复制深层对象)L.append(x) 向列表中追加单个元素 可以追加可迭代对象元素L.extend(list) 向列表追加另一个列表 L.clear() 清空列表,等同于 L[:] = []L.sort(reverse=False) 将列表中的元素进行排序,默认顺序按值的小到大的顺序排列L.reverse() 列表的反转,用来改变原列表的先后顺序L.pop([index]) 删除索引对应的元素,如果不加索引,默认删除最后元素,同时返回删除元素的引用关系(相当于取出元素不归还,可以用变量来接受)字符串的文本解析方法:S.split(sep=None) 将字符串使用sep作为分隔符分割字符串,返回分隔后的字符串列表,当不给定参数时,用空白字符作为分隔符分隔S.join(iterable) 用可迭代对象中的字符串,返回一个中间用S分隔组合的字符串 S=esp 要插入分割链接的字符 iterable:可迭代对象 潜拷贝和深拷贝: 潜拷贝shallow copy: help(list.copy) 拷贝指在复制过程中,只复制一层变量,不会复制深成变量绑定的对象的复制过程 例如: >>> L = [3.1,3.2] >>> L1 = [1, 2, L] >>> L2 = L1.copy() >>> L1 [1, 2, [3.1, 3.2]] >>> L2 [1, 2, [3.1, 3.2]] >>> L2[2][0] = 3.14 >>> L1 [1, 2, [3.14, 3.2]] >>> L2 [1, 2, [3.14, 3.2]] 深拷贝 deep copy: import copy # 导入copy 模块 例如: L = [3.1, 3.2] L1 = [1, 2, L] L2 = L1.deep copy() L2[2][0] = 3.14 print(L1) #[1, 2, [3.1, 3.2]] print(L2) #1, 2, [3.14, 3.2]] 深拷贝通常只对可变对象进行复制 ,不可变对象通常不会复制(这里深拷贝需要 import copy中的deepcopy 后面讲) 小结: L1 = [1, 2, [3.1, 3.2]] 这里只是纯粹的调用关系 可以通过内存地址查看 L2 = L1 # 不拷贝 同时绑定一个对象 L3 = L1.copy() # 潜拷贝等同于 L3 = L1[:] import copy L4 = copy.deepcopy(L1) #深拷贝 列表推导式 list comprehension: 列表推导式是用可迭代对象生成列表的表达式语法: [表达式 for 变量 in 可迭代对象] 或 [表达式 for 变量 in 可迭代对象 if 真值表达式] 说明: for in 表达式的 if 子句可以省略,省略后将对所有生成的对象进行求值处理 如:生成1~9的平方的列表 L= [x ** 2 for x in range(1,10)]列表推到式的嵌套:语法:L=[表达式 for 变量1 in 可迭代对象1 if 真值表达式1 for 变量2 in 可迭代对象2 if 真值表达式2 ] OK 今天的练习比较多 但是都很简单 争取把每个题都要理解他的原理 不懂得对照上面的参数进行核对一下就可以 想要入门IT就必须多写多练 写的代码也多 你就越熟练 越熟练经验越多 尝试不同的思路去分析 什么时候写的想吐 什么时候才算会了 我们一起加油 练习: 1. 已知有列表: L = [3, 5] 1) 用索引和切片等操作,将原列表改变为: L = [1, 2, 3, 4, 5, 6] 2) 将列表反转,删除最后一个元素后打印此列表 ... print(L) # [6, 5, 4, 3, 2] 答案: L = [3, 5] L[:] = range(1, 7) L[::-1] = range(1, 7)# L[:] = [range(6, 0, -1)] del L[-1] print(L) 2. 1. 写程序,让用户输入一些整数,当输入-1时结束输入,将这些数存于列表L中 1) 打印用户共输入了几个数? 2) 打印您输入的数的最大数是多少 3) 打印您输入的数的最小数是多少 4) 打印您输入的这些数的平均值是多少? 答案: L = [] while True: a = int(input("please input at will integer (input '-1' over):")) if a < 0: break L.append(a) L.sort() print("you input line number", len(L)) print("top1:", L[-1]) print("lower1:", L[0]) print(" average number :", sum(L) / len(L)) 3. 1.已知有一个字符串s = “100, 200, 300, 500, 800”将其转换为整数的列表存于L列表中 答案: s = "100,200,300,500,800" L = s.split(",") print(L) 2.生成前40个婓波那契数(fibonacci)1 1 2 3 5 8 13 .....要求将这些数字保存在列表中打印这些数 答案: L = [1, 1] a = 1 b = 1 while True: a += b b += a L += [a, b] if len(L) > 38: break print(L) 方法二 L = [1, 1] a = 1 b = 0 i = 0 while i < 40: a = a + b b = a - b L.append(b) i += 1 print(L) 4. L= [1, 3, 2, 1, 6, 4, 2, ......98, 82]将列表中出现的重复数字存入另一个列表L2中要求:重复出现多次的数字在L2中只保留一份 (去重) 答案: L = [] while True: a = int(input("please input at will integer (input '-1' over):")) if a < 0: break L.append(a) L2 = [] for x in L: if x not in L2: L2.append(x) print(L) print(L2) 5. 输入多行文字,存入列表中, 每次输入回车后算一行 任意输入多行,当输入回车(即输入空行时结束输入) 1) 按原输入内容在屏幕上输出内容 2) 打印出您共输入了多少行文字 3) 打印出您共输入了多少个字符 答案; L = [] i = 0 while True: a = input("please input at will string direct Enter over:") if a == "": break i += len(a) L.append(a) for x in L: print(x) print("您共输入的行数:", len(L)) print("您共输入的字符:", i) 6. 1. 有字符串"hello" 请用此字符串生成: 'h e l l o' 和 'h-e-l-l-o' 2. 写一个程序,让用户输入很多正整数,当输入小于零的数时结束输入, 1) 打印这些数中最大的一个数 2) 打印这些数中第二大的一个数 3) 删除最小的一个数 4) 打印剩余数的和 答案: s = "heool" L = " ".join(s) print(L) L = "-".join(s) print(L) 7. 用列表推导式生成1~100内奇数的列表 结果是: [1, 3, 5, 7, ..... 99] 答案: L = [x for x in range(1, 100, 2)] print(L) L = [x for x in range(1, 100) if x % 2 != 0] print(L) 8. 生成一个数值为 1 ~ 9的平方的列表,去掉所有的奇数的平方答案: L = [x**2 for x in range(2, 10, 2)] print(L) L = [x**2 for x in range(2, 10) if x % 2 == 0] print(L) Python人工智能从入门到精通 加油!

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长,特征是大鼻子、头戴帽子、身穿背带裤,还留着胡子。与他的双胞胎兄弟路易基一起,长年担任任天堂的招牌角色。

腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题,腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构,目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称,一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

WebStorm

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

用户登录
用户注册