表格布局 Table Layout
1. 表格式化
1.1 表编排规则
1.2. 表显示值
1.3 匿名表对象
1.4 表层
1.5 表标题
2. 表单元格边框
2.1 合并或分隔单元格边框
2.2 边框间隔
2.3 处理空单元格
2.4 合并单元格边框
3. 表大小
3.1 宽度
3.2 高度
3.3 对齐
3.3.1 行内元素的值
3.3.2 表格单元格的值
1. 表格式化
1.1 表编排规则
每个行框包含一行表格单元。表中的所有行框按其在源文档中出现的顺序从上到下地填充表。因此有多少个行元素,表中就包含多少表格行。
一个行组包含多少个行框,该行组框就包含多少个表格单元。
列框包含一列或多列表格单元。所有列框都按其出现的顺序依次相邻放置。对于从左向右读的语言,第一列框放大左边。
列组中包含多少个列框,该列组框中就包含多少个表格单元。
由文档语言来定义这种跨行或跨列的单元格是一个矩形框,其宽度和高度分别为一个或多个单元格。
单元格框不能超出表或行组的最后一个行框。如果表结构可能造成这种情况,单元格则必须缩小,使之能放在包含它的表或行组中。
1.2. 表显示值
: block | inline | run-in
: flow | flow-root | table | flex | grid | ruby
: list-item&&
?&&[ flow | flow-root ]?
: table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
: contents | none
: inline-block | inline-list-item | inine-table | inline-flex | inline-grid
inine-table: 指定一个元素定义了一个行内级表。 table-row: 指定一个元素是一个单元格的行。相应的THML元素是tr元素。 table-row-group: 指定一个元素是一个或多个行的组。相应的HTML元素是tbody元素。 table-header-group: 标题行组问题在其他行和行组之前显示。标题组可以包含多个行,相应的HTML元素是thead。 table-footer-group: 脚注行组问题在所有其他行之后显示,如果最下面有页脚标题,要在该标题之前显示。相应的HTML元素是tfoot。 table-column: 声明元素描述了一个单元格的列。相应的HTML元素是col。 table-column-group: 声明一个元素是一个或多个列的组。相应的HTML元素是colgroup。 table-caption: 定义一个表的总标题。
1.2.1 列
在CSS中列和列组只能接受4种样式:border, background, width, visibility。
border: 只有当border-collapse属性值为collapse时才能为列和列组设置边框。 background: 只有当单元格及其行有透明背景时,列或列组的背景才可见。 width: 定义了列或列组的最小宽度。 visibility: 如果一个列或列组的visibility为collapse,则该列(或列组)中所有单元格都不显示。从合并列跨到其他列的单元格会被剪裁。
1.3 匿名表对象
如以下标记,定义了一个包含两个单元格的单行表,不过从结构上讲,并没有定义行的元素(tr)。
< table>
< td> Name:td >
< td> < input type = " text" /> td >
table >
CSS将遗漏的组件作为匿名对象插入,
< table>
< td> Name:td >
< td> < input type = " text" /> td >
table >
1.3.1 对象插入规则
如果一个table-cell
元素的父元素不是table-row
元素,则会在该table-cell元素及其父元素之间插入一个匿名table-row
对象。所插入的这个对象将包含该table-cell
元素的所有连续兄弟。
如果一个table-row
元素的父元素不是table, inline-table,table-row-group
元素,则会在该table-row
元素及其父元素之间插入一个匿名table
元素。所插入的这个对象将包含该table-row
元素的所有连续兄弟。
如果一个table-column
元素的父元素不是table, inline-table,table-column-group
元素,则会在该table-column
元素及其父元素之间插入一个匿名table
元素。
如果一个table-column-group, table-header-group,table-footer-group,table-column-group, table-caption
元素的父元素不是table
元素。则会在该元素及其父元素之间插入一个匿名table
元素。
如果一个table, inline-table
元素的子元素不是table-row-group,table-header-group,table-footer-group,table-row,table-caption
元素,则在该table
元素与其子元素之间插入一个匿名table-row
对象,这个匿名对象将包含该子元素的所有不是table-row-group,table-header-group,table-footer-group,table-row,table-caption
元素的连续兄弟。
如果一个table-row-group,table-header-group,table-footer-group
元素的子元素不是table-row
元素,则在该元素及其子元素之间插入一个匿名table-row
对象。这个匿名对象将包含该子元素的所有本身非table-row
对象的连续兄弟。
如果一个table-row
元素的子元素不是table-cell
元素。则在该元素和其子元素之间插入一个匿名table-cell
对象。这个匿名对象将包含该子元素的所有本身非table-cell
对象的连续兄弟。
1.4 表层
如图:列表样式在行样式的下面,因此行背景会覆盖列背景。
1.5 表标题
caption-side 属性设置表格标题的位置。
属性值
描述
top
默认值。标题会出现在表格的上方。
bottom
标题会出现在表格的下方。
inherit
规定应该从父元素继承 caption-side 属性的值。
caption-side : top;
caption-side : bottom;
2. 表单元格边框
2.1 合并或分隔单元格边框
**border-collapse
**属性是用来决定表格的边框是分开的还是合并的。在分隔模式下,相邻的单元格都拥有独立的边框。在合并模式下,相邻单元格共享边框。
属性值
描述
separate
默认值。模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性 border-spacing
来确定的。不会忽略 border-spacing 和 empty-cells 属性。
collapse
表格中相邻单元格共享边框。在这种模式下,CSS属性border-style
的值 inset 表现为槽,值 outset 表现为脊。会忽略 border-spacing 和 empty-cells 属性。
inherit
规定应该从父元素继承 border-collapse 属性的值。
2.2 边框间隔
border-spacing
属性指定相邻单元格边框之间的距离(只适用于边框分离模式)。相当于 HTML 中的 cellspacing
属性,但是第二个可选的值可以用来设置不同于水平间距的垂直间距。
属性值
描述
length horizontal vertical
length描述单元格之间的水平和垂直距离的一个length值。它只在单值语法下使用。 horizontal描述相邻两列的单元格之间的水平距离的一个length值。它只在双值语法下使用。 vertical描述相邻两行的单元格之间的垂直距离的一个length值。它只在双值语法下使用。
inherit
从父元素继承 border-spacing 属性的值。
2.3 处理空单元格
empty-cells
属性定义了用户端 user agent 应该怎么来渲染表格 中没有可见内容的单元格的边框和背景。
属性值
描述
show
边框和背景正常渲染。与普通元素一样。默认。
hide
边框和背景被隐藏。
inherit
从父元素继承 empty-cells 属性的值。
2.4 合并单元格边框
“display”值为“table”或“inline-table”的元素在“border-collapse”为“collapse”时不能有任何内边距,但可以有外边距。因此,在collapse模型中,表的外围的边框与其最外层单元格的边框之间不会有任何间隔。
边框可以应用到单元格、行、行组、列和列组。与往常一样,表元素本身有一个边框。
在collapse模型中,单元边框之间绝对不会有任何间隔。实际上,如果边框相邻就会相互合并,使得实际上只画其中一个合并边框。
一旦合并,单元格之间的边框会在单元格间的假想表格线上居中。
2.4.1 合并单元格边框规则
如果某个合并边框的border-style为hidden,它会优先于所有其他合并边框。这个位置上的所有边框都隐藏。
如果某个合并边框的border-style为none,它的优先级最低。这个位置上不会画出该边框,除非所有其他合并边框的border-style值都是none。
如果至少有一个合并边框的border-style值不是none,而且所有合并边框的border-style值都不是hidden,则窄边框不敌更宽的边框。
如果多个合并边框有相同的宽度,则会考虑边框样式,并采用以下顺序(从最优先到最不优先):double、solid、dashed、dotted、ridge、outset、groove、inset。
如果合并边框的样式和宽度都一样,但是颜色不同,则按下表烦序使用元素的颜色(从最优先到最不优先):cell、row、row group、column、column group, table。
如果合并边框来自相同类型的元素,如两个有相同样式和宽度但不同颜色的行边框,则颜色取最上最左边框的颜色。
3. 表大小
关于确定表的宽度,有两种不同的方 法:固定宽度布局和自动宽度布局。不论使用何种宽度算法,高度都会自动计算。
3.1 宽度
属性值
描述
auto
默认。表格及单元格的宽度取决于其包含的内容。
fixed
表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定。在当前列中,该单元格所在行之后的行并不会影响整个列宽。
固定布局模型的工作步骤
width属性值不是auto的所有列元素会根据width值设置该列的宽度。
如果一个列的宽度为auto,不过表首行中位于该列的单元格width不是auto,则根据该单元格宽度设置此列的宽度。如果这个单元格跨多列,则宽度在这些列上平均分配。
在以上两步之后,如果列的宽度仍为auto,会自动确定其大小,使其宽度尽可能相等。
此时,表的宽度设置为表的width值或列宽度之和(取其中较大者)。如果表宽度大于其列宽总和,将二者之差除以列数,再把得到的这个宽度增加到每一列上。
自动布局模型的工作步骤:
对于一列中的各个单元格,计算最小和最大单元格宽度。 a. 确定显示内容所需的最小宽度。要记住,内容可以流入多行,不过不能超出单元格框。如果单元格的width值大于最小可能宽度,则把最小单元格宽度设置为该width值。如果单元格的width值为auto,最小单元格宽度则设置为最小内容宽度。 b. 对于最大宽度,要确定完全显示内容而且不包括换行符所需的宽度(除非明确要求,例如指出可以有
元素),这个值就是最 大单元格宽度。
对于各一列,计算最小和最大列宽。 a. 列的最小宽度由该列中所有单元格的最小单元格宽度的最大值确定。如果为该列指定的width值大于列中所有最小单元格宽度,最小列宽则设置为这个width 值。 b. 要计算最大宽度,取该列中所有单元格的最大单元格宽度的最大值。如果已经为列指定了一个width值,而且大于该列中的所有最大单元格宽度,最大列宽则设置为该width值。这两种行为改写了传统的HTML表行为,对于HTML 表,会强制列扩展为与其最宽的单元格同宽。
如果一个单元格跨多列,最小列宽之和必须等于这个跨列单元格的最小单元格宽度。类似地,最大列宽之和必须等于跨列单元格的最大宽度。如果列宽之和与单元格宽度有差距,用户代理会把这个差距在所跨的列上平均分配。
另外用户代理必须考虑到一个问题:如果一个列的width值为百分数值,这个百分数要相对于表的宽度计算,即使它还不知道这个宽度是多少!,它必须把这个百分数保存起来,在算法的下一部分使用。
此时,用户代理已经确定了各列可能是多宽或多窄。有了这个信息,可以再真正得出表的宽度。这个过程如下:
如果表的计算宽度值不是auto,将这个计算表宽度值与所有列宽再加上所有边框和单元格间隔之和相比较(设置为百分数宽度的列往往在此时计算具体宽度)。二者中较大的一个就是表的最终宽度。如果表的计算宽度值大于列宽、边框和单元格间隔之和,所有列的宽度都会增加一个相等的量,使得刚好将表完全填充。
如果表的计算宽度值为auto,通过将列宽、边框和单元格间隔相加来确定表的最终宽度。这说明表的宽度只能恰好显示其容,而不能有多余,这类似于传统的HTML表。设置为百分数宽度的列会以这个百分数作为一个限制,不过用户代理有可能并不满足这个限制。
3.2 高度
如果表的高度是auto,其高度则是表中所有行的行高再加上所有边框和单元格间隔的总和。实际中应当尽可能避免设置高度。
3.3 对齐
3.3.1 行内元素的值
相对父元素的值
属性值
描述
baseline
使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线,如
,这意味着这些元素使用此值的表现因浏览器而异。
sub
使元素的基线与父元素的下标基线对齐。
super
使元素的基线与父元素的上标基线对齐。
text-top
使元素的顶部与父元素的字体顶部对齐。
text-bottom
使元素的底部与父元素的字体底部对齐。
middle
使元素的中部与父元素的基线加上父元素x-height的一半对齐。
使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
使元素的基线对齐到父元素的基线之上的给定百分比,该百分比是line-height属性的百分比。可以是负数。
相对行的值
属性值
描述
top
使元素及其后代元素的顶部与整行的顶部对齐。
bottom
使元素及其后代元素的底部与整行的底部对齐。
没有基线的元素,使用外边距的下边缘替代。
3.3.2 表格单元格的值
可以是负数。
属性值
描述
baseline (以及 sub, super, text-top, text-bottom,,
)
使单元格的基线,与该行中所有以基线对齐的其它单元格的基线对齐。
top
使单元格内边距的上边缘与该行顶部对齐。
middle
使单元格内边距盒模型在该行内居中对齐。
bottom
使单元格内边距的下边缘与该行底部对齐。
你可能感兴趣的:(WEB,html,css)
理解Gunicorn:Python WSGI服务器的基石
范范0825
ipython linux 运维
理解Gunicorn:PythonWSGI服务器的基石介绍Gunicorn,全称GreenUnicorn,是一个为PythonWSGI(WebServerGatewayInterface)应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具,Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置,帮助初学者快速上手。1.什么是Gunico
swagger访问路径
igotyback
swagger
Swagger2.x版本访问地址:http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口,通常为8080。{context-path}是你的应用上下文路径,如果应用部署在根路径下,则为空。Swagger3.x版本对于Swagger3.x版本(也称为OpenAPI3)访问地址:http://{ip
html 中如何使用 uniapp 的部分方法
某公司摸鱼前端
html uni-app 前端
示例代码:Documentconsole.log(window);效果展示:好了,现在就可以uni.使用相关的方法了
Google earth studio 简介
陟彼高冈yu
旅游
GoogleEarthStudio是一个基于Web的动画工具,专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库,使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具,专为创作使用G
PHP环境搭建详细教程
好看资源平台
前端 php
PHP是一个流行的服务器端脚本语言,广泛用于Web开发。为了使PHP能够在本地或服务器上运行,我们需要搭建一个合适的PHP环境。本教程将结合最新资料,介绍在不同操作系统上搭建PHP开发环境的多种方法,包括Windows、macOS和Linux系统的安装步骤,以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类:集成开发环境:例如XAMPP、WAMP、MAMP,这
四章-32-点要素的聚合
彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers5.3.xapi。源码见1032.html,对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理
STU学生网页设计
网页设计 期末网页作业 html静态网页 html5期末大作业 网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
二挡起步
web前端期末大作业 javascript html css 旅游 风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动
二挡起步
web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线
git - Webhook让部署自动化
大猪大猪
我们现在有一个需求,将项目打包上传到gitlab或者github后,程序能自动部署,不用手动地去服务器中进行项目更新并运行,如何做到?这里我们可以使用gitlab与github的挂钩,挂钩的原理就是,每当我们有请求到gitlab与github服务器时,这时他俩会根据我们配置的挂钩地扯进行访问,webhook挂钩程序会一直监听着某个端口请求,一但收到他们发过来的请求,这时就知道用户有请求提交了,这时
webpack图片等资源的处理
dmengmeng
需要的loaderfile-loader(让我们可以引入这些资源文件)url-loader(其实是file-loader的二次封装)img-loader(处理图片所需要的)在没有使用任何处理图片的loader之前,比如说css中用到了背景图片,那么最后打包会报错的,因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以,打开网页能准确看到图片。{test:/\.(p
「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验
张风捷特烈
ide rust 开发语言 后端
theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言,但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里,我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站,可通过下面的链接访问https://www
Python神器!WEB自动化测试集成工具 DrissionPage
亚丁号
python 开发语言
一、前言用requests做数据采集面对要登录的网站时,要分析数据包、JS源码,构造复杂的请求,往往还要应付验证码、JS混淆、签名参数等反爬手段,门槛较高。若数据是由JS计算生成的,还须重现计算过程,体验不好,开发效率不高。使用浏览器,可以很大程度上绕过这些坑,但浏览器运行效率不高。因此,这个库设计初衷,是将它们合而为一,能够在不同须要时切换相应模式,并提供一种人性化的使用方法,提高开发和运行效率
Java爬虫框架(一)--架构设计
狼图腾-狼之传说
java 框架 java 任务 html解析器 存储 电子商务
一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取,分析,存储,索引。爬虫:爬虫负责爬取,解析,处理电子商务网站的网页的内容数据库:存储商品信息索引:商品的全文搜索索引Task队列:需要爬取的网页列表Visited表:已经爬取过的网页列表爬虫监控平台:web平台可以启动,停止爬虫,管理爬虫,task队列,visited表。二、爬虫1.流程1)Scheduler启动爬虫器,TaskMast
Java:爬虫框架
dingcho
Java java 爬虫
一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
MongoDB知识概括
GeorgeLin98
持久层 mongodb
MongoDB知识概括MongoDB相关概念单机部署基本常用命令索引-IndexSpirngDataMongoDB集成副本集分片集群安全认证MongoDB相关概念业务应用场景:传统的关系型数据库(如MySQL),在数据操作的“三高”需求以及应对Web2.0的网站需求面前,显得力不从心。解释:“三高”需求:①Highperformance-对数据库高并发读写的需求。②HugeStorage-对海量数
Python实现下载当前年份的谷歌影像
sand&wich
python 开发语言
在GIS项目和地图应用中,获取最新的地理影像数据是非常重要的。本文将介绍如何使用Python代码从Google地图自动下载当前年份的影像数据,并将其保存为高分辨率的TIFF格式文件。这个过程涉及地理坐标转换、多线程下载和图像处理。关键功能该脚本的核心功能包括:坐标转换:支持WGS-84与WebMercator投影之间转换,以及处理中国GCJ-02偏移。自动化下载:多线程下载地图瓦片,提高效率。图像
Spring MVC 全面指南:从入门到精通的详细解析
一杯梅子酱
技术栈学习 spring mvc java
引言:SpringMVC,作为Spring框架的一个重要模块,为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者,掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径,通过详细的知识点分析和实际案例,帮助你快速上手SpringMVC,让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC?Spri
Spring Boot中实现跨域请求
BABA8891
spring boot 后端 java
在SpringBoot中实现跨域请求(CORS,Cross-OriginResourceSharing)可以通过多种方式,以下是几种常见的方法:1.使用@CrossOrigin注解在SpringBoot中,你可以在控制器或者具体的请求处理方法上使用@CrossOrigin注解来允许跨域请求。在控制器上应用:importorg.springframework.web.bind.annotation.
WebMagic:强大的Java爬虫框架解析与实战
Aaron_945
Java java 爬虫 开发语言
文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代,网络爬虫作为数据收集的重要工具,扮演着不可或缺的角色。Java作为一门广泛使用的编程语言,在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架,它提供了简单灵活的API,支持多线程、分布式抓取,以及丰富的
00. 这里整理了最全的爬虫框架(Java + Python)
有一只柴犬
爬虫系列 爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
详解:如何设计出健壮的秒杀系统?
夜空_2cd3
作者:Yrion博客园:cnblogs.com/wyq178/p/11261711.html前言:秒杀系统相信很多人见过,比如京东或者淘宝的秒杀,小米手机的秒杀。那么秒杀系统的后台是如何实现的呢?我们如何设计一个秒杀系统呢?对于秒杀系统应该考虑哪些问题?如何设计出健壮的秒杀系统?本期我们就来探讨一下这个问题:image目录一:****秒杀系统应该考虑的问题二:****秒杀系统的设计和技术方案三:*
最简单将静态网页挂载到服务器上(不用nginx)
全能全知者
服务器 nginx 运维 前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了,所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态:sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器:安装Apache:sudoyuminstallhttpd启动Apache:sudosystemctl
斟一小组鸡血视频
和自己一起成长
http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
uniapp使用内置地图选择插件,实现地址选择并在地图上标点
神夜大侠
Uniapp vue.js uniapp
uniapp使用内置地图选择插件,实现地址选择并在地图上标点代码如下:page{background:#F4F5F6;}::-webkit-scrollbar{width:0;height:0;color:transparent;}page{height:100%;width:100%;font-size:24rpx;}image,view,input,textarea,label,text,na
【Golang】实现 Excel 文件下载功能
RumIV
Golang golang excel 开发语言
在当今的网络应用开发中,提供数据导出功能是一项常见的需求。Excel作为一种广泛使用的电子表格格式,通常是数据导出的首选格式之一。在本教程中,我们将学习如何使用Go语言和GinWeb框架来创建一个Excel文件,并允许用户通过HTTP请求下载该文件。准备工作在开始之前,请确保您的开发环境中已经安装了Go语言和相关的开发工具。此外,您还需要安装GinWeb框架和excelize包,这两个包都将用于我
Dockerfile命令详解之 FROM
清风怎不知意
容器化 java 前端 javascript
许多同学不知道Dockerfile应该如何写,不清楚Dockerfile中的指令分别有什么意义,能达到什么样的目的,接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是,按照惯例,它们应该是大写的,以便更容易地将它们与参数区分开来。(引用
VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。
焚木灵
node.js vue
可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料:xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS):1、安装依赖:npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块,
metaRTC8.0,一个全新架构的webRTC SDK库
metaRTC
webrtc 音视频
概述metaRTC8.0是metaRTC开源以来架构变化最大的一个版本,是metaIPC3.0等高性能的基础。metaRTC8.0是一个全新架构版本,并非在metaRTC7.0版本上简单升级,在QOS/语音对讲/内存占用/视频文件录制读取等方面新增多个模块,在弱网对抗/语音对讲/内存优化等效果上有显著提升。metaRTC8.0在一年多的开发中进行了近200次迭代,metaRTC8.0社区版计划在2
metaRTC/webRTC QOS 方案与实践
metaRTC
metaRTC 解决方案 webrtc qos
概述质量服务(QOS/QualityofService)是指利用各种技术方案提高网络通信质量的技术,网络通信质量需要解决下面两个问题:网络问题:UDP/不稳定网络/弱网下的丢包/延时/乱序/抖动数据量问题:发送数据量超带宽负载和平滑发送拥塞控制是各种技术方案的数据基础,丢包恢复解决丢包问题,抗乱序抖动解决网络乱序抖动问题,流量控制解决平滑发送数据/数据超带宽负载/延时问题。拥塞控制(Congest
java线程Thread和Runnable区别和联系
zx_code
java jvm thread 多线程 Runnable
我们都晓得java实现线程2种方式,一个是继承Thread,另一个是实现Runnable。
模拟窗口买票,第一例子继承thread,代码如下
package thread;
public class ThreadTest {
public static void main(String[] args) {
Thread1 t1 = new Thread1(
【转】JSON与XML的区别比较
丁_新
json xml
1.定义介绍
(1).XML定义
扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据、定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一,跨平台和语言,早已成为业界公认的标准。
XML是标
c++ 实现五种基础的排序算法
CrazyMizzz
C++ c 算法
#include<iostream>
using namespace std;
//辅助函数,交换两数之值
template<class T>
void mySwap(T &x, T &y){
T temp = x;
x = y;
y = temp;
}
const int size = 10;
//一、用直接插入排
我的软件
麦田的设计者
我的软件 音乐类 娱乐 放松
这是我写的一款app软件,耗时三个月,是一个根据央视节目开门大吉改变的,提供音调,猜歌曲名。1、手机拥有者在android手机市场下载本APP,同意权限,安装到手机上。2、游客初次进入时会有引导页面提醒用户注册。(同时软件自动播放背景音乐)。3、用户登录到主页后,会有五个模块。a、点击不胫而走,用户得到开门大吉首页部分新闻,点击进入有新闻详情。b、
linux awk命令详解
被触发
linux awk
awk是行处理器: 相比较屏幕处理的优点,在处理庞大文件时不会出现内存溢出或是处理缓慢的问题,通常用来格式化文本信息
awk处理过程: 依次对每一行进行处理,然后输出
awk命令形式:
awk [-F|-f|-v] ‘BEGIN{} //{command1; command2} END{}’ file
[-F|-f|-v]大参数,-F指定分隔符,-f调用脚本,-v定义变量 var=val
各种语言比较
_wy_
编程语言
Java Ruby PHP 擅长领域
oracle 中数据类型为clob的编辑
知了ing
oracle clob
public void updateKpiStatus(String kpiStatus,String taskId){
Connection dbc=null;
Statement stmt=null;
PreparedStatement ps=null;
try {
dbc = new DBConn().getNewConnection();
//stmt = db
分布式服务框架 Zookeeper -- 管理分布式环境中的数据
矮蛋蛋
zookeeper
原文地址:
http://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/
安装和配置详解
本文介绍的 Zookeeper 是以 3.2.2 这个稳定版本为基础,最新的版本可以通过官网 http://hadoop.apache.org/zookeeper/来获取,Zookeeper 的安装非常简单,下面将从单机模式和集群模式两
tomcat数据源
alafqq
tomcat
数据库
JNDI(Java Naming and Directory Interface,Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。
没有使用JNDI时我用要这样连接数据库:
03. Class.forName("com.mysql.jdbc.Driver");
04. conn
遍历的方法
百合不是茶
遍历
遍历
在java的泛
linux查看硬件信息的命令
bijian1013
linux
linux查看硬件信息的命令
一.查看CPU:
cat /proc/cpuinfo
二.查看内存:
free
三.查看硬盘:
df
linux下查看硬件信息
1、lspci 列出所有PCI 设备;
lspci - list all PCI devices:列出机器中的PCI设备(声卡、显卡、Modem、网卡、USB、主板集成设备也能
java常见的ClassNotFoundException
bijian1013
java
1.java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory 添加包common-logging.jar2.java.lang.ClassNotFoundException: javax.transaction.Synchronization
【Gson五】日期对象的序列化和反序列化
bit1129
反序列化
对日期类型的数据进行序列化和反序列化时,需要考虑如下问题:
1. 序列化时,Date对象序列化的字符串日期格式如何
2. 反序列化时,把日期字符串序列化为Date对象,也需要考虑日期格式问题
3. Date A -> str -> Date B,A和B对象是否equals
默认序列化和反序列化
import com
【Spark八十六】Spark Streaming之DStream vs. InputDStream
bit1129
Stream
1. DStream的类说明文档:
/**
* A Discretized Stream (DStream), the basic abstraction in Spark Streaming, is a continuous
* sequence of RDDs (of the same type) representing a continuous st
通过nginx获取header信息
ronin47
nginx header
1. 提取整个的Cookies内容到一个变量,然后可以在需要时引用,比如记录到日志里面,
if ( $http_cookie ~* "(.*)$") {
set $all_cookie $1;
}
变量$all_cookie就获得了cookie的值,可以用于运算了
java-65.输入数字n,按顺序输出从1最大的n位10进制数。比如输入3,则输出1、2、3一直到最大的3位数即999
bylijinnan
java
参考了网上的http://blog.csdn.net/peasking_dd/article/details/6342984
写了个java版的:
public class Print_1_To_NDigit {
/**
* Q65.输入数字n,按顺序输出从1最大的n位10进制数。比如输入3,则输出1、2、3一直到最大的3位数即999
* 1.使用字符串
Netty源码学习-ReplayingDecoder
bylijinnan
java netty
ReplayingDecoder是FrameDecoder的子类,不熟悉FrameDecoder的,可以先看看
http://bylijinnan.iteye.com/blog/1982618
API说,ReplayingDecoder简化了操作,比如:
FrameDecoder在decode时,需要判断数据是否接收完全:
public class IntegerH
js特殊字符过滤
cngolon
js特殊字符 js特殊字符过滤
1.js中用正则表达式 过滤特殊字符, 校验所有输入域是否含有特殊符号function stripscript(s) { var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]"
hibernate使用sql查询
ctrain
Hibernate
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import org.hibernate.Hibernate;
import org.hibernate.SQLQuery;
import org.hibernate.Session;
import org.hibernate.Transa
linux shell脚本中切换用户执行命令方法
daizj
linux shell 命令 切换用户
经常在写shell脚本时,会碰到要以另外一个用户来执行相关命令,其方法简单记下:
1、执行单个命令:su - user -c "command"
如:下面命令是以test用户在/data目录下创建test123目录
[root@slave19 /data]# su - test -c "mkdir /data/test123" 
好的代码里只要一个 return 语句
dcj3sjt126com
return
别再这样写了:public boolean foo() { if (true) { return true; } else { return false;
Android动画效果学习
dcj3sjt126com
android
1、透明动画效果
方法一:代码实现
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
View rootView = inflater.inflate(R.layout.fragment_main, container, fals
linux复习笔记之bash shell (4)管道命令
eksliang
linux管道命令汇总 linux管道命令 linux常用管道命令
转载请出自出处:
http://eksliang.iteye.com/blog/2105461
bash命令执行的完毕以后,通常这个命令都会有返回结果,怎么对这个返回的结果做一些操作呢?那就得用管道命令‘|’。
上面那段话,简单说了下管道命令的作用,那什么事管道命令呢?
答:非常的经典的一句话,记住了,何为管
Android系统中自定义按键的短按、双击、长按事件
gqdy365
android
在项目中碰到这样的问题:
由于系统中的按键在底层做了重新定义或者新增了按键,此时需要在APP层对按键事件(keyevent)做分解处理,模拟Android系统做法,把keyevent分解成:
1、单击事件:就是普通key的单击;
2、双击事件:500ms内同一按键单击两次;
3、长按事件:同一按键长按超过1000ms(系统中长按事件为500ms);
4、组合按键:两个以上按键同时按住;
asp.net获取站点根目录下子目录的名称
hvt
.net C# asp.net hovertree Web Forms
使用Visual Studio建立一个.aspx文件(Web Forms),例如hovertree.aspx,在页面上加入一个ListBox代码如下:
<asp:ListBox runat="server" ID="lbKeleyiFolder" />
那么在页面上显示根目录子文件夹的代码如下:
string[] m_sub
Eclipse程序员要掌握的常用快捷键
justjavac
java eclipse 快捷键 ide
判断一个人的编程水平,就看他用键盘多,还是鼠标多。用键盘一是为了输入代码(当然了,也包括注释),再有就是熟练使用快捷键。 曾有人在豆瓣评
《卓有成效的程序员》:“人有多大懒,才有多大闲”。之前我整理了一个
程序员图书列表,目的也就是通过读书,让程序员变懒。 写道 程序员作为特殊的群体,有的人可以这么懒,懒到事情都交给机器去做,而有的人又可
c++编程随记
lx.asymmetric
C++ 笔记
为了字体更好看,改变了格式……
&&运算符:
#include<iostream>
using namespace std;
int main(){
int a=-1,b=4,k;
k=(++a<0)&&!(b--
linux标准IO缓冲机制研究
音频数据
linux
一、什么是缓存I/O(Buffered I/O)缓存I/O又被称作标准I/O,大多数文件系统默认I/O操作都是缓存I/O。在Linux的缓存I/O机制中,操作系统会将I/O的数据缓存在文件系统的页缓存(page cache)中,也就是说,数据会先被拷贝到操作系统内核的缓冲区中,然后才会从操作系统内核的缓冲区拷贝到应用程序的地址空间。1.缓存I/O有以下优点:A.缓存I/O使用了操作系统内核缓冲区,
随想 生活
暗黑小菠萝
生活
其实账户之前就申请了,但是决定要自己更新一些东西看也是最近。从毕业到现在已经一年了。没有进步是假的,但是有多大的进步可能只有我自己知道。
毕业的时候班里12个女生,真正最后做到软件开发的只要两个包括我,PS:我不是说测试不好。当时因为考研完全放弃找工作,考研失败,我想这只是我的借口。那个时候才想到为什么大学的时候不能好好的学习技术,增强自己的实战能力,以至于后来找工作比较费劲。我
我认为POJO是一个错误的概念
windshome
java POJO 编程 J2EE 设计
这篇内容其实没有经过太多的深思熟虑,只是个人一时的感觉。从个人风格上来讲,我倾向简单质朴的设计开发理念;从方法论上,我更加倾向自顶向下的设计;从做事情的目标上来看,我追求质量优先,更愿意使用较为保守和稳妥的理念和方法。
&