一、元素、属性、标签
元素：HTML 元素以开始标签起始，HTML 元素以结束标签终止。可空
属性：
Ⅰ 可以在元素中添加附加信息
Ⅱ 一般描述于开始标签
Ⅲ 总是以名称/值对的形式出现，比如：name="value"。
标签：双标签，单标签
标题：<h1-6></h1-6>
段落：<p></p>
链接：<a href="" target=""></a>
图片：<img src="" alt="" title="" />
列表：无序列表【ul】、有序列表【ol】、自定义列表【dl】
表格：
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Table - dumpling</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5" width="500" align="left"> <caption>购物车</caption> <thead> <tr> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> <th>分类</th> </tr> </thead> <tbody> <tr> <td>0</td> <td>iPhone X</td> <td>5699</td> <td>1</td> <td>5699</td> <td rowspan="2">电子产品</td> </tr> <tr> <td>1</td> <td>索尼 MX750</td> <td>10799</td> <td>1</td> <td>10799</td> </tr> <tr> <td>2</td> <td>GTX 6000K</td> <td>2199</td> <td>1</td> <td>2199</td> <td>电脑配件</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">总计</td> <td>3</td> <td>18697</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
表单：
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Form - dumpling</title> </head> <body> <form action="" method="post"> <p> <label for="username">用户名：</label> <input type="text" name="" id="username" autofocus placeholder="请输入用户名" required> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="请输入密码" autofocus> </p> <p> <label for="email">邮箱:</label> <input type="email" id="email" name="email" placeholder="example@mail.com" required> </p> <p> <label for="age">年龄:</label> <input type="number" id="age" name="age" min="16" max="70"> </p> <p> <label for="birthday">生日:</label> <input type="date" id="birthday" name="birthday"> </p> <p> <label for="course">课程:</label> <!-- 默认显示是一个,可以用size设置--> <select name="course" id="course" size="1"> <!-- 选择支持分组--> <optgroup label="前端:"> <option value="0">请选择</option> <option value="1">HTML5</option> <option value="2">CSS3</option> <!-- selected: 设置默认选项--> <option value="3" selected>JavaScript</option> </optgroup> <optgroup label="后端:"> <option value="4">PHP</option> <option value="5">MySQL</option> <option value="6">ThinkPHP</option> </optgroup> </select> </p> <p> <label for="programme">爱好: </label> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">撸代码</label> <input type="checkbox" name="hobby[]" value="programme" id="movies" checked><label for="movies">看片</label> </p> <p> <label for="male">性别: </label> <input type="radio" name="gender" value="male" id="male"><label for="male">男生</label> <input type="radio" name="gender" value="female" id="female"><label for="female">女生</label> <input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">保密</label> </p> <p> <label for="comment">简介:</label> <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不超过30字"></textarea> </p> <p> <!-- 按钮--> <input type="submit" name="submit" value="提交"> <!-- 重置不是清空, 只是恢复表单控件的默认状态或者默认值--> <!-- 重置按钮现在极少用到啦--> <input type="reset" name="reset" value="重置"> <!-- 普通按钮, 没有具体的功能, 通过JavaScript将它的行为重新定义, 例如Ajax异步提交数据--> <input type="button" name="button" value="按钮"> <!-- 推荐使用button标签定义按钮--> <!-- 默认也input:submit功能是一样的--> <button>提交1</button> <!-- 等价于--> <button type="submit">提交2</button> <!-- 普通按钮, 点击执行的行为, 由用户自定义--> <button type="button">提交3</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
内联框架：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body> <!--内联框架: 在当前页窗口中, 再次加载一个窗口, 显示另一个页面,类似画中画功能--> <h2>后台管理</h2> <ul style="float: left;"> <li><a href="demo3.html" target="main">用户管理</a></li> <li><a href="demo4.html" target="main">分类管理</a></li> <li><a href="demo5.html" target="main">商品管理</a></li> <li><a href="demo6.html" target="main">系统设置</a></li> </ul> <iframe srcdoc="<h3>网站管理后台</h3>" frameborder="" width="600" height="500" style="float:left" name="main"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
区块（容器）：div，span
