HTML教程

段落:       <p>这是一个段落。</p>
分割线:     <hr>
标题:       <h1>这是一个标题。</h1>
换行:       <br>
加粗文本:   <b>加粗文本</b>
斜体:       <i>斜体文本</i>

超链接

使用图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
    <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32">
</a>

在当前页面链接到指定位置:
<a href="#C3">查看章节</a>
<p id="C3">这边显示该章节的内容……</p>

图片

alt 属性用来为图像定义一串预备的可替换的文本:
    <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
    
    
创建图像映射:
    <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
    <map name="planetmap">
      <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
      <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
      <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
    </map>

表格

表格:       
<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

列表

无序:
        <ul>
        	<li>Coffee</li>
        	<li>Milk</li>
        </ul>
有序:
        <ol>
        	<li>Coffee</li>
        	<li>Milk</li>
        </ol>

表单

文本域（Text Fields）:
<form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
</form>

密码字段:
<form>
    Password: <input type="password" name="pwd">
</form>

单选按钮（Radio Buttons）
复选框（Checkboxes）
提交按钮(Submit Button)
下拉列表
文本域(Textarea)
https://www.runoob.com/html/html-forms.html

框架(Iframe)

使用iframe来显示目标链接页面:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>

字符实体

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签:
    &lt; 或 &#60; 或 &#060;

不间断空格(Non-breaking Space):
    &nbsp

Canvas

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
</script>

拖放（Drag 和 Drop）

https://www.runoob.com/html/html5-draganddrop.html

Web 存储

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。