********学习前端知识对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>
运行实例 »
点击 "运行实例" 按钮查看在线实例