![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web
文章平均质量分 54
晨识草
同样都是碳
展开
-
JavaScript(1)
1.getElementByIdDOM是一棵树,节点树。元素节点、文本节点、属性节点。 例子:<p id="text">This is text<p>其中p是元素节点,id是属性节点,”This is text”是文本节点。文本节点总是被包含在元素节点的内部,但并非所有的元素节点都包含有文本节点。属性节点总是被包含在元素节点当中,因为常常被放在起始标签中。js区别字母的大小写,所以需要注意getE原创 2017-04-07 15:40:29 · 242 阅读 · 0 评论 -
简单个人网站
注:参考书《网页开发手记》代码结构图 1.index.html<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <link rel="stylesheet" href="../css/index.css" /></head><body> <div id="top"> <div i原创 2017-07-30 19:26:10 · 6124 阅读 · 2 评论 -
JS学习(7)----Array
1.Array(1)数组是多个值的组合在js中,数组中的元素类型可以不同。在js中数组的类型是object。 用于测试的index.html为:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"></head><body> <p>The result is:</p> <p id="test"></p原创 2017-07-18 16:43:32 · 274 阅读 · 0 评论 -
JS学习(8)----For和Errors
1.For循环在JS中for循环和while循环可以和C++中一样,但是for循环还有另外一种方式可以用:var person = { firstName = "John"; lastName = "Smith": age = 65;};var x;var text = "";for (x in person) { text += person[x] + "原创 2017-07-22 10:22:48 · 299 阅读 · 0 评论 -
JS学习(9)----JS Functions
JS Functions1.关于函数的定义(1)如果只是声明了函数,在没有调用之前,函数不会执行。函数的声明,如下:function myFunction(p1, p2) { ......}注:参数不需要写明类型,这一点与C++不同。(2)函数表达式函数也可以作为表达式 如下:var x = function(a,b) {return a+b}; // a+b后面的分号可要可不要,但是括原创 2017-07-22 19:44:00 · 300 阅读 · 0 评论 -
JS学习(10)----DOM
1.DOM是什么DOM: Document Object Model 2.DOM 方法如前面经常使用的getElementById(“idName”);document.getElementById("test").innerHTML = "Hello";其中的getElementById是HTML DOM的方法,而innerHTML是HTML DOM的属性。 注:innerHTML可以改变任意原创 2017-07-23 08:56:36 · 309 阅读 · 0 评论 -
JS学习(11)----animation
1.在js中修改css样式事件可以在三种情况下发生,分别是: (1)在页面加载的时候 (2)在input区内容改变的时候 (3)点击 下面的栗子是(1)和(3)的结合,注意表达式中添加了style,另外需要注意的是在css中属性名称采用的格式是-(横杆),但是在js中使用的是骆驼式命名法。 index.html<!DOCTYPE html><html lang="en"><head>原创 2017-07-23 17:47:27 · 1659 阅读 · 0 评论 -
JS学习(12)----events
1.onclickonclick是鼠标点击,在前面的学习中已经多次用到,大多数情况下是用在图片或者是button。 (1)栗子1:<p id="demo">This is a paragraph.</p><button id="test">Click Me</button>document.getElementById("test").onclick = myFunction;function原创 2017-07-24 09:50:07 · 212 阅读 · 0 评论 -
JS学习(13)----eventlistener
事件监听器的使用eventListener的使用与前面事件的处理非常的相似,需要注意在事件监听器中事件的前缀“on”需要去掉,如onclick,在这里应该是click,onmouseover在这里是mouseover 用前面文章中的一个栗子做示范:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"></head><b原创 2017-07-24 10:48:38 · 544 阅读 · 0 评论 -
JS学习(14)----Nodes
1.Node Navigation在js中通过一个节点得到另一个节点,可以采用下面的属性:parentNodechildNodes[nodeNum]firstChildlastChildnextSiblingpreviousSibling 可以通过以下三种方法获取节点的内容<p id="demo">This is a paragraph.</p>(1)document.getElem原创 2017-07-25 09:47:54 · 838 阅读 · 0 评论 -
CSS之position
static,fixed,relative,absolute下面将用例子解释这四者之间的不同。 static是默认地定位; relative是相对自己原本static的位置进行偏移,偏移的大小有top/left/right/bottom以及margin/padding决定 absolute是在相对其祖辈的固定位置 fixed是相对整个浏览器窗口的固定定位1.static在static定位的情原创 2017-07-26 09:49:25 · 304 阅读 · 0 评论 -
js学习(15)----continue和label
break和continue在之前接触到的内容中,break和continue是单独使用,但是事实上,在js中break和continue可以和label标签一起使用,是的break和continue可以跳转到想要的位置 举个例子:<!DOCTYPE html><html> <head> </head> <body> <p>I am aim at test原创 2017-08-25 08:08:57 · 381 阅读 · 0 评论 -
js学习(16)----函数声明和函数作为参数
1.函数声明和函数表达式函数声明需要被调用才会执行相应的内容,而函数表达式则相当于调用了函数。 如下:// 这是函数声明,没有看到;号function sum(num1, num2) { // 函数体}// 这是函数表达式var result = function(num1, num2) { // 函数体}2.声明提升(function declaration hoisti原创 2017-08-25 20:52:07 · 1534 阅读 · 0 评论 -
WEB标准要求
注:来自刘杰的《Web标准设计》一书web标准要求1.代码质量(1)使用了正确的DOCTYPE吗? (2)使用了正确的字符集吗? (3)使用了合法的(X)HTML吗? (4)使用了合法的CSS吗? (5)用到了那些CSS Hack? (6)使用了多余的class或者id吗? (7)代码的语义结构是够正确? (8)是否有坏掉的链接? (9)在页面和脚本大小的影响下,站点的速度如何?原创 2017-07-09 15:44:48 · 320 阅读 · 0 评论 -
JS学习(6)----Math And Random
1.Math一些常用的数学方法,包括随机数,绝对值等等。(1)Math.PIPI = 3.141592653589793(2)Math.round(num)四舍五入取整数Math.round(1.2); 1Math.round(1.5); 2(3)Math.pow(n, e)第一个参数是基数,第二个参数是指数Math.pow(2,3); // 8(4)Math.sqrt(num)开平方根M原创 2017-07-18 09:48:20 · 244 阅读 · 0 评论 -
JS学习(5)----Numbers
1.Numbersjs中的number基本是64位的单精度浮点数 NaN和Infinity都是Number2.Number Methods(1)toString()var n = 123;n.toString();(2)toExponential(p)将数字保留为指数形式,即科学计数法的形式,参数p是保留的小数点的位数var n = 12.345;n.toExponential(3); //原创 2017-07-18 09:20:00 · 967 阅读 · 0 评论 -
HTML Responsive Web Page
注:参考网站 https://www.w3schools.comHTML Responsive Web Pageindex.html<!DOCTYPE html><html> <head> <link rel="stylesheet" href="style.css"> <title>Responsive web page</title> <原创 2017-07-12 08:27:03 · 1255 阅读 · 0 评论 -
简单网页Layout实例
注:来自https://www.w3schools.com。仅仅是个人学习笔记,不含过多个人思考。题目:简单的网页layout布局 网页的简单布局如图所示一个简单的html设置为:<!DOCTYPE html><html><head> <link rel="stylesheet" href="style.css"> <meta lang="utf-8"> <title原创 2017-07-11 20:39:12 · 797 阅读 · 0 评论 -
典型的html5布局
1.典型的html5布局index.html<!DOCTYPE html><html><head> <title>HTML5 Migration</title> <meta lang="en" charset="UTF-8"> <link rel="stylesheet" href="style.css"></head><body> <header>原创 2017-07-13 11:25:20 · 665 阅读 · 0 评论 -
CSS之reponsive navigation bar
responsive navigation barnavigation bar可以直接利用html的ul实现,其中,如果要实现reponsive,即当屏幕的大小发生改变的时候,navigation部分会进行自适应的变换,则需要用到如@media screen and (max-width: 900px)的设置来对不同屏幕大小的nav显示进行设置 (1)index.html<!DOCTYPE htm原创 2017-07-15 13:33:31 · 589 阅读 · 0 评论 -
CSS学习总结(1)
1.display和visibility(1)div { display: none;}div:hover { display: block;}(2)div { visibility: hidden;}div:hover { visibility: visible;}这两者本质是相同的,不同的是在运行的时候(2)尽管内容没有显示,1但是div的空间依然是保原创 2017-07-15 12:34:56 · 298 阅读 · 0 评论 -
CSS之dropdown
dropdown下拉菜单中的选项可以是文本,图片的放大或者是链接,在这里使用的是链接,但是链接是打不开的,因为仅仅是测试 index.html<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="style.css"/> <meta charset="utf-8"></head><body>原创 2017-07-15 17:49:47 · 3851 阅读 · 0 评论 -
CSS之responsive image gallery
responsive image gallery这次实例主要是练习如何讲不同的图片设置为一个栏目,并且能够根据屏幕的大小进行自适应的变换。需要注意的是,本次实例中运用到的重要的关键的内容是:float-left;box-sizing; @media screen and (max-width:700px) 本实例的显示效果为: (1)屏幕大小<=500px (2)屏幕大小500px < wi原创 2017-07-15 21:38:26 · 1141 阅读 · 0 评论 -
CSS之表单的样式
简单的表单样式此处用到了input、select,主要的类型有text、submit、date index.html<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="style.css"/> <meta charset="utf-8"> <title>Form CSS</title><原创 2017-07-16 07:38:40 · 3747 阅读 · 0 评论 -
JS学习(1)----innerHTML
(一)javascript和html联系起来(1)可以直接将Javascript写在html中 (2)一般采用<script src="aa.js"></script>将js独立为一个文件,上面这行代码可以放在head中或者是body中。(二)用js打印数据的4中方法(1)innerHTML<!--index.html--><!DOCTYPE html><html lang="en"><he原创 2017-07-16 18:27:06 · 379 阅读 · 0 评论 -
JS学习(2)----变量
1.表达式和变量(1)变量如果一个变量只是声明但是没有赋值,则它的值为undefined。 注:好的编程习惯是在js的开始部分声明所有的变量。 var x=2+3+’5’;最终的输出是x=55. 注:js中变量名称是大小写敏感的。(2)数据类型常见的数据类型如Number、String、Object、Boolean、Array等。 但是不管是什么类型的变量,声明的时候都直接使用var即可。v原创 2017-07-17 10:05:54 · 224 阅读 · 0 评论 -
JS学习(3)----Functions、Objects、variables
1.需要传入参数的函数注:与c++中的函数不同的是,c++中需要注明参数的类型,但是js不用<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>title</title></head><body> <h1>JS Function</h1> <p>Result:</p>原创 2017-07-17 14:22:15 · 263 阅读 · 0 评论 -
JS学习(4)----events和String
1.HTML事件及其处理(1)一个html页面完成加载 (2)一些输入框的内容发生改变 (3)点击事件或者是鼠标触摸事件 可以直接在html代码中对事件及进行处理,如下:<!-- <element event='some JavaScript'> --><!DOCTYPE html><html lang="en"><head> <meta charset="utf-8">原创 2017-07-17 15:21:20 · 297 阅读 · 0 评论 -
js学习(17)----callee和caller
1.arguments和calleearguments是函数内部的一个特殊的类数组对象,arguments有个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数。 举个例子:// 这是我们熟悉的裴波那契数列<script type="text/javascript"> function fib(num) { if (num <= 2) {原创 2017-08-26 08:01:14 · 336 阅读 · 0 评论