前言：2018年即将接近尾声，现对前端基础做一个小结与巩固。
【一、HTML+CSS】：
<!-- 声明为 HTML5 文档，不区分大小写：<!doctype html> -->
<!DOCTYPE html>
<!-- HTML文档的后缀名可以是：.htm -->
<html>
<head>
<!-- 中文网页需要使用 <meta charset="utf-8"> 声明编码 -->
<meta charset="utf-8">
<title>网页标题</title>
<!-- 内部样式（单一页面对应） -->
<style type="text/css">
#div1, #div2{
150px; height:50px; margin:10px 0;padding:10px;border:1px solid #aaaaaa;
}
p:first-child{
background:yellow;
}
a:hover{
/* text-decoration:none; */
border: 1px solid;
padding: 5px;
border-radius: 50%;
}
</style>
<!-- 外部样式（推荐：切换主题） -->
<link rel="stylesheet" type="text/css" href="#"/>
<!-- <script src="#" type="text/javascript" charset="utf-8"></script> -->
</head>
<body>
<!-- 多数标签是成对的：均具有四个通用属性：id+ -->
<h1 id="abc">我的第一个标题</h1>
<p class="className" style="-moz-animation: .25s, 100ms;" title="我的第一个段落">
翻译: <q>My first paragraph.</q><br/>
<b>粗体文本</b><br/>
<code>计算机代码</code><br/>
<em>强调文本</em><br<br/>/>
<i>斜体文本</i><br/>
<kbd>键盘输入</kbd> <br/>
<pre>预格式化文本</pre><br/>
<small>更小的文本</small><br/>
<strong>重要的文本</strong><br/>
<abbr> （缩写）</abbr><br/>
<address> （联系信息）</address><br/>
<!-- （文字方向） -->
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
<blockquote> （从另一个源引用的部分）</blockquote><br/>
<cite> （工作的名称）</cite><br/>
<del> （删除的文本）</del><br/>
<ins> （插入的文本）</ins><br/>
<sub> （下标文本）</sub><br/>
<sup> （上标文本）</sup><br/>
</p>
<!-- 单标签、块标签占少数，块标签不会自动换行，行标签占一行可以转换为块标签 -->
<br/>
<span>块标签</span>
<br/>
<!-- 对比路径引用+去除下划线 -->
<a href="#abc" target="_blank" style="text-decoration:none;">回到顶栏并跳转新页面</a>
<br/>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="#" alt="可拖拽的图片" width="120" height="30" draggable="true" ondragstart="drag(event)"/>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<hr/>
<h6>最小的标题：<del>javascript</b></h6>
<!-- 文本框 -->
<textarea rows="10" cols="30" id="demo">我是一个文本框</textarea>
<br/>
<!-- 表单 -->
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
<button type="button" onclick="myFunction()" style="color: red;">点击按钮</button>
<!-- 脚本 -->
<script type="text/javascript">
//img:drag阻止默认事件+draggable允许拖拽
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
//***********************************************
//div
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
function allowDrop(ev){
ev.preventDefault();
}
//点击
function myFunction(){
document.getElementById("demo").style.color="greenyellow";
alert("点击改变demo样式")
}
</script>
<!-- 菜单列表:去除点 -->
<ul style="list-style-type:none">
<li>1.项目</li>
<li>2.项目</li>
</ul>
<!-- 表格 -->
<table border="1" style="tr:nth-child(2n){background:orange;}">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
<!-- 框架：如获取某网页数据 -->
<iframe src="demo_iframe.htm" frameborder="0" name="iframe_a"></iframe><br/>
<a href="#" target="iframe_a">点击切换框架内容</a>
<!-- 布局：使用h5新标签（语义元素）footer，文本© -->
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © xxx.com
</div>
</body>
</html>
【2.JavaScript】：
1.HTML5新特性：web存储
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
//保存数据
function save(){
var site = new Object;
site.keyname = document.getElementById("keyname").value;//获取表单输入的keyname或userName
site.sitename = document.getElementById("sitename").value;
site.siteurl = document.getElementById("siteurl").value;
var str = JSON.stringify(site); // 将对象转换为字符串,即{xxx}=>‘{xxx}’
localStorage.setItem(site.keyname,str); //【长期保存本地数据到浏览器】
alert("保存成功");
}
//查找数据
function find(){
var search_site = document.getElementById("search_site").value;
var str = localStorage.getItem(search_site); //获【取本地数据，免登陆】
var find_result = document.getElementById("find_result");
var site = JSON.parse(str);
find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;
}
//删除数据
function del(name) {
localStorage.removeItem(name);//【注销登陆】
alert("删除成功!");
loadAll();
}
2.JavaScript：cookie存储
- 设置（创建/覆盖）cookie 值的函数，如：document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";//key:value+过期时间+cookie路径（当前url）
- 获取 cookie 值的函数，如：var x = document.cookie;//返回所有
- 删除 cookie 值的函数，如：document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";//value设为空
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <head> <script> function setCookie(cname,cvalue,exdays){ var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = cname+"="+cvalue+"; "+expires; } function getCookie(cname){ var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name)==0) { return c.substring(name.length,c.length); } } return ""; } function checkCookie(){ var user=getCookie("username"); if (user!=""){ alert("欢迎 " + user + " 再次访问"); } else { user = prompt("请输入你的名字:",""); if (user!="" && user!=null){ setCookie("username",user,30); } } } </script> </head> <body onload="checkCookie()"></body> </html>
3.事件：常用的6个dom事件
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
【补充】：
（1-UI（用户界面事件）：当用户与页面的上的元素交互时发生，但不一定与用户操作有关的事件。
load事件：当页面加载完毕时在qindow上触发，当图像加载完毕时在ing元素上触发，等等，页面完全加载完毕（包括所有图像，js文件，css等外部文件资源）时触发，img只要设置了src就会下载；
unload事件：当页面完全卸载时在window上触发，当一个页面切换到另一个页面时就会触发，经常利用这个事件来清除引用，减少内存的泄露
error：当发生js错误时在window上触发，当图像无法加载时在img上触发
abort事件：当用户停止下载过程时，如果嵌入的内容没有加载完成，则在object元素上触发
select：当用户选择文本框（input或textarea）中的一或多个字符时触发
resize：当窗口或框架的大小发生改变时在window上触发
scroll：当用户滚动带滚动条的元素中的内容时，在该元素上触发
（2-焦点事件：当元素获得焦点或失去焦点时触发
blur：失去焦点时触发，这个事件不会冒泡
focus：获得焦点时触发，不冒泡
focusin：在获得焦点时触发，冒泡，DOM3新增
focusout：在失去焦点时触发，冒泡
（3-鼠标事件：当用户通过鼠标在页面上执行操作时触发
click：单击事件，用户单机鼠标按钮（一般是左键）或按下回车键时触发
dbclick：双击事件，当双击鼠标时触发（一般是左键）
mousedown：当用户在按下任意鼠标按钮时触发
mouseup：当用户释放鼠标按钮时触发
mouseenter：在鼠标光标从外部首次（是指每次进入元素，并不是只执行一次）时触发，而且这个事件不冒泡，而且在光标移到到后代元素上不会触发（从父区域进入子区域，再从子区域进入父区域是不会触发的，因为他认为子区域也是他的一部分），DOM3定义的
mouseleave：和mouseenter是一对，刚好相反
mousemove：当鼠标指针在元素内部移时重复的触发
mouseout：当鼠标指针位于一个元素上方，然后移到到另一个元素上方时触发，另一个元素可能是外部元素也可能是他的后代元素，因为他不认为后代元素所在的区域是他的一部分
mouseover：和mouseout是一对，恰好相反
除了mouseleave和mouseenter之外都会冒泡
click事件只有触发了mousedown和mouseup之后才会触发，代表click只有触发两次clic才会触发，如果取消了之前的事件将会不触发
鼠标事件都是在浏览器视口中的特定位置发生的，可以通过事件的属性获取到。
视口区（客户区）坐标位置：clientX和clientY可以获取到位置信息。所有浏览器都支持这两个属性，是相对于浏览器的视口而不是页面而言的，不包括地址栏等
页面坐标位置：pageX和pageY，相对于页面而言，ie8及更早版本不支持这两个属性，不过我们可以计算出来
event.clientX + （document.body.scrollLeft + document.documentElement.scrollLeft）
event.clientY + （document.body.scrollTop + document.documentElement.scrollTop）
屏幕坐标位置：相对于整个电脑屏幕，screenX和screenY
（4-滚轮事件：当使用鼠标滚轮（或类似事件）时触发
mousewheel：跟踪鼠标滚轮或笔记本触摸板
（5-文本事件：当在文档中输入时触发
textinput：在文本显示给用户之前更容易拦截文本，是对keypress的补充
可编辑区输入字符键才可以出发
ie9才支持，firefox不支持
（6-键盘事件：当用户通过键盘在页面上执行操作时触发
keydown：用户按下键盘上的任意键时触发，而且按住不放的话，会重复触发此事件
keypress：用户按下键盘上的字符键时触发，而且按住不放的话，会重复触发此事件，按下esc也会触发
keyup：用户释放键盘上的键时触发
所有元素都支持这三个事件
keydown-》keypress-》textinput-》keyup
keyup和keydown的event有个keycoe属性，代表键盘码，与ASCII相对应
（7-合成事件：当为IME（input method editor，输入法编辑器）输入字符触发
同时按下几个键才能输入一个字符
（8-变动事件：当底层DOM结构发生变化时触发
DOM结构发生变化时触发
（9.事件委托：本来该自己做的事情，委托给别人做。
利用的是事件冒泡原理，使用event.target获取触发事件的目标元素。
优点：
1- 提高性能，只需要注册一次事件，也方便移除事件。解决事件处理程序过多的问题，在DOM树中尽量最高的层次上添加一个事件处理程序，只指定一个事件处理程序，就可以管理某一类型的所有事件。
2- 给动态生成的元素添加事件。可以解决动态生成的子元素绑定不上事件的问题。
<button id="test">点我呀</button>
<div id="f" class="f"></div>
var test =document.getElementById('test');
var f =document.getElementById('f');
var i =0;
test.onclick=function() {
varp =document.createElement('p');
p.innerHTML= i++;
f.appendChild(p);
}
f.onclick=function(e) {
console.log(e.target.innerHTML);
}
（10.模拟事件
var e = document.createEvent（自定义事件名称）
node.dispatchEvent(e);
new CustomEvent(事件名，数据)：兼容性不好
（11.其他：
form有submit事件，表单的提交最好使用submit事件，不使用onclick事件，因为不同的浏览器之间可能存在不同的时差，submit事件和click之间的顺序不同的浏览器之间是不同的表单还有focus事件，blur事件，change事件select的change事件是只有改变了选择项就会发生，而其他表单是在值被修改且失去焦点的时候才会发生：
序列化表单：formData
var data = new formData();
data.append(名，值)
3.Windows方法：
- window.open() - 打开新窗口
- window.document.getElementById("header");//document 也是 window 对象的属性之一：
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
- window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
- window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
- location.hostname 返回 web 主机的域名(如：kp);//可不使用 window 这个前缀
- location.pathname 返回当前页面的路径和文件名(home/path);
- location.port 返回 web 主机的端口 （80 或 443）;
- location.protocol 返回所使用的 web 协议（http:// 或 https://）;
- location.href 属性返回当前页面的 URL。
- location.assign(url) 方法加载新的文档//替换当前原有页面
- history.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击向前按钮相同
- alert("sometext");//提示
- confirm(true);//确认
- prompt("sometext","defaultvalue");//输入确认
- setInterval("javascript function",milliseconds);//循环
- clearInterval(intervalVariable)
- setTimeout("javascript function", milliseconds);
- clearTimeout(timeoutVariable)
- navigator//浏览器信息可被浏览器使用者更改
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <div id="example"></div> <script> txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>"; txt+= "<p>浏览器名称: " + navigator.appName + "</p>"; txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>"; txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>"; txt+= "<p>硬件平台: " + navigator.platform + "</p>"; txt+= "<p>用户代理: " + navigator.userAgent + "</p>"; txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>"; document.getElementById("example").innerHTML=txt; </script> </body> </html>