技能学习部分：
1.需要熟练掌握HTML标签以及CSS各个常用属性。
2.掌握CSS3 常用属性
3.掌握jquery的基本用法，对于JS基本逻辑语句需要熟练掌握
上文 【FE前端学习】第二阶段任务-提高
一、HTML标签
- HTML是一种标记语言，标记语言是一套标记标签，标记标签是用尖括号包围的关键词，以开始标签和结束标签成对存在，如<b>和</b>
- HTML属性，给元素提供了更多信息，在开始标签中以名称/值的形式出现，如下例的href属性
<a href="http://www.w3school.com.cn">This is a link</a>
- HTML标题 <h1> - <h6>
HTML 水平线<hr />
HTML 注释
<!-- This is a comment -->
- HTML段落
<p>This is a paragraph</p>
- HTML换行
<br />由于关闭标签没有任何意义，因此它没有结束标签。
- HTML文本格式化
<b> 定义粗体文本。 <big> 定义大号字。 <em> 定义着重文字。 <i> 定义斜体字。 <small> 定义小号字。 <strong> 定义加重语气。 <sub> 定义下标字。 <sup> 定义上标字。 <ins> 定义插入字。 <del> 定义删除字。 - HTML编辑器，推荐使用Notepad (PC) 或 TextEdit (Mac)简单的文本编辑器
- HTML样式
内部样式表
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>
外部样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
内联样式
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
- HTML链接
<a href="http://www.cnblogs.com/flipped/"
target="_blank">Visit MyBlog!</a> - HTML图像
<img src="boat.gif"
没有闭合标签，src属性为图片地址，alt属性为当图片不能加载时的替换文本，宽高属性调整图片尺寸alt="Big Boat" width="50" height="50"> - HTML表格
<table
<tr>表示行，<td>表示列，border属性为表格边框宽度border="1"><tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> - HTML列表
<ul> <li>Coffee</li> <li>Milk</li> </ul>
无序列表始于 <ul> 标签。每个列表项始于 <li>。有序列表即把<ul>替换为<ol> - HTML块
HTML 元素被定义为块级元素(block level element)或内联元素(inline element)。块级元素在浏览器中以新的一行开始和结束例如<h1>, <p>, <ul>, <table>，内联元素如<b>, <td>, <a>, <img>
- HTML<div>元素
是块级元素，作为组合其他元素的容器，或用于文档布局
- HTML<span>元素
是内联元素，作为文本的容器，可给部分文本设置样式
- HTML表单
<form> ...input 元素 ... </form>
表单指包含文本域、下拉列表、单选框、复选框等输入信息的表单元素的区域
- HTML输入
<input type="text" name="nickname" /><input type="radio" name="sex" value="male" />type属性指定输入类型，text表示文本输入框，radio表示单选框，checkbox表示复选框，button表示普通按钮，submit表示提交按钮
- HTML框架
<frameset cols="25%,75%"><frame src="frame_a.htm"><frame src="frame_b.htm"> </frameset>
通过frame标签将几个HTML文档放在一个HTML文档中，每个文档独立于其他文档
- HTML内联框架
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0" ></iframe>
用于在网页内显示其他网页
- HTML头部
<head>是所有头部元素的容器，可以放<title>、<base>、<link>、<meta>、<script> 以及 <style>，其中<title>定义网页标题
<title>Title of the document</title>
<link>常用来连接外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style>用于定义样式信息
<style type="text/css"> body {background-color:yellow} p {color:blue} </style><meta>用于定义网页的描述关键词，便于搜索引擎索引
<meta name="description" content="这是一个个人博客" />
<meta name="keywords" content="前端,博客,个人" />
- HTML 字符实体
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。因此HTML 中的预留字符必须被替换为字符实体。如小于号写成< 或 <，在HTML源码中打10个空格，浏览器只显示1个空格，因此用 来输出更多空格
- HTML多媒体
<embed height="80" width="500" src="/i/horse.mp3"></embed>
用embed标签嵌入MP3文件
<video src="movie.ogg" controls="controls" width="320" height="240" ></video>
添加视频，control 属性供添加播放、暂停和音量控件。
- HTML5的新特性
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
二、CSS属性
- CSS 指层叠样式表 (Cascading Style Sheets)
- CSS的语法
selector {declaration1; declaration2; ... declarationN }
selector表示选择器，declaration由属性（property）和值组成h1 {color:red; font-size:14px;} - CSS高级语法
h1,h2,h3,h4,h5,h6 {color: green;}被分组的选择器共享系统的声明
- CSS派生选择器
li strong {font-style: italic;font-weight: normal;}只改变<li>标签中的strong元素的样式
- CSS id 选择器
css代码为：#red{color:red;}HTML代码为：<p
id="red">这个段落是红色。</p>同一个id 属性只能在每个 HTML 文档中出现一次
- CSS 类选择器
css代码为：.center{text-align: center}HTML代码为：<p
class="center"> This paragraph will also be center-aligned. </p>类名的第一个字符不能使用数字，类 属性可以在每个HTML中出现多次
- CSS 元素选择器
h1 {color:blue;} - CSS背景
p {background-color: gray;}body {background-image: url(/i/eg_bg_04.gif);}背景重复body{ background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-y;}背景定位body{ background-image:url('/i/eg_bg_03.gif');background-repeat:no-repeat;background-position:center;}背景固定body {background-image:url(/i/eg_bg_02.gif);background-repeat:no-repeat;background-attachment:fixed} - CSS文本
缩进文本 p {text-indent: 5em;}文本居中对齐 h1 {text-align:center}文本装饰(使链接无下划线) a {text-decoration: none} - CSS字体
按给出的字体顺序，选择候选字体p {font-family: Times, TimesNR, 'New Century Schoolbook',Georgia, 'New York', serif;}不同的style p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}不同的粗细 p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;}字体大小 h1 {font-size:60px;}1em=父元素的字体大小 h1 {font-size:3.75em;}所有字体属性在一个声明里，其中30px表示line-height行高 p{font:italic bold 12px/30px arial,sans-serif;} - CSS 链接
链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
- CSS列表
无序列的小圆点 ul.circle {list-style-type:circle;} 无序列的小方块 ul.square {list-style-type:square;} 有序列的大写罗马数字 ol.upper-roman {list-style-type:upper-roman;} 有序列的小写字母 ol.lower-alpha {list-style-type:lower-alpha;}无序列的图片 ul li {list-style-image : url(xxx.gif)}简写样式，inside代表标志出现在列表项内容内部li {list-style : url(example.gif) square inside} - CSS表格
td{height:50px;设置高度vertical-align:bottom;文本竖直对齐padding:15px; 表格内边距} table, td, th{border:1px solid purple;表格边框颜色background-color:gray;表格背景颜色color:white;表格文字颜色} - CSS框模型概述
外边距 margin: 0; 内边距 padding: 0;
分别设置上下左右的内边距 padding: 10px 0.25em 2ex 20%;
- CSS 定位
position 属性值的含义：
- static
- 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative
- 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute
- 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 fixed
- 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
- CSS 浮动
向右浮动 float:right;
清除浮动（左右两边的） clear:both;
- CSS对齐
左和右外边距设置为 "auto"，来水平对齐块元素
margin:auto
position设置左右对齐
position:absolute; right:0px;
float设置左右对齐
float:right;
- CSS分类
属性 描述 clear 设置一个元素的侧面是否允许其他的浮动元素。 cursor 规定当指向某元素之上时显示的指针类型。 display 设置是否及如何显示元素。 float 定义元素在哪个方向浮动。 position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 visibility 设置元素是否可见或不可见。 内联元素display: inline; 消失display: none; 块级元素display: block
三、CSS3常用属性
- CSS3 圆角边框
div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ } - CSS3 边框阴影
div { box-shadow: 10px 10px 5px #888888; } - CSS3 边框图片
div { border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ } - CSS3 background-size 属性
div { background:url(bg.gif); -moz-background-size:50px 100px; /* 老版本的 Firefox */ background-size:50px 100px;/* 分别代表宽度高度 */ background-repeat:no-repeat; } - CSS3 background-origin 属性
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
div { background:url(bg.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box;/* 背景图片在文本区域 */ } - CSS3 文本阴影
h1 { text-shadow: 5px 5px 5px #FF0000; } - CSS3 自动换行
p {word-wrap:break-word;} - CSS3 @font-face 规则 首先定义字体的名称（比如 myFirstFont），然后指向该字体文件
<style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9+ */ }div { font-family:myFirstFont; } </style> - CSS3 2D 转换
transform: translate(50px,100px);/* 移动到X,Y坐标 */
transform: scale(2,4);/* 拉伸到2倍宽4倍高 */
transform: skew(30deg,20deg);/* 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。 */
transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* 旋转，缩放，移动，倾斜*/
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ - CSS3 3D转换
div { transform: rotateX(120deg); /* rotateY(130deg); */ -webkit-transform: rotateX(120deg); /* Safari 和 Chrome */ -moz-transform: rotateX(120deg); /* Firefox */ } - CSS3 过渡
transition: width 2s, height 2s, transform 2s;
- CSS3 多列
div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */column-count:3;} - CSS3 动画
@keyframes myfirst { from {background: red;} to {background: yellow;} }@-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {background: yellow;} }@-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {background: red;} to {background: yellow;} }@-o-keyframes myfirst /* Opera */ { from {background: red;} to {background: yellow;} }
四、jQuery
jQuery 是一个 JavaScript 函数库。
- HTML 元素选取和操作
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
- attr() 方法用于获取属性值。
- HTML 元素添加和删除
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
- CSS 获取和设置
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
$("p").css("background-color","yellow");/*设置一个属性*/$("p").css({"background-color":"yellow","font-size":"200%"});/*设置多个属性*/
- 处理尺寸
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
- 遍历
- 祖先
- parent()
- parents()
- parentsUntil()
- 后代
- children()
- find()
- 同胞
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
- 过滤
- first()
- last()
- eq()
- filter()
- not()
- 祖先
- AJAX
- load() 方法从服务器加载数据，并把返回的数据放入被选元素中
$("#div1").load("demo_test.txt #p1"); - $.get() 方法通过 HTTP GET 请求从服务器上请求数据。
$("button").click(function(){$.get("demo_test.asp",function(data,status){alert("Data: " + data + "\nStatus: " + status);}); }); - $.post() 方法通过 HTTP POST 请求从服务器上请求数据。
$("button").click(function(){$.post("demo_test_post.asp",{name:"Donald Duck",city:"Duckburg"},function(data,status){alert("Data: " + data + "\nStatus: " + status);}); });
- load() 方法从服务器加载数据，并把返回的数据放入被选元素中
五、JS的基本逻辑语句
- 和C语言一样的比较运算符，多了一个===全等号，值和类型都相等才返回true
- 和C语言一样的逻辑运算符&&、||、!代表与或非
- 和C语言一样的？：三目运算符
variablename=(condition)?value1:value2
- 和C语言一样的if和switch语句
- 和C语言一样的for、while、break语句
- 测试和捕捉
try{adddlert("Welcome guest!");//在这里运行代码} catch(err){txt="There was an error on this page.\n\n";//在这里处理错误txt+="Error description: " + err.message + "\n\n";txt+="Click OK to continue.\n\n";alert(txt);} - 正则表达式RegExp
- test() 方法检索字符串中的指定值。返回值是 true 或 false
- exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
- compile() 既可以改变检索模式，也可以添加或删除第二个参数。
