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=""> 来定义元数据。

  • 使用 rel="" 注明扩展文档的预定义类型

  • 使用 <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>
  1. HTML 文档是由一些元素和文本组成的,非闭合元素必须包括开始标签和结束标签,闭合元素可以省略结束标签。

在 HTML 中,html 元素就是 window.document。这是一个文档元素,他包括 head 和 body 两个元素;像上面代码中的 h1 里的文本会被解析成文本节点,包括像一些换行和空格等字符也会被解析成文本节点。

Note:head 开始标签之前的文本节点会被用户代理直接忽略掉,而 body 的结束标签之后的文本节点则会被插入到 body 结束标签之前。

head 标签包括一个 title 元素,title 包括一个文本节点。

  1. 元素如果包含元素只能包含完整的元素,而不能是其一部分。比如:

<p>This is <em>very <strong>wrong</em>!</strong></p>
  1. 元素可以通过设置其属性来控制其样式和行为;比如:

    <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 攻击都是和跨域相关。

  1. XSS 攻击SQL 注入攻击

XSS 通过向 HTML 注入脚本或其他用户代理能识别的信息来改变 HTML;如果这段注入能被保存的话,其他用户会受到降维打击;

SQL注入 常常利用表单的提交将输入信息提交到 Web 服务器后,在将信息保存到数据库时,由于代码没有过滤输入可能会导致攻击者修改数据库中的信息。

解决方法:过滤用户输入,以及用户信息的输出。

  1. CSRF 攻击

由于 HTML 表单的提交可以发生在任意的站点上,并且提交会附带上对应站点的 cookie;因此当用户访问某些恶意站点时,站点可以偷偷提交用户访问过的一些网站(如购物网站)的 HTML 表单;使得用户在无意识中受到降维打击。

解决方法:Web 服务器检查提交的站点的 Origin 字段是否来自于收信任的站点,否则应该拒绝;由于攻击方只是利用用户代理在提交表单时会提交 cookie,本身并不知道 cookie 的值,因此可以在表单里加上一段隐藏 token 来来验证是否是本站点的提交,隐藏 token 可以是 cookie 哈希后得到。

  1. 点击劫持

恶意占地那利用一些信息诱导用户点击,然后触发一些用户不希望看到的行为。

如:用户进入一个网站,显示一个游戏,有一个开始按钮,当用户点击后可能被诱导至购物网站;或者将受害网站放在一个 iframe 里,当用户点击时,迅速将 iframe 移动至鼠标下方。

解决办法:可以判断 top 和 window 是否相等来判断站点是否处于 iframe 中。

最后

荆轲刺秦王~

随机推荐

  1. 什么是NFT?

    我有一个年轻朋友,最近买了一个数字艺术品,9百多入手,几周后卖掉,赚了7万多,他告诉我这个东西叫NFT. 2021年twitter创始人杰克.多西将自己发布的第一条twitter通过NFT以250万美 ...

  2. 怎样打开win7的IIS功能及internet信息服务(IIS)管理器在哪里

    1:在windows7桌面上的左下角,点击"开始",找到"控制面板",并点击进去.如下图所示: 2:进入控制面板后,首先将"查看方式"选择为 ...

  3. MySQL第四讲

    昨日内容回顾 表与表之间建关系(外键) """ 表与表之间最多只有四种关系 一对多 多对多 一对一 没有关系 在确定表与表之间的关系的时候记住一句话 换位思考 " ...

  4. JZ-015-反转链表

    反转链表 题目描述 输入一个链表,反转链表后,输出新链表的表头. 题目链接: 反转链表 代码 /** * 标题:反转链表 * 题目描述 * 输入一个链表,反转链表后,输出新链表的表头. * 题目链接: ...

  5. linux tr命令实现windows文本格式与linux文本格式间的转换

    tr 命令 转换和删除字符 选项: -d --delete:删除字符 -s --squeeze-repeats:把连续重复的字符以一个字符表示,即去重 -c –C --complement:取字符集的 ...

  6. ajax 无刷新页面登录

    1:页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. supervisor启动报错

    supervisor 启动失败报错 Error: Another program is already listening on a port that one of our HTTP servers ...

  8. 程序语言与编程实践2-> 蓝桥杯C/C++备赛记录1 | 入门了解与首周训练

    寒假前班主任帮我们报了名,是得好好准备准备.作为一个CSer,coding能力一定不能太弱.我反思,好久没写C/C++代码了,净是些随手写的python脚本,刚开始上手题目bug一大堆. 由于也不是啥 ...

  9. BUU [GKCTF 2021]签到

    BUU [GKCTF 2021]签到 1.题目概述 2.解题过程 追踪HTTP流 在下面发现了一串可疑字符 Base16转base64 放到010里看看 复制下来,去转字符 好像不是,再回去找找其他的 ...

  10. 通过Geth搭建私有以太坊网络

    前言 为了进一步了解以太坊区块链网络的工作方式和运行原理,笔者通过官方软件Geth搭建了私有以太坊网络fantasynetwork,最终实现了单机和多机节点间的相互连通:首先通过VMware Work ...