html
Denial_learn
个人博客,以个人实例或技术为主!如有不喜,请勿喷。
展开
-
01html之初识前端基本标签、插入图片、超链接(取消下划线)以及行内元素和块元素的特性
网络基本标签:标题:(h1–h6)(只有6个,h7以上的不能识别)段落:(p)(都是成对出现的<p></p>)换行:(br)(单独出现<br\>)水平线:(hr)(同上面的换行一样)加粗和斜体:(strong/b em/i)(同上面的段落一样)注释:(<!-- >)特殊符号:插入图像:超链接:1.超链接:2.锚链接从...原创 2019-08-28 19:59:16 · 426 阅读 · 0 评论 -
07JavaScript之事件
直接点击属性,可以进行查看相关的示例!!!!!属性此事件发生在何时…onabort图像的加载被中断。onblur元素失去焦点。onchange域的内容被改变。onclick当用户点击某个对象时调用的事件句柄。ondblclick当用户双击某个对象时调用的事件句柄。onerror在加载文档或图像时发生错误。onfocus元素获得...原创 2019-09-09 17:19:50 · 81 阅读 · 0 评论 -
08JavaScript之JavaScript操作DOM对象方法
通过元素类型的方法来操作:document.getElementById();//id名,在实际开发中较少使用,选择器中多用class id一般只用在顶级层存在 不能太过依赖iddocument.getElementsByTagName();//标签名document.getElementsByClassName();//类名document.getElementsByName();/...原创 2019-09-11 19:31:38 · 104 阅读 · 0 评论 -
09JavaScript之操作节点属性、删除和替换节点、修改属性、获取元素的样式、获取元素位置
操作节点属性:其中:setAttribute会设置属性(a,b),a是设置属性名,b是属性值<p>选择你喜欢的书:<input type="radio" name="book" onclick="book()">我和狗狗一起活下来 <input type="radio" name="book" onclick="book()">灰霾来了怎么办</p&g...原创 2019-09-11 20:08:24 · 562 阅读 · 0 评论 -
js实现点名系统
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #p2{ font-size: 28px; /*margin: 0px auto;*/ ...原创 2019-09-16 12:10:29 · 494 阅读 · 0 评论 -
01jQuery之获取和引用jQ、页面加载事件绑定、基本选择器、过滤选择器
下载:进入jQuery官网,进行下载,其中jQuery库分开发版和发布版引用jQ:<script src="js/jquery-1.12.4.js" type="text/javascript"></script>页面加载事件绑定:其中 jq有两种方式:$(document).ready(function(){ 填写代码 })$(functio...原创 2019-09-17 17:40:29 · 121 阅读 · 0 评论 -
02jQuery之筛选选择器、链式编程、addClass( )、css( )、元素的显示和隐藏
筛选选择器:语法描述示例:even选取索引是偶数的所有元素(index从0开始)$(" li:even" )选取索引是偶数的所有li元素:odd选取索引是奇数的所有元素(index从0开始)$(" li:odd" )选取索引是奇数的所有li元素链式编程:对一个对象进行多重操作,并将操作结果返回给该对象示例:(对自己进行操作后,又对下一个兄弟进行操作...原创 2019-09-17 19:05:01 · 324 阅读 · 0 评论 -
js实现轮播图(下面附有高清图)
我所实现的和别的博主大大不太一样,我所采用的的是z-index方式以及浮动的方式,实现的轮播图实现的效果图为:html主要实现代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="styl...原创 2019-09-17 19:23:41 · 664 阅读 · 0 评论 -
美女画廊(点击上面的图片下面进行显示)
效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.4.0.min.js" type="text/javascri...原创 2019-09-18 17:16:10 · 4339 阅读 · 0 评论 -
03jQurey之事件(鼠标事件、键盘事件、绑定事件与移除事件、复合事件)
鼠标事件:方法描述执行时机click( )触发或将函数绑定到指定元素的click事件单击鼠标时mouseover()触发或将函数绑定到指定元素的mouseover事件鼠标指针移过时mouseout()触发或将函数绑定到指定元素的mouseout事件鼠标指针移出时mouseenter()触发或将函数绑定到指定元素的mouseenter事件鼠标...原创 2019-09-19 11:58:21 · 621 阅读 · 0 评论 -
04jQuery之元素的显示及隐藏和元素淡入淡出、改变元素的高度、滚动条的操作
控制元素的显示及隐藏:show() 控制元素的显示,hide( )控制元素的隐藏语法:$(selector).show([speed],[callback])$(selector).hide([speed],[callback])speed:可选。表示速度,默认为“0”,可能值:毫秒(如1000)、slow、normal、fastcallback:可选。show函数执行完之后,要执...原创 2019-09-19 12:13:59 · 814 阅读 · 0 评论 -
05jQuery之class增删查以及切换样式、math对象、attr获取和设置节点属性以及删除元素属性、节点元素操作、CSS-DOM操作
追加和移出以及判断class存在控制样式:hasClass(“div2”) //判断是否存在classaddClass(“div2”)//添加classtoggleClass()//也可以进行添加ClassremoveClass(“div2”)//移出class示例: $(function(){ $("#div1").mouseover(function(){ ...原创 2019-09-19 14:27:30 · 242 阅读 · 0 评论 -
jQ实现轮播图
效果图:html代码:<div id="first_two"> <div id="first_two_img"> <img src="img/FristPage/scroll-01.jpg"/> <img src="img/FristPage/scroll-02.jpg"/> <img src...原创 2019-09-19 18:48:23 · 170 阅读 · 0 评论 -
JQ实现手风琴效果
效果图:(没有加太多样式,原理理解就好)代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.4.0.min.js" type="text/javascr...原创 2019-09-20 14:53:48 · 360 阅读 · 0 评论 -
加强版点名系统(名字+提问问题)(js实现,一个文件即可)
在a数组里面进行添加名字,在title数组里面添加提问问题!!!!!效果图为:运行一次:代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{...原创 2019-09-23 10:59:06 · 517 阅读 · 0 评论 -
06JavaScript之history对象、Location对象
history对象:包含存放用户在浏览器窗口中访问的url信息是window对象的一部分,可以通过window.history属性对其进行访问注意:没有应对于history对象的公开标志,不过所有浏览器都支持该对象history.back()//返回到上一个页面history.forward()//前进到下一个页面history.go()//go里面可以填充数字,正数为前进几个历史...原创 2019-09-07 09:25:06 · 172 阅读 · 0 评论 -
05JavaScript之框架标签(frame)、iframe(公用页面,引入)、window(window内close和open方法)、定时器
框架标签: 框架标签的作用:可以把页面分割几个部分。引入其他页面,到本页面。 可以把页面进行分割(不能和body一块使用,把body删除)row分割上下 , cols分割左右 引入其他的页面,进入到本页面。--- 最大的缺点就是不能和body一块使用示例: frameset 标签不能喝body一起出现 rows属性表示页面能切割多少行 ...原创 2019-09-06 20:46:36 · 732 阅读 · 0 评论 -
04JavaScript之对象(自定义对象、内置对象)
对象: 全局对象:字符串对象(String)日期对象(Date)数组对象(Array)逻辑对象(Boolean)算术对象(Math)正则对象(RegExp)Date对象:toLocaleString() 根据本地时间格式,把Date对象转换为字符串toLocaleTimeString() 根据本地时间格式,把Date对象的时间部分转换为字符串toLocal...原创 2019-09-06 20:21:58 · 120 阅读 · 0 评论 -
02html之列表、表格、、HTML5的结构元素、iframe内联框架、特殊符号
列表: 无序列表:格式:<ul> <li></li> <li></li> </ul>示例:<ul> <li>范冰冰演藏族女孩</li> <li>撞死两个人后自拍</li> <li>...原创 2019-08-30 11:55:49 · 381 阅读 · 0 评论 -
03html之表单、隐藏、只读和禁用
表单:格式:<form method="post" action="result.html"> <p> 名字:<input name="name" type="text" > </p> <p> 密码:<input name="pass" type="password" > </p> ...原创 2019-08-30 17:46:34 · 953 阅读 · 0 评论 -
04css之初识css、引入css的方式、CSS3基本选择器
CSS的概念:Cascading Style Sheet 级联样式表表现HTML或XHTML文件样式的计算机语言包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定CSS的优势:内容与表现分离网页的表现统一,容易修改丰富的样式,使得页面布局更加灵活减少网页的代码量,增加网页的浏览速度,节省网络带宽运用独立于页面的CSS,有利于网页被搜索引擎收录CSS基本语法结...原创 2019-08-30 19:17:53 · 152 阅读 · 0 评论 -
05css之高级选择器(层次选择器 、结构伪类选择器 、 属性选择器)
CSS的高级选择器:层次选择器结构伪类选择器属性选择器 层次选择器:示例:body p{ background: red; }body>p{ background: pink; }.active+p { background: green; }.active~p{ background: yellow; } 结构伪类选择器:示例:ul l...原创 2019-08-30 19:26:56 · 545 阅读 · 0 评论 -
06css之span标签、字体属性、文本属性、文本颜色、 排版文本段落、文本修饰和垂直对齐、文本阴影、浏览器兼容性
<span>标签:作用:能让某几个文字或者某个词语凸显出来.示例:<p>享受<span class="show">“海融式”</span>教育服务</p><p>在海融软件,有一群人默默支持你成就 <span id="dream">互联网+梦想</span></p>&l...原创 2019-08-30 20:16:43 · 15715 阅读 · 0 评论 -
07css之超链接伪类(鼠标超链接简单事件)、列表样式、网页背景、CSS3渐变
超链接伪类: 伪类样式:语法:标签名:伪类名{声明;}示例:a:hover {color:#B46210;text-decoration:underline;}设置伪类的顺序:a:link->a:visited->a:hover->a:active示例:<a href="#">帅哥</a>a:link{ 未点...原创 2019-08-30 20:41:29 · 952 阅读 · 0 评论 -
GET和POST两种基本请求方式直接的区别
GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二。最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数。你可能自己写过无数个GET和POST请求,或者已经看过很多权威网站总结出的他们的区别,你非常清楚知道什么时候该用什么。当你在面试中被问到这个问题,你的内心充满了自信和喜悦。你轻轻松松的给出了一个“标准...翻译 2019-08-30 20:52:02 · 783 阅读 · 0 评论 -
08css之盒子模型边框、 外边距、内边距、box-sizing、圆角边框、盒子阴影
盒子的整体结构:边框:边框的属性:color 颜色、width 粗细、style 样式 coler 颜色: width 粗细:border-widththinmediumthick像素值示例:border-top-width:5px; border-right-width:10px; border-bottom-width:8px; border-lef...原创 2019-09-02 19:38:15 · 969 阅读 · 0 评论 -
09css之浮动、标准文档流、dispaly属性、块元素排在一行、清除浮动、 解决父级边框塌陷、nline-block和float的区别
标准文档流;标准文档流组成块级元素(block)<h1>…<h6>、<p>、<div>、列表内联元素(inline)<span>、<a>、<img/>、<strong>...内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立dispaly属性:block、inline...原创 2019-09-02 19:54:47 · 248 阅读 · 0 评论 -
10css之定位、z-index属性、网页元素透明度
position属性:static:默认值,没有定位relative:相对定位absolute:绝对定位fixed:固定定位static属性值:没有定位,以标准流方式显示相对定位:相对自身原来位置进行偏移,偏移设置:top、left、right、bottom示例:#third { background-color:#C5DECC; border:1px #395E4F...原创 2019-09-03 18:59:00 · 306 阅读 · 0 评论 -
11css之动画css变形函数(transfrom)、过度(transition)、动画(animation)
CSS3变形函数:是一些效果的集合如平移、旋转、缩放、倾斜效果每个效果都可以称为变形(transform),它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化语法:transform:[transform-function] *;设置变形函数,可以是一个,也可以是多个,中间以空格分开 变形函数translate():平移函数,基于X、Y坐标重新定位元素的位置scale(...原创 2019-09-04 14:38:20 · 1842 阅读 · 1 评论 -
01JavaScript之js与java的区别、js特点、js的书写方式(引入方式)、基础语法(关键字、变量、注释)
js与java的区别:JS是Netscape公司的产品,前身是LiveScript;Java是Sun公司的产品,现在是Oracle公司的产品。JS只需解释就可以执行不需要编译。Java需要先编译成字节码文件,再执行。JS是弱类型(变量中去看)。Var a = 10; var a = “aa”;Java是强类型。Int a = 10; string a = “aa”;举例:java中...原创 2019-09-06 12:14:35 · 247 阅读 · 0 评论 -
02JavaScript之运算符、语句
js中的运算符:算数运算符赋值运算符关系运算符逻辑运算符三元运算符 算数运算符:js中的算数运算符: + - * / % ++ –注意:字符和其他类型进行+运算的时候,实质上是字符串连接(变长的过程)!字符串和其他数据类型,进行非+运算的时候,那么会把字符串转换为number类型,在进行运算。如果字符串不能转换成number的类型,会返回NaN(表示非number,是...原创 2019-09-06 14:50:15 · 197 阅读 · 0 评论 -
03JavaScript之数组、函数、部分全局函数及全局属性、url和uri
数组:定义方式: 第一种:var 数组名 = [初始值,初始值,初始值];在js中中括号表示一个数组。多个初始值之间使用逗号分割。注意:通过角标可以得到数组中,某个位置的值。通过数组的length属性得到数组的长度。(可以通过该属性遍历数组)数组不固定类型。可以存放任何类型的数据。数组的长度是可变的。 第二种:写法 var 数组名 = new Array();...原创 2019-09-06 19:53:27 · 153 阅读 · 0 评论 -
06jQuery之表单校验(表单选择器、常见的校验、表单验证事件和方法、jq的正则使用)
val()方法,主要是获取form表单当中的内容(包括有value或者输入的内容)表单验证的必要性:减轻服务器的压力保证输入的数据符合要求表单选择器:表单选择器用于选取某些特定的表单元素,比如所有单选按钮或隐藏的元素常见的校验: 非空验证:示例:if (mail == "") { alert("Email不能为空"); return false;...原创 2019-09-24 16:35:47 · 458 阅读 · 0 评论