HTML（超文本标记语言）基础知识汇总

一、语义化

什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。

语义化优点：

• 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
• 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
• 方便其他设备解析，如盲人阅读器根据语义渲染网页
• 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

二、新标签新特性

新block标签：header,footer,main,aside,article,section,nav,hgroup （主要8个）。
新表单标签，calendar、date、time、email、url、search 
媒介标签： video 和 audio 
绘画标签： canvas 

<header>

　　<header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。

　　在一个文档中，您可以定义多个<header>元素，但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。

<nav>

　　<nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。

　　在一个文档中，可定义多个<nav>元素。

<main>

　　<main> 定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。

　　需要注意的是在一个文档中不能出现多个<main>标签。

<article>

　　<article>元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

　　当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

<aside>

　　 <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

<footer>

　　 <footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

　　使用footer插入联系信息时，应在 footer 元素内使用 <address> 元素。

　　注意不能包含<footer>或者<header>

<section>

　　<section>表示文档中的一个区域（或节），比如，内容中的一个专题组。如果元素内容可以分为几个部分的话，应该使用 <article> 而不是 <section>。

　　不要把 <section> 元素作为一个普通的容器来使用，特别是当<section>仅仅是为了美化样式或方便脚本使用的时候，应使用<div>。

　　这几个标签，比较容易混淆的是<section>、<article>，所以这里特别说明：

　　“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

　　通俗来说就是<article>比<section>更具有独立性、完整性。可通过该段内容脱离了所在的语境，是否完整、独立来判断。

三、input和textarea的区别

①  <input type="text">标签

• text标签是单行文本框，不会换行。
• 通过size属性指定显示字符的长度，注意：当使用css限定了宽高，那么size属性就不再起作用。
• value属性指定初始值，Maxlength属性指定文本框可以输入的最长长度。
• 可以通过width和height设置宽高，但是也不会增加行数

②  <textarea>标签

　　<textarea>是多行文本输入框，文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier），可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

四、用一个div模拟textarea的实现

设置contenteditable这一属性为true（HTML5新增属性）

#textarea {
     width:300px;
     border:1px solid #ccc;
     min-height:150px;
     max-height:300px;
     overflow: auto;
     font-size: 14px;
     outline: none; 
}

五、移动设备忽略将页面中的数字识别为电话号码的方法

1.标准的电话号码格式是这样的:<a  href="tel:1-408-555-5555">1-408-555-5555</a>，点击后会自动打开电话功能；

2.但有时候不是电话号码的数字也会被浏览器自动解析为电话号码, 并把数字的颜色和样式都改了；

3.如果忽略页面中的数字识别为电话号码, 只要把这个默认行为关闭就行

 <meta name = "format-detection" content = "telephone=no"> 

Meta标签中的format-detection属性及含义，format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置： 

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="adress=no">
<meta name="format-detection" content="telephone=no,email=no,adress=no">

下面具体说下每个设置的作用：
1.telephone
你明明写的一串数字没加链接样式，而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！想去掉这个拨号链接该如何操作呢？这时我们的meta又该大显神通了，代码如下：

telephone=no就禁止了把数字转化为拨号链接！
telephone=yes就开启了把数字转化为拨号链接，要开启转化功能，这个meta就不用写了,在默认是情况下就是开启！

2.email

告诉设备不识别邮箱，点击之后不自动发送

email=no禁止作为邮箱地址！
email=yes就开启了把文字默认为邮箱地址，这个meta就不用写了,在默认是情况下就是开启！

3.adress

adress=no禁止跳转至地图！
adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启！

六、defer和async的区别

在HTML页面中插入Javascript的主要方法，就是使用<script>元素。这个元素由Netscape创造并在Netscape Navigator 2中首先实现。后来，这个元素就被加入到正式的HTML规范中。HTML4.01为<script>定义了6个属性，包括defer和async。defer和async都是可选的，且只对外部脚本文件有效。

1、当浏览器解析到script脚本，没有defer或async时：

<script src="main.js"></script>

浏览器会立即加载并执行指定的脚本，“立即”指在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

2、当浏览器解析到script脚本，有async时：

<script async src="main.js"></script>

浏览器会立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和main.js的加载与执行并行进行（异步）。

async不保证按照脚本出现的先后顺序执行，因此，确保两者之前互不依赖非常重要，指定async属性的目的是不让页面等待两个脚本的下载和执行，从而异步加载页面其他内容，建议异步脚本不要在加载期间修改DOM。

异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。支持异步脚本的浏览器有Firefox 3.6、Safari 5 和Chrome。

3、当浏览器解析到script脚本，有defer时：

<script defer="defer" src="main1.js"></script>
<script defer="defer"  src="main2.js"></script>

表示脚本会被延迟到文档完全被解析和显示之后再执行，加载后续文档元素的过程将和main.js的加载并行进行（异步）。HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。

七、canvas绘图

canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。标记和 SVG以及 VML 之间的一个重要的不同是，有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。 canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。

Canvas

• 通过Javascript来绘制2D图形。
• 是逐像素进行渲染的。
• 其位置发生改变，会重新进行绘制。

SVG

• 一种使用XML描述的2D图形的语言
• SVG基于XML意味着，SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。
• 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

比较

Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度：<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
　　var c=document.getElementById("myCanvas");
　　var cxt=c.getContext("2d");
　　cxt.fillStyle="#FF0000";
　　cxt.fillRect(0,0,150,75);
</script>

JavaScript 使用 id 来寻找 canvas 元素： var c=document.getElementById("myCanvas"); 

然后，创建 context 对象： var cxt=c.getContext("2d");  

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

实例 - 圆形

通过规定尺寸、颜色和位置，来绘制一个圆

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>