博主信息
博文 19
粉丝 0
评论 0
访问量 20632
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
对HTML标签、元素、属性的理解2019.8.30 08:00
努力拼搏----赵桂福的博客
原创
900人浏览过

********学习前端知识对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、无序列表

实例

<h3>无序列表</h3>
<ul>
<li>学习php</li>
<li>学习Html</li>
</ul>

运行实例 »

点击 "运行实例" 按钮查看在线实例

这个就是无序列表。

2、有序列表

实例

<h2>有序列表</h2>
<ol>
<li>了解php</li>
<li>了解Html</li>
</ol>

运行实例 »

点击 "运行实例" 按钮查看在线实例

这个就是有序列表

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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 

批改状态:合格

老师批语:理解的到位
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学