序言
什么是HTML
HTML 是用来描述网页的一种语言。
指的是超文本标记语言 (Hyper Text Markup Language)
不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
使用标记标签来描述网页
HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
标签是由尖括号包围的关键词，比如 <html>
标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML文档
HTML 文档 = 网页
HTML 文档包含 HTML 标签和纯文本
什么是HTML5
html5最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言，随后和W3C的xhtml2.0(标准)相结合，产生现在最新一代的超文本标记语言。可以简单点理解成：HTML 5 ≈ HTML4.0+CSS3+JS+API。
新的改进
1、在文档类型声明上
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
HTML5:
<!DOCTYPE html>
2、在结构语义上
HTML4.0：没有体现结构语义化的标签，通常这样命名,表示网站的头部
<divid="header"></div>
HTML5:提供了一些新的html5标签，比如:
<header> 、<nav>、<article>、<aside>、<footer>..
3、强大的HTML5的新功能
(1) 强大的绘图功能
1、Canvas标签
Canvas 通过 JavaScript 来绘制 2D 图形，Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
2、SVG
SVG 是一种使用 XML 描述 2D 图形的语言，SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。
(2) 新增视频标签
在html4.0的时候，想要插入一段视频，需要引用一长段的代码。但在html5下，只需用于一个video标签即可。
<videosrc="视频地址"></video>
(3) 对本地离线存储的更好的支持
(4) 新的特殊内容元素，比如 article、footer、header、nav、section
(5) 新的表单控件，比如 calendar、date、time、email、url、search
实例解析
1、列表实例
<!DOCTYPE HTML>
<html>
<body>
<h4>一个无序列表: </h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>
2、Canvas 绘制线条
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");//获取id值为myCanvas的canvas标签,(指定在哪里画）
var cxt=c.getContext("2d");//返回一个用于在画布上绘图的环境，表示二维绘图（指定画出的图案的类型）
cxt.moveTo(10,10); //定义一个起点
cxt.lineTo(150,50); //添加一条直线，起点是（10，10）
cxt.lineTo(10,50); //继续添加一条直线
cxt.stroke(); //绘制已定义的路径
</script>
</body>
</html>
网友评论