黑马程序员05-Web前端学习笔记
2017-10-24 10:41
302 查看
部分资源地址绿叶学习网
前端开发系统化学习，包括html、css、PC端及移动端布局技巧、javascript、jquery、js特效制作、ajax前后台交互等。HTML
一个HTML文档由4个基本部分组成：①一个文档声明：<!DOCTYPEHTML>②一个html标签对：<html></html>
③一个head标签对：<head></head>
④一个body标签对：<body></body>html5是向下兼容的文档，用sublimetext创建方法：html:5+tab或者!+tab一般来说，只有6个标签能放在<head>标签内：①<title>；②<meta>；keywordsdescriptionauthorcopyright③<link>；④<style>；⑤<script>meta标签有两个重要的属性name和http-equiv。
实体： “<”和“>”的字符实体为<和>
空格“ ”，在前端界又称为“牛逼SP”语义化可以给我们带来什么样的好处呢？1.更容易被搜索引擎收录。2.更容易让屏幕阅读器读出网页内容。
<hr>标签，添加水平横线<br>换行
div，即division（分区）HTML元素根据表现形式，可以分为2类：（1）块元素（block）；（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；（2）块元素内部可以容纳其他块元素或行元素；（2）行内元素（inline）；行内元素默认显示状态可以与其他行内元素共存在同一行。任何HTML元素都属于这两类中的其中一类。ul元素内部的子元素只能是li元素，不能是其他元素，无序列表列表项符号由list-style-type属性定义，到时候应该摒弃type属性网页语义结构良好，对于搜索引擎来说也是极为重要的一点。<imgsrc="图片地址"alt="图片描述（给搜索引擎看）"title="图片描述（给用户看）">title属性的值往往都是跟alt属性的值相同，一个是给读者用户看，一个是给搜索引擎看。<ahref="链接地址"target="目标窗口的打开方式">超链接文字</a>一般情况下，target只用到“_self”和“_blank”这两个属性值超链接根据链接对象的不同分为：（1）外部链接（2）内部链接：a.内部页面链接（同域名下面）；b.
1bb8b
spanstyle="">
<
link
href
=
"index.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
（2）内部样式表；（3）内联样式表；
<
p
style
=
"color:Red; "
>绿叶学习网</
p
>选择器
{属性:值;属性:值;属性:值;}height:auto，是指根据块内内容自动调节高度。height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。p{color:red!important;}//设置具有最高权值我们可以使用CSS的
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:absolute2.float:left或float:right简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以display:inline-block（块状元素）的方式显示，当然就可以设置元素的
width和height了，且默认宽度不占满父元素。看到一张页面，先不要被绚丽的CSS效果所打扰，重点是看它的HTML结构和语义化少用div让CSS3样式兼容，需要将某些样式加上浏览器前缀：-ms-兼容IE浏览器-moz-兼容firefox-o-兼容opera-webkit-兼容chrome和safarih5新增的主要语义化标签如下：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文件；<scriptsrc="js/index.js"type="text/javascript"></script>
调试程序的方法
1、alert2、console.log3、document.titleJavaScript数据类型有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>
创建日期对象
| setTimeout()、clearTimeout() | 设置或取消“一次性”执行的定时器 |
| setInterval()、clearInterval() | 设置或取消“重复性”执行的定时器 |
数组是什么？
在JavaScript中，我们可以使用“数组”来存储一组“相同数据类型”的数据结构。在JavaScript中我们可以使用innerHTML和innerText这2个属性很方便地获取和设置某一个元素内部子元素或文本。innerHTML属性被多数浏览器所支持，而innerText只能被IE、chrome等支持而不被Firefox支持。
JavaScript操作CSS样式obj.style.属性名;
JavaScript的DOM操作、事件操作，你就算把绿叶学习网翻烂都要把这些记住，重中之重。网页动态标题<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scripttype="text/javascript">
//定义全局变量，用于标识
varflag=0;
window.onload=function(){
//定时器
setInterval("titleChange()",1000);
}
//定义函数
functiontitleChange(){
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方法。在jQuery中，基本选择器共有：（1）元素选择器；（2）id选择器；
（3）class选择器；
（4）群组选择器；
（5）*选择器在jQuery中常见的伪类选择器分为以下6种：（1）简单伪类选择器；
（2）子元素伪类选择器；
（3）可见性伪类选择器；
（4）内容伪类选择器；
（5）表单伪类选择器；
（6）表单属性伪类选择器；
属性操作
//获取div的样式
$("div").css("width");
$("div").css("color");//设置div的样式
$("div").css("width","30px");
内容操作
在jQuery中，关于元素内容操作共有2组方法：（1）html()和text();（2）val();其中html()和text()用于操作普通标签，而val()用于操作表单标签。
插入节点
在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.preventDefault();
//合并写法：
returnfalse;
JSON
JSON，全称“JavaScriptObjectNotation（JavaScript对象表示法）”，起源于JavaScript的对象和数组JSON，说白了就是JavaScript用来处理数据的一种格式，这种格式非常简单易用。JSON，大部分都是用来处理JavaScript和web服务器端之间的数据交换，把后台web服务器的数据传递到前台，然后使用JavaScript进行处理，例如ajax等。JSON结构共有2种：（1）对象结构；
（2）数组结构；
一、JSON对象结构
对象结构是使用大括号“{}”括起来的，大括号内是由0个或多个用英文逗号分隔的“关键字:值”对（key:value）构成的。这里的键名是字符串，但是值可以是数值、字符串、对象、数组或逻辑true和false。
从JSON中读数据
向JSON写数据
delete
jsonObj.key;
使用for…in…循环来遍历JSON对象中的数据
二、JSON数组结构
JSON数组结构是用中括号“[]”括起来，中括号内部由0个或多个以英文逗号“,”分隔的值列表组成。语法：CSS3
css3性能从原理上来说的话CSS==iOSJS==Android
| 私有前缀 | 对应的浏览器 |
|---|---|
| -webkit- | chrome和safari |
| -moz- | Firefox |
| -ms- | IE |
| -o- | opera |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 黑马程序员之ASP.NET学习笔记：新建Web网站与新建Web应用程序的区别
- web前端学习笔记---实现雪花飘落的效果
- WEB前端学习笔记 五
- Web前端CSS框架—Bootstrap学习笔记
- web前端学习笔记
- 【Web前端学习笔记】Web前端框架_JQuery
- Web前端性能测试与优化 学习笔记 V0.2
- 黑马程序员_JAVA 学习笔记20 WEB篇7
- Web前端学习笔记(1)-Html5与Html4的区别
- 【Web前端学习笔记】CSS3_常用属性,选择器,盒子模型
- Web前端的学习笔记——开篇
- Web前端学习笔记(3)-html5新增表单元素
- WEB前端学习笔记 四
- web前端学习笔记(CSS盒子的定位)
- web前端学习笔记---实现雪花飘落的效果
- 黑马程序员_JAVA 学习笔记27 WEB篇14
- web 前端学习笔记（1）
- 每天成长一点---WEB前端学习入门笔记
- 【Web前端学习笔记】AJAX_原生AJAX,JQuery下的AJAX,跨域
- Web前端学习笔记：Bootstrap框架