About HTML
HTML 简介
HTML 历史
最初的 HTMl 是由 CERN负责制定的，后来转交给 IETF。
在 1990-1995 年期间， HTML 经历了许多次的版本修改与扩充；
1995 年的时候 HTML 的版本更新到了 HTML3.0；1997 年又完成了 HTML3.2；
同年也完成了 HTML4；次年，W3C 决定停止发展 HTML，转向和 XML 等效的 XHTML，XHTML1.0 在 2000 年制订完成；
发布了 XHTML1.0 后，在 XHTML 模块化的旗帜下，W3C 发布了与 HTML 和 XHTML 不兼容的 XHTML2.0；
在 2003 年，XForms 的发布重新点燃了人们对于 HTML 的兴趣，人们意识到 XML 仅仅适合被用作新技术（如 RSS，Atom）的载体，而不适合用来替换现有的技术（如 HTML）；
2004 年的 W3C 的研讨会上一些 HTML5 的早期提案被提交给 W3C，但是被 W3C 以该提案与其发展理念相冲突为由给拒绝，于是 W3C 决定继续开发 XHTML；
随后 Apple，Mozilla 和 Opera 一起创建了 WHATWG，版权为三个创始公司所有，WHATWG 的几个基本原则：保持向下兼容，修改规范而不是实现，规范必须足够详细防止实现规范的公司互相去逆向；WHATWG 要求 HTML5 规范包括 HTML4，XHTML1.0 和 DOM2HTML；
2006 年 W3C 表示了对 HTML5 开发的兴趣，在 2007 年和 WHATWG 组建了一个工作组来开发 HTML5 规范，WHATWG 的三个创始人公司也允许 W3C 将 HTML5 规范挂到 W3C 的名义下；
两个团队一起工作了多年，直到 2011 年，两个团队出现了分歧，W3C 希望将 HTML5 定位为 HTML 系列的最后一个规范，而 WHATWG 希望继续改进和迭代 HTML5 规范。两个团队也一起工作到现在。
HTML 的可扩展性
HTML 提供了很广泛的扩展性支持来为 HTML 文档增添语义化的支持：
使用 class 属性来拓展元素的含义与行为，但是使用更加符合语义的元素可以帮助游览器以及其它插件更好的识别出元素所代表的含义与行为。
使用 data-*="" 来将数据绑定到元素上，HTML 也提供了相应的 API 来查询和修改这些数据。
使用 <meta name="" content=""> 来定义元数据。
使用 <script type=""> 可以嵌入原始数据，可以选择内联文档和外部文档。
通过 embed 标签创建和使用插件，这也是 Flash 工作的原理。
可以通过 JavaScript 的原型机制来拓展 API，许多脚本库就是这样设计的。
HTML 基本语法
一个经典的 HTML 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>HTML 文档是由一些元素和文本组成的，非闭合元素必须包括开始标签和结束标签，闭合元素可以省略结束标签。
在 HTML 中，html 元素就是 window.document。这是一个文档元素，他包括 head 和 body 两个元素；像上面代码中的 h1 里的文本会被解析成文本节点，包括像一些换行和空格等字符也会被解析成文本节点。
Note：head 开始标签之前的文本节点会被用户代理直接忽略掉，而 body 的结束标签之后的文本节点则会被插入到 body 结束标签之前。
head 标签包括一个 title 元素，title 包括一个文本节点。
元素如果包含元素只能包含完整的元素，而不能是其一部分。比如：
<p>This is <em>very <strong>wrong</em>!</strong></p>元素可以通过设置其属性来控制其样式和行为；比如：
<a href="demo.html">simple</a>
游览器解析的时候会认为这是一条超链接，并且给它加上下划线和颜色来突出这个元素。
属性的语法是键值对的形式，key 和 value 用等号分隔，value 推荐用单引号或双引号括起来；value 如果不包含空格或反单引号，单引号，双引号，等号可以不写单引号或双引号。
对于空属性可以只写属性名，省略等号。
DOM 与 CSS
DOM 提供了一些 API 给脚本语言（如：JavaScript）来修改 DOM。比如：
<form name="main">
Result: <output name="result"></output>
<script>
document.forms.main.elements.result.value = 'Hello World';
</script>
</form>
<script>
var a = document.links[0]; // obtain the first link in the document
a.href = 'sample.html'; // change the destination URL of the link
a.protocol = 'https'; // change just the scheme part of the URL
a.setAttribute('href', 'https://example.com/'); // change the content attribute directly
</script>HTML 本身是独立于与其交互的媒体的。HTML 可能会被渲染到屏幕，语音合成器，或者在盲文显示屏上。为了控制在不同的媒体上需要 HTML 被展示成什么样子，你需要样式语言（如：CSS）。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample styled page</title>
<style>
body { background: navy; color: yellow; }
</style>
</head>
<body>
<h1>Sample styled page</h1>
<p>This page is just a demo.</p>
</body>
</html>HTML 安全
HTML 在样式语言和脚本语言的作用下变得可以交互之后，一堆安全问题也随之出现；Web 安全模型是基于源（"origins"）的概念；许多 Web 攻击都是和跨域相关。
XSS 通过向 HTML 注入脚本或其他用户代理能识别的信息来改变 HTML；如果这段注入能被保存的话，其他用户会受到降维打击；
SQL注入 常常利用表单的提交将输入信息提交到 Web 服务器后，在将信息保存到数据库时，由于代码没有过滤输入可能会导致攻击者修改数据库中的信息。
解决方法：过滤用户输入，以及用户信息的输出。
由于 HTML 表单的提交可以发生在任意的站点上，并且提交会附带上对应站点的 cookie；因此当用户访问某些恶意站点时，站点可以偷偷提交用户访问过的一些网站（如购物网站）的 HTML 表单；使得用户在无意识中受到降维打击。
解决方法：Web 服务器检查提交的站点的 Origin 字段是否来自于收信任的站点，否则应该拒绝；由于攻击方只是利用用户代理在提交表单时会提交 cookie，本身并不知道 cookie 的值，因此可以在表单里加上一段隐藏 token 来来验证是否是本站点的提交，隐藏 token 可以是 cookie 哈希后得到。
恶意占地那利用一些信息诱导用户点击，然后触发一些用户不希望看到的行为。
如：用户进入一个网站，显示一个游戏，有一个开始按钮，当用户点击后可能被诱导至购物网站；或者将受害网站放在一个 iframe 里，当用户点击时，迅速将 iframe 移动至鼠标下方。
解决办法：可以判断 top 和 window 是否相等来判断站点是否处于 iframe 中。
最后
荆轲刺秦王~
随机推荐
- docker学习笔记（5）——docker场景问题汇总（docker权限问题、docker文件目录、查看docker历史日志文件）
参考资料: 1.博客1:https://www.jianshu.com/p/d645e2ed4bb1 使用docker的时候有一些常见问题: docker权限问题:一般输入docker命令前面都要加s ...
- pyqt（二）
二.文本和图片 1. 文本控件 文本控件是QLabel from PyQt5.QtWidgets import QWidget,QApplication,QLabel from PyQt5.QtCor ...
- C#读写自定义的多字段配置文件
mark一下,日后填坑 参考: WPF 读写自己写的配置文件
- C++_Leecode20有效的括号
一.题目介绍 1.题目描述 给定一个只包括 '(',')','{','}','[',']' 的字符串 s ,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正 ...
- CSRF、DDos避免方式
XSS(Cross-Site Scripting,跨站脚本攻击)是一种代码注入攻击.攻击者在目标网站上注入恶意代码,当被攻击者登陆网站时就会执行这些恶意代码,这些脚本可以读取 cookie,sessi ...
- vue2.x结合echarts2实现显示具体省份热力图
最近研究了一下VUE2.X结合ehcarts实现热力图,先看下最终: 效果话不多说,直接上代码: 1 <!DOCTYPE html> 2 <html> 3 <head&g ...
- MATLAB绘制一幅中国地图
今天博主跟大家讲一下如何用MATLAB制作一幅中国地图,那废话不多说,我们先看一下最终效果吧. mercator墨卡托圆柱投影地图 lambert兰伯特圆锥投影地图 一张中国地图大概包括以下要素: 中 ...
- java实现下载网络图片
package com.gylhaut.picture;import java.io.*;import java.net.MalformedURLException;import java.net.U ...
- 合并两个以单链表形式表示的关于x的多项式（基于c语言）
只写函数内部的,不懂得可以看前面一篇文章对链表的实现: pLinklist addBothLinklist(Linklist* first,Linklist* second){ Linklist *n ...
- 常见的url编码
URL编码值 字符 %20 空格 %22 " %23 # %25 % %26 &; %28 ( %29 ) %2B + %2C , %2F / %3A : %3B ; %3C < ...