![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：理解的到位
Collection
Collection
********学习前端知识对HTML标签、元素、属性的理解是非常重要的！接下来，与大家一起聊聊我对它的理解。
首先看一个网上的总结：HTML元素是由标签和属性构成，如何理解？继续不要停...
一、标签：标签用来表明元素内容的意义，用尖括号表示。
说明一：<html></html>这是说明一个html标签，是成对出现的。
说明二：<img> 这说明是一个图片标签，单独出现。
结论：标签说明了元素的内容意义，是用尖括号表示！
二、元素：一个元素由一个开始标签、内容、其他元素及一个结束标签构成
说明一：<p>我是一个听话的孩子</p> 这个元素是由开始标签、内容、结束标签构成。
说明二：<head><title>我是一个标题</title></head>这个head元素是由开始标签、其它元素、内容、结束标签构成。
结论：看待问题需要全面，理解会更加深刻，所以元素的表示是多样的。
三、属性：对HTML元素的描述和控制信息，出现在元素开始标签的开始标签中。
先看这个（来自网络）： <元素 属性='值'> 内容 </元素>
说明一：<img src='http://www.###.com/img/logo.png'> img标签中的src属性，是一个url路径的说明。
说明二：<p style='font-size:24px;'>我在说明属性</p> 出现p标签中，说明一个style样式，控制字体大小。
结论： 属性存在于标签的开始中，是元素的组成部分，再简单说，元素是由标签和属性构成的。
四、案例
<html> <head> <title>zhaoguifu页面</title> </head> <body> <h1>html文档中元素、标签、属性的认知</h2> <p style='font-size:24px'>我的字体大小</p> <hr/> <p style='color:red;'>我的颜色是这样的</p> </body> </html>
点击 "运行实例" 按钮查看在线实例
********列表有几种, 如何定义?
1、无序列表
这个就是无序列表。
2、有序列表
这个就是有序列表
3、定义列表
<h1>定义列表</h1> <dl> <dh>要熟悉的第一点：</dh> <dd>熟悉php</dd> <dd>熟悉Html</dd> <dh>要知道的第二点：</dh> <dd>知道面向对象思想</dd> <dd>知道闭包的用法</dd> <dd>知道开发模式</dd> </dl>
点击 "运行实例" 按钮查看在线实例
***************列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
1、区别
1）列表： 单行 2）表格： 多行多列
2、按单行显示的时候用列表形式，多行多列的时候用表格，表格排版复杂度高。
3、列表能够实现的，表格一样能够实现。表格实现的列表无法使用。两者在使用场景中不同。但是，两个可以合作使用。
--》这里我用无序列表和表格结合展示，上代码
<h3>无序列表</h3> <ul> <li>学习php</li> <li>学习Html</li> <li> <table border='1' cellspacing='0' width='300' cellpadding='5'> <thead><tr> <th>序号</th> <th>姓名</th> <th>年龄</th> </tr></thead> <tr><td>1</td><td>赵桂福</td><td>20</td></tr> <tr><td>2</td><td>赵大海</td><td>22</td></tr> </table> </li> </ul>
点击 "运行实例" 按钮查看在线实例
**************我的购物车，用表格实现，翠花上代码
<h4>我的购物车</h4> <table border='1' width='300'> <thead><tr><th>用户名</th><th>购物详情</th><th>购物价格</th><th>备注</th></tr></thead> <tr> <td rowspan='2'>李冰</td> <td >康师傅小鸡炖蘑菇</td> <td>200</td> <td></td> </tr> <tr> <td>大碗方便面</td> <td>200</td> <td></td> </tr> <tr> <td colspan='2'>总计：</td><td>400</td><td></td> </tr> </table>
点击 "运行实例" 按钮查看在线实例
