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

1、语义化

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

语义化优势：

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

2、新标签新特性

新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>更具备独立性、完整性。可经过该段内容脱离了所在的语境，是否完整、独立来判断。

3、input和textarea的区别

①  <input type="text">标签

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

②  <textarea>标签

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

4、用一个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; 
}

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

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就开启了点击地址直接跳转至地图的功能,在默认是状况下就是开启！

6、defer和async的区别

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

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

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

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

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

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

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

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

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

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

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

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

7、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>