HTML+CSS+JS
文章平均质量分 82
脑袋不灵光的小白羊
这个作者很懒,什么都没留下…
展开
-
Java—网页编程与设计 -制作京东购物车页面
一、网页分析1、模块的划分:去写一个网页先别着急写代码,先划分好模块构思好功能,会有事半功倍的效果2、怎么找素材直接Ctrl+S保存网页,会将整个网页的图片保存下来二、京东购物车1.0...原创 2020-09-28 19:49:14 · 2029 阅读 · 0 评论 -
JavaScript基础——JSON
001.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>JSON</title> </head> <body> <script type="text/javascript"> /* 1、什么是JSON,有什么用? JavaScript Object Notation(JavaSc原创 2021-01-11 15:56:23 · 322 阅读 · 0 评论 -
JavaScript基础——BOM
BOM编程-open和close.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>BOM编程-open和close</title> </head> <body> <script type="text/javascript"> /* 1、BOM编程中,window对象是顶级对象,代表浏览器窗原创 2021-01-11 15:54:10 · 155 阅读 · 0 评论 -
JavaScript基础——DOM
DOM编程-获取文本框的value.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>DOM编程-获取文本框的value</title> </head> <body> <script type="text/javascript"> /* 1、JavaScript包括三大块: ECM原创 2021-01-11 15:48:50 · 288 阅读 · 1 评论 -
JavaScript基础——ECMAScript
1.什么是JavaScript,有什么用?JavaScript是运行在浏览器上的的脚本语言。简称JS。JavaScript是网景公司(NetScape)的布兰登艾奇(JavaScript之父)开发的,最初叫做LiveScript。LiveScript的出现让浏览器更加的生动了,不再是单纯的静态页面了。页面更有交互性。在历史的某个阶段,SUN公司和网景公司他们之间的合作关系,SUN公司把LiveScript的名字修改为JavaScript。JavaScript这个名字中虽然带有“java”但是个Ja原创 2021-01-11 15:33:24 · 325 阅读 · 0 评论 -
CSS基础
1.什么是CSS,有什么用?CSS(Cascading Style Sheet):层叠样式表语言。CSS的作用是:修饰HTML页面,设置HTML页面中的某些元素的样式,让HTML页面更好看。CSS好比是HTML的化妆品一样。HTML是主体,CSS依赖HTML。CSS的存在就是修饰HTML,所以新建的文件还是xx.html文件。2.CSS我们要求掌握到什么程度?常见的CSS样式要求会写。别人的CSS样式要能看懂。3.在HTML页面嵌套使用CSS的三种方式:第一种方式:在标签内部使用st原创 2021-01-09 16:29:35 · 248 阅读 · 0 评论 -
HTML基础语法
HTML1.系统结构B/S框架:(以后主要走的方向是这个。)Browser/Server(浏览器/服务器的交互形式。)Browser支持那些语言:HTML CSS JavaScript写HTML CSS JavaScript代码的这波人职位叫做:WEB前段开发工程师。(java程序员目前来看也需要会一些前端的东西。)前端页面上的图片需要UI设计师完成。(PS对java程序员来说没有太高要求。)S是服务器端Server,Server端的语言很多:C C++ Java Python…(我们主要是使原创 2021-01-08 17:06:26 · 764 阅读 · 0 评论 -
JS—变量和内置对象
1.变量(1)变量提升(2)变量作用域(3)一等公民(4)函数名提升(5)函数内的变量提升(6)*函数参数的默认值(1)变量提升在编码过程中,其保存的值可以发生改变的量称为变量。我们已经对变量十分熟悉了,但是我们今天来讨论一下变量的一些使用问题。先来看看下面的一段代码:console.log(num);var num = 1;很显然,上面这段代码中输出语句被写在了变量的初始化之前。按照html的规则这段代码肯定无法正常运行的,因为在输出num变量的时候变量还没有被赋初值。但是事实并原创 2020-07-29 17:31:18 · 263 阅读 · 0 评论 -
JS—对象和函数
1.javascript对象对象(object)是大括号定义的无序的数据集合,由键值对构成,键与值之间用冒号分隔,大括号末尾要使用分号表示对象定义结束。对象是JavaScript的核心概念,也是最重要的数据类型。JavaScript的所有数据都可以被视为对象。此外,JavaScript 允许自定义对象。语法:var obj = { key : value };上面代码定义了一个对象,它被赋值给变量obj。key是“键名”注意:a.键名也被称为属性(property),对象的所有属性都是字符串,原创 2020-07-29 16:56:06 · 830 阅读 · 0 评论 -
JS—数组的使用方法
1.数组的概念1、数组(array)是按照一定顺序排列的一组值,每个值都拥有自己的编号,编号从0开始。整个数组用方括号来表示。语法:var arr = [item1,item2,item3];注意:a.数组是按照一定顺序排列的一组值,顺序体现在下标,下标是从0开始b.数组元素:数组中的每一个值称为数组元素,数组元素可以是任意类型例子: var arr=[123,'周杰伦','aa',true]; console.log(arr);2.split()描述:split方法能够根据指原创 2020-07-27 16:38:36 · 346 阅读 · 0 评论 -
JS_字符串讲解
1.字符串概述定义:字符串就是用单引号或者双引号包裹起来的,零个或多个排列在一起的字符。'javascript',"","345",'9-11a$',"xiao_yuanLian"嵌套:字符串可以嵌套。在单引号包裹的字符串内部,应该使用双引号进行嵌套。在双引号包裹的字符串内部,应该使用单引号进行嵌套。"I am 'coolMan'", 'are u "kidding" me'ps:总之字符串嵌套不能够出现容易引起混淆的使用方式。pss:在json解析的时候字符串需要单引号,因此推荐在各种原创 2020-07-26 19:00:08 · 586 阅读 · 0 评论 -
JS_循环语句和分支语句
1.分支语句顺序结构的程序虽然能解决计算、输出等问题,但不能做判断再选择。对于要先做判断再选择的问题就要使用分支结构。分支结构的执行是依据一定的条件选择执行路径,而不是严格按照语句出现的物理顺序。分支结构的程序设计方法的关键在于构造合适的分支条件和分析程序流程,根据不同的程序流程选择适当的分支语句。分支语句通常有以下几种:(1)if条件语句(2)if else条件语句(3)if else if else条件语句(4)switch语句(1)if条件语句先判断一个表达式的布尔值,然后根原创 2020-07-26 18:14:47 · 294 阅读 · 0 评论 -
了解JavaScrip
1.Javascript简介JavaScript是一种轻量级的脚本语言,可以部署在多种环境,最常见的部署环境就是浏览器。所谓“脚本语言”,指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序的操作方法。JavaScript的核心部分相当精简,只包括两个部分:基本的语法构造(比如操作符、控制结构、语句)标准库(就是一系列具有各种功能的对象比如Array、Date、Math等)。除此之外,还有提供的额外API可以分成三大类:浏览器控制类、DOM类、Web类。Javascript还拥有原创 2020-07-26 16:51:55 · 231 阅读 · 0 评论 -
实战项目 仿写小米商城 网页框架
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>小米商城 - 小米MIX 3、红米Note 7、小米8、小米电视官方网站</title> <link rel="icon" href="images/favicon.ico"/> <link rel="stylesheet" href="css/re原创 2020-07-26 11:25:40 · 2342 阅读 · 1 评论 -
CSS3—雪碧图和滑动门
一、CSS Sprite(雪碧图)CSS Sprite也叫CSS精灵、CSS雪碧图,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求,所以图片越多请求越多,造成延迟的可能性越大。所以页面有许多icon时,推荐使用CSS Sprite。CSS Sprite原理:其实就是把网页中的一些背景图片整合到一张图片文件中,再利用CSS的background-image、backg原创 2020-07-26 11:12:06 · 312 阅读 · 0 评论 -
CSS3—媒体查询、CSS3—多列布局
一、Media Query响应式布局—媒体查询应式布局是在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,越来越多的网站采用这个技术。响应式设计一定是最佳选择吗?如果预算充足且形势需要,做一个真正的“手机版”网站是首选。因为响应式设计没有专门设计一个手机版网站的功能多,比如获取当前用户的GPS定位,原创 2020-07-26 10:56:19 · 334 阅读 · 0 评论 -
CSS3_动画和绘制特殊图形
CSS3CSS3是CSS(层叠样式表)技术的升级版本。CSS3完全向后兼容,不必改变现有的设计,浏览器将永远支持CSS2。W3C的CSS3规范仍在开发。但是,许多新的CSS3属性已在现代浏览器使用。圆角border-radius语法border-radius:value;四个角border-radius:value value;左上右下、右上左下border-radius:value value value value;代表设置对象左上角、右上角、右下角、左下角顺时针设置盒阴影box-原创 2020-07-26 10:40:51 · 539 阅读 · 0 评论 -
CSS3——浮动和定位
定义定义元素框相对于其正常位置应该出现的位置分类普通流定位浮动定位相对定位绝对定位固定定位浮动定位指将元素排除在普通流之外元素将不在页面中占据空间将浮动元素放置在包含框的左边或者右边浮动元素依旧位于包含框之内浮动的框可以向左或者向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止浮动元素的外边缘不会超过其父元素的内边缘浮动元素不会互相重叠浮动元素不会上下浮动行内元素浮动后会变为块级元素语法:float:none/left/right;当框1向左浮动时,它脱离文档流原创 2020-07-25 16:57:28 · 685 阅读 · 0 评论 -
CSS3—盒子模型 讲解
一、盒子模型盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域:内容(content)、内边距(padding)、边框(border)、外边距(margin)。转换到我们日常生活中,可以拿红酒来对比,红酒=内容,内边距=盒子中的填充物,边框=盒子的厚度,外边距=两个红酒之间的距离。通常我们设置的宽和高是指“红酒”content的宽高,一整个盒子还包含了“填充物”、盒子、盒子与盒子的距离二、W3C盒模型盒模型由内容(con原创 2020-07-25 16:32:11 · 3956 阅读 · 0 评论 -
CSS基础样式和CSS3新增选择器
一、背景1.background-color 背景颜色默认值是transparent(透明的)当同时定义了背景图像和颜色时,背景图像将覆盖在背景颜色之上.divclass{ background-color:#808080;}颜色的取值:1.关键字:red、blue等2.16进制:#000000、#cccccc、#ff0000等3.rgb(0,0,0)4.rgba(0,0,0,.5)2.background-image 背景图片默认值是none(没有图片)元素的背景占据了元素的原创 2020-07-25 11:27:25 · 610 阅读 · 0 评论 -
CSS要点整理
什么是CSS?CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表1.用于HTML文档中元素样式的定义实现了将内容与表现分离提高代码的可重用性和可维护性2.文件后缀是.cssCSS与HTML之间的关系1、HTML用于构建网页的结构2、CSS用于构建HTML元素的样式3、HTML是页面的内容组成,CSS是页面的表现结构层 HTML表示层 CSS行为层 JavaScript使用CSS样式表的方式1、内联方式直接把CSS代码原创 2020-07-25 10:24:56 · 253 阅读 · 0 评论 -
认识 HTML5 的新增元素
为什么会有HTML5这个版本?4.01后,w3c并不看好html,他们转而去发展XHTML,但并不理想。这时候由浏览器厂商们提出的H5标准更能顺应web2.0的时代,所以h5被慢慢推广了起来。2004年,浏览器主要厂商成立了WHATWG(Web Hypertext Application Technology Working Group)组织,它们创立了HTML5规范,专门针对WEB应用开发新功能(web应用新功能被认为是HTML4中最薄弱的环节)。WEB2.0也正是那个时候提出的。WEB2.0实至名归原创 2020-07-24 19:57:34 · 166 阅读 · 0 评论 -
HTML5新增input类型及其属性
1.在其他版本的HTML中,表单包含的元素非常有限,并且属性也不多,尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码2.以上的不足都已经在HTML5中被克服,HTML5在以上的基础上增加了许多标签和属性,为开发人员带来了极大的方便电子邮件类型功能描述:输入E-mail地址的文本框语法:<input type="email"/>注意:输入的内容中必须包含"@","@"后面必须具有内容搜索类型功能描述:输入搜索关键字的文本框语法:<input type="原创 2020-07-24 19:35:09 · 984 阅读 · 0 评论 -
HTML——From表单
from表单之前学习的标签更多的是向用户展示信息,假如服务器端需要验证用户是否存在,这时就需要有一个用户输入内容的标签。表单在网页中主要负责数据采集功能,它用标签定义。用户输入的信息都要包含在form标签中,点击提交后,和里面包含的数据将被提交到服务器或者电子邮件里。所有的用户输入内容的地方都用表单来写,如登录注册、搜索框。表单在 Web 网页中用来给访问者填写信息,从而能采集客户端信息,使网页具有交互的功能。一般是将表单设计在一个Html 文档中,当用户填写完信息后做提交(submit)操作,于是原创 2020-07-24 19:18:27 · 729 阅读 · 0 评论 -
Iframe 内联框架
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。iframe是属于内联框架,它是body的子级,和body是父子关系。iframe作为一个普通元素放在body里。属性①width 可设置内联框架的宽②height 可设置内联框架的高③name 设置框架名称 ④src 设置页面的路径⑤scrolling规定是否在 iframe 中显示滚动条(yes,no,auto)⑥ frameborder规定是否显示框架周围的边框(1默认有边框,0)简单理解来说,iframe 就是用来对整原创 2020-07-24 18:37:59 · 1063 阅读 · 0 评论 -
HTML常用标签和基本元素
HTML常用标签和基本元素格式标签<hr>标签在HTML页面中创建一条水平线。可以在视觉上将文档分隔成各个部分。属性:1、align:水平对齐方式,默认居中(属性值:left、center、right)2、width:水平线的长度,可取像素(px)和百分比(%)3、size:水平线的高度4、color:颜色<hr align="center" width="50%"/><address></address> 地址定义文档或文章的作者联系原创 2020-07-24 17:38:09 · 1069 阅读 · 0 评论 -
HTML的基本骨架
HTML HTML基本结构什么是DTD文档模型,为什么写在HTML当中?SEO是搜索引擎优化的英文缩写语义化标签HTML 中常用的标签图片超链接HTML基本结构<head lang="en">lang 是 language 的意思,lang=“en” 属性对每张页面中的主要语言进行声明,en 代表了英文,只是个声明,声明了它,对搜索引擎和浏览器更友好,并不会更改显示内容。它还有常见的值是 zh-CN,代表了中文(搜索引擎不会判断该站点是中文还是英文,它让搜索引擎知道你的站点是中文站,这原创 2020-07-24 16:04:22 · 1687 阅读 · 0 评论