网页编程和设计
关注
分享
扫一扫
目前软件行业大多数的项目都是基于B/S架构，即在浏览器端实现效果展示。网页编程也是每个程序员必懂的技能。本专栏主要讲解HTML5、CSS3和JavaScript语言，以及Jquery。
地球村公民
这个作者很懒，什么都没留下…
展开
-
Java Jquery：（八）动画功能
动画功能**看看就好了… **<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ height: 300px; background-color: green; } #div2{ height: 300px; background-color:原创 2020-06-09 11:07:37 · 174 阅读 · 0 评论 -
Java Jquery：（七）事件
事件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="http://apps.bdimg.com/libs/jquery/1.7.0/jquery.js" type="text/javascript" charset="utf-8"></script> <script typ原创 2020-06-09 11:00:24 · 219 阅读 · 0 评论 -
Java Jquery：（六）操作页面的元素
操作页面的元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ height: 300px; border: 3px solid red; } p{ border: 2px solid green; } </style>原创 2020-06-09 10:53:05 · 236 阅读 · 0 评论 -
Java Jquery：（五）操作页面的文本和值
操作页面的文本和值<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">原创 2020-06-09 10:39:56 · 154 阅读 · 2 评论 -
Java Jquery：（四）操作界面元素的属性
操作界面元素的属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">原创 2020-06-09 10:25:31 · 184 阅读 · 0 评论 -
Java Jquery：（三）操作界面的样式
操作界面的样式1.直接更改对象的css设置2.通过添加class的方式添加样式1.直接更改对象的css设置<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ width: 200px; height: 200px; border: 2px solid green原创 2020-06-09 10:17:45 · 189 阅读 · 0 评论 -
Java Jquery：（二）jQuery的选择器-8500字匠心出品
jQuery的选择器1.对象之间的转换and基本选择器2.并集、后代、父子选择器、后面N个兄弟元素3.列表特殊选择器4. input属性选择器5.表单选择器1.对象之间的转换and基本选择器对象之间的转换DOM对象：直接使用JavaScript获取的节点对象className innerHTML valuejQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法addClass() html() val()DOM对象和jQuery对象分别拥有一套独立的方法，不能原创 2020-06-09 10:08:17 · 352 阅读 · 0 评论 -
Java Jquery：（一）jQuery 概述以及基本使用
jQuery 概述以及基本使用1.为什么使用 jQuery2.jQuery的概念3. jQuery 的三个大版本4.Jquery的引入以及获取元素对象5.jQuery 中$的含义6.简单综合对比1.为什么使用 jQuery选择器功能弱DOM操作繁琐之极浏览器兼容性不好动画效果弱2.jQuery的概念jQuery （javaScriptQuery）JavaScript 代码库官方网站3. jQuery 的三个大版本1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新原创 2020-06-09 09:13:19 · 545 阅读 · 0 评论 -
Java Javascript 语言：（十二）自定义对象prototype
自定义对象prototype<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> function user(age, sex) { this.name = "张三"; this.age = age; this.sex = sex; this.eat = function原创 2020-06-04 10:53:59 · 195 阅读 · 0 评论 -
Java Javascript 语言：（十一）表单元素的操作与表单验证
表单元素的操作与表单验证1.操作表单元素2.表单验证-正则表达式1.操作表单元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> function checkName(){ //获得input对象的值 var uname =document.getElementById("un原创 2020-06-04 10:50:22 · 241 阅读 · 0 评论 -
Java Javascript 语言：（十）DOM-操作元素
DOM-操作元素1.操作元素属性2.操作元素样式3.操作元素文本和值4.操作元素1.操作元素属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> function demo1(){ //获得id名称是inp1对象节点 var inp1=document.getElementBy原创 2020-06-04 10:32:01 · 405 阅读 · 0 评论 -
Java Javascript 语言：（九）DOM 中的节点类型以及获取元素的方式
DOM 中的节点类型1.什么是 DOM2.DOM 节点分类 node3.DOM 节点关系4.DOM 操作的内容5.获取元素的方式1.什么是 DOM2.DOM 节点分类 node元素节点 element node < a href=“链接地址”>链接</ a>属性节点 attribute node href=“链接地址”文本节点 text node 链接地址 链接3.DOM 节点关系父子关系（parent-child）：< html> 元素作为父级，原创 2020-06-04 10:12:48 · 335 阅读 · 0 评论 -
Java Javascript 语言：（八）BOM对象-Window、Location、History、Navigator
BOM对象-Window、Location、History、Navigator1.BOM对象-Window2.BOM对象-Location、History、Navigator1.BOM对象-Window<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> /*三种弹框*/ function d原创 2020-06-04 09:59:52 · 217 阅读 · 0 评论 -
Java Javascript 语言：（七）BOM 和 DOM 对象入门
BOM 和 DOM 对象1.图片概念理解2. 什么是BOM3.什么是DOM1.图片概念理解2. 什么是BOMBOM是Browser Object Model的简写，即浏览器对象模型BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法BOM没有统一的标准(每种客户端都可以自定标准)BOM的顶层是window对象3.什么是DOMDOM是Document Object Model的简写，即文档对象模型DOM用于XHTML、XML文档的应用程序接口(API)DOM提供一种结构化原创 2020-06-04 09:45:48 · 260 阅读 · 0 评论 -
Java Javascript 语言：（六）JavaScript 中的事件Event
JavaScript 中的事件Event1.什么是事件2.有哪些事件3.事件的使用1.什么是事件事件是可以被 JavaScript 侦测到的行为网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行生活案例：汽车报警器2.有哪些事件属性当以下情况发生时，出现此事件onabort图像加载被中断onblur原创 2020-06-04 09:33:40 · 300 阅读 · 0 评论 -
Java Javascript 语言：（五）JavaScript 中的Array对象
JavaScript 中的Array对象<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> /*********数组的声明方式*****************/ function demo1() { //方式一 var arr = new Array(); //方式二原创 2020-06-04 09:15:01 · 249 阅读 · 0 评论 -
Java Javascript 语言：（四）JavaScript 中的Date、Math、String、Global对象
JavaScript 中的Date、Math、String、Global对象1.JavaScript 中的Date、Math对象2.JavaScript 中的String、Global对象1.JavaScript 中的Date、Math对象<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> /***原创 2020-06-04 09:03:22 · 191 阅读 · 0 评论 -
Java Javascript 语言：（三）JavaScript 中的控制语句与函数
JavaScript 中的控制语句与函数1.JavaScript 中的控制语句2.JavaScript 中的函数1.JavaScript 中的控制语句<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> var a=15; switch (a){ case 10: alert("原创 2020-06-04 08:53:01 · 206 阅读 · 0 评论 -
Java Javascript 语言：（二）JavaScript 中的变量、数据类型与运算符
JavaScript 中的变量、数据类型与运算符1.JavaScript 中的变量2.Javascript 中的数据类型3.JavaScript 中的运算符1.JavaScript 中的变量<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> var a = 1; var b = "2";原创 2020-06-04 08:43:21 · 208 阅读 · 0 评论 -
Java Javascript 语言：（一）JavaScript 的简介及引入方式
JavaScript 的简介及引入方式1.JavaScript的作用2.JavaScript 的概念3.JavaScript 组成4.JavaScript 语言的特点5.Js 的引入方式1.JavaScript的作用html+css 只是可以实现静态的页面无法实现动态的效果表单的校验背景图片的更换操作节点的信息2.JavaScript 的概念JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、 基于原型的语言，内置支持类型3.JavaScript 组成ECMAScri原创 2020-06-04 08:26:35 · 583 阅读 · 0 评论 -
Java CSS3：（七）CSS3 中常用的样式（跳动的心）
CSS3 中常用的样式-跳动的心做一个跳动的心做一个跳动的心<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body { background-color: #ffa5a5; } .cen { width: 200px; height: 200px; b原创 2020-06-03 09:30:11 · 1083 阅读 · 0 评论 -
Java CSS3：（六）CSS3 中新增选择器
CSS3 中新增选择器1.基础选择器2.伪对象选择器1.基础选择器<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> /*获得class名称是div1下面的第一个子元素*/ .div1>p:first-child{ color: red; } .div1>p:l原创 2020-06-03 09:24:25 · 119 阅读 · 0 评论 -
Java CSS3：（五）DIV
DIV盒子模型的介绍示意图代码中介绍：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> /*清除浏览器的留白*/ body, html { margin: 0px; padding: 0px; } .div_1 { width: 200px;原创 2020-06-03 09:06:32 · 254 阅读 · 2 评论 -
Java CSS3：（四）CSS 中的定位
CSS 中的定位<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .div_1 { width: 200px; height: 200px; background-color: red; /*绝对定位*/ /*position: absolute;*/原创 2020-06-03 09:02:32 · 367 阅读 · 0 评论 -
Java CSS3：（三）CSS的常用属性
CSS的常用属性1.常用属性2.行元素和块元素1.常用属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .top { width: 100%; height: 100px; border: 1px solid red; } .top_a { /*字体的原创 2020-06-03 08:58:43 · 255 阅读 · 2 评论 -
Java CSS3：（二）CSS的选择器
CSS的选择器1.常用三种选择器2.CSS 中其他选择器1.常用三种选择器<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> /*通用选择器 *代表该页面中的所有的元素 */ * { color: red; background-color: black; } /*原创 2020-06-03 08:37:28 · 271 阅读 · 0 评论 -
Java CSS3：（一）CSS的入门
CSS的入门1.CSS 的作用2.CSS 的概念3.CSS 的引入方式1.CSS 的作用HTML 虽然可以在一定程度上修饰页面，但是页面的整体还是不够美观HTML 进行网页的书写重复的代码比较多，后期的维护性不好2.CSS 的概念英文全称：Cascading Style Sheets层叠样式表（级联样式表）3.CSS 的引入方式CSS 的引入的三种方式<!DOCTYPE html><html> <head> <meta charse原创 2020-06-03 08:23:27 · 321 阅读 · 0 评论 -
Java HTML5：（五）HTML5
HTML51.增强表单标签2.结构标签3.音频视频标签4.绘图标签及其他标签1.增强表单标签<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form> <p> <!--邮箱--> 邮箱: <input typ原创 2020-05-27 11:20:46 · 689 阅读 · 0 评论 -
Java HTML5：（四）表单标签、frameset标签、DIV标签
表单与DIV1.表单2.frameset标签3.DIV标签1.表单https://www.baidu.com/s？键1=值1&键2=值2action：表单提交的位置method（get/post）：表单提交的方式GET:参数会依附于url地址之后利用get方式提交数据，数据的长度有限制利用get方式提交数据，是不安全的Post请求不会依附于地址利用post处理参数不受限制post提交数据比较安全<!DOCTYPE html><html> &l原创 2020-05-27 10:59:48 · 618 阅读 · 0 评论 -
Java HTML5：（三）超连接标签、图片标签、表格标签
超连接标签、图片标签、表格标签1.超连接标签2.图片标签3.表格标签1.超连接标签超链接标签的作用（不会自动换行）实现不同页面之间的跳转href:指定跳转到目标资源的位置target：打开网页的方式实现锚点功能<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> &原创 2020-05-27 09:13:25 · 372 阅读 · 0 评论 -
Java HTML5：（二）Head 标签的子标签以及body中的基本标签
常用标签1.Head 标签的子标签1.Head 标签的子标签<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <!--搜索引擎优化--> <meta name="author" content="李白，将进酒" /> <meta name="description" content=原创 2020-05-27 11:21:20 · 651 阅读 · 0 评论 -
Java HTML5：（一）网页编程设计
网页编程设计1.互联网的三大基石2.HTML 入门1.为什么学习 HTML？2.什么是 HTML？3.学习的网站4.HTML 的基本结构目前软件行业大多数的项目都是基于 B/S 架构，即在浏览器端实现效果展示。网页编程也是每个程序员必懂的技能。1.互联网的三大基石HTML(Hyper Text Markup Language)：超文本标记语言HTTP(HyperText Transfer Protocol)：超文本传输协议URL(Uniform Resource Location) ：统一资源定原创 2020-05-26 11:52:54 · 700 阅读 · 0 评论