Html-网页布局

div标签

是一个区块容器标记,

之间是一个容器,可以包含段落、表格、图片等各种HTML元素。

span标签

没有实际意义,为了应用样式.

HTML标签分类

  • 块级标签:占据一行,换行
<div><ul><ol><li><dl><dt><dd>
<h1>~<h6><p><form><hr>.....
  • 行内标签:在一行,不换行
<b><em><img><input><a><sup><sub><textarea><span/>

标签嵌套规则

  • 块级元素可包含行内元素和某些块级元素
  • 行内元素不能包含块元素,只能包含其他行内元素
  • 块级元素不能放在

    标签内

  • 特殊块级元素只能包含行内元素,不能在包含块级元素如:h1、h2、h3、h4、h5、h6、p、dt。
  • 块级元素与块元素并列,行内元素和行内元素并列

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <!--div标签-->
    <div><img src="images/1-kobe.jfif" height="100" width="100"/>Kobe</div>
    <div><img src="images/2-curry.jfif"height="100" width="100"/>Curry</div>
    <div><img src="images/3-james.jfif"height="100" width="100"/>James</div><br/>

    <!--span标签-->
    <span><img src="images/1-kobe.jfif" height="100" width="100"/>Kobe</span>
    <span><img src="images/2-curry.jfif"height="100" width="100"/>Curry</span>
    <span><img src="images/3-james.jfif"height="100" width="100"/>James</span>

    <!--标签嵌套规则-->
    <!--块级元素可包含行内元素和某些块级元素-->
    <div><h2></h2><a href="https://www.baidu.com/"></a></div>

    <!--行内元素不能包含块元素,只能包含其他行内元素-->
    <!--<a href=""><h1></h1><div></div></a>-->

    <span><em></em></span><!--正确-->

    <!--块级元素不能放在<p>标签内-->
    <!--<p><div>1111</div><h1>2222</h1></p>--> <!--错误-->

    <!--特殊块级元素只能包含行内元素,不能再包含块级元素
    如:h1、h2、h3、h4、h5、h6、p、dt-->
    <!--块级元素与块元素并列,行内元素和行内元素并列-->
    <div><h1></h1><p></p></div><!--正确-->
    <div><span></span><a href=""></a></div><!--正确-->
    <div><h1>666</h1><span>888</span></div><!--错误-->

</body>
</html>

执行结果

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值