博客列表 >对HTML标签、元素、属性的理解2019.8.30 08:00

对HTML标签、元素、属性的理解2019.8.30 08:00

努力拼搏----赵桂福的博客
努力拼搏----赵桂福的博客原创
2019年09月02日 09:20:40671浏览

********学习前端知识对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 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议