web前端

工程认知——Web前端

Week1

一、课程概要、要求和学习方法

概要：本课程将系统地学习现代软件前端开发的实用技术，在前端技术中属于中级实用技术范畴。课程包含前端三大部分 HTML5、CSS3、JavaScript、前端框架和后端框架，循序渐进地将每一部分的实用技术结合讲解、演示，最后交予学生不断练习、掌握。课程将紧抓目前前端和后端技术的发展和现状，争取让学生在有限时间内，培养起前端和后端开发的兴趣，奠定现代前端和后端开发的技术基础，并尽可能多地掌握一些热门技术和开发技巧。

要求：

1、要求学生掌握一些简单的相关基础知识，如HTML大部分基础标签，CSS简单的基础功能和属性，JavaScript的入门知识等。课时限制，这些知识交由学生课前复习、掌握。

2、本课程为实践课，时间分为两部分。老师讲解演示用一部分，学生自由练习当次课程技术为第二部分。

3、具体课程考核参考课程教学大纲。

4、最重要的具体方法：练习，还是练习。

二、第一节：Html、Html5 基础框架

1、Html、Html5 框架

H5中可以省略的标签

<html>元素
	如果<html>元素中的第一个内容不是注释，则可以省略起始标签。 如果<html>元素后面没有紧接一个注释，则可以省略结束标签。

<head>元素
如果<head>元素为空，或者<head>元素中的第一个内容是一个HTML元素，则可以省略起始标签。 如果<head>元素后不紧跟空格字符或注释，则可以省略结束标签。

<base>元素
没有结束标签。

<link>元素
没有结束标签。

<meta>元素
没有结束标签。

<body>元素
如果<body>元素为空，或者<body>元素中第一个内容不是空格或注释，则起始标签可以省略，除非<body>元素中第一个内容是一个<meta>，<link>，<script>，<style>或者<template>元素。如果<body>元素后面不是紧跟一个注释，则结束标签可以省略。

<p>元素
如果一个<p>元素后面紧跟一个<address>，<article>，<aside>，<blockquote>，<details>，<div>，<dl>，<fieldset>，<figcaption>，<figure>，<footer>，<form>，<h1>，<h2>，<h3>，<h4>，<h5>，<h6>，<header>，<hr>，<main>，<menu>，<nav>，<ol>，<p>，<pre>，<section>，<table>，<ul>元素，或者在父元素中没有更多内容，且该父元素不是一个<a>，<audio>，<del>，<ins>，<map>，<nonscript>或<video>元素，则结束标签可以省略。

<hr>元素
没有结束标签。

<li>元素
如果一个<li>元素之后紧跟另一个<li>元素，或在父元素中没有其他更多内容，则结束标签可以省略。

<dt>元素
如果一个<dt>元素后面紧跟另一个<dt>元素或<dd>元素，则结束标签可以省略。

<dd>元素
如果一个<dd>元素后面紧跟另一个<dd>元素或<dt>元素，或者父元素中没有更多其他内容，则结束标签可以省略。

<rb>元素
如果一个<rb>元素后面紧跟一个<rb>，<rt>，<rtc>或<rp>元素，或者父元素中没有更多其他内容，则结束标签可以省略。

<rt>元素
如果一个<rt>元素后面紧跟一个<rb>，<rt>，<rtc>或<rp>元素，或者父元素中没有更多其他内容，则结束标签可以省略。

<rtc>元素
如果一个<rtc>元素后面紧跟一个<rb>或<rtc>元素，或者父元素中没有更多其他内容，则结束标签可以省略。

<rp>元素The rp element
如果一个<rp>元素后面紧跟一个<rb>，<rt>，<rtc>或<rp>元素，或者父元素中没有更多其他内容，则结束标签可以省略。

<br>元素
没有结束标签。

<wbr>元素
没有结束标签。

与<picture>元素一起使用的<source>元素。
没有结束标签。

<img>元素
没有结束标签。

<embed>元素
没有结束标签。

<param>元素
没有结束标签。

<source>元素
没有结束标签。

<track>元素
没有结束标签。

<area>元素
没有结束标签。

<colgroup>元素
如果一个<colgroup>元素之后不是紧跟一个空格或注释，则结束标签可以省略。

<col>元素
没有结束标签。

<tbody>元素
如果一个<tbody>元素中的第一个内容是一个<tr>元素，且这个<tbody>元素之后不是紧跟在一个已省略结束标签的<tbody>，<thead>，<tfoot>元素之后，则<tbody>元素的起始标签可以省略（如果这个<tbody>元素是空的，则不可以省略）。如果一个<tbody>元素之后紧跟一个<tbody>元素或者<tfoot>元素，且父元素中没有更多其他元素，则结束标签可以省略。

<thead>元素
如果一个<thead>元素之后紧跟一个<tbody>或<tfoot>元素，则结束标签可以省略。

<tfoot>元素
如果一个<tfoot>元素之后紧跟一个<tbody>元素，或者父元素中没有更多其他元素，则结束标签可以省略。

<tr>元素
如果一个<tr>元素之后紧跟另一个<tr>元素，或者父元素中没有更多其他元素，则结束标签可以省略。

<td>元素
如果一个<td>元素之后紧跟另一个 <td>或<th>元素，或者父元素中没有更多其他元素，则结束标签可以省略。

<th>元素
如果一个<th>元素之后紧跟另一个 <td>或<th>元素，或者父元素中没有更多其他元素，则结束标签可以省略。

<colgroup>元素
如果一个<colgroup>元素之后没有紧跟一个空格或注释，则结束标签可以省略。

<col>元素
没有结束标签。

<input>元素
没有结束标签。

<optgroup>元素
如果一个<optgroup>元素之后紧跟另一个<optgroup>元素，或在父元素中没有更多内容，则结束标签可以省略。

<option>元素
如果一个<option>元素之后紧跟另一个<option>元素，或者紧跟一个<optgroup>元素，或者在父元素中没有更多的内容，则结束标签可以省略。

<keygen>元素
没有结束标签。

<menuitem>元素
没有结束标签。

以上介绍的这39种元素，或是无条件省略结束标签，或是满足某一条件下可省略开始或结束标签，其省略的原则皆为不会造成文档的歧义。在实际应用中，需要多加练习才能熟练掌握，对于入门者，在无法确定某个元素的标签是否可以省略的情况下，还是建议写全，以免一旦出现错误，在标签众多的情况下排查起来比较困难。

2、最常见标签及其使用

h1--h6

p 标签

div 标签

span 标签

img 标签

3、课后任务

安装sublime Text软件，并学会使用，安装方法如下：

1、安装sublime Text软件  官网下载: http://www.sublimetext.com/3
2、按ctrl+`调出console
   粘贴以下代码到底部命令行并回车：
   import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
   
 之后操作：  
   1）重启Sublime Text 3。
   2）如果在Perferences->package settings中看到package control这一项，则安装成功。
   
3、ctrl+shift+p调出命令面板
输入pci，在出现的列表中点击 Package Control:Install Package
等待安装成功

4、ctrl+shift+p：
   输入pci，回车
   在新弹出的框中找到 emmet 双击后安装
   
5、ctrl+shift+p：
   pci，回车
   在新弹出的框中找到 emmet css 双击后安装
   
6、ctrl+shift+p：
   pci，回车
   在新弹出的框中找到  js snippets 双击后安装
   
7、安装完毕后需要退出软件，重新进入


https://packagecontrol.io/installation(这个网址主要是为了复制调出console后输入的代码)

1、编写个人介绍页面（图文并茂）

2、理解块元素、行元素

3、盒子模型

Week2

三、第二节：CSS、JS 及 H5 布局等

1、CSS初步与作用；

CSS三种位置：内联样式表、嵌入样式表、外部样式表

附：输入样式表——

可以使用css的@import声明将一个外部样式表文件输入到另外一个css文件中，被输入的css文件中的样式规则定义语句就成为了输入到的css文件的一部分，也可以使用@import声明将一个css文件输入到网页文件的<style></style>标签对中，被输入的css文件中的样式规则定义语句就成了<style></style>标签对中的语句。
<style>
   @import url(http://……)
</style>

基本语法；

标签选择：标签名、#、.

屏幕自适应

所谓文档流，DOM，指元素在排版布局的过程中，元素会自动从左到右，从上到下的流式排列。
脱离文档流呢，就是元素打乱了这个排列，或是从排版中拿走。

2、块元素与行内元素；

块元素和行内元素：

行内元素：
	只占据它对应标签的边框所包含的空间。只能容纳文本或者其他内联元素。

块元素：
	块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一行。能容纳其他块元素或者内联元素。

块级元素和内联元素的区别：

	(1).块元素，总是在新行上开始；内联元素，和其他元素在一行；
	(2).块元素，能容纳其他块元素或者内联元素；内联元素，只能容纳文本或其他内联元素；
	(3).块元素中高度，行高以及顶和底边距都可以控制；内联元素中高，行高及顶和底边距不可改变。

各自的特点：

	(1).块元素的特点：
		a.总是在新行上开始；
		b.高度、行高以及外边距和内边距都可控制；
		c.宽度默认是它容器的100%，除非设定一个宽度；
		d.他可以容纳内联元素和其他块元素。
	(2).行元素的特点：
		a.和其他元素都在同一行；
		b.高，行高及外边距和内边距不可改变；
		c.宽度就是它的文字和图片的宽度，不可改变；
		d.内联元素只能容纳文本或者其他内联元素。

常见的块元素：
		address - 地址
		blockquote - 块引用
		center - 举中对齐块
		dir - 目录列表
		div - 常用块级容易，也是css layout的主要标签
		dl - 定义列表
		fieldset - form控制组
		form - 交互表单
		h1 - 大标题
		h2 - 副标题
		h3 - 3级标题
		h4 - 4级标题
		h5 - 5级标题
		h6 - 6级标题
		hr - 水平分隔线
		isindex - input prompt
		menu - 菜单列表
		noframes - frames可选内容（对于不支持frame的浏览器显示此区块内容）
		noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
		ol - 排序列表
		p - 段落
		pre - 格式化文本
		table - 表格
		ul - 非排序列表

常见的行元素：
		a - 锚点
		abbr - 缩写
		acronym - 首字
		b - 粗体（不推荐）
		bdo - bidi override
		big - 大字体
		br - 换行
		cite - 引用
		code - 计算机代码（在引用源码的时候需要）
		dfn - 定义字段
		em - 强调
		i - 斜体
		img - 图片
		input - 输入框
		kbd - 定义键盘文本
		label - 表格标签
		q - 短引用
		samp - 定义范例计算机代码
		select - 项目选择
		small - 小字体文本
		span - 常用内联容器，定义文本内区块
		strike - 中划线
		strong - 粗体强调
		sub - 下标
		sup - 上标
		textarea - 多行文本输入框
		tt - 电传文本
		u - 下划线
		var - 定义变量

块级元素和内联元素之间的转换：
	(1).display
		块元素默认display:block;
		行内非替换元素(a,span)默认为display：inline;
		行内替换元素(input)默认为display:inline-block;
		a.display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。
		b.display:block;转换为块级元素。
		c.display:inline;转换为行内元素。
		d.display:inline-block;转换为行内块级元素。
	(2).float
		当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。
	(3).position
		当为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。
		DOM

文本格式化标签：

3、网页布局初步；

table 布局 ——>行列布局；

tableless design ——> div + css；——> 推荐使用

CSS的相对定位和绝对定位

	通常情况下，我们元素的position属性的值默认为static。就是没有定位，元素出现在正常的文档流中. 这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的，不会生效，比如你设置一个距离左边距偏移100px的声明：left:100px 那么这条声明不会起到任何效果。还有z-index属性在这时也不会生效。
  
   也就是说我们平时如果不给某元素一个position属性的声明，那么它默认的就是上述的这种情况，不过因为有了浮动，所以通常情况下我们还真不需要给元素设置position属性！

但是某些特殊的情况下，我们不得不用到position属性，那我们今天就讲讲position属性的relative和absolute值.

首先说relative ,相对定位:

  如果对某元素设置了相对定位，那么首先这个元素他会跟其它的元素一样，出现在文档流中它该出现的位置，然后，我们可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。
  有一点要注意， 在使用相对定位时，就算元素被偏移了，或完全离开了，但是他仍然占据着它没偏移前的空间,也就是说它本来的占位仍然在，它后面的元素位置不会受到影响，也不会占它的位置。
  这里值得注意的一点是：偏移可不是边距，跟边距是不一样的。


  绝对定位：position:absolute：
	被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，那这个元素到哪去了呢？它浮了起来，其实设置了相对定位relative时也会让该元素浮起来，但它们的不同点在于，相对对定位不会删除它本身在文档流中占据的那块空间，而绝对定位则会删除掉该元素在文档流中的位置，完全从文档流中抽了出来，我们可以通过z-index来设置它们的堆叠顺序 。
	
	那么绝对定位是如何定位的呢？首先，如果它的父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed）

4、JS 初步：

JS放在head和放在body中的区别

过去说：
    在HTML body部分中的JavaScripts会在页面加载的时候被执行。
    在HTML head部分中的JavaScripts会在被调用的时候才执行。

但现在浏览器并不是这样的！

    放在任何地方都是按照加载前后顺序执行！

JavaScript应放在哪
    页面中的JavaScript会在浏览器加载页面的时候被立即执行，有时候我们想让一段脚本在页面加载的时候执行，而有时候我们想在用户触发一个事件的时候执行脚本。

    1)head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。
    2）body 部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。
    3)body 和 head 部分可同时有脚本:文件中可以在body和head部分同时存在脚本。

    4）外部脚本的使用

    有时候你可能想在几个页面中运行同样的脚本程序， 而不需在各个页面中重复的写这些代码。这时你就要用到外部脚本。你可以把脚本写在一个外部文件中，保存在扩展名为 .js的文件中。

注意:外部脚本文件中不要包含标记符<script>

使用外部脚本时将标记符<script> 的“src”属性值指向相应的.js文件就可以了。

注：推荐的免费 JS 视频教程网址：

https://ke.qq.com/course/152997

5、作业：设计与编辑网页

在上周个人页面的基础上继续修改完善。

Week3

四、第三节：定位以及输入框编辑

1、定位：

相对定位：relative
    （1）相当于自己原来在文档流中的位置。
    （2）原来其它位置元素不动，会覆盖原来元素。
    （3）本元素在原来文档流中的位置还在，谁都占据不了。
绝对定位：absolute
    （1）脱离文档流，在原来文档流中的位置没有了。
    （2）其它元素占据了其在文档流中的位置。
    （3）那么它就会相对于文档body来定位.
固定定位：fixed
默认定位：static

2、百变input:

HTML5中常用的input元素介绍、用法。

input标签可实现很多功能：文本框、数字、日期、时间、复选框、单选框、按钮等。

(1)输入框：
    <input type="text" id="ipt1" class="ipt">
    <input type="text" id="ipt2" class="ipt" maxlength="18">限制文本框输入长度18。
(2)数字：
    <input type="number" max="23" min="16" value="19" id="ipt3"       class="ipt"> 数字，范围。
(3)日期：
	<input type="date" id="ipt4" class="ipt"> 日期
(4)时间：
	<input type="time" id="ipt5" class="ipt">时间
(5)日期时间：
	<input type="datetime-local" id="ipt6" class="ipt"> datetime-
	local：时间年月日。datetime一般网页不支持。需要加local。
(6)复选框：
	<input type="checkbox" id="ipt7" class="ipt"> 复选框
	<input type="checkbox" id="ipt7" class="ipt">
	<label for="ipt7" id="lb1">我聪明</label>  
		复选框很小的时间可以实现点旁边的字也选中复选框功能。
	<input type="checkbox" id="ipt8" class="ipt">
	<label for="ipt8" id="lb2" >我很傻</label>
	#ipt7{
		top: 180px;
		left: 15%;
	}
	#lb1{
		position: absolute;
		top: 185px;
		left: 20%;
	}
	#ipt8{
		top: 180px;
		left: 60%;
	}
	#lb2{
        position: absolute;
        top: 185px;
        left: 65%;
    }
(7)单选框：
	<input type="radio" id="ipt9" class="ipt"  name="sel">
	<input type="radio" id="ipt10" class="ipt"  name="sel" >
	name:指定为一组。
(8)按钮：
	<input type="button" id="btn" value="我是按钮">

五、第四节：CSS应用--绚丽的照片墙

1、CSS背景知识：

background: #eee;  //body加背景颜色布满整个屏幕，其他的只为元素本身

颜色色值：rgb( 12,2 ,45 )  rgba()：设置颜色和透明度。
#000000-#ffffff  <====>  #000-#fff

background: url(image/1.jpg)  no-repeat  100%/100%;
                                不重复      铺满

2、定位：

要绝对定位一个元素，父元素设置为relative，子元素设置为absolute。

#holder{
	width: 100%;
	height: 100%;
	border: 1px solid green;
	/* background: yellow; */
	/* background: url(image/1.jpg) no-repeat 100%/100%; */
	position: relative;
}

3、套框结构：padding

一个元素的内边框，设置边框是按顺时针方向，上、右、下、左的方式进行设置。元素的边框不是固定的，是在padding之外设置的边线。border是包含在padding之外的勾勒线，它随着padding而变化，本身也占宽度。margin是元素和元素之间的距离。

img{
	position: absolute;
	top:100px;
	left: 80px;
	padding: 10px 10px 20px 10px;
	border: 2px solid red;
	background: white;
}

4、transform：变形金刚

主流浏览器：

div
{
        transform: rotate(30deg);
    -ms-transform: rotate(30deg);		/* IE 9 */
-webkit-transform: rotate(30deg);	/* Safari and Chrome */
     -o-transform: rotate(30deg);		/* Opera */
   -moz-transform: rotate(30deg);		/* Firefox */
}


rotate(10deg)：旋转。
scale(1.5)：规模，扩大/缩小倍数

img:hover{
	-webkit-transform: rotate(10deg) scale(1.3);
	   -moz-transform: rotate(10deg) scale(1.3);
	    -ms-transform: rotate(10deg) scale(1.3);
	     -o-transform: rotate(10deg) scale(1.3);
	        transform: rotate(10deg) scale(1.3);
}

5、transition：过渡

transition过渡针对transform的变形进行过渡。

-webkit-transition: all .25s;
   -moz-transition: all .25s;
    -ms-transition: all .25s;
     -o-transition: all .25s;
        transition: all .25s;

6、overflow: hidden

超出部分是否隐藏

7、z-index: 1 层次

数据越大层级越高

8、hover：伪类

网页上找不到这种样式，但它实实在在起作用。

img:hover
h2:first-child{
	color: red;
}

9、作业：

编写绚丽的照片墙，完善个人介绍页面。

Week4-5

六、第五节：前端调试工具

1、Chrome DevTools开发者工具调试指南：

参考网址：https://www.imooc.com/learn/1164

	对于Web开发者，尤其是前端开发工程师，Chrome浏览器开发者工具几乎成为我们每天开发调试的必备工具。那么掌握Chrome开发者工具会让我们更加全面、高效地进行页面调试和开发。本教程手把手教你全面的掌握Chrome开发者工具，让你在页面开发的过程中事半功倍！
第1章 课程介绍
	介绍课程大纲，快速浏览Chrome DevTools开发者工具的基本功能，以及如何使用快捷打开Chrome浏览器开发者工具。
第2章 使用Elements调试DOM
	本章介绍了如何使用元素面板来查看、编辑和调试HTML和DOM，学完本章你讲基本掌握HTML的调试方法。
第3章 调试样式及CSS
	本章讲述了如何调试页面样式，你将在本章掌握开发网页样式中常用的的基本方法。
第4章 使用Console和Sources调试JavaScript
	本章是课程最核心内容之一，你将掌握调试页面JavaScript脚本最常用的方法，包括调试Log，断点调试，在源代码中调试等等。学完本章内容将辅助你更快速地在日常开发工作中调试脚本，让你事半功倍。
第5章 调试网络
	本章也是课程核心内容之一，使用Network面板将让你非常容易的对页面请求进行抓包，分析以及做性能优化。
第6章 客户端存储Application面板
	本章介绍如何调试客户端存储，包括学会如何对Cookie，LocalStorage等调试。
第7章 调试移动端、H5页面及远程调试
	本章介绍使用Chrome开发这工具针对移动端浏览器进行页面的调试。
第8章 在DevTools中集成React和Vue插件
	本章介绍如何安装React和Vue插件，结合现代流程框架的插件调试会上你更容易的针对构建前的组件及状态进行跟踪。
第9章 总结
	本章对课程进行总结。

七、第六节：伪元素、伪类、图标字体与轮播技术

1、伪类和伪元素

（1）css引入伪类和伪元素区别：
	css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。
	伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通 过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
	伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
（2）伪元素是使用单冒号还是双冒号？
	CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号 (::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。
	然而，除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。
	虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，我们建议你在目前还是使用单冒号的写法。
（3）伪类与伪元素的具体用法：

伪元素

2、图标字体

@face-font{
		font-family:<YourWebFontName>;
		src:     // format  .ttf  .otf  .woff  .eot  .svg
		font-weight:
		font-style:
	}

	Example website:
	http://icons.marekventur.de/
    http://creativecommons.org/licenses/MIT/
	http://www.dafont.com
	http://www.google.com/webfonts
	http://mux.alimama.com/tbfonts  //淘宝的图标字体库

3、轮播技术：套框

var ele = document.getElementById();
var eles = document.getElementsByClassName();
var eles = document.getElementsByTagName();

4、CSS3动画：

@keyframes myani{/*keyframes：关键帧*/
	0%{top: 0%;}/*按时间来分帧*/
	25%{top: -100%;}
	50%{top: -200%;}
	75%{top: -300%;}
	100%{top:-400%;}
}
animation: myani 10s 2s infinite alternate;/*执行时间10s,隔2s时间,infinite不断的执行，alternated动画交替变换。*/

5、作业：

实现轮播图。

Week6

八、第七节：伪类、伪元素

1、伪类和伪元素

（1）css引入伪类和伪元素区别：
	css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。
	伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通 过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
	伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
（2）伪元素是使用单冒号还是双冒号？
	CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号 (::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方 法。
	然而，除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。
	虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，我们建议你在目前还是使用单冒号的写法。
（3）伪类与伪元素的具体用法：

伪元素

2、善用a标签

1、a标签使用初步;
2、a标签的伪类以及顺序；
3、a标签的target属性；
4、a标签的广泛使用--按钮、其它元素、行元素和块元素的转换；

有 4 个保留的目标名称用作特殊的文档重定向操作：

_blank
	浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self
	这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent
	这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

_top
	这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

	提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

语法
<a target="value">
	属性值
值	描述
	_blank	在新窗口中打开被链接文档。
	_self	默认。在相同的框架中打开被链接文档。
	_parent	在父框架集中打开被链接文档。
	_top	在整个窗口中打开被链接文档。
	framename	在指定的框架中打开被链接文档。

一、a标签：行内元素
<a href="../Week3/Week3-1.html">我是超链接</a>
a{
	text-decoration: none;
}

二、超链接的四个典型伪类：
a:link{                  //链接的时候设置的属性
	color: green;
}

a:hover{                   //鼠标移上去的效果，可实现菜单功能
	color: blue;
}

a:active{                 //激活的，当前的
	color: red;
}

a:visited{                //访问过的
	color: gray;
}

这四个伪类有顺序，例如，active不能在link前面，该情况下active将不起作用。

3、text-shadow：阴影效果

text-shadow: 10px 10px 5px rgba(100,200,200,0.5);

左/右偏离上/下偏离井深是多少颜色透明度

默认右、下（正数）

负数左、上

4、box-shadow：元素阴影

box-shadow: 10px 10px 5px #aa8;

左/右偏离上/下偏离井深是多少颜色透明度

默认右、下（正数）

负数左、上

5、border-radius：圆角边框

border-radius: 15px;

border-radius: 50% 50%;

高度宽度不一样的时候是椭圆，高度宽度一样的即为圆。

.abtn{
	display: block;
	width: 240px;
	height: 240px;
	border: 1px solid green;
	/* background: #aa8; */
	background: url("../Week3/pics/1.jpg") 50%;
	text-align: center;
	font-size: 20px;
	box-shadow: 10px 10px 5px #aa8;
	/* border-radius: 15px; */
	border-radius: 50% 50%;
}

6、marquee：走马灯效果

<marquee behavior="scroll" direction="right">
	<h3>我是一个页面标题</h3>
</marquee>

效果： alternate：来回走，双向 scroll：单向

方向：right left up down 上、下、左、右四个方向

7、ul：无序列表、ol、li都是块元素

<ul type="disc">
	<li>我是无序列标签1</li>
	<li>我是无序列标签2</li>
	<li>我是无序列标签3</li>
	<li>我是无序列标签4</li>
	<li>我是无序列标签5</li>
 </ul>

type：样式

disc（默认实心圆圈） square（矩形方框） circle（空心圆圈） none（没有）

<ol type="a" >
	<li>我是有序列表1</li>
    <li>我是有序列表2</li>
	<li>我是有序列表3</li>
    <li>我是有序列表4</li>
    <li>我是有序列表5</li>
</ol>

type：样式 a A I i

在CSS3的支持下，无序列表也可以变为有序，有序列表也可以变为无序列表。

ul li{
	 /* list-style: square; */
	list-style: decimal;
}

ol li{
	list-style: circle;
}

九、第八节：JavaScript

1、JavaScript简介

2、JavaScript语法详解

1、语法：区分大小写、注释、严格模式、标识符
2、保留关键字
3、变量：命名规则、声明、基本类型值和引用类型值
4、基本数据类型：Typeof操作符、Undefined类型、Null类型、Boolean类型、Number类型、String类型
5、符合类型：对象、数组、函数
6、运算符：赋值运算符、算术运算符、位运算符、比较运算符、逻辑运算符、三目运算符、逗号运算符
7、语句：if、do-while、while、for、for-in、break、continue、with、switch
8、函数：定义、调用、实参和形参、递归函数、闭包、函数实例的属性和方法

3、变量作用域

4、DOM编程详解

1、DOM概述
2、节点层次：元素节点、文本节点、属性节点、注释节点、文档类型节点、CSS、JavaScript获取元素方式
3、DOM的操作技术
4、DOM扩展

5、BOM详解

1、Window对象
2、访问URL
3、弹出新窗口

6、事件机制

1、基本事件模型：绑定HTML元素属性、绑定DOM对象属性、事件处理函数和关键字this
2、事件流
3、事件对象
4、事件类型
5、DOM的事件模型
6、表单事件

7、引用类型

1、Object类型
2、Array类型
3、Date类型
4、RegExp类型
5、Function类型

作业：

1、MOOC平台上的作业

2、EduCoder上实验报告内容。

Week7

十、第九节：JS基础和JS数组

（一）、JavaScript简介

JavaScript是Web中一种功能强大的脚本语言，常用来为网页添加各式各样的动态功能，它不需要进行编译，直接嵌入在HTML页面中，就可以把静态的页面转变成支持用户交互并响应事件的动态页面。

（二）、JavaScript的引入：

（1）内嵌式：在HTML文档中直接嵌入JavaScript脚本。
<script></script>
（2）外链式：链接外部JavaScript脚本文件。
<script src="JS文件的路径"></script>

（三）、JavaScript语法详解

1、语法：区分大小写、注释、严格模式、标识符
2、保留关键字
3、变量：命名规则（可以由字母、下划线、美元符号、数字、中文，不能是关键字）、声明、基本类型值和引用类型值

	在JS中，使用var命令声明变量，由于JS是一种弱类型语言，所以在声明变量时，不需要指定变量的类型，变量的类型将根据变量的赋值来确定。

4、数据类型：Typeof操作符、Undefined类型、Null类型、Boolean类型、Number类型、String类型

js 的变量与6种基本数据类型  
  number
  string
  boolean
  null
  undefined
  object  【Function Array Date etc.】 
  复合类型：对象、数组、函数

5、js类型隐式转换与 typeof、instanceof

"16" + 10;
"16" - 10;
"+"  优先转换为字符串；
"-" ,"*","/"  转换为数字；  null ---> 0;  false -->0, true ---> 1;  undefined(无法转换数字)

6、运算符：赋值运算符、算术运算符、位运算符、比较运算符、逻辑运算符、三目运算符、逗号运算符
7、语句：if、do-while、while、for、for-in、break、continue、with、switch
8、函数：定义、调用、实参和形参、递归函数、闭包、函数实例的属性和方法

（四）、变量作用域

全局变量

局部变量

（五）、DOM编程详解

1、DOM概述:
Document Object Model(文档对象模型)的简称，是W3C组织推荐的处理可扩展标志语言的标准编程接口，它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。

2、节点层次：
元素节点、文本节点、属性节点、注释节点、文档类型节点、CSS、

3、JavaScript获取元素方式：
（1）通过元素的id属性获取元素：getElementById()，返回一个元素;
（2）通过元素的name属性获取元素：getElementsByName()，返回一个数组;
（3）通过元素的name标签获取元素：getElementsByTagName()，返回一个数组;
（4）通过元素的name样式获取元素：getElementsByClassName()，返回一个数组;
4、DOM的操作技术

（六）、BOM详解

Browser Object Model，浏览器对象模型。

1、Window对象:表示整个浏览器窗口，处于对象层次的顶层，可用于获取浏览器窗口的大小、位置或设置定时器等。closed、document、history.....
2、访问URL:location.href
3、弹出新窗口：open()
4、弹出对话框：alert()、confirm()、prompt()
5、定时器：setTimeout()、setInterval()、clearTimeout()

（七）、事件机制

1、基本事件模型：绑定HTML元素属性、绑定DOM对象属性、事件处理函数和关键字this
2、事件流
3、事件对象
4、事件类型:
	（1）鼠标事件：onclick、ondbclick、ondrag、ondragend、ondragenter、ondragleave、ondragover、ondragstart、ondrop、onmousedown、onmousemove、onmouseout、onmouseover、onmouseup、onmousewheel、onscroll、onmouseenter
	（2）键盘事件：onkeydown、onkeyup、onkeypress
	（3）文本事件：textInput
	（4）HTML5事件：onbeforeunload、DOMContentLoaded、readystatechange
	（5）设备事件：orientationchange
	（6）触摸事件：touchstart、touchmove、touchend、touchcancel
5、DOM的事件模型
     （1）绑定的事件处理器
     （2）访问事件对象
     （3）转发事件
     （4）取消事件的默认行为
     （5）事件委托
6、表单事件：onblur、onchange、onfocus、onreset、onsubmit
7、页面事件：onload

（八）、引用类型

1、Object类型
2、Array类型
3、Date类型:
getFullYear()、getMonth()、getDate()、getDay()、getHours()、getMinutes()、getSeconds()、getTime();
setFullYear()、setMonth()、setDate()、setDay()、setHours()、setMinutes()、setSeconds()、setTime();
4、RegExp类型
5、Function类型
6、String类型：
（1）属性：length
（2）方法：indexOf()、lastIndexOf()、substr()、substring()、split()、search()、replace()、toLowerCase()、toUpperCase()、localeCompare()

（十）、JS数组

1、数组的push()在数组最后位置加入一个元素。

2、数组的pop()将数组最后一个元素删除。

3、数组的unshift()在第一个位置加入一个元素。

4、数组的shift ()读取数组第一个元素，同时将数组第一个元素删除。可以实现循环功能。

5、数组的delete()用于删除数组中的一个元素。数组的delete()慎用，因为会把对应元素删除。

6、数组的join()将数组连接为一个字符串。

7、数组的reverse()将数组元素反转。

8、数组的sort()数组元素排序。默认数组按字符排序，如果按数值排序，则可以以函数的形式，冒泡法排序。

9、数组的slice()，切片函数，不影响原数组，克隆片段（clone part）。参数为负数，表示倒叙开始切片。数组本身不改变。slice(start,end)；不包括end。

10、数组的splice()，切片函数，切香肠，数组本身要改变。

作业：

1、MOOC平台上的作业

2、EduCoder上实验报告内容。

Week8

十一、第十节：Java Web前后端分离的交互技术

（一）、工具

IDEA、Eclipse。

（二）、http基础简介

（三）、前后端交互实现

1、form：表单

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

form2

2、AJAX：(Asynchronous JavaScript and XML,异步的JavaScript和XML)

是一种传统的Web应用模式加以扩展的技术，使得“不刷新页面向服务器发起请求”成为可能。

AJAX最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

一般来说，一个AJAX应用的实现需要经过以下几个步骤：
（1）在页面中定义AJAX请求的触发事件。
（2）创建XMLHttpRequest对象。
（3）确定请求地址和请求参数。
（4）调用XMLHttpRequest对象的open()方法建立对服务器的调用。
（5）通过XMLHttpRequest对象的onreadystatechange属性指定响应事件处理函数。
（6）在函数中根据响应状态进行数据读取和数据处理工作。
（7）调用XMLHttpRequest对象的send()方法向服务器发出请求。

3、Servlet

	Java Servlet是运行在Web服务器或应用服务器上的程序，它是来自Web浏览器或其它HTTP客户端的请求和HTTP服务器上的数据库或应用程序之间的中间层。使用Servlet，可以收集来自网页表单的用户输入，呈现来自数据库或者其他源的记录，还可以动态创建网页。
	在Servlet中，每个请求由一个轻量级的Java线程（而不是重量级的操作系统进程）处理。
	Servlet是独立于平台的，因为它们是用Java编写的。
	Java类库的全部功能对Servlet来说都是可用的。
	Servlet对请求的处理和响应过程分为以下几个步骤：
	（1）客户端发送请求至服务器端。
	（2）服务器将请求信息发送至Servlet。
	（3）Servlet生成响应内容并将其传给服务器。响应内容动态生成，通常取决于客户端的请求。
	（4）服务器将响应返回给客户端。

作业：

1、实现前后端分立的交互功能。

2、EduCoder上实验报告内容。

Week9

十二、第十一节：Servlet、JSP基础

（一）、Servlet回顾

第8周问题解决和知识回顾。

（二）、JSP技术

（三）、前后端交互实现

1、form：表单

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

Week10

十三、第十二节：JDBC

（一）、什么是JDBC

JDBC（Java数据库连接，Java Database Connectivity），它是一套用于执行SQL语句的Java API。应用程序可通过API连接到关系型数据库，并使用SQL语句来完成对数据库中数据的查询、更新、新增和删除的操作。

数据库的连接
操作：
1、查询：
	select * from 表名
2、更新：
	update 表名
3、新增：
	insert into 表名（） values()
4、删除：
	delete from 表名

（二）、数据库连接

参看案例实现。

标签：web,冒号,省略,伪类,标签,前端,元素,文档
From： https://www.cnblogs.com/zj-zhajiangmian/p/web.html

工程认知——Web前端

Week1

一、课程概要、要求和学习方法

二、第一节：Html、Html5 基础框架

1、Html、Html5 框架

2、最常见标签及其使用

3、课后任务

Week2

三、第二节：CSS、JS 及 H5 布局等

1、CSS初步与作用；

2、块元素与行内元素；

3、网页布局初步；

4、JS 初步：

5、作业： 设计与编辑网页

Week3

四、第三节：定位以及输入框编辑

1、定位：

2、百变input:

五、第四节：CSS应用--绚丽的照片墙

1、CSS背景知识：

2、定位：

3、套框结构：padding

4、transform：变形金刚

5、transition：过渡

6、overflow: hidden

7、z-index: 1 层次

8、hover：伪类

9、作业：

Week4-5

六、第五节：前端调试工具

1、Chrome DevTools开发者工具调试指南：

七、第六节：伪元素、伪类、图标字体与轮播技术

1、伪类和伪元素

2、图标字体

3、轮播技术：套框

4、CSS3动画：

5、作业：

Week6

八、第七节：伪类、伪元素

1、伪类和伪元素

2、善用a标签

3、text-shadow：阴影效果

4、box-shadow：元素阴影

5、border-radius：圆角边框

6、marquee：走马灯效果

7、ul：无序列表、ol、li都是块元素

九、第八节：JavaScript

1、JavaScript简介

2、JavaScript语法详解

3、变量作用域

4、DOM编程详解

5、BOM详解

6、事件机制

7、引用类型

作业：

Week7

十、第九节：JS基础和JS数组

（一）、JavaScript简介

（二）、JavaScript的引入：

（三）、JavaScript语法详解

（四）、变量作用域

（五）、DOM编程详解

（六）、BOM详解

（七）、事件机制

（八）、引用类型

（十）、JS数组

作业：

Week8

十一、第十节：Java Web前后端分离的交互技术

（一）、工具

（二）、http基础简介

（三）、前后端交互实现

作业：

Week9

十二、第十一节：Servlet、JSP基础

（一）、Servlet回顾

（二）、JSP技术

（三）、前后端交互实现

Week10

5、作业：设计与编辑网页