1、WEB基础知识(了解) 1、Internet - 网 由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构 2、基于Internet上的程序 1、C / S 结构 Client / Server 特点:必须通过指定的客户端软件才能访问服务器端的一种程序 :如 :桌面版QQ,... ... 2、B / S 结构 Browser / Server Browser :浏览器 特点:通过 浏览器 就能访问服务器端的一种程序 如 :网页版百度,网页版 QQ,网页版 京东,... ... 3、WEB 1、什么是WEB WEB,是基于Internet上的一种应用程序(网页应用程序) WEB页面,简称WEB页(网页),就是保存在服务器端上的一个具体的页面( **.html / **.htm 作为结尾的文件) 2、WEB浏览器 1、功能 1、提交用户请求 (UA : User Agent) 2、作为HTML 以及 脚本执行的 解释器 3、以图形化的方式显示web页面 2、主要浏览器产品 1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、Apple Safari 5、Opera Opera(欧朋) 3、主要技术 1、HTML 2、CSS 3、Javascript2、HTML入门(重点) 1、什么是HTML Hyper Text Markup Language 超级 文本 标记 语言
超文本 :也是文本,但会具备特殊功能 普通文本 a : 普通字符 a 超文本 a : 表示超链接
普通文本 b : 普通字符 b 超文本 b : 加粗显示文本 标记 :超文本的表现形式 普通文本 a : a 超文本 a : 语言 :具备一定的语法规范 HTML 也具备自己的语法规范
WEB页面(HTML页面)就是由 HTML 语言来进行开发的 ,以 .html 或 .htm 进行结尾的文件
开发 & 运行网页的工具: 1、记事本 2、浏览器 2、HTML 的基础语法 1、标记语法 HTML中用于描述功能的符号称为"标记" 标记在使用时,用尖括号 "<>",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法:<标记>内容标记> Demo : 1、创建 p 标记 --
...
2、创建 div 标记 --
3、创建 header 标记 --
2、非封闭类型的标记
也称为 "单标记"
语法:<标记> 或 <标记/>
Demo :
1、创建 br 标记 --
2、创建 hr 标记 --
3、创建 img 标记 --
4、创建 input 标记 --
2、标记(元素)的嵌套
在一对标记中,允许出现另外一对(一个)标记
<标记1>
<标记2>标记2>
标记1>
注意:嵌套标记的书写格式 -- 被嵌套的标记要通过一个 缩进键(Tab) 来表示层级关系 Demo : 1、编写一对 body 标记,在body标记中,嵌套一对 div标记,在 div 标记中 ,嵌套一对 a 标记,在 a标记中,嵌套一对 b 标记,b标记中,随意编写一些文本
3、标记的属性
1、什么是属性
用来修饰标记的效果的内容,就是属性
2、语法
1、属性必须声明在开始标记中
2、属性与标记名称之间,用 空格 隔开
3、属性的值 与 属性之间 使用 "=" 连接
4、一个元素允许有多属性,多属性间,排名不分先后,中间用 空格 隔开即可
Demo :
1、创建一个 div 标记 ,增加属性 ,设置 align 属性的值为 center ,设置 id 属性的值为 container,设置 title 属性的值为 这是一个div
四大标准属性:
1、id :定义元素在页面中独一无二的名称
2、title :鼠标悬停在元素上时,体现的文字
3、class :引用 类选择器时使用(CSS中)
4、style :定义 内联方式方式使用(CSS中)
4、注释
语法:
注意:
1、注释不能嵌套
2、注释不能出现在标记中
3、HTML 文档结构 W3C :Word Wide Web Consortium (万维网联盟)
1、HTML文档的组成
1、文档类型声明
告知浏览器当前的HTML文档用的是哪个版本
在网页的最顶端
2、由一对 html 根标记,来表示页面的开始与结束
Demo : 1、在 htdoc 中,创建一个网页 01-first.html 文件 创建一个 记事本,将 .txt 重命名为 .html 2、搭建HTML网页结构 1、添加 文档类型声明 2、添加 html 根标记 2、 标记 包含两对子元素 1、
包含的子元素(2对)
1、
网页的标题 2、
-- 能正常显示中文
2、
属性:
1、text ,取值是一个颜色值(red,green,blue...)
2、bgcolor ,取值也是一个颜色值
Demo :
在刚才的 Demo 基础上
1、在 中 增加 和
2、为网页指定标题 - 我的第一个HTML文档
3、指定网页的字符编码格式为 utf-8
4、在 body 中 输出一句话 "我的第一HTML页面"
5、设置 body text为red,bgcolor为yellow
3、文本
1、特殊文本的实现
页面的空格以及一些特殊字符需要通过转义字符的方式体现
1、 表示一个空格
2、< 表示 <
3、> 表示 >
4、© 表示©
Demo : 1、创建一个页面 02-text.html 2、在页面中 输出以下内容 The
element. ©2017 By Tarena
The <p> element. © By Tarena 2、文本样式相关标记 : 加粗 : 斜体 : 下划线 : 删除线 : 上标 : 下标 Demo : 这是一段包含 ,粗体,斜体,下划线,删除线,上标,下标的文本内容
将以上文本内,对应文字的特殊效果,用标记体现出来 3、标题元素 以 醒目 的方式表现出文本 语法:
一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 属性:
1、align
文本的水平对齐方式
取值:left / center / right
4、段落元素 语法:
属性:align : left / center / right
Demo :
1、在 02-text.html 中,增加以下内容
1、用 段落标记表示 :The first paragraph
2、用 段落标记表示 :The second paragraph ,文本表现为 右对齐
5、换行元素
6、分割线元素
作用:在页面中表现为一条直线
语法:
属性:
1、size
尺寸,以 px 为单位的数值
2、width
宽度,以 px 或 % 为单位的数值
3、align
水平对其方式
4、color
颜色
Demo :
02-text.html 中
增加一根水平线,size为5px,宽度为50%,居中对齐,颜色为红色(red)
7、预格式化
作用:保留源文档中的回车 和 空格 的作用
8、分区元素
1、块分区元素
语法:
作用:布局
2、行内分区元素
语法:
作用:设置同一行文字内的不同样式
9、行内元素 与 块级元素
按照元素们的表现形式来分类,分为 行内元素 和 块级元素1、行内元素
在一行内允许显示多个元素的,称为 "行内元素"
span,i,b,s,u,sup,sub
作用:包裹文本,并处理文本的表现形式
2、块级元素
每个元素独占一行显示的,称为 "块级元素"
div,p,h1,h2,h3,h4,h5,h6
作用:布局
注意:
1、p标记不能嵌套其它的块级元素
2、行内元素中 最好 不要嵌套块级元素
4、图像 和 链接 1、URL 目录结构 :
目录 ,保存文件的文件夹名称
多个文件夹之间的关系,就是目录结构
1、什么是 URL
URL (Uniform Resource Locator),统一资源定位器。用来标识某资源文件的位置
2、URL 在 WEB 中的表现形式
共三种表现形式:
1、绝对路径
特点:从文件所在的最高级目录处开始查找资源文件所经过的路径,就是绝对路径
使用场合:当想访问互联网上的资源时,只能用绝对路径
完整的绝对路径分四部分:
1、协议名
http
2、域名(主机名,IP地址)
www.codeboy.com
3、目录路径
img/header
4、文件名
logo.png
http://www.codeboy.com/img/header/logo.png
img/header/logo.png 2、相对路径(重点) 场合:使用本机文件时使用 什么是相对路径: 从当前文件位置处开始查找资源文件所经过的路径,就是相对路径 1、同目录,直接用 2、子目录,先进入 3、父目录,先返回 3、根相对路径 路径形式是以 / 作为开始的。 / : 表示的是服务器的根路径 2、图像 1、图像格式 WEB中支持的图像格式 1、*.jpg 2、*.gif(动图) 3、*.png(透明) 2、图像的语法 标记: 属性: 1、src :指定要显示图像的 URL 2、width :图像的宽度 3、height :图像的高度 4、title :鼠标悬停时,要显示的文本 Demo : 1、将 学子网的 logo 下载下来 2、显示在自己的网页中 3、超链接 1、语法 标记:内容 属性: 1、href : 要链接的HTML页面URL 2、target : 目标,指定新网页的打开形式 取值: 1、_blank : 在新标签页中打开网页 2、_self : 在自身标签页中打开新网页(默认值) Demo 1、创建一个超链接,内容为 :学子商城,点击时,在自身标签页中 打开 http://www.codeboy.com 2、创建一个超链接,内容为 :学子商城的LOGO,点击时,在新标签页中打开 http://www.codeboy.com 2、链接的四种表现形式 1、点击操作时,完成资源下载的操作 链接的资源为 zip / rar 时则为下载操作 下载 2、电子邮件链接 联系我们 前提 : 必须在计算机中安装并配置好至少一个邮件客户端的信息 3、返回页面顶部的空连接 返回顶部 4、执行Javascript代码片段 执行JS 3、锚点 1、作用 锚点用于在网页中的某个位置处做个记号,允许从其他位置处跳转到记号位置处 2、使用方式 1、定义锚点 1、使用 a 标记的 name 属性允许定义锚点 xxxx 2、任何标记的 id 属性定义锚点 2、链接到锚点 链接到锚点 链接到锚点 5、表格
1、表格的作用 按照一定的格式来显示数据的 表格是由 单元格(列),行 来组成的 2、表格的语法 1、标记 1、
: 表示一个表格
2、
: 表示表格中的一行
3、
: 表行中的一列(单元格)
: 行/列 标题 (加粗,水平居中)
4、
: 表格的标题
该元素必须添加在
之下,所有的tr之上 2、常用属性 1、table 1、width 2、height 3、align 设置表格的对齐方式 , left / center / right 4、border 边框宽度,取值以 px 为单位的数值 5、bgcolor 6、cellspacing :单元格外边距(单元格与单元格 或 单元格与表格之间的距离) 7、cellpadding : 单元格内边距(单元格与内容之间的距离) 2、tr 1、align 控制当前行内容的水平对齐方式 2、valign 控制当前行内容的垂直对齐方式 top / middle / bottom 3、bgcolor 3、td / th 1、align 2、valign 3、width 4、height 5、colspan :跨列 6、rowspan :跨行 Demo : 在 刚才的表格基础上,增加以下内容 1、为表格增加边框 1px 2、为表格增加尺寸 400 * 400 3、为表格增加单元格内边距 5px 4、为第四行 增加属性 ,内容水平居中对齐 3、表格的复杂应用 1、行分组 允许将若干行划分到一个组中,以便实现统一管理 1、表头行分组 允许将第一行的内容单独分到表头行分组中 2、表尾行分组 允许将最后一行的内容单独分到表尾行分组中 3、表主体行分组 2、不规则表格创建 通过 td 的跨行 和 跨列来实现不规则的表格 1、跨列 从指定单元格位置处开始,横向向右,合并掉几个单元格(包含自己),被合并掉的单元格,要删除 2、跨行 从指定单元格位置处开始,纵向向下,合并掉几个单元格(包含自己),被合并掉的单元格,要删除 3、表格的嵌套 被嵌套的所有的内容,只能放在 td 中2、列表 1、作用 按照一定的格式显示数据 2、列表的分类 & 语法 1、列表的组成 由列表类型 以及 列表项 来组成 2、分类 & 语法 1、有序列表 --> Order List 允许包含若干列表项: --> List Item 2、无序列表 --> Unorder List 允许包含若干列表项: 3、属性 1、ol 1、type 1 、按数字方式排列,默认值 a 、按小写英文方式排列 A 、按大写英文方式排列 i 、按小写罗马数字排列 I 、按大写罗马数字排列 2、start 指定标识从 几 开始显示 2、ul 1、type 1、disc,实心圆,默认值 2、circle,空心圆 3、square,实心矩形 4、none 3、列表的嵌套 被嵌套的内容只能放在 li 中 Demo : 1、声明一个列表在 html 中(有序),包含两个列表项,显示 两部小说的名字 2、在两个列表项中,再各嵌套一个无序列表,各写3-4个小说中的主角 3、定义列表 1、作用 以一种特殊的结构来排列数据 通常用语对一类事物/名词 的解释上面 2、语法 :声明一个定义列表 :声明要解释的事物名称 或 名词 :对上述名词或事物解释的内容 3、常用场合 图文混排3、结构标记 1、结构标记的作用 搭建网页的结构(布局),用于替代 div,最大的优点是提升了标记的"语义性" 2、结构标记详解 1、 作用:表示网页 或 某块内容的头部 2、 作用:表示网页中的 导航内容 3、 作用:表示网页主体内容中的某一部分 4、 作用:出现在文字描述性比较强的场合:一则新闻,论坛中的帖子,微博信息,博客的信息 5、 作用:表示网页中,或某部分内容的 边栏信息 6、 作用:表示网页中尾部的信息4、表单(难点) 1、表单的作用 用于收集用户的信息并提交给服务器 表单主体是由两部分组成的 1、表单元素 收集信息,并提交给服务器 2、表单控件 用于与用户交互的一些元素:文本框,密码框 2、表单元素(难点) 标记: 注意:只有放在 里面的表单控件的值,才能提交给服务器 属性: 1、action 提交给服务器处理程序的地址 (动作) 2、method 提交方式,以什么样的方式把数据交给服务器 1、get 特点: 1、以明文的方式将数据传递给服务器(提交的数据会显示在地址栏上) 2、安全性很低 3、提交数据最大限制为 2KB 4、向服务器要数据时可以使用 2、post 特点: 1、以隐式的方式将数据传递给服务器 2、安全性很高 3、不限制提交数据的大小 4、要提交数据给服务器处理时使用 3、... ... 3、enctype 作用:指定表单数据进行编码的方式 取值: 1、application/x-www-form-urlencoded 默认值,允许将任意类型的文本提交给服务器 2、multipart/form-data 允许将文件提交给服务器 3、text/plain 不对任何数据进行编码和传输 Demo : 1、创建 05-form.html 2、声明一个表单元素 form 3、指定提交地址为 login.php,提交方式为 get,编码方式为默认 3、表单控件 表单元素分类: 1、input元素 2、textarea 多行文本域 3、select 和 option 选项框 4、其它元素 5、新input元素 详解 : 1、input元素 里面会包含若干个不同的表单控件 标记 : 属性 : 1、type 根据不同的type属性值,可以创建不同的input元素 2、name 定义表单控件的名称,主要提交给服务器使用的 注意:如果不声明name属性的话,元素则无法提交给服务器 3、value 定义当前控件的值,主要提交给服务器使用的 4、disabled 禁用控件,无值的属性
2、文本框 与 密码框 文本框: 密码框:
具备除以上四个属性外,还具备以下几个独立属性: 1、maxlength 限制输入的字符数,取值为数字 2、readonly 只读,无值属性 Q : readonly 和 disabled 的区别 1、readonly ,是只读的意思,是允许提交给服务器,不让用户改数据而已 2、disabled , 是禁用的意思,不仅不让用户改数据,而且还不能提交给服务器 3、placeholder 占位符,即默认显示在文本框用于给用户提示的文字 3、按钮 1、提交按钮 作用:将表单提交给服务器 标记: 2、重置按钮 作用:将表单恢复到初始化的状态 标记: 3、普通按钮 作用:通过 JS 自定义功能 标记: 4、显示的内容 属性: 1、type :submit / reset / button 4、单选按钮 和 复选框 单选按钮: 复选框:
属性: 1、name 设置名称,并用于分组,一组单选按钮 或 复选框的名称必须相同 2、value 必须设置 3、checked 默认被选中,无值属性 5、隐藏域 和 文件选择框 1、隐藏域 想提交给服务器,但不想给用户看的数据,可以放在隐藏域中 2、文件选择框 注意: 1、form的 method 属性值必须为 post 2、form的 enctype属性值必须为 multipart/form-data
3、textarea 控件 标记: 属性: 1、name 定义名称,提交给服务器使用 2、cols 指定文本域的列数,变相指定宽 3、rows 指定文本域的行数,变相指定高 4、readonly 只读 Demo : 创建 01-form.html 文件 创建一个 多行文本域,列数为 50,行数为 5,名称为 intro 4、选项框 1、标记 表示 下拉列表 或 滚动列表 列表中的内容,允许出现多个 2、属性 1、 1、name :控件的名称 2、size :默认显示选项的数量,默认为1,为下拉列表,如果取值>1的话,则为滚动列表 3、multiple 设置多选,无值的属性 2、 1、value :选项的值,提交给服务器用 2、selected :默认被选中 5、其它标记 1、label 元素 作用:关联文本与表单控件的,点击文本时就如同点击表单控件一样 标记:文本 属性: 1、for 指定要关联的表单控件的ID值 2、为控件分组 分组标题
分组中的内容 3、浮动框架 1、作用 将其他页面导入到当前页面中来 2、语法 标记: 属性: 1、src 要引入的页面的url 2、frameborder 指定浮动框架的边框,默认为1,则显示边框 不需要边框则设置为 0 3、width 4、height 练习: 创建一个 02-iframe 的网页,将 01-form.html 页面引入进来 ,适当调整宽度,高度,边框 6、新input元素 (HTML5) 1、电子邮件类型 作用:提交时会验证数据是否符合Email的规范 标记: 2、搜索类型 作用:在文本框的基础上,提供了快速清除操作 标记: 3、URL类型 作用:提交时会验证数据是否符合Web站点的URL规范(绝对路径) 标记: 4、电话号码类型 作用:在移动端设备中,能展开 拨号键盘,在PC中无效 标记: 5、数字类型 作用:只能让用户输入 或 选择数字 标记: 属性: 1、min :当前控件接受的最小值 2、max :当前控件接受的最大值 3、step :微调数字时每次变化的长度,默认为1 6、范围类型 作用:提供一个滑块,让用户选择数字 标记: 属性: 1、min :当前控件的最小值 2、max :当前控件的最大值 3、value :设定初始值 7、颜色类型 作用:提供一个颜色拾取控件 语法: 8、日期类型 作用:提供一个日期输入控件 标记: 9、周类型 作用:提供一个日期控件,用于选取周 标记: 10、月份类型 作用:选取月份控件 标记:
你可能感兴趣的:(HTML,HTML)
图片粘贴上传实现
SarinaDu
javascript html5
图片上传htmldemo直接粘贴本地运行查看效果即可,有看不懂的直接喂给deepseek会解释的很清晰粘贴图片上传示例-使用场景,粘贴桌面图片上传、粘贴word文档中图片上传、直接截图上传等body{font-family:Arial,sans-serif;padding:20px;}.upload-area{width:100%;height:200px;border:2pxdashed#ccc
详细介绍:封装简易的 Axios 函数获取省份列表
还是鼠鼠
javascript vscode ajax 前端 前端框架
目录关键步骤:完整代码(html):代码解析:程序运行结果:本示例展示了如何通过封装一个简易的myAxios函数来模拟axios的功能,使用原生的XMLHttpRequest(XHR)对象来发起HTTP请求。我们将实现一个简单的功能,通过该封装函数从服务器获取省份列表数据,并在网页上显示这些省份。关键步骤:封装myAxios函数:myAxios函数接收一个配置对象(如请求的URL和方法),并返回一
Android arcgis加载在线底图
Angie洛林
android arcgis
我整理的一些关于【信息系统】的项目学习资料(附讲解~~)和大家一起分享、学习一下:https://edu.51cto.com/mic-position/757.html在Android中使用ArcGIS加载在线底图ArcGIS是Esri提供的一套强大的地理信息系统(GIS)解决方案,支持多种平台,包括Android。本文将介绍如何在Android应用中使用ArcGIS加载在线底图,并配有相关代码示
CSS中五种定位方式(position)对比分析
七公子77
css css 前端
在CSS中,定位方式(position)决定了元素如何相对于其参照物进行定位,同时影响文档流的布局。以下是五种定位方式的对比、参照物说明及代码示例:1.position:static(默认定位)参照物:无,元素位于默认文档流中。文档流:元素按照HTML顺序自然排列。特点:top、right、bottom、left和z-index属性无效。示例:Box1Box2.box{width:100px;he
【vue】Mammoth.js的使用:将.docx转换成HTML
暴富暴富暴富啦啦啦
1024程序员节
mammoth.convertToHtml(input,options):把源文档转换为HTML文档mammoth.convertToMarkdown(input,options):把源文档转换为Markdown文档。mammoth.extractRawText(input):提取文档的原始文本。这将忽略文档中的所有格式。每个段落后跟两个换行符。npminstallelement-uimammot
单细胞轨迹分析-monocle包的使用
探序基因
r语言
探序基因肿瘤研究院整理安装:monocle源码下载:https://www.bioconductor.org/packages/release/bioc/html/monocle.htmlR版本,4.2.0BiocManager::install("monocle")不过在安装过程中还是报错了:Warning:无法在https://bioconductor.org/packages/3.15/bi
前端导出word文件—包含canvas(echarts图表)
Liuer_Qin
js canvas echarts echarts 前端 javascript
一、使用的插件html-docx-js二、整体思路因为canvas是运行在内存中的,所以不能简单的通过dom获取canvas图片,需要手动的先将canvas转为image。三、实现先克隆要下载的DOM的副本。因为canvas是运行在内存中的,所以也不能通过cloneNode方法克隆下来(克隆下来是空的)。我们这里将原DOM中的canvas转成图片,然后插入到副本的对应位置,这样操作不会影响原DOM
动态蛇形卷积(DySnakeConv)在YOLOv8检测头中的应用与优化-分割性能的提升【YOLOv8】
步入烟尘
YOLO 动态蛇形卷积 DySnakeConv
本专栏专为AI视觉领域的爱好者和从业者打造。涵盖分类、检测、分割、追踪等多项技术,带你从入门到精通!后续更有实战项目,助你轻松应对面试挑战!立即订阅,开启你的YOLOv8之旅!专栏订阅地址:https://blog.csdn.net/mrdeam/category_12804295.html文章目录动态蛇形卷积(DySnakeConv)在YOLOv8检测头中的应用与优化-分割性能的提升【YOLOv
微信支付-扫码支付全流程
自娱自乐22
thinkphp php 微信扫码支付
微信支付官方文档:`https://pay.weixin.qq.com/wiki/doc/api/index.html`微信支付分为2种模式:【模式一】:商户后台系统根据微信支付规则链接生成二维码,链接中带固定参数productid(可定义为产品标识或订单号)。用户扫码后,微信支付系统将productid和用户唯一标识(openid)回调商户后台系统(需要设置支付回调URL),商户后台系统根据pr
mac+php5.3的docker-compose.yml分享
自娱自乐22
docker
version:'3'services:nginx:image:nginx:latestcontainer_name:nginx-composevolumes:-./wwwroot:/usr/share/nginx/html:rw-./nginx/nginx/:/etc/nginx/:rw-./log/nginx:/var/log/nginx:rwrestart:alwayslinks:-phpp
Python+Playwright常用元素定位方法
HAMYHF
python 功能测试
CSSselector选择器在CSS中,定位元素主要通过选择器完成,以下是几种常见的CSS选择器定位方法:标签选择器(element):直接使用HTML元素名称来定位,例如p会选择所有段落元素。属性选择器(attribute):选择所有具有指定属性的元素,无论该属性的值是什么。例如,[title]会选择所有包含title属性的元素。选择具有指定属性,并且该属性值完全等于给定值的元素。例如,[typ
JavaScript网页设计案例:打造交互式个人简历网站
程序媛小果
前端 javascript 开发语言 ecmascript
在当今数字化时代,个人简历不再局限于纸质文档,而是越来越多地以网页形式呈现。JavaScript作为一种强大的客户端脚本语言,为网页设计提供了无限可能,使得网页不仅仅是静态的信息展示,而是具有丰富交互性的平台。本文将通过一个案例,展示如何使用HTML、CSS和JavaScript来设计一个交互式的个人简历网站。1.项目概述本案例的目标是创建一个个人简历网站,它不仅展示个人信息、工作经历、教育背景和
2025年全国CTF夺旗赛-从零基础入门到竞赛,看这一篇就稳了!
白帽安全-黑客4148
安全 web安全 网络 网络安全 CTF
目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js(2-3天)2、apache+php(4-5天)3、mysql(2-3天)4、python(2-3天)5、burpsuite(1-2天)4.2、中期1、SQL注入(7-8天)2、文件上传(7-8天)3、其他漏洞(14-15天)4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.
2025年全国CTF夺旗赛-从零基础入门到竞赛,看这一篇就稳了!
白帽安全-黑客4148
网络安全 web安全 linux 密码学 CTF
目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js(2-3天)2、apache+php(4-5天)3、mysql(2-3天)4、python(2-3天)5、burpsuite(1-2天)4.2、中期1、SQL注入(7-8天)2、文件上传(7-8天)3、其他漏洞(14-15天)4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.
dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)
weixin_39979245
dreamweaver html语言
Dreamweaver网页设计与制作(HTML+CSS+JavaScript)编辑锁定讨论上传视频本词条缺少信息栏,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧!《Dreamweaver网页设计与制作(HTML+CSS+JavaScript)》是2014年清华大学出版社出版的图书。Dreamweaver网页设计与制作(HTML+CSS+JavaScript)图书详细信息编辑ISBN:978
html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作
律保阁-Michael
html 5中css的含义
HTML5+CSS+JavaScript网页设计与制作编辑锁定讨论上传视频《HTML5+CSS+JavaScript网页设计与制作》是2019年4月清华大学出版社出版的图书,作者是彭进香、张茂红、王玉娟、叶娟、孙秀娟、万幸、刘英。书名HTML5+CSS+JavaScript网页设计与制作作者彭进香张茂红王玉娟叶娟作者孙秀娟展开作者孙秀娟万幸刘英收起出版社清华大学出版社出版时间2019年4月定价48
html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准
vvv666s
②学会运用HTML语言中的标记设置颜色、文本格式和列表;熟练掌握颜色值的配置和背景图案的设置方法,熟练掌握字符、链接颜色的设置方法;③掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法;④熟练掌握表格的使用方法,学会利用表格设布局网页;掌握框架制作网页的方法,会使用框架设计网页;掌握制作表单的方法,会利用表单建立交互式页面;⑤掌握JavaScript语言的语法;⑥掌握在HTML语言代码中嵌入
EDA事件驱动架构 领域事件 Event Sourcing
talentluke
架构设计
摘自http://www.jdon.com/eda.htmlEDA(Event-drivenarchitecture)是以事件为核心,与SOA以服务为核心有本质区别,是状态模式的延伸到架构上,事件是触发状态变化的根源,事件是介于业务和技术两者之间的概念,用户界面是事件主要发生来源,事件也可以来源其他系统或模块,通过事件可以实现系统或组件之间松耦合。EDA可以实现SOA服务之间的调用,事件也可以用于
前端开发入门指南:HTML、CSS和JavaScript基础知识
方向感超强的
javascript css html 前端
引言:大家好,我是一名简单的前端开发爱好者,对于网页设计和用户体验的追求让我深深着迷。在本篇文章中,我将带领大家探索前端开发的基础知识,涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣,或者想要了解如何开始学习前端开发,那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前,让我们先了解一下前端开发的定义和作用。简而言之,前端开发涉及构建用户直接与
【2025年】全国CTF夺旗赛-从零基础入门到竞赛,看这一篇就稳了!
网安詹姆斯
web安全 CTF 网络安全大赛 python linux
【2025年】全国CTF夺旗赛-从零基础入门到竞赛,看这一篇就稳了!基于入门网络安全/黑客打造的:黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js(2-3天)2、apache+php(4-5天)3、mysql(2-3天)4、python(2-3天)5、burpsuite(1-2天)4.2、中期1、S
前端基础入门:HTML、CSS 和 JavaScript
阿绵
前端 前端 html css js
在现代网页开发中,前端技术扮演着至关重要的角色。无论是个人网站、企业官网,还是复杂的Web应用程序,前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML(HyperTextMarkupLanguage)是构建网页的基础语言。它是网页的结构和内容的标记语言,决定了网页上的文本、图像、表单等元
网页制作03-html,css,javascript初认识のhtml的图像设置
Ama_tor
网页制作专栏 html css 前端
一、图像格式网页中图像的格式有三种,Gif,Jpeg,PngGif:Graphicinterchangeformat图像交换格式,文件最多可使用256种颜色,最适合显示色调不连续或具有大面积单一颜色的图像,例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像;还可以制作动态图像Jpeg:Giantphotographicexpectgroup,它是一种图像压缩格式,可包含数百万种颜色,不支持
MXTU MAX 苹果cmsv10模板 仿毒舌自适应主题/短视X体验版完全开源
希希分享
软希网58soho_cn 源码资源 仿毒舌自适应主题/
基于MxonePro二开的主题,全开源未加密。MXTUMAX仿毒舌苹果CMS影视自适应主题主题说明:1、将mxtheme目录放置根目录|将mxpro目录放置template文件夹中2、苹果cms后台-系统-网站参数配置-网站模板-选择mxpro模板目录填写html3、网站模板选择好之后一定要先访问前台,然后再进入后台设置4、主题后台地址:MXTUMAX图图主题,/admin.php/admin/m
使用Python获取在线股票交易网站的实时交易数据
嵌入式开发项目
2025年爬虫精通专栏 python 开发语言 爬虫
目录步骤1:选择股票交易网站步骤2:使用requests库发送HTTP请求步骤3:解析HTML内容步骤4:提取实时交易数据步骤5:存储和使用数据在金融市场中,实时交易数据对于投资者来说具有重要的价值。实时的股票价格、交易量和其他市场指标可以帮助投资者做出更准确的决策,同时也是进行金融分析和建模的重要数据源。在本篇博客中,我们将学习如何使用Python获取在线股票交易网站的实时交易数据。在开始之前,
【FastAPI 】FastAPI 模板:提供静态文件
iFakeCoder
Flask fastapi python 开发语言
FastAPI是一个现代、快速(高性能)的Web框架,用于基于标准Python类型提示使用Python3.7+构建API。虽然它的主要用例是构建API,但FastAPI还可以轻松提供静态文件和HTML模板,从而让您可以构建全栈Web应用程序。在此博客中,我们将探讨如何使用FastAPI提供静态文件。我们将介绍基础知识并提供演示以帮助您入门。为什么要提供静态文件?静态文件是不经常更改的资产,并按原样
vue制作导航栏html,Vue实现导航栏菜单
DataQueen
vue制作导航栏html
本文实例为大家分享了Vue实现导航栏菜单的具体代码,供大家参考,具体内容如下这里是刚学习vue的时候,没有用vue的任何UI组件库写的导航栏菜单。menu.html导航栏左项目名称您好,用户!v-bind:class="{checked:index==nowIndex}"v-on:click="setTab('menu',index,menus)">{{menu.text}}菜单一的内容菜单二的内
css给网页添加 黑白滤镜
nqxcwl
前端 css 给网页添加黑白滤镜
/*给网页添加黑白滤镜*/html{/*兼容FF*/filter:url("data:image/svgxml;utf8,#grayscale");/*兼容IE内核*/filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/*兼容其它,谷歌之类的*/-webkit-filter:grayscale(1);}
Java Pjsip (Pjsua2 api ) 2.10 windows sip语音呼叫教程
java_lilin
pjsip pjsip sip pjsua2 java sip
1.安装swigwin-4.0.1下载地址http://www.swig.org/download.html注意是swigwinWindowsusersshoulddownloadswigwin-4.0.1whichincludesaprebuiltexecutable.配置目录到winpath2.下载pjproject-2.10.zip(如果有python错误请安装py2.7及环境path配置)
前端面试题(HTML篇)
每天一点点~
html css javascript
1.网络中使用最多的图片格式有哪些?JPEG,GIF,PNG最流行的是JPEG格式,可以把文件压缩到最小在PS以JPEG格式存储时,提供11级压缩等级2.Doctype作用?严格模式与混杂模式如何区分?它们有何意义?声明文档类型声明位于位于HTML文档中的第一行,处于标签之前DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式(严格模式)浏览器按照W3C的标准解析执行代码标准模式(严
个人简历html网页模板,科技感炫酷html简历模板
孤客网络科技工作室
html+css网页开发 html 科技 前端
炫酷动效登录页引言在网页设计中,按钮是用户交互的重要元素之一。这样一款黑色个人简历html网页模板,科技感炫酷html简历模板,设计效果类似科技看板图,可帮您展示技能、任职经历、作品等,喜欢这种风格的小伙伴不要犹豫哦。该素材呈现了数据符号排版显示出人形的动画效果,新颖有创意,希望大家能够喜欢。效果预览在开始之前,我们先来看一下最终的效果:实现步骤1.index.html(部分代码)首先,我们需要创
java数字签名三种方式
知了ing
java jdk
以下3钟数字签名都是基于jdk7的
1,RSA
String password="test";
// 1.初始化密钥
KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("RSA");
keyPairGenerator.initialize(51
Hibernate学习笔记
caoyong
Hibernate
1>、Hibernate是数据访问层框架,是一个ORM(Object Relation Mapping)框架,作者为:Gavin King
2>、搭建Hibernate的开发环境
a>、添加jar包:
aa>、hibernatte开发包中/lib/required/所
设计模式之装饰器模式Decorator(结构型)
漂泊一剑客
Decorator
1. 概述
若你从事过面向对象开发,实现给一个类或对象增加行为,使用继承机制,这是所有面向对象语言的一个基本特性。如果已经存在的一个类缺少某些方法,或者须要给方法添加更多的功能(魅力),你也许会仅仅继承这个类来产生一个新类—这建立在额外的代码上。
读取磁盘文件txt,并输入String
一炮送你回车库
String
public static void main(String[] args) throws IOException {
String fileContent = readFileContent("d:/aaa.txt");
System.out.println(fileContent);
js三级联动下拉框
3213213333332132
三级联动
//三级联动
省/直辖市<select id="province"></select>
市/省直辖<select id="city"></select>
县/区 <select id="area"></select>
erlang之parse_transform编译选项的应用
616050468
parse_transform 游戏服务器 属性同步 abstract_code
最近使用erlang重构了游戏服务器的所有代码,之前看过C++/lua写的服务器引擎代码,引擎实现了玩家属性自动同步给前端和增量更新玩家数据到数据库的功能,这也是现在很多游戏服务器的优化方向,在引擎层面去解决数据同步和数据持久化,数据发生变化了业务层不需要关心怎么去同步给前端。由于游戏过程中玩家每个业务中玩家数据更改的量其实是很少
JAVA JSON的解析
darkranger
java
// {
// “Total”:“条数”,
// Code: 1,
//
// “PaymentItems”:[
// {
// “PaymentItemID”:”支款单ID”,
// “PaymentCode”:”支款单编号”,
// “PaymentTime”:”支款日期”,
// ”ContractNo”:”合同号”,
//
POJ-1273-Drainage Ditches
aijuans
ACM_POJ
POJ-1273-Drainage Ditches
http://poj.org/problem?id=1273
基本的最大流,按LRJ的白书写的
#include<iostream>
#include<cstring>
#include<queue>
using namespace std;
#define INF 0x7fffffff
int ma
工作流Activiti5表的命名及含义
atongyeye
工作流 Activiti
activiti5 - http://activiti.org/designer/update在线插件安装
activiti5一共23张表
Activiti的表都以ACT_开头。 第二部分是表示表的用途的两个字母标识。 用途也和服务的API对应。
ACT_RE_*: 'RE'表示repository。 这个前缀的表包含了流程定义和流程静态资源 (图片,规则,等等)。
A
android的广播机制和广播的简单使用
百合不是茶
android 广播机制 广播的注册
Android广播机制简介 在Android中,有一些操作完成以后,会发送广播,比如说发出一条短信,或打出一个电话,如果某个程序接收了这个广播,就会做相应的处理。这个广播跟我们传统意义中的电台广播有些相似之处。之所以叫做广播,就是因为它只负责“说”而不管你“听不听”,也就是不管你接收方如何处理。另外,广播可以被不只一个应用程序所接收,当然也可能不被任何应
Spring事务传播行为详解
bijian1013
java spring 事务传播行为
在service类前加上@Transactional,声明这个service所有方法需要事务管理。每一个业务方法开始时都会打开一个事务。
Spring默认情况下会对运行期例外(RunTimeException)进行事务回滚。这
eidtplus operate
征客丶
eidtplus
开启列模式: Alt+C 鼠标选择 OR Alt+鼠标左键拖动
列模式替换或复制内容(多行):
右键-->格式-->填充所选内容-->选择相应操作
OR
Ctrl+Shift+V(复制多行数据,必须行数一致)
-------------------------------------------------------
【Kafka一】Kafka入门
bit1129
kafka
这篇文章来自Spark集成Kafka(http://bit1129.iteye.com/blog/2174765),这里把它单独取出来,作为Kafka的入门吧
下载Kafka
http://mirror.bit.edu.cn/apache/kafka/0.8.1.1/kafka_2.10-0.8.1.1.tgz
2.10表示Scala的版本,而0.8.1.1表示Kafka
Spring 事务实现机制
BlueSkator
spring 代理 事务
Spring是以代理的方式实现对事务的管理。我们在Action中所使用的Service对象,其实是代理对象的实例,并不是我们所写的Service对象实例。既然是两个不同的对象,那为什么我们在Action中可以象使用Service对象一样的使用代理对象呢?为了说明问题,假设有个Service类叫AService,它的Spring事务代理类为AProxyService,AService实现了一个接口
bootstrap源码学习与示例:bootstrap-dropdown(转帖)
BreakingBad
bootstrap dropdown
bootstrap-dropdown组件是个烂东西,我读后的整体感觉。
一个下拉开菜单的设计:
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
读《研磨设计模式》-代码笔记-中介者模式-Mediator
bylijinnan
java 设计模式
声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
/*
* 中介者模式(Mediator):用一个中介对象来封装一系列的对象交互。
* 中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互。
*
* 在我看来,Mediator模式是把多个对象(
常用代码记录
chenjunt3
UI Excel J#
1、单据设置某行或某字段不能修改
//i是行号,"cash"是字段名称
getBillCardPanelWrapper().getBillCardPanel().getBillModel().setCellEditable(i, "cash", false);
//取得单据表体所有项用以上语句做循环就能设置整行了
getBillC
搜索引擎与工作流引擎
comsci
算法 工作 搜索引擎 网络应用
最近在公司做和搜索有关的工作,(只是简单的应用开源工具集成到自己的产品中)工作流系统的进一步设计暂时放在一边了,偶然看到谷歌的研究员吴军写的数学之美系列中的搜索引擎与图论这篇文章中的介绍,我发现这样一个关系(仅仅是猜想)
-----搜索引擎和流程引擎的基础--都是图论,至少像在我在JWFD中引擎算法中用到的是自定义的广度优先
oracle Health Monitor
daizj
oracle Health Monitor
About Health Monitor
Beginning with Release 11g, Oracle Database includes a framework called Health Monitor for running diagnostic checks on the database.
About Health Monitor Checks
Health M
JSON字符串转换为对象
dieslrae
java json
作为前言,首先是要吐槽一下公司的脑残编译部署方式,web和core分开部署本来没什么问题,但是这丫居然不把json的包作为基础包而作为web的包,导致了core端不能使用,而且我们的core是可以当web来用的(不要在意这些细节),所以在core中处理json串就是个问题.没办法,跟编译那帮人也扯不清楚,只有自己写json的解析了.
C语言学习八结构体,综合应用,学生管理系统
dcj3sjt126com
C语言
实现功能的代码:
# include <stdio.h>
# include <malloc.h>
struct Student
{
int age;
float score;
char name[100];
};
int main(void)
{
int len;
struct Student * pArr;
int i,
vagrant学习笔记
dcj3sjt126com
vagrant
想了解多主机是如何定义和使用的, 所以又学习了一遍vagrant
1. vagrant virtualbox 下载安装
https://www.vagrantup.com/downloads.html
https://www.virtualbox.org/wiki/Downloads
查看安装在命令行输入vagrant
2.
14.性能优化-优化-软件配置优化
frank1234
软件配置 性能优化
1.Tomcat线程池
修改tomcat的server.xml文件:
<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" maxThreads="1200" m
一个不错的shell 脚本教程 入门级
HarborChung
linux shell
一个不错的shell 脚本教程 入门级
建立一个脚本 Linux中有好多中不同的shell,但是通常我们使用bash (bourne again shell) 进行shell编程,因为bash是免费的并且很容易使用。所以在本文中笔者所提供的脚本都是使用bash(但是在大多数情况下,这些脚本同样可以在 bash的大姐,bourne shell中运行)。 如同其他语言一样
Spring4新特性——核心容器的其他改进
jinnianshilongnian
spring 动态代理 spring4 依赖注入
Spring4新特性——泛型限定式依赖注入
Spring4新特性——核心容器的其他改进
Spring4新特性——Web开发的增强
Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC
Spring4新特性——Groovy Bean定义DSL
Spring4新特性——更好的Java泛型操作API
Spring4新
Linux设置tomcat开机启动
liuxingguome
tomcat linux 开机自启动
执行命令sudo gedit /etc/init.d/tomcat6
然后把以下英文部分复制过去。(注意第一句#!/bin/sh如果不写,就不是一个shell文件。然后将对应的jdk和tomcat换成你自己的目录就行了。
#!/bin/bash
#
# /etc/rc.d/init.d/tomcat
# init script for tomcat precesses
第13章 Ajax进阶(下)
onestopweb
Ajax
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/
Troubleshooting Crystal Reports off BW
blueoxygen
BO
http://wiki.sdn.sap.com/wiki/display/BOBJ/Troubleshooting+Crystal+Reports+off+BW#TroubleshootingCrystalReportsoffBW-TracingBOE
Quite useful, especially this part:
SAP BW connectivity
For t
Java开发熟手该当心的11个错误
tomcat_oracle
java jvm 多线程 单元测试
#1、不在属性文件或XML文件中外化配置属性。比如,没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中,还是UAT(用户验收
测试)环境中,都可以顺畅无阻地运行,但是一旦部署在PROD 上,把它作为多线程程序处理更大的数据集时,就会抛出IOException,原因可能是JDBC驱动版本不同,也可能是#2中讨论的问题。如果线程数目 可以在属性文件中配置,那么使它成为
正则表达式大全
yang852220741
html 编程 正则表达式
今天向大家分享正则表达式大全,它可以大提高你的工作效率
正则表达式也可以被当作是一门语言,当你学习一门新的编程语言的时候,他们是一个小的子语言。初看时觉得它没有任何的意义,但是很多时候,你不得不阅读一些教程,或文章来理解这些简单的描述模式。
一、校验数字的表达式
数字:^[0-9]*$
n位的数字:^\d{n}$
至少n位的数字:^\d{n,}$
m-n位的数字:^\d{m,n}$