元素：
元素就是组成html的基本对象，并且任何网页浏览器都可以直接运行HTML文件。
标签：
标签就是具体的代码块比如<head></head><div></div><a></a>大部分的标签都是成对出现的。
当然也有单标签，比如<hr/><img/><br/>等
属性：
为HTML元素提供各种附加信息的就是HTML属性，它总是以"属性名=属性值"这种名值对的形式出现
比如img表的的"href"，和input标签的"type"属性等。
前端开发中经常使用的标签 列表
列表有有三种：
无序列表<ul></ul>
有序列表<ol></ol>
定义列表<dl></dl>
表格标签<table></table>
列表与表格的关系，什么时候用列表，时候用表格？
大多数情况下我们一般使用的都是无序列表<ul></ul>一般用在网站的导航栏，新闻页面的标题等。
表格一般用在显示网站数据，也用做布局使用，主要就是显示一个数据表里面的数据，一般在网站后台管理系统中比较常用。
一个小demo案例--工作计划
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>工作计划--列表标签的使用</title> </head> <body> <h2>工作计划</h2> <ul> <li>html元素属性之间的关系</li> <li>前端课程开发讲解</li> <li>php实战cms</li> </ul> <ol> <li>开发环境的搭建</li> <li>html标签的使用</li> <li>css样式表的使用</li> <li>php大型实战cms</li> </ol> <dl> <dt>前端主要学习的内容</dt> <dd>前端主要学习html,css,js，jquery...</dd> <dt>后端主要学习的内容</dt> <dd>后端开发中主要学习php后端语言以及mysql关系型数据库</dd> </dl> </body> </html>
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>工作计划--列表标签的使用</title> </head> <body> <h2>工作计划</h2> <ul> <li>html元素属性之间的关系</li> <li>前端课程开发讲解</li> <li>php实战cms</li> </ul> <ol> <li>开发环境的搭建</li> <li>html标签的使用</li> <li>css样式表的使用</li> <li>php大型实战cms</li> </ol> <dl> <dt>前端主要学习的内容</dt> <dd>前端主要学习html,css,js，jquery...</dd> <dt>后端主要学习的内容</dt> <dd>后端开发中主要学习php后端语言以及mysql关系型数据库</dd> </dl> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
商品清单demo案例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>商品清单--demo</title> </head> <body> <table border="1" cellspacing='0' cellpadding="5" width="300" > <caption>清单demo</caption> <tr> <th>分类</th> <th>书名</th> <th>价格</th> <th>数量</th> <th>金额</th> </tr> <tr> <td rowspan="5">书籍大全</td> <td>php</td> <td>20</td> <td>5</td> <td>80</td> </tr> <tr> <td>jquery</td> <td>20</td> <td>2</td> <td>60</td> </tr> <tr> <td>asp</td> <td>20</td> <td>2</td> <td>60</td> </tr> <tr> <td>java</td> <td>20</td> <td>2</td> <td>60</td> </tr> <tr> <td>c#</td> <td>20</td> <td>2</td> <td>60</td> </tr> <tr> <td colspan='3'>合计</td> <td>13</td> <td>350</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
注册表单demo
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>注册demo</title> </head> <body> <h2>注册demo</h2> <form action=""> <p> <label for="username">姓名:</label> <input type="text" name="username" id="username" placeholder="请填写用户名"> </p> <p> <label for="password">密码:</label> <input type="password" name="password" id="password" placeholder="输入密码"> </p> <p> <label for="age">年龄:</label> <input type="number" name="age" id="age" min="18" max="100"> </p> <p> <label for="hobby">爱好:</label> <input type="checkbox" name="hobby[]" id="daqiu"> <label for="daqiu">打球:</label> <input type="checkbox" name="hobby[]" id="game"> <label for="game">游戏:</label> <input type="checkbox" name="hobby[]" id="code" checked> <label for="code">编程</label> </p> <p> <label for="">性别:</label> <label for="male">男生<input type="radio" name="gender" id="male"></label> <label for="female">女生<input type="radio" name="gender" id="female"></label> <label for="secret">保密<input type="radio" name="gender" id="secret" checked></label> </p> <p> <label for="">课程：</label> <select name="" id=""> <optgroup label="前端"> <option value="">html</option> <option value="">css</option> <option value="">javascript</option> </optgroup> <optgroup label="后端"> <option value="">php</option> <option value="">mysql</option> <option value="">laraver</option> </optgroup> </select> </p> <p> <label for="">按钮：</label> <input type="submit" value="提交"> <input type="reset" value="重填"> <input type="button" value="按钮"> <button>提交</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
