HTML超文本标记语言(二)
思维导图 表格表格的主要作用表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理 表格不是用来布局页面的,而是用来展示数据的。【重要】 表格完整代码 代码 1234567891011121314151617181920212223242526272829<table border="1px" width="300px" height="100px" cellpadding="0" cellspacing="0"> <!-- 使用thead标签表示表头,thead中嵌套tr,tr中嵌套th。 --> <!-- th单元格内的数据会加粗居中显示 --> <thead> <tr> <th>编号</th> ...
flex布局
移动web开发——flex布局1.0传统布局和flex布局对比1.1传统布局 兼容性好 布局繁琐 局限性,不能再移动端很好的布局 1.2 flex布局 操作方便,布局极其简单,移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局,还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 flex布局原理 flex 是 flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。 当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。 flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flexitem),简称”项目”。 总结:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式 3 ...
HTML超文本标记语言(一)
思维导图 网页相关概念什么是网页1.网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。 2.网页是网站中的一“页”,通常是 HTML或者HTM 格式的文件,它要通过浏览器来阅读。 网页的组成1.网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以 .htm 或 .html 后缀结尾的文件,因此将其俗称为 HTML 文件。 什么是HTML1.HTML 指的是超文本标记语言 (Hyper Text Markup Language) ,它是用来描述网页的一种语言。2.HTML 不是一种编程语言,而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag) 网页的总结1.网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)2.网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页.3.HTML: 超文本标记语言, 用来制作网页的一门语言. 有标签组成的. 比如 图片标签 链接标签 视频标签等… 浏览器 ...
Docker容器
文章引用 同篇文章引自亮哥博客 : https://haoyongliang.gitee.io/Docker 目标◆ 初识 Docker ◆ Docker 命令 ◆ Docker 容器数据卷 ◆ Dockerfile ◆ Docker 应用部署 ◆ Docker 服务编排 ◆ Docker 私有仓库 ◆ Docker相关概念 1. 初始docker1.1 docker概念我们写的代码会接触到好几个环境:开发环境、测试环境以及生产环境: Docker 是一个开源的应用容器引擎 诞生于 2013 年初,基于 Go 语言实现, dotCloud 公司出品(后改名为Docker Inc) Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的 Linux 机器上 容器是完全使用沙箱机制,相互隔离 容器性能开销极低 Docker 从 17.03 版本之后分为 CE(Community Edition: 社区版) 和 EE(Enterprise Edition: 企业版) 1.2 安装dockerDocker可 ...
CSS层叠样式(四)
思维导图 [一]传统布局和flex布局对比传统布局特点兼容性好 布局繁琐 局限性,不能再移动端很好的布局 flex布局特点操作方便,布局极其简单,移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 建议移动端 或者 PC端不需要兼容低版本浏览器 就可以使用用flex布局 flex布局原理给父盒子设置display:flex;来控制子元素的排列方式 flex布局注意事项使用flex布局就不要使用浮动、vertical-align,这两个样式会失效 flex布局中没有X轴和Y轴的概念 主轴和交叉轴是相对的,可以变换的。主轴方向是横的,交叉轴方向就是竖的。主轴方向是竖的,交叉轴方向就是横的 主轴相关配置注意事项1.主轴侧轴相关配置要写到父盒子中 flex-direction功能和注意事项功能:设置主轴的方向 注意事项:主轴和交叉轴是相对的,可以变换的。主轴是横的,交叉轴就是竖的,主轴是竖的,交叉轴就是横的 取值范围 值 说明 row(默认) 主轴为横轴,子元素横着排列(默认,常用) column 主轴为纵轴,子元素竖着排列 flex ...
CSS层叠样式(三)
本章介绍精灵图、字体图标、CSS三角形、鼠标样式、输入框轮廓、图片和文本居中、溢出文本省略号、PC端CSS初始化样式 思维导图 [一](https://gitee.com/haoyongliang/resources/raw/master/images/前端/css/day07/images/CSS07.png) 精灵图(重点)为什么需要精灵图(https://gitee.com/haoyongliang/resources/raw/master/images/前端/css/day07/images/1571482435259.png) 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。 为什么使用精灵图(目的): 为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧)。 核心原理: 将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。 精灵图举例: (https://g ...
CSS层叠样式(二)
本章介绍圆角边框、盒子和文本阴影、浮动、PS切图 思维导图 [一]圆角边框在 CSS3 中,新增了圆角边框样式border-radius,这样我们的盒子就可以变圆角了。 语法 1border-radius:value; 参数值可以为数值或百分比的形式如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用 案例代码 123456789101112131415161718192021222324<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
CSS层叠样式(一)
本质介绍css基础选择器,引入CSS的三种方式 思维导图 [一] CSS 简介什么是CSSCSS是层叠样式表,用来美化页面,布局页面 CSS书写位置css样式要写在style标签中,style标签写在head标签中。 12345678910111213<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> /* 编写CSS代码 * ...
CentOS7基础套餐搭建
centos7基础套餐搭建ssh默认端口修改服务器默认为22端口,这样会造成有被暴力破解密码的风险,下面是更换ssh端口过程 1.添加ssh端口1vim /etc/ssh/sshd_config 打开配置文件,添加我们需要更改的端口号,此时不要删除默认22端口,让两个端口同时存在,如果我们直接修改了端口,然后启动防火墙之后,就会出现我们没有使用防火墙开放端口,导致我们连接不上服务器,我们暂且保留默认22,如果更改过后,使用新端口号没问题,再删除默认22端口不迟 我们想把端口改为2020,就如图添加上去,保存退出,然后重启ssh服务 1systemctl restart sshd.service 2。配置防火墙规则123456789101112#启动防火墙systemctl start firewalld.service#关闭防火墙systemctl stop firewalld.service#重启防火墙systemctl restart firewalld.service#查看防火墙状态systemctl status firewalld.service#设置开机启动防火墙s ...
Telegram机器人开发
一. Telegram 机器人的申请和设置图文教程Telegram 是一个社交聊天软件。 里面有一个很有特色的功能就是机器人。 机器人是由程序控制 的用户。 我们可以写程序来控制这个机器人。 而且写起来也不难哦。 https://core.telegram.org/bots/api#updating-messages 首先在Telegram 里搜索 @botfather 找到后点进去 第一次和机器人对话会有个开始按钮,点一下 这时候机器人会弹出一些说明, 英文好的小伙伴其实就可以直接跳过本教程了。 现在我们输入 /newbot 这时我们要给机器人起个名字, 我这边就随便起啦, 就叫 我的小机器人 然后你要给机器人一个标识, 这个名字是不能改的, 所以要想好, 只能用英文, 而且必须用 bot 结尾, 我这里就叫他 fenggebot 输入用户名后, 机器人就申请成功了。 如果你只是要一个可以用的机器人, 到这步就够了。 其中的 bot token: 1287833603:AAGmx9hQq6ViT3km0_77z8psBGqUKfdpSHY 是最重要的部分, 不要让人看到, ...