● Web前端基础篇
程序员的时光
用心写好每一篇文章。
展开
-
珍藏已久的编程视频面试资源,有了这些学习编程终于不虚了!
这些都是我在网上找的资源集锦,搜集不易,都是免费的;如果觉得有帮助,就自行取走;如果不喜,也不要喷;谢谢~1,Web前端;第一阶段:第二阶段:第三阶段:以上资源获取:关注微信公众号《程序员的时光》,后台回复——视频资源;即可获得2,PHP系列;第一阶段:第二阶段:以上资源获取:关注微信公众号《程序员的时光》,后台回...原创 2020-04-08 11:24:57 · 420 阅读 · 0 评论 -
HTML(一)——html相关介绍
1.什么是Web?当我们在浏览器中输入一个网址(比如www.baidu.com),就能打开写一个网页(百度首页),那么这个过程是怎么样实现的呢?其实,百度的网址www.baidu.com事先已经放在一个服务器中,我们在浏览器输入这个网址时,浏览器已经把相关的内容发送到服务器中,然后服务器根据浏览器返过来的网址,找到对应的网页,再传递给浏览器,最后呈现在我们面前。总结:用户...原创 2019-03-01 21:08:31 · 345 阅读 · 0 评论 -
HTML(二)——用html设置文本
目录1.HTML文件基本结构;2.文本排版:2.1 段落标签2.2 换行标签(这个是单标签,只有一个)2.3分割线标签(这个是单标签,也只有一个)2.4标题标签2.5文字居中标签2.6文字段落缩进标签3.设置文字列表:3.1无序列表3.2有序列表4.HTML标记与HTML属性4.1用align属性控制段落的水平位置4.2用bgcolor属性...原创 2019-03-02 16:00:00 · 5124 阅读 · 0 评论 -
HTML(三)——在网页中使用图像img
1.初识网页图片首先新建一个index.html网页,同时把一张后缀名为.jpg的图片也放在这个文件夹中;然后用<img/>标签实现网页图片:<img src="图片路径"/><!DOCTYPE html><html><head><meta charset="UTF-8">&a原创 2019-03-03 15:35:16 · 1347 阅读 · 0 评论 -
HTML(四)——建立超链接
1.文字超链接文字链接是最简单的一种,我们在html文件中,用<a></a>标签就可以实现;<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title&g原创 2019-03-03 22:30:37 · 1819 阅读 · 0 评论 -
HTML(五)——建立表格
1.表格的基本结构建立表格需要用到<table></table>标签;<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><原创 2019-03-04 11:16:52 · 651 阅读 · 0 评论 -
HTML(六)——html表单
1.Form表单表单是一个包含表单元素的区域,主要作用就是向服务器提交数据。2.文本表单文本表单简单的包括有文本框、密码框和文本域;<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title>原创 2019-03-04 16:01:39 · 437 阅读 · 0 评论 -
HTML(七)——html容器
1.DIVHTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。DIV当做容器使用,本身没有实际效果,可以独占一行;<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here<原创 2019-03-05 10:02:36 · 6665 阅读 · 0 评论 -
CSS(一)——CSS概述
1.CSS简介CSS是指层叠样式表(Cascading Style Sheets);在前面我们讲过HTML,比方说html是骨架的话,那么css就是肉体了;具体介绍请看百度百科;2.CSS简单引用比方说在一个html文件中,想要将多个段落的文件统一设置格式,那么就可以在head标签中添加相应的css样式;<!DOCTYPE html><html&...原创 2019-03-05 19:48:35 · 367 阅读 · 0 评论 -
CSS(二)——CSS核心基础
目录1.CSS基本语法2.CSS基本选择器1.标签选择器;2.类别选择器;3.ID选择器;3.在HTML中引入CSS的方法1.行内样式2.内嵌式3.链接式4.几种方式的优先级比较1.CSS基本语法CSS有选择器,然后我们可以在选择器里面添加装饰;2.CSS基本选择器1.标签选择器;<!DOCTYPE html>&...原创 2019-03-06 10:10:15 · 345 阅读 · 0 评论 -
CSS(三)——简单的网页制作
通过前面的HTML和CSS的学习,我们现在可以做一个简单的网页;预览效果:1.首先新建一个.html文件(wangye.html):<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Java之父</title><link原创 2019-03-07 10:41:14 · 1854 阅读 · 0 评论 -
CSS(四)——CSS高级特性
目录1.复合选择器1.1 交集选择器;1.2并集选择器;1.3后代选择器;1.4子选择器;2.继承特性3.层叠特性1.复合选择器复合选择器包括交集选择器、并集选择器、后代选择器和子选择器等;1.1 交集选择器;可以将一个标签设置成多个共同的属性值;<!DOCTYPE html><html><head><...原创 2019-03-11 08:50:50 · 285 阅读 · 0 评论 -
CSS(五)——设置文本样式
目录1.设置文字的字体2.设置文字倾斜效果3.设置文字的加粗效果4.设置英文字母大小写转换5.设置文字的大小6.设置文字的装饰效果7.设置段落首行缩进8.设置字词间距9.设置文字的行高;10.设置段落之间的距离11.设置文本的水平位置12.设置文字和背景的颜色1.设置文字的字体<!DOCTYPE html><htm...原创 2019-03-11 14:27:28 · 348 阅读 · 0 评论 -
CSS(六)——用CSS设置图像效果
目录1.设置图像边框2.设置图片大小3.图文混排4.设置图片与文字的对齐方式1.设置图像边框下面给出四种图像边框的样式:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title>&原创 2019-03-12 09:48:12 · 535 阅读 · 0 评论 -
CSS(七)——设置背景颜色和背景图像
目录1.设置背景颜色2.设置背景图片3.设置背景图像位置4.设置背景图片位置固定1.设置背景颜色<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head&a原创 2019-03-12 15:13:03 · 3642 阅读 · 0 评论 -
CSS(八)——CSS盒模型
目录1.盒模型基本概念2.边框3.内边距4.外边距5.网页布局与盒模型1.标准文档流;2.块级元素 VS 行内元素;6.盒子在标准流中的定位1.行内元素之间的水平margin;2.块级元素之间的竖直margin;3.嵌套盒子之间的margin;4.margin的属性可以设置成负值;1.盒模型基本概念我们可以好好看一下这张图;盒模型:相...原创 2019-03-12 20:54:11 · 264 阅读 · 0 评论 -
CSS(九)——盒子的浮动与定位
目录1.盒子浮动 float2.使用clear清除浮动的影响;2.1不允许左边有浮动对象;2.2不允许右边有悬浮对象;2.3左右都不允许有浮动对象;3.盒子定位position;3.1.Relative:相对定位,相对于原本的标准位置偏移指定的距离;3.2.Absolute:绝对定位,以它的包含框为基准进行偏移;3.3.Fixed:固定定位,以浏览器窗口为基准...原创 2019-03-14 09:12:18 · 1487 阅读 · 0 评论 -
CSS(十)——用CSS设置表格样式
目录1.设置表格的边框1.1设置表格边框1.2设置单元格的间距;1.3设置边框分离,合并 默认是 separate(分离) collapse (合并);1.4设置单元格内容和边框之间的距离;2.设置表格的宽度3.设置表格隔行换色4.设置表格列样式5.设置鼠标经过时行变色效果;1.设置表格的边框border:设置表格边框;border-spacing...原创 2019-03-14 15:34:28 · 693 阅读 · 0 评论 -
CSS(十一)——用CSS设置超链接样式
目录1.使用CSS伪类别来设置超链接样式1.1普通的、未被访问的链接1.2用户已访问的链接1.3鼠标指针位于链接的上方2.创建按钮式超链接2.1设置三个超链接(默认格式)2.2设置超链接的边距和字体格式2.3设置类似于按钮格式的超链接2.4设置点击按钮后的动态效果1.使用CSS伪类别来设置超链接样式链接的四种状态:a:link:普通的、未被访问的...原创 2019-03-14 16:39:42 · 1730 阅读 · 0 评论 -
CSS(十二)——用CSS设置列表样式
目录1.设置列表的符号2.设置列表图片符号3.创建简单导航菜单1.设置列表的符号首先看两个默认的列表符号;<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></h原创 2019-03-15 16:46:15 · 838 阅读 · 0 评论 -
CSS(十三)——固定宽度布局
目录1.CSS布局2.绝对定位法3.浮动法1.CSS布局2.绝对定位法首先来看一个基本的布局框架:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><styl...原创 2019-03-20 19:22:04 · 1271 阅读 · 0 评论 -
CSS(十四)——变宽度布局
利用相对于浏览器的百分比来设置页面布局大小:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> body{ text-align: ce...原创 2019-03-20 19:31:01 · 419 阅读 · 0 评论 -
JavaScript(一)——JavaScript简介
目录1.JavaScript简介2.简单的JavaScript举例1.JavaScript简介百度百科:JavaScript简介2.简单的JavaScript举例<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert titl...原创 2019-03-21 15:40:58 · 325 阅读 · 0 评论 -
JavaScript(二)——JavaScript基本语法(上)
目录1.JavaScript引入方式1.1内部引入;1.2外部引入;2.JavaScript注释3.JavaScript变量4.JavaScript基本数据类型1.JavaScript引入方式1.1内部引入;<!DOCTYPE html><html><head><meta charset="UTF-8">...原创 2019-03-23 18:40:16 · 300 阅读 · 0 评论 -
JavaScript(二)——JavaScript基本语法(下)
目录1.JavaScript运算符1.1算术运算符;1.2赋值运算符;1.3比较运算符;1.4逻辑运算符;1.5三目运算符;1.6字符串连接"+";2.JavaScript选择与循环语句;2.1 if...else语句;2.2 switch语句;2.3 for循环语句;2.4 while/do...while语句;3.JavaScript函数...原创 2019-03-28 10:41:03 · 361 阅读 · 0 评论 -
JavaScript(三)——JavaScript操作DOM结点
目录1 JavaScript处理DOM事件2.JavaScript操作做DOM结点3.JavaScript修改DOM结点CSS样式;1 JavaScript处理DOM事件<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title h...原创 2019-03-30 10:00:37 · 309 阅读 · 0 评论 -
JavaScript(四)——JavaScript对象
目录1.JavaScript对象1.1动态的添加属性和方法;1.2动态的删除属性和方法;1.3JavaScript对象的构造方法;2.JavaScript字符串对象3.JavaScript日期对象4.JavaScript数组1.JavaScript对象1.1动态的添加属性和方法;<!DOCTYPE html><html><...原创 2019-04-01 17:23:41 · 328 阅读 · 0 评论 -
JavaScript(五)——JavaScript常用函数以及对象
目录1.JavaScript全局函数2.JavaScript window 对象常用方法及事件Alert(); 弹出消息框setTimeout();执行一次setInterval();执行多次open();打开窗口1.JavaScript全局函数全局函数不属于任何一个内置对象。JS 包含以下 7 个全局函数,用于一些常用的功能:escape(),eval...原创 2019-04-02 14:25:19 · 442 阅读 · 0 评论 -
JavaScript(六)——Function对象
目录1.Function对象引入2. Function对象属性1.Function对象引入Function 是 js 的方法对象,可以用 Function 实例化出任何 js 方法对象;<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf...原创 2019-04-27 16:16:35 · 485 阅读 · 0 评论 -
微信小程序(一)——开发环境介绍
目录1.注册账号2.获取APPID3.微信开发者工具1.注册账号访问注册页面:微信公众平台2.获取APPID这里的AppID先要记住,后期会用到。3.微信开发者工具下载安装之后,就可以使用了。...原创 2019-06-09 11:18:23 · 2145 阅读 · 0 评论 -
微信小程序(二)——小程序配置文件介绍
一个小程序应用程序会包含两种最基本的配置文件,一是全局的app.json和页面的page.json配置文件中不能出现注释;首先看一下一个微信小程序的文件目录:一、全局的app.jsonapp.json是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等字段的含义:pages字段 —— 用于描述当前小程序所有...原创 2019-06-11 09:09:15 · 1362 阅读 · 1 评论 -
微信小程序(三)——视图层
目录1.数据绑定2.运算1.三元运算符2.算术运算3.逻辑判断3.列表渲染WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统等,可以构建出页面的结构。基础组件:基础组件事件系统:事件系统事件:1.事件是视图层到逻辑层的通讯方式;2.事件可以将用户的行为反馈到逻辑层进行处理;...原创 2019-06-11 20:44:57 · 821 阅读 · 0 评论 -
微信小程序(三)——WXSS
1.样式导入使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。首先在page文件下新建一个文件为style,并写一个样式文件box.wxss;box.wxss:.box{ height: 100px; width: 100px; color: blueviolet; font-size...原创 2019-06-14 09:50:32 · 649 阅读 · 0 评论