网页编程不过关，web攻击始终浮于表面。随着不断的学习，此博文也会不断更新。
本次学习在w3cschool进行，关注编程中有关标点符号和闭合标签等的语法细节。
基础知识
一、HTML（超文本标记语言 ）
1.HTML使用标记标签来描述网页。
2.HTML标签成对出现，即开始标签（开放标签）和结束标签（闭合标签），html标签对大小写不敏感。其中
- <html> 与 </html> 之间的文本描述网页
- <body> 与 </body> 之间的文本是可见的页面内容
- 标题的显示使用<h1> - <h6> 等标签进行定义。
- <hr /> 标签在 HTML 页面中创建水平线。
- 段落使用<p>标签进行定义。
- 网络链接使用<a>进行定义，使用href字段表示链接地址：<a href="http://wittpeng.sxl.cn">This is my website！</a>
- 图像是通过 <img> 标签进行定义，开始标签内标注属性，即图片来源和格式：<img src="w3school.jpg" width="104" height="142" />
- <br> 就是没有关闭标签的空元素（<br> 标签定义换行）
- <table> 定义 HTML 表格
- <!-- 注释信息 -->
格式化标签：
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本。 |
| <big> | 定义大号字。 |
| <em> | 定义着重文字。 |
| <i> | 定义斜体字。 |
| <small> | 定义小号字。 |
| <strong> | 定义加重语气。 |
| <sub> | 定义下标字。 |
| <sup> | 定义上标字。 |
| <ins> | 定义插入字。 |
| <del> | 定义删除字。 |
| <s> | 不赞成使用。使用 <del> 代替。 |
| <strike> | 不赞成使用。使用 <del> 代替。 |
| <u> | 不赞成使用。使用样式（style）代替。 |
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码。 |
| <kbd> | 定义键盘码。 |
| <samp> | 定义计算机代码样本。 |
| <tt> | 定义打字机代码。 |
| <var> | 定义变量。 |
| <pre> | 定义预格式文本。 |
| <listing> | 不赞成使用。使用 <pre> 代替。 |
| <plaintext> | 不赞成使用。使用 <pre> 代替。 |
| <xmp> | 不赞成使用。使用 <pre> 代替。 |
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写。 |
| <acronym> | 定义首字母缩写。 |
| <address> | 定义地址。 |
| <bdo> | 定义文字方向。 |
| <blockquote> | 定义长的引用。 |
| <q> | 定义短的引用语。 |
| <cite> | 定义引用、引证。 |
| <dfn> | 定义一个定义项目。 |
3.在开放标签和闭合标签之间的代码称为元素，大多元素可以嵌套。没有闭合标签的元素可能会正常显示，但这种“不正常”会导致严重的后果。即使上面提到的<br>被接受没有关闭，但在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
4.属性提供有关元素的更多信息，以键值对的形式出现。如标题中的对其方式align，body主体中的背景颜色bgcolor，表格的边框信息border。属性也对大小写不敏感。
- style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。
- background-color 属性为元素定义了背景颜色。
- font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸。
- text-align 属性规定了元素中文本的水平对齐方式。
有关HTML标签、属性等细节的使用，见参考手册。
5.HTML在输出时会省略多余的空格和换行。
6.CSS（层叠样式表）有三种：
（1）外部样式表：
<link rel="stylesheet" type="text/css" href="mystyle.css">（2） 内部样式表
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>（3） 内联样式
7.超链接
- 通过使用 href 属性 - 创建指向另一个文档的链接
<ahref="http://www.wittpeng.sxl.cn/">Visit me</a>- 通过使用 name 属性 - 创建文档内的书签，可定义文档显示的位置：
<a href="http://www.w3school.com.cn/"target="_blank">Visit W3School!</a>- name属性，规定了锚（anchor）等名称，使用步骤如下
（1）对锚进行命名：<a name="tips">基本的注意事项 - 有用的提示</a>
（2）创建指向该锚的链接：<a href="#tips">有用的提示</a>，如果在#前加入url就可以由其他页面进行指向该锚。
8.表格标签：
| <table> | 定义表格 |
| <caption> | 定义表格标题。 |
| <th> | 定义表格的表头。 |
| <tr> | 定义表格的行。 |
| <td> | 定义表格单元。 |
| <thead> | 定义表格的页眉。 |
| <tbody> | 定义表格的主体。 |
| <tfoot> | 定义表格的页脚。 |
| <col> | 定义用于表格列的属性。 |
| <colgroup> | 定义表格列的组。 |
9.列表：
| <ol> | 定义有序列表。 |
| <ul> | 定义无序列表。 |
| <li> | 定义列表项。 |
| <dl> | 定义定义列表。 |
| <dt> | 定义定义项目。 |
| <dd> | 定义定义的描述。 |
| <dir> | 已废弃。使用 <ul> 代替它。 |
| <menu> | 已废弃。使用 <ul> 代替它。 |
10.分组
| 标签 | 描述 |
|---|---|
| <div> | 定义文档中的分区或节（division/section）。 属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 |
| <span> | 定义 span，用来组合文档中的行内元素。 是内联元素，可用作文本的容器。 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。 |
11.类 头部进行类的定义，body部分进行对象的定义，如：
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>12.布局
13.响应式web设计，无非是网页尺寸是可变的。其中的方法之一Bootstrap，使用现成的CSS框架，是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>14.框架分为垂直框架和水平框架。
15.Iframe，网页内显示网页。
| 标签 | 描述 |
|---|---|
| <iframe> | 定义内联的子窗口（框架） |
16.背景
17.脚本
| 标签 | 描述 |
|---|---|
| <script> | 定义客户端脚本。 |
| <noscript> | 为不支持客户端脚本的浏览器定义替代内容。 |
<script type="text/javascript">
document.write("Hello World!")
</script>18.HTML 头部元素
| 标签 | 描述 |
|---|---|
| <head> | 定义关于文档的信息。 |
| <title> | 定义文档标题。 |
| <base> | 定义页面上所有链接的默认地址或默认目标。 |
| <link> | 定义文档与外部资源之间的关系。 |
| <meta> | 定义关于 HTML 文档的元数据。 |
| <script> | 定义客户端脚本。 |
| <style> | 定义文档的样式信息。 |
19.实体
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | € | € |
| § | 小节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
20.统一资源定位器
| Scheme | 访问 | 用于... |
|---|---|---|
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页。加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件。 |
21.字符编码，URL将ASCII集合之外的字符转换为有效的ASCII编码。
22.Web Server
24.<!DOCTYPE> 声明帮助浏览器正确地显示网页。
二、XHTML
XHTML 是更严谨更纯净的 HTML 版本，是 HTML 与 XML（扩展标记语言）的结合物，XHTML 包含了所有与 XML 语法结合的 HTML 4.01 元素。
学习地址：http://www.w3school.com.cn/xhtml/index.asp
三、HTML5
标签：http://www.w3school.com.cn/tags/index.asp
1.视频，时髦着呢http://www.w3school.com.cn/html5/html_5_video.asp，
Video + DOM：http://www.w3school.com.cn/html5/html_5_video_dom.asp
2.音频：http://www.w3school.com.cn/html5/html_5_audio.asp
3.拖放：http://www.w3school.com.cn/html5/html_5_draganddrop.asp
4.canvas绘制：http://www.w3school.com.cn/html5/html_5_canvas.asp
内联SVG图像：http://www.w3school.com.cn/html5/html_5_svg.asp
两者对比：
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
5.getCurrentPosition() 方法来获得用户的位置。getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数。
| 属性 | 描述 |
|---|---|
| coords.latitude | 十进制数的纬度 |
| coords.longitude | 十进制数的经度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米计 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，从正北开始以度计 |
| coords.speed | 速度，以米/每秒计 |
| timestamp | 响应的日期/时间 |
watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch() - 停止 watchPosition() 方法
6.Web存储：http://www.w3school.com.cn/html5/html_5_webstorage.asp
HTML5 使用 JavaScript 来存储和访问数据，有localStorage 方法、sessionStorage 方法。
7.应用程序缓存：http://www.w3school.com.cn/html5/html_5_app_cache.asp
8.Web Workers，后台运行：
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>9.服务器发送事件：http://www.w3school.com.cn/html5/html_5_serversentevents.asp
10.输入类型：
| Input type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| No | 4.0 | 9.0 | 10.0 | No | |
| url | No | 4.0 | 9.0 | 10.0 | No |
| number | No | No | 9.0 | 7.0 | No |
| range | No | No | 9.0 | 4.0 | 4.0 |
| Date pickers | No | No | 9.0 | 10.0 | No |
| search | No | 4.0 | 11.0 | 10.0 | No |
| color | No | No | 11.0 | No | No |
11.表单元素http://www.w3school.com.cn/html5/html_5_form_elements.asp
12.表单属性
| Input type |
|---|
| autocomplete：规定 form 或 input 域应该拥有自动完成功能。 |
| autofocus：规定在页面加载时，域自动地获得焦点。 |
| form：规定输入域所属的一个或多个表单。 |
| form overrides：允许您重写 form 元素的某些属性设定。 |
| height and width：定用于 image 类型的 input 标签的图像高度和宽度。 |
| list：规定输入域的 datalist。datalist 是输入域的选项列表。 |
| min, max and step：为包含数字或日期的 input 类型规定限定（约束）。 |
| multiple：规定输入域中可选择多个值。 |
| novalidate：规定在提交表单时不应该验证 form 或 input 域。 |
| pattern：规定用于验证 input 域的模式（pattern）。 |
| placeholder：提供一种提示（hint），描述输入域所期待的值。 |
| required：规定必须在提交之前填写输入域（不能为空）。 |
四、CSS
CSS 参考手册：http://www.w3school.com.cn/cssref/index.asp
五、CSS3
CSS 参考手册：http://www.w3school.com.cn/cssref/index.asp
六、TCP/IP
仅仅是TCP/IP的入门知识。
HTML漏洞
因目前HTML5得到广泛应用，可能找到的学习的漏洞都是有关html5的。
1.点击劫持
点击劫持本身不是种新的攻击，这种攻击的目的是窃取受害者的鼠标按钮点击，然后将点击定向到攻击者所指定的其他页面。攻击者的目的是让用户在不知情的情况下点击隐藏的链接。目前，对于点击劫持最好的服务器端防御措施之一是被称为Framekilling的技术。本质上来说，受到影响的网站可以利用JavaScript来验证自己是否在一个iframe中运行，如果是的话，就拒绝显示页面内容。这种技术已经被在用在Facebook、Gmail和其他一些网站中。但是HTML5在iframe中增加了一个新的沙盒属性，该属性会让网站停止执行JavaScript脚本。在大多数情况 下，这其实是比较安全的做法，但也存在缺点，就是会抵消目前对点击劫持最好的防御措施。
点击劫持（ClickJacking）是一种视觉上的欺骗手段。大概有两种方式，一是攻击者使用一个透明的iframe，覆盖在一个网页上，然后诱使用户在该页面上进行操作，此时用户将在不知情的情况下点击透明的iframe页面；二是攻击者使用一张图片覆盖在网页，遮挡网页原有位置的含义。
可以准备一个页面：
<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<head>
<title>点击劫持</title>
<style>
html,body,iframe{
display: block;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border:none;
}
iframe{
opacity:0;
filter:alpha(opacity=0);
position:absolute;
z-index:2;
}
button{
position:absolute;
top: 315px;
left: 462px;
z-index: 1;
width: 72px;
height: 26px;
}
</style>
</head>
<body>
那些不能说的秘密
<button>查看详情</button>
<iframe src="http://tieba.baidu.com/f?kw=%C3%C0%C5%AE"></iframe>
</body>
</html>
可以把iframe透明设为0.3看下实际点到的东西：
这样可以骗取粉丝关注。
使用一个HTTP头——X-Frame-Options。X-Frame-Options可以说是为了解决ClickJacking而生的，它有三个可选的值：
DENY：浏览器会拒绝当前页面加载任何frame页面；
SAMEORIGIN：frame页面的地址只能为同源域名下的页面；
ALLOW-FROM origin：允许frame加载的页面地址；
具体的设置方法：
Apache配置：Header always append X-Frame-Options SAMEORIGIN
nginx配置：add_header X-Frame-Options SAMEORIGIN;
IIS配置：
<system.webServer>
...
<httpProtocol>
<customHeaders>
<add name="X-Frame-Options" value="SAMEORIGIN" />
</customHeaders>
</httpProtocol>
...
</system.webServer>参考：https://www.cnblogs.com/lovesong/p/5248483.html
2.利用跨域请求或WebSockets的端口扫描
HTML5新增通信相关两个API，跨文档消息传输与WEB Sockets API，跨文档消息传输功能，可以在不同网页文档，不同端口（跨域情况下）进行消息传递。使用web sockets api 可以让客户端与服务器端通过socket端口传递数据，这样便可以使用数据推送技术。只要获取网页所在窗口对象实例变可以实现互相通信。
3.利用桌面通知做社会工程学攻击
HTML5有一个新功能——桌面通知。这些出现在浏览器之外的弹出窗口，其实是可以用HTML程序代码进行定制的。虽然这种功能带来了很不错的交互方式，但也可能导致社会工程学攻击，例如网络钓鱼或者假冒杀毒软件等。
4.利用地理定位追踪受害者
地理定位是HTML5新功能中最受注目的一个。因为安全和隐私的考虑，网站必须先得到用户的批准，随后才能获得位置讯息。然而就和以前出现过的其他功能一样，例如Vista的用户帐户控制，Android的应用程序权限，还有无效的HTTPS凭证等，这些需要用户作决定的安全措施几乎没有任何效果。而一旦有了授权，网站不仅可以知道受害者的位置，而且还可以在用户移动时对其进行实时追踪。
5.表单篡改
攻击者可以在被注入JavaScript的网站（例如XSS攻击）中更改该网页上的表单行为。举例来说，攻击者可以改变一个网络商店的正常行为，不是将内容送到购买或是登录页面，而是将用户的身分认证信息发送到攻击者自己的网站。
对付表单篡改可以有多种方法，如进行适当的加密，或者用户信息放session后从session中拿相关信息等等