部分资源地址 绿叶学习网
HTML
一个HTML文档由4个基本部分组成：
- ① 一个文档声明：<!DOCTYPE HTML>
- ② 一个html标签对：<html></html>
- ③ 一个head标签对：<head></head>
- ④ 一个body标签对：<body></body>
html5是向下兼容的文档，用sublime text创建方法： html:5 + tab 或者 ! + tab
一般来说，只有6个标签能放在<head>标签内：
① <title>；② <meta>；keywords description author copyright
③ <link>；④ <style>；⑤ <script>
meta标签有两个重要的属性name和http-equiv。
实体： “<” 和 “>” 的字符实体为 < 和 >空格“ ”，在前端界又称为“牛逼SP”
语义化可以给我们带来什么样的好处呢？
1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。
<hr>标签，添加水平横线 <br>换行
HTML元素根据表现形式，可以分为2类：
- （1）块元素（block）；
- （1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
- （2）块元素内部可以容纳其他块元素或行元素；
- （2）行内元素（inline）；行内元素默认显示状态可以与其他行内元素共存在同一行。
任何HTML元素都属于这两类中的其中一类。
ul元素内部的子元素只能是li元素，不能是其他元素，无序列表列表项符号由list-style-type属性定义，到时候应该摒弃type属性
<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">
title属性的值往往都是跟alt属性的值相同，一个是给读者用户看，一个是给搜索引擎看。
<a href="链接地址" target="目标窗口的打开方式">超链接文字</a> 一般情况下，target只用到“_self”和“_blank”这两个属性值
超链接根据链接对象的不同分为：
（1）外部链接
（2）内部链接：a.内部页面链接（同域名下面）；b.（目录）；
表单元素不一定都要放在form标签内。对于要与服务器进行交互（也可以说是跟网站后台进行交互）的表单元素就必须放在form标签内才有效
焦点：<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed>
“ ./ ” 表示当前文件所在目录下,“ ../ ” 表示当前文件所在目录下的上一级目录,比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片
<!DOCTYPE HTML>
<html>
<head>
<!--网页关键字-->
<meta name="keywords" content="绿叶学习网"/>
<!--网页描述-->
<meta name="description" content="绿叶学习网是一个富有活力的技术学习网站"/>
<!--本页作者-->
<meta name="author" content="helicopter">
<!--版权声明-->
<meta name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则将追究法律责任。"/>
<!-- 编码 -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- 自动跳转 -->
<!-- <meta http-equiv="refresh" content="6;url=http://www.baidu.com"/> -->
<link rel="stylesheet" type="text/css" title="temp" href="/temp.css/">
<style type="text/css">
</style>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<br/> <!-- 换行标签是自闭合标签 ，其中br指的是“break（换行）”。 -->
<h6>这是六级标题</h6>
<strong>这是粗体文本</strong><br/>
<i>斜体文本</i><br/>
<cite>斜体文本</cite><br/>
<!-- 对文本进行斜体设置，尽量用<em>标签 -->
<em>斜体文本</em>
<p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
<p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>
<!-- 学了CSS之后，对于删除线效果，一般采用CSS实现，极少使用<s>标签实现。 -->
<p><s>原价:￥6.50/kg</s><br><strong>现在仅售：￥4.00/kg</strong></p>
<hr/>
<p>欧元符号：€</p>
<p>英镑符号：£</p>
<p>方式2</p>
<p>欧元符号：€</p>
<p>英镑符号：￡</p>
<hr>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Ajax</li>
<li>SEO</li>
<li>ASP.NET</li>
</ol>
<hr>
<ul>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
<p>定义列表</p>
<dl>
<dt>HTML</dt>
<dd>制作网页的标准语言，控制网页的结构</dd>
<dt>CSS</dt>
<dd>层叠样式表，控制网页的样式</dd>
<dt>JavaScript</dt>
<dd>脚本语言，控制网页的行为</dd>
</dl>
<!-- tr，即“table row（表格行）”。td，即“table data cell（表格单元格）”。 -->
<table>
<caption>表格标题</caption>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
<hr>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<p>内部链接</p>
<div>
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
<a href="#article">推荐文章</a><br />
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="music">
<h3>推荐音乐</h3>
<ul>
<li>林俊杰-被风吹过的下图</li>
<li>曲婉婷-在我的歌声里</li>
<li>许嵩-灰色头像</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系统</li>
<li>复仇者联盟</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>朱自清-荷塘月色</li>
<li>余光中-乡愁</li>
<li>鲁迅-阿Q正传</li>
</ul>
</div>
<hr>
<a href="void:"><p>如果您对我任何意见和建议，请发邮件给我们</p>
<form name="form1" action="mailto:1096221710@qq.com" method="post"></form></a><hr>
<div id="main">
<h3>springlee网</h3>
<iframe src="http://www.baidu.com" width="400px" height="300px" scrolling="no"></iframe>
</div>
</body>
<script type="text/javascript">
</script>
</html>CSS
在HTML中引入CSS共有3种方式：
- （1）外部样式表；
<linkhref="index.css"rel="stylesheet"type="text/css"/> - （2）内部样式表；
<styletype="text/css">p{color:Red;}</style> - （3）内联样式表；
<pstyle="color:Red; ">绿叶学习网</p>
- （1）外部样式表；
选择器 { 属性:值; 属性:值; 属性:值;}
height:auto，是指根据块内内容自动调节高度。height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。p{color:red !important;} //设置具有最高权值
我们可以使用CSS的来控制文本首行的缩进。在CSS中，使用控制文本的水平方向的对齐方式：左对齐、居中对齐、右对齐。边框CSS样式有一个简洁的写法： border:1px solid gray;
定义这四个伪类，必须按照“link、visited、hover、active”“love hate”
-
line-height 设置文字的行高，如：line-height:24px;
-
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
-
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
-
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居
- 盒子宽度 = width + padding左右 + border左右
margin相关技巧
1、设置元素水平居中： margin:x auto;
2、margin负值让元素位移及边框合并
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：
1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
margin-top 塌陷
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：
1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：
- relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
- absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
- fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
- static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
- inherit 从父元素继承 position 属性的值
- background-color 设置背景颜色
- background-image 设置背景图片地址
- background-repeat 设置背景图片如何重复平铺
- background-position 设置背景图片的位置
- background-attachment 设置背景图片是固定还是随着页面滚动条滚动
各种居中
文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center来实现
定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中
垂直居中
父元素高度确定的单行文本
height:100px;
line-height:100px; //上下参数一样
隐性改变display类型
1. position : absolute
2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width和 height 了，且默认宽度不占满父元素。
看到一张页面，先不要被绚丽的CSS效果所打扰，重点是看它的HTML结构和语义化 少用div
让CSS3样式兼容，需要将某些样式加上浏览器前缀：
-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
h5新增的主要语义化标签如下：
1、header 页面头部、页眉
2、nav 页面导航
3、article 一篇文章
4、section 文章中的章节
5、aside 侧边栏
6、footer 页面底部、页脚
JavaScript
js作用：
1、动态改变页面内容
2、动态改变网页的外观
3、验证表单数据
4、响应事件
什么叫“脚本语言”？
- （1）它不需要编译成二进制，以文本形式存在；
- （2）脚本语言一般都需要其他语言的调用执行，不能独立运行。
-
JavaScript在HTML的引用共有4种：
- （1）页头引入（head标签内）；<script type="text/javascript">……</script>
- （2）页中引入（body标签内）；
- （3）元素事件中引入（标签属性中引入）；
<input type="button"onClick="alert('绿叶学习网')"value="按钮"/> - （4）引入外部JS文件；<script src="js/index.js" type="text/javascript"></script>
调试程序的方法
1、alert
2、console.log
3、document.title
JavaScript数据类型有2大分类：一是“基本数据类型”，二是“特殊数据类型”。
其中，基本数据类型包括以下3种：
- （1）数字型（Number型）：如整型84，浮点型3.14；
- （2）字符串型（String型）：如"绿叶学习网"；
- （3）布尔型（Boolean型）：true或fasle；
特殊数据类型有3种：
- （1）空值（null型）；
- （2）未定义值（undefined型）；
- （3）转义字符；
- null不等同于空的字符串（""）或0，因为空的字符串（""）或0是存在的，但是null表示其不存在的。
根据个人的开发经验中，只需要记忆\n、\'、\"这3个就已经够初学者走很远了
alert("欢迎您来到\"绿叶学习网\"！");
break语句与continue语句的主要区别是：break是彻底结束循环，而continue是结束本次循环
常用的函数调用方式有4种：
（1）简单调用； alertSum();
（2）在表达式中调用； document.write(isLeapYear(2015));
（3）在事件响应中调用； <input type="button"onclick="alertMes()"value="提交"/>
（4）通过链接调用；<a href="javascript:函数名"></a>
创建日期对象
vardt1 =newDate("2015-5-3");vardt2 =newDate("May 3,2015");vardt3 =newDate("2015/5/3");
setTimeout()、 clearTimeout() 设置或取消“一次性”执行的定时器 setInterval()、clearInterval() 设置或取消“重复性”执行的定时器
在JavaScript中，可以通过以下2种方式来选中指定元素：
（1）getElementById()；
（2）getElementsByName()；
数组是什么？
在JavaScript中，我们可以使用“数组”来存储一组“相同数据类型”的数据结构。
在JavaScript中我们可以使用innerHTML和innerText这2个属性很方便地获取和设置某一个元素内部子元素或文本。
innerHTML属性被多数浏览器所支持，而innerText只能被IE、chrome等支持而不被Firefox支持。
JavaScript操作CSS样式 obj.style.属性名;
JavaScript的DOM操作、事件操作，你就算把绿叶学习网翻烂都要把这些记住，重中之重。网页动态标题<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> //定义全局变量，用于标识 var flag = 0; window.onload = function () { //定时器 setInterval("titleChange()", 1000); } //定义函数 function titleChange() { if(flag==0) { document.title = "★☆★绿叶学习网★☆★"; flag = 1; } else { document.title = "☆★☆绿叶学习网☆★☆"; flag = 0; } } </script> </head> <body> </body> </html>
JavaScript的事件很多，包括5大部分：
- （1）鼠标事件；
- （2）键盘事件；
- （3）表单事件；
- （4）编辑事件；
编辑事件有3种：
- （1）复制事件oncopy；
- （2）剪切事件oncut；
- （3）粘贴事件onpaste；
- （5）页面相关事件；
jQuery
jQuery，顾名思义，也就是JavaScript和Query（查询），即辅助JavaScript开发的库
JQuery加载页面的三种方法：
1.$(document).ready(function(){});
2.$(function(){});
3.jQuery(function($){});
页面载入事件
在jQuery中，对于页面载入事件，我们使用$(document).ready()方法来替代JavaScript中的window.onload方法。
$(function(){//代码部分})
在jQuery中，基本选择器共有：
- （1）元素选择器；
- （2）id选择器；
- （3）class选择器；
- （4）群组选择器；
- （5）*选择器
在jQuery中常见的伪类选择器分为以下6种：
- （1）简单伪类选择器；
- （2）子元素伪类选择器；
- （3）可见性伪类选择器；
- （4）内容伪类选择器；
- （5）表单伪类选择器；
- （6）表单属性伪类选择器；
属性操作
$().attr("属性名")//获取属性
$().attr("属性","属性值")//设置属性
$().removeAttr("属性");//删除属性// 获取div的样式 $("div").css("width"); $("div").css("color"); //设置div的样式 $("div").css("width","30px");
内容操作
在jQuery中，关于元素内容操作共有2组方法：
- （1）html()和text();
- （2）val();
其中html()和text()用于操作普通标签，而val()用于操作表单标签。
$().width()//获取元素的宽度$().width(n)//设置元素的宽度，n是一个整数，表示npx$().height()//获取元素的高度$().height(n)//设置元素的高度，n是一个整数，表示npx
插入节点
在jQuery中，常见插入节点的方法共有4组：
- （1）append()和appendTo()；
- （2）prepend()和prependTo()；
- （3）before()和insertBefore()；
- （4）after()和insertAfter()；
一、显示和隐藏
在jQuery中，如果我们想要实现元素的显示和隐藏，可以使用2组方法：
- （1）show()和hide()；
- （2）toggle()；
二、淡入和淡出
在jQuery中，如果我们想要实现元素的淡入淡出这种渐变效果，有3组方法：
- （1）fadeIn()和fadeOut()；
- （2）fadeToggle()；
- （3）fadeTo()；
三、滑上和滑下
在jQuery中，如果我们想要实现元素的滑动效果，也有2组方法：
- （1）slideUp()和slideDown()；
- （2）slideToggle()；
四、自定义动画
在jQuery中，对于自定义动画，我们可以使用animate()方法来实现。对于自定义动画，我们分为2种形式：（1）简单动画；（2）累积动画。
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用
// event.stopPropagation(); // event.preventDefault(); // 合并写法： return false;
JSON
JSON，全称“JavaScript Object Notation（JavaScript对象表示法）”，起源于JavaScript的对象和数组JSON，说白了就是JavaScript用来处理数据的一种格式，这种格式非常简单易用。
JSON，大部分都是用来处理JavaScript和web服务器端之间的数据交换，把后台web服务器的数据传递到前台，然后使用JavaScript进行处理，例如ajax等。
JSON结构共有2种：
- （1）对象结构；
- （2）数组结构；
-
一、JSON对象结构
对象结构是使用大括号“{}”括起来的，大括号内是由0个或多个用英文逗号分隔的“关键字:值”对（key:value）构成的。
var
jsonObj =
{
"键名1"
:值1,
"键名2"
:值2
}
从JSON中读数据
jsonObj.key
jsonObj[
"key"
]
向JSON写数据
jsonObj.key = 值;
jsonObj[
"key"
] = 值;
delete
jsonObj.key;
使用for…in…循环来遍历JSON对象中的数据
二、JSON数组结构
JSON数组结构是用中括号“[]”括起来，中括号内部由0个或多个以英文逗号“,”分隔的值列表组成。
语法：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var
arr =
[
{
"键名1"
:值1,
"键名2"
:值2
},
{
"键名3"
:值3,
"键名4"
:值4
},
……
]
|
CSS3
JS == Android
CSS3浏览器私有前缀 私有前缀 对应的浏览器 -webkit- chrome和safari -moz- Firefox -ms- IE -o- opera border-radius:10px;-webkit-border-radius:10px;/*兼容chrome和Safari*/-moz-border-radius:10px;/*兼容Firefox*/-ms-border-radius:10px;/*兼容IE*/-o-border-radius:10px;/*兼容opera*/
有插件
本地存储分为cookie，以及新增的localStorage和sessionStorage
181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
