HTML，超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 批注：一种数据传输格式，安全，易用，稳定。其解析由浏览器来完成。
标签：
<!DOCTYPE html> 声明为 HTML5 文档 <html> 元素是 HTML 页面的根元素 <head> 元素包含了文档的元（meta）数据。 <meta charset="utf-8"> 定义网页编码格式为 utf-8。 <title> 元素描述了文档的标题 <body> 元素包含了可见的页面内容 <h1> 元素定义一个大标题 <p> 元素定义一个段落<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head> <base href="http://www.runoob.com/images/" target="_blank"> </head>定义了文档与外部资源之间的关系。 批注：没懂，大概是引用外部资源的意思吧。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>样式
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>meta标签描述了一些基本的元数据。元数据也不显示在页面上，但会被浏览器解析。通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
用于加载脚本文件，如： JavaScript。
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。 CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS外部引用 - 使用外部 CSS 文件当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:
<head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>src 指 "source"。alt，当图片无法显示时会显示alt中的文本。
tr是行，td是列。
其他属性：
<table> <!-- 定义表格 --> <th> <!-- 定义表格的表头 --> <tr> <!-- 定义表格的行 --> <td> <!-- 定义表格单元 --> <caption> <!-- 定义表格标题 --> <colgroup> <!-- 定义表格列的组 --> <col> <!-- 定义用于表格列的属性 --> <thead> <!-- 定义表格的页眉 --> <tbody> <!-- 定义表格的主体 --> <tfoot> <!-- 定义表格的页脚 -->无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表使用 <ul> 标签。
<ul> <li>Coffee</li> <li>Milk</li> </ul>有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。 列表项使用数字来标记。
<ol> <li>Coffee</li> <li>Milk</li> </ol>自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>块级元素在浏览器显示时，通常会以新行来开始（和结束）。 实例: <h1>, <p>, <ul>, <table>
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 块级 (block-level)
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">主要的网页标题</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> 内容在这里</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版权 © runoob.com</div> </div> </body> </html>float:left 横向布局，默认为纵向布局。
<span> 元素是内联元素，可用作文本的容器.<span> 元素也没有特定的含义。 内联元素(inline)
表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
<form action="demo_form.php" method="post/get"> <input type="text" name="email" size="40" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit" value="Send"> <input type="reset"> <input type="hidden"> <select> <option>苹果</option> <option selected="selected">香蕉</option> <option>樱桃</option> </select> <textarea name="comment" rows="60" cols="20"></textarea> </form> <form> <!-- 定义供用户输入的表单 --> <input> <!-- 定义输入域 --> <textarea> <!-- 定义文本域 (一个多行的输入控件) --> <label> <!-- 定义了 <input> 元素的标签，一般为输入标题 --> <fieldset> <!-- 定义了一组相关的表单元素，并使用外框包含起来 --> <legend> <!-- 定义了 <fieldset> 元素的标题 --> <select> <!-- 定义了下拉选项列表 --> <optgroup> <!-- 定义选项组 --> <option> <!-- 定义下拉列表中的选项 --> <button> <!-- 定义一个点击按钮 --> <datalist>New <!-- 指定一个预先定义的输入控件选项列表 --> <keygen>New <!-- 定义了表单的密钥对生成器字段 --> <output>New <!-- 定义一个计算结果 -->通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。 iframe语法:
<iframe src="URL" width="200" height="200"></iframe>frameborder="0" 可以移除边框。
颜色值由十六进制来表示红、绿、蓝（RGB）。
每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。
十六进制值的写法为 # 号后跟三个或六个十六进制字符。
三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。
RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。
设置背景颜色：
<p style="background-color:rgb(255,255,0)"> 通过 rbg 值设置背景颜色 </p><script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
<script> document.write("Hello World!"); </script><noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<script> document.write("Hello World!") </script> <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>以下的 HTML 4.01 元素在HTML5中已经被删除:
<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike><tt><canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。
一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>canvas 的左上角坐标为 (0,0). canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); //画矩形 ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); //画矩形 //画路径 ctx.moveTo(0,0); //移动坐标 ctx.lineTo(200,100); //画线 ctx.stroke(); //画出路径 //画文本 ctx.font="30px Arial"; ctx.fillText("Hello World",10,50); // 创建渐变 var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // 填充渐变 ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); //画图片 var img=document.getElementById("scream"); ctx.drawImage(img,10,10);更多参考：https://www.runoob.com/tags/ref-canvas.html
HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <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> </body> </html>TODO.
使用 getCurrentPosition() 方法来获得用户的位置。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p> <button onclick="getLocation()">点我</button> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML="该浏览器不支持获取地理位置。"; } } function showPosition(position) { x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; } </script> </body> </html>color,date,datetime,datetime-local,email,month,number,range,search,tel,time,url,week
颜色盘。
<form action="demo-form.php"> 选择你喜欢的颜色: <input type="color" name="favcolor"><br> <input type="submit"> </form>date 类型允许你从一个日期选择器选择一个日期。
生日: <input type="date" name="bday">datetime 类型允许你选择一个日期（UTC 时间）。
<input type="datetime" name="bdaytime">datetime-local 类型允许你选择一个日期和时间 (无时区).
<input type="datetime-local" name="bdaytime">其余输入类型参考 https://www.runoob.com/html/html5-form-input-types.html
<datalist> 元素规定输入域的选项列表。 批注：多合一。
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist><keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen> 标签规定用于表单的密钥对生成器字段。
<form action="demo_keygen.asp" method="get"> 用户名: <input type="text" name="usr_name"> 加密: <keygen name="security"> <input type="submit"> </form><output> 元素用于不同类型的输出，比如计算或脚本输出：
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>使用HTML5可以在本地存储用户的浏览数据。 早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
客户端存储数据的两个对象为：
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 对象! // 一些代码..... } else { // 抱歉! 不支持 web 存储。 }localStorage存储的数据永久保存。
localStorage.sitename="菜鸟教程"; document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;实例解析： 使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。 检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);读取数据：localStorage.getItem(key);删除单个数据：localStorage.removeItem(key);删除所有数据：localStorage.clear();得到某个索引的key：localStorage.key(index); //保存数据 function save(){ var siteurl = document.getElementById("siteurl").value; var sitename = document.getElementById("sitename").value; localStorage.setItem(sitename, siteurl); alert("添加成功"); } //查找数据 function find(){ var search_site = document.getElementById("search_site").value; var sitename = localStorage.getItem(search_site); var find_result = document.getElementById("find_result"); find_result.innerHTML = search_site + "的网址是：" + sitename; }sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
//打开数据库 var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); var msg; //查询，创建，插入 db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")'); msg = '<p>数据表已创建，且插入了两条数据。</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>查询记录条数: " + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; document.querySelector('#status').innerHTML += msg; } }, null); });