HTML的相关概念介绍

超文本标记语言(简称：HTML)是一种用于创建网页的标准标记语言，html编辑的页面在浏览器上运行，以.html或.htm结尾，是网页内容的载体。

HTML元素

大多数 HTML 元素被定义为块级元素或行内元素。

块级元素独占一行，总在新行开始，高度，行高，内边距和外边距都是可控制，宽度默认和浏览器宽度一致。例如：h1-h6，div，p，ul等，

行内元素则可以和其他元素在一行，宽度和内容有关； 例如：a，b，en，span等。

行内块级元素（内联块级元素，行内置换元素）则介于两者之间 例如：img和input。

置换元素在浏览器中会根据元素的标签和属性，来决定元素的具体显示内容 例如：img

空标签即不包裹内容的标签，例如 br hr img 等

文本格式

在HTML中有着格式化标签，其中包括：


字体加粗 `<b>加粗</b>`	字体倾斜 `<i>倾斜</i>`
文字下标 `<sub>下标</sub>`	文字上标 `<sup>下标</sup>`
语气强调 `<strong>强调：字体表现加粗</strong>`	轻度强调 `<em>强调：字体表现倾斜</em>`
键盘文本 `<kbd> ctrl </kbd>`	计算机代码 `<code> console</code>`
预格式文本 `<pre> 有几个空格，就空几个 </pre>`

标签语义化

根据内容和结构选择合适的标签，便于开发者阅读同时对搜索引擎友好让机器很好的解析.

例如根据头部标签选择 header 标签，根据内容段落选择 article 和 p，根据表单输入选择 aside 和 input 等。这样文档结构定义明确便于后期维护。html5新增加的语义元素有：header(定义头部)；nav(定义导航链接)；footer(定义页尾)；section(定位文档中的节，页眉，页脚)article(定义独立内容：文章，评论)；aside(定义所处内容之外的内容)；figure(定义独立的流内容，照片，图表)

字符实体

在 HTML 中，某些字符是预留的，不允许在文本中使用，其中有【空格  】【< <】【> >】【& &】【￥ ¥】【© ©】【® ®】

web存储

HTML5 提供了两种在客户端存储数据的新方法：【localStorage - 没有时间限制的数据存储；】【sessionStorage -当用户关闭浏览器窗口后，数据会被删除】。两者有大小限制，一般为5Mb；

web worker

web worker 是运行在后台的 JavaScript，不会影响页面的性能。

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 运行于后台，可以在页面执行脚本时，仍然执行其他，如点击，选取等【兼容性：IE不支持】

HTML5

HTML5兼容性

浏览器支持 : 一般支持现代浏览器，如果要向以前兼容，则需要设定样式，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理，所以需要将其设定为块级元素 header, section, footer, aside, nav, article,figure { display: block; }但是ie8或更早的版本，可能不适应，所以要兼容ie9以上，则需要添加 html5shiv.js

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>（国内镜像）
<![endif]-->

canvas 画布

canvas元素用于图形绘制，通过JavaScript脚本来进行绘制

<!-- 在HTML中创建canvas 元素 -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

// 通过JS语法绘制图形
var c=document.getElementById("myCanvas");//找到canvas元素
var ctx=c.getContext("2d");//创建了context对象
//绘制红色矩形
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

SVG 可伸缩矢量图形

SVG 基于 XML，进行图形绘制。这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器

SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言; Canvas 通过 JavaScript 来绘制 2D 图形。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形;Canvas 是逐像素进行渲染的,在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象

MathML

HTML56 可以在文档中使用 MathML 元素，对应的标签是 $…$
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
        <msup><mi>a</mi><mn>2</mn></msup>
        <mo>+</mo>
        <msup><mi>b</mi><mn>2</mn></msup>
        <mo>=</mo>
        <msup><mi>c</mi><mn>2</mn></msup>
    </mrow>
</math>

拖放功能

在HTML5中，拖放作为一种常见特性，任何元素都能拖放，兼容性：IE 9+

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />

function allowDrop(ev){ ev.preventDefault(); }

function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); }

function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

web应用缓存离线

HTML5 引入了应用程序缓存，这意味着web应用可以缓存，它的优势有：离线浏览 - 用户可在应用离线时使用它们，速度更快 - 已缓存资源加载得更快；减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。兼容性：IE不支持

<html manifest="demo.appcache">  <!-- 首先在html 声明manifest="demo.appcache" -->

# 在服务器端创建扩展名为 .appcache 的Manifest文件. 放入服务器根目录
# CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 
CACHE MANIFEST
/theme.css
/logo.gif
/main.js

# NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
NETWORK:
login.asp

# FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
FALLBACK:
/html5/ /404.html