一、HTML标签、元素、元素属性的理解
1.HTML文档是由各种HTML元素组成的，如html（根）元素、head（头部）元素、body（主体）元素、title（标题）元素和p（段落）元素等，元素都是通过尖括号“<>”组成的标签形式来表现的。
实例
<!doctype html> <html lang="cn">＜!--根元素--> <head>＜!--头部元素--> <meta charset="UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>标题</title>＜!--标题元素--> </head> <body>＜!--主体元素--> <p>段落</p>＜!--段落元素--> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
当然元素还能分为“块元素”和“行元素”，块元素浏览器解析式会自动换行，而行元素则是紧跟前面一个元素显示。
例如：
2.HTML标签可以算是一些元素的命名定义，大部分有起始标签和结束标签来组成，两者的标签名称是相同的，只是结束标签多了一个斜杠“/”。
例如：
实例
<head>头部标签</head> <body>主体标签</body> <p>段落标签</p> <h1>标题标签</h1>或者<h2>标题标签</h2> <strong>粗体标签</strong>或者<b>粗体标签</b> <div>没有特别语义的标签</div>或者<span>没有特别语义的标签</span>
运行实例 »
点击 "运行实例" 按钮查看在线实例
少部分只有起始标签，而结束标签直接使用斜杠“/”来表示。
例如：
3.HTML元素属性则是对HTML元素的描述和控制信息，借助元素属性，能对HMTL文档进行美观的展示和信息的描述。
例如：
实例
<!--语言属性 英文--> <html> <!--语言属性 中文--> <html> <!--元标签的字符属性 UTF-8--> <meta charset="UTF-8"> <!--元标签的名称属性：作者，内容属性：我--> <meta name="Author" content="我"> <!--元标签的名称属性：关键词，内容属性：我,I,MY,ME--> <meta name="Keywords" content="我,I,MY,ME"> <!--元标签的名称属性：描述，内容属性：这就是我--> <meta name="Description" content="这就是我"> <!--样式属性 中间对DIV和P标签进行了字体颜色、背景样色、字体大小显示风格进行了定义--> <div style="color:#000;background:#fff;font-size:14px"></div> <p style="color:#000;background:#fff;font-size:14px"></p> <!--增强语义属性，这是一个主体内容--> <div role="main"></div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
二、列表的种类
1.无序列表，浏览器解析显示时会使用粗体圆点（典型的小黑圆点）进行标记，可以通过style="list-style-type:none"，对小黑圆点进行隐藏。
2.有序列表，浏览器解析显示时会使用数字进行标记。无序列表也能通过style定义来达到有序列表的表现形态。
3.定义列表，适用于列表中需要显示小标题的时候，dt：列表小标题，dd：列表内容
三、表格与列表的区别及使用场景
1.表格，适合多行多列的数据展示方式，例如：数据列表。
2.列表，适合单行多列或者单列多行的数据展示方式，例如：导航，侧边菜单等。
但是，传说中表格不利于SEO，因此实用场景中，对于面向前台展示需要SEO的页面，我更喜欢使用列表通过样式定义来达到表格的效果，而对于后台展示我会使用一些表格。
四、工作计划
实例
<!doctype html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>工作计划</title> </head> <body> <h1>使用ul、ol、dl实现工作计划列表</h1> <h2>这是一个无序列表</h2> <ul> <li>谈谈你对html标签, 元素与属性的理解, 并举例说明</li> <li>列表有几种, 如何定义?</li> <li>看完视频后再动手敲一遍课程学到的知识</li> <li>列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?</li> </ul> <h2>这是一个有序列表</h2> <ol> <li>谈谈你对html标签, 元素与属性的理解, 并举例说明</li> <li>列表有几种, 如何定义?</li> <li>列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?</li> </ol> <dl> <dt>这是一个定义列表</dt> <dd>谈谈你对html标签, 元素与属性的理解, 并举例说明</dd> <dd>列表有几种, 如何定义?</dd> <dd>列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?</dd> </dl> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五、商品清单
实例
<!doctype html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>商品清单</title> </head> <body> <caption>商品清单</caption> <table border="1" width="600" cellspacing="0" cellpadding="5"> <thead align="center"> <tr> <th>类别</th> <th>排序</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <tbody align="center"> <tr> <td rowspan="2">数码</td> <td>1</td> <td>充电宝</td> <td>100</td> <td>1</td> <td>100</td> </tr> <tr> <td>2</td> <td>数据线</td> <td>50</td> <td>2</td> <td>100</td> </tr> <tr> <td rowspan="2">家具</td> <td>3</td> <td>床</td> <td>10000</td> <td>1</td> <td>10000</td> </tr> <tr> <td>4</td> <td>桌子</td> <td>1000</td> <td>1</td> <td>1000</td> </tr> <tr> <td colspan="4" align="center">共计所需金额</td> <td>5</td> <td>11200</td> </tr> </tbody> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六、注册表单
实例
<!doctype html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>用户注册</title> </head> <body> <h3>用户注册</h3> <form action="register.php" method="POST"> <p> <label for="username">账号：</label> <input type="username" id="username" name="username" placeholder="用户名不能超过8个字符"> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="密码不能超过8个字符"> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="请输入您的邮箱地址"> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="18" max="50"> </p> <p> <label for="">课程：</label> <select name="" id=""> <option value="">请选择...</option> <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="game">爱好：</label> <input type="checkbox" name="bobby[]" value="game" id="game" checked><label for="game">打游戏</label> <input type="checkbox" name="bobby[]" value="program" id="program"><label for="program">敲代码</label> <input type="checkbox" name="bobby[]" value="movies" id="movies"><label for="movies">看大片</label> </p> <p> <label for="male">性别：</label> <input type="radio" name="gender" id="girl"><label for="">母的</label> <input type="radio" name="gender" id="male"><label for="">公的</label> <input type="radio" name="gender" id="secrced" checked><label for="">保密</label> </p> <p> <label for="">按钮：</label> <input type="submit" value="提交"> <input type="reset" value="重填"> <input type="button" value="按钮"> <button>提交</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例