前端基础知识
__XYQ
一位普通的大学生
展开
-
JavaScript基础(15.Dom创建标签)
1.样式操作,这里不详写,遇到时候自然就会用了2.属性操作,setAttribute需要注意下,第一个参数为属性名,第二个为属性内容,其他的不需要多讲。3.创建标签:原创 2017-12-14 19:08:33 · 601 阅读 · 0 评论 -
JavaScript基础(7.综合实例)
html>lang="en"> charset="UTF-8"> Title .hide{ display: none; } .c1{ position: fixed; left: 0; top:0;原创 2017-12-13 17:58:46 · 375 阅读 · 0 评论 -
JavaScript基础(8.全选取消实例)
接上上次的实例:html>lang="en"> charset="UTF-8"> Title .hide { display: none; } .c1 { position: fixed; left: 0; to原创 2017-12-13 18:30:46 · 215 阅读 · 0 评论 -
JavaScript基础(9.左侧菜单实例)
当前所学做出来的代码量有点大,以后的学习会使它更简单html>lang="en"> charset="UTF-8"> Title .hide { display: none; } .item .header { height: 35px;原创 2017-12-13 18:57:23 · 610 阅读 · 0 评论 -
CSS基础(12.background综合实例)
这里几乎综合了学过的所有,做出一个简单的输入界面html>lang="en"> charset="UTF-8"> Titlestyle="height: 35px; width: 400px; position: relative"> type="text" style="height: 35px; width: 370px; padding-right:原创 2017-12-12 22:46:41 · 209 阅读 · 0 评论 -
CSS基础(11.hover实用实例)
这里结合了以前的很多知识,做出一个不错的实例:html>lang="en"> charset="UTF-8"> Title .header{ position: fixed; right: 0; left: 0; top: 0;原创 2017-12-12 21:45:01 · 674 阅读 · 0 评论 -
CSS基础(10.overflow)
当我们要放入的图片大于div标签规定的大小时候,就要用到这里介绍的overflow,html>lang="en"> charset="UTF-8"> Title style="height: 200px;width: 300px;overflow: auto"> src="1.jpg"> style="height: 20原创 2017-12-12 17:26:54 · 191 阅读 · 0 评论 -
CSS基础(9.position深入)
继续讲解position:html>lang="en"> charset="UTF-8"> Title style="width: 50px;height: 50px;background-color: black; position: absolute;right: 0;bottom: 0;">asdf style="height: 500原创 2017-12-12 17:07:44 · 199 阅读 · 0 评论 -
CSS基础(8.position初识)
这里出现了JavaScripts的一些内容,其实不重要,理解position即可html>lang="en"> charset="UTF-8"> Titleonclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white; position: f原创 2017-12-12 16:08:16 · 189 阅读 · 0 评论 -
JavaScript基础(6.Dom间接选择器)
同样,先写个简易的HTMLhtml>lang="en"> charset="UTF-8"> Title c1 id="i1"> c2原创 2017-12-13 16:41:06 · 178 阅读 · 0 评论 -
JavaScript基础(5.Dom直接选择器)
先写一个简易的HTML,html>lang="en"> charset="UTF-8"> Titleid="i1">我是i1asdf909kafsufd先介绍下dom的方法:用Chrome浏览器的方式打开HTML,右键检查元素,就会出现这样的界面,点开console,可以在这里方便地写JS我接下来这样写,原创 2017-12-13 16:08:02 · 187 阅读 · 0 评论 -
JavaScript基础(1.介绍)
开始介绍JavaScript1.首先,它和Java没有丝毫关系,恰好名字有部分重合2.它也是一门编程语言,如同pythoy3.它存在于HTML的标签内,也可以创建一个js文件写入代码使用时候即可4.浏览器自带它的解释器来一个小实例了解下:html>lang="en"> charset="UTF-8"> Title666type="原创 2017-12-12 23:01:32 · 260 阅读 · 0 评论 -
JavaScript基础(14.输入框实例)
这里做了一个简单是实例,不过有两种方法,一种写几十行代码,一种只需要一行,不过,各有优缺点吧html>lang="en"> charset="UTF-8"> Titlestyle="width: 500px; margin: 0 auto;"> id="i1" onfocus="Focus();" onblur="Blur();" type="text"原创 2017-12-14 18:52:41 · 1086 阅读 · 0 评论 -
JavaScript基础(13.Dom内容文本操作)
先随意写一个HTML:html>lang="en"> charset="UTF-8"> Titleid="i1"> 某电 百度打开Console操作,看输出即可学习:可以看出innerText只是获取文本而innerHTML可以获得包括标签,即为获取全部内容。继续:当我改变后就是这样,注意看上面的字也变原创 2017-12-14 18:02:07 · 536 阅读 · 0 评论 -
JavaScript基础(12.面向对象及原型简介)
面向对象的基本知识就不讲了:function Foo(n){ this.name = n;}var obj = new Foo("yiq"); /*这就表示创建了一个对象,注意必须要用new*/这里就创建了一个对象function Foo (name,age) { this.Name = name; this.Age = age原创 2017-12-14 17:21:24 · 147 阅读 · 0 评论 -
JavaScript基础(11.JS难点:作用域详解)
先来个其他语言的例子:不用仔细考虑它是什么意思,注意一点即可:在内层大括号里面定义了一个string型的name变量,却在大括号外面用它,因此会报错。我们继续:在Python中:情况一可以运行,而情况二会出错。到底是为什么呢?这里用简单的一句话来解释就可以:在其他语言中是作用域以块({})为单位的,在Python里面作用域是以函数作为单位的。原创 2017-12-14 16:31:52 · 1178 阅读 · 1 评论 -
JavaScript基础(10.函数与序列化、转义)
1.普通函数: function func(){}2.匿名函数:(即没有名字) setInterval(function(){console.log(666);}, 5000)3.自执行函数: (function(arg){ console.log(arg); })(1); /*定义了一个函数,当解原创 2017-12-14 13:04:00 · 202 阅读 · 0 评论 -
JavaScript基础(4.for循环与if)
for循环有两种:原创 2017-12-13 12:09:03 · 289 阅读 · 0 评论 -
JavaScript基础(3.数组与字典)
上图:下面是字典操作:(字典和python没什么区别)原创 2017-12-13 09:40:46 · 427 阅读 · 0 评论 -
JavaScript基础(2.变量与数据类型)
一.变量定义如同python,可以直接写,如:name = "yiqing"不过,这样的写法默认全局变量想写局部变量,要加上var,如:var i = document.getElementById("user");全局变量一般很少,建议使用var,仔细考虑后再决定是否去掉var比如: name = "yiqing"; functio原创 2017-12-13 08:27:15 · 247 阅读 · 0 评论 -
CSS基础(7.初识margin)
html>lang="en"> charset="UTF-8"> Title .header{ height: 38px; background-color: #dddddd; line-height: 38px; } style="margin: au原创 2017-12-12 15:15:21 · 165 阅读 · 0 评论 -
CSS基础(6.display)
html>lang="en"> charset="UTF-8"> 题目style="background-color: brown; display: inline">它默认为块级标签,这里强行改为行内标签style="background-color: greenyellow; display: block">它默认为行内标签,这里强行改为块级标签style="ba原创 2017-12-12 15:15:01 · 172 阅读 · 0 评论 -
HTML基础(5. 下拉框)
html>lang="en"> charset="UTF-8"> Title<!--多行输入要用textarea标签它设置默认值直接放在中间就好,不用value="xx"-->name="text"><!--下拉框,select标签,里面的属性和前面的有相似之处,自行体会size尺寸,multiple为可多选-->name="job" size="10" mul原创 2017-12-11 08:01:21 · 836 阅读 · 0 评论 -
HTML基础(3.3 input)
通过上面的学习,这里我做了一个小工具,利用提交表单访问搜狗,模拟了一个搜索引擎html>lang="en"> charset="UTF-8"> Titleaction="https://www.sogou.com/web?"> type="text" name="query"/> type="submit" value="搜索"/>原创 2017-12-10 17:56:30 · 188 阅读 · 0 评论 -
HTML基础(3.2 input)
继续,完善后台html>lang="en"> charset="UTF-8"> Title action="http://localhost:8888/index" method="get"> type="text" name="user" \> type="text" name="email" \>原创 2017-12-10 17:05:49 · 351 阅读 · 0 评论 -
HTML基础(3.1 input)
本文可能有部分内容初学者看不懂,我用了python的tornado模块,为了造一个后台import tornado.ioloopimport tornado.webclass MainHandler(tornado.web.RequestHandler): def get(self): print(111) self.write("GET"原创 2017-12-10 16:38:33 · 316 阅读 · 0 评论 -
HTML基础(4.input其他)
INPUT系列:先来个简单的单选框,适应下:html>lang="en"> charset="UTF-8"> Title 请选择性别 男:type="radio" name="sex" value="1"/> 女:type="radio" name="sex" value="2"/>原创 2017-12-11 08:00:57 · 234 阅读 · 0 评论 -
HTML基础(2.a,p,h,span,div)
html>lang="en"> charset="UTF-8"> Titlehref="http://www.baidu.com">一 清href="http://www.baidu.com">一 清这样的浏览器无法分辨是标签还是内容 ,可以用 <xx> 还有很多这样的,不过那些图标不常用,原创 2017-12-10 15:38:14 · 1875 阅读 · 0 评论 -
HTML基础(1.head属性)
这里还是一个实例分析介绍:html><!--第一行通常不变,类似HTML这种格式,html标签 yiqing 注意,整个文件里只能有一个html标签 -->lang="en"><!-- 这里是标签内部,可以写属性,注释不是#或者//,而<!-- 同样,一个人也只能有一个脑子(head)和一个身子(body) head 里只有一个title可见,其他都不可见-->原创 2017-12-10 12:38:54 · 809 阅读 · 0 评论 -
CSS基础(1.选择器)
先来一个小例子,告诉你什么是CSShtml>lang="en"> charset="UTF-8"> Titlestyle="background-color: gold; height: 66px;">1style="background-color: olivedrab; height: 66px;">1接下来我们就深入了解:原创 2017-12-11 11:03:57 · 824 阅读 · 0 评论 -
HTML基础(6. 超链接与锚点)
html>lang="en"> charset="UTF-8"> Titlehref="http://www.baidu.com" target="_blank">百度<!--下面这里是锚点的设置锚点,就是当你的网页很长的时候,点击某个地方就能跳转到某个位置-->href="#i1">第一章href="#i2">第二章href="#i3">第三章hre原创 2017-12-11 08:01:38 · 412 阅读 · 0 评论 -
HTML基础(7. 图片)
html>lang="en"> charset="UTF-8"> Titlehref="http://www.baidu.com"> src="bg.gif" title="我的图片" style="height: 200px;width: 200px;" alt="图片"> <!--alt是当找不到图片位置时候,在图片位置显示的文字,src=是原创 2017-12-11 08:33:10 · 148 阅读 · 0 评论 -
HTML基础(8. 列表)
html><!--这次介绍列表,这里了解就好,因为CSS里可以做更好的-->lang="en"> charset="UTF-8"> Title 第一 第二 第三 第四 第一 第二 第三 第四 xxx func static int def原创 2017-12-11 08:45:25 · 157 阅读 · 0 评论 -
CSS基础(5.float应用实例)
html>lang="en"> charset="UTF-8"> Title .header{ height: 40px; line-height: 40px; background-color: gold; } style="margin: auto"原创 2017-12-12 15:14:26 · 279 阅读 · 0 评论 -
CSS基础(4.float详解)
这一节是你能否写成网页的关键:html>lang="en"> charset="UTF-8"> Titlestyle="width: 20%; background-color: red">666style="width: 80%; background-color: green">666可以看出,这里我想让一行前20%红色,后80%绿色,请原创 2017-12-12 15:14:09 · 185 阅读 · 0 评论 -
CSS基础(3.边框设置)
html>lang="en"> charset="UTF-8"> Titlestyle="border: 5px solid red">666style="border: 5px dotted green">666<!--这里用border-left,border-right,border-top,border-bottom就可以设置边框左右上下,不输入方向的话默原创 2017-12-12 15:13:48 · 473 阅读 · 0 评论 -
CSS基础(2.创建CSS文件)
如图html>lang="en"> charset="UTF-8"> Title <!--可以将这里的style标签内的内容放在一个CSS文件中, 然后,用如下这种方式引用--> rel="stylesheet" href="commons.css" /> class="c1 c2" style="color: pink">asdf原创 2017-12-12 15:13:37 · 5403 阅读 · 0 评论 -
HTML本质介绍(利用socket简单解释)
HTML本质(一)1.HTML就是一个人赤裸裸站在这里,CSS就是给这个人穿上衣服,JS让这个人能动能走2.HTML有很多标签,不过,有些可能一生不用,常用的只有20个3.CSS里有几种衣服,颜色,位置,等等4.本质上就是PYTHON的SOCKET服务端,而浏览器本质上就是SOCKET客户端,这里我在python后面会讲到5.这里导入一个简单的socket模块进行分析(看不懂的原创 2017-12-10 10:14:57 · 3059 阅读 · 0 评论 -
HTML基础(10. 其它)
html>lang="en"> charset="UTF-8"> Title 登录 for="username">用户名: id="username" type="text" name="user"/> <!--for和id属性绑定label和input 通俗来讲,就是点击用户名:这里后,会自动跳转到输入-->原创 2017-12-11 09:48:07 · 166 阅读 · 0 评论 -
HTML基础(9.2 表格)
html><!--这次介绍标准表格上篇是随意的介绍,这里是标准的写法thead表示表头,tbody表示表内容-->lang="en"> charset="UTF-8"> Titleborder="1"> 表头1 表头2 表头3 表头4原创 2017-12-11 09:17:10 · 183 阅读 · 0 评论