4.布局标签

布局的概念可以看一下这个 78.布局管理_potato123232的博客-CSDN博客

目录

1  盒子标签

2  水平线标签

3  语义化标签

4  文档标签 iframe

4.1  基本使用

4.2  边框 frameborder

4.3  iframe之间的通讯

---

1  盒子标签

我们用div与span创建盒子，用的时候这样用就行了

从外观上来看没有任何作用

div一行只能有一个，span一行可以有多个

像这里的 为你推荐 用的就是一个div

这里也是

span在这里有应用，一行可以放多个，这里他使用了多组span

2  水平线标签

水平线标签用hr表示,它的效果是这样的

一般我们想搞一条线的时候会用css的border搞 

3  语义化标签

一个网页是有结构的，像我红框框出的部分叫头部，蓝框框出来的部分叫内容部分，绿框框出来的部分是尾部

我们如果不使用语义化标签，那么以上的所有部分都要用div来写，这样再我们给样式的时候有麻烦一些，为了减少麻烦，我们可以使用语义化标签

• header 头部标签
• nav 导航标签
• article 内容标签
• section 文档某一个区域标签(任意一个区域都行)
• aside 侧边栏标签
• footer 尾部标签
• main 主体标签

 

他们的展示效果上与div都一样，且都自己独占一行，在IE9中不是，所以我们需要在css中将其转换为块级元素(display:block;)

 

每个语义化标签在一个html文件中都可以有多个，我们可以理解为名称不同的div

4  文档标签 iframe

iframe相当于在html文件A中，使用iframe放置另一个html文件B

iframe本身不独占一行，可以对iframe设置宽与高

4.1  基本使用

我们先写一个被调用的html

这个html打开后全是青色

之后我们在另一个html文件中使用iframe

这样我们就可以在 调用.html 中使用 被调用.html 了

4.2  边框 frameborder

我们可以看到这里是有边框的

可以使用 frameborder="0" 取消边框

4.3  iframe之间的通讯

可以看一下这个 js 关于iframe页面之间通信, 传递消息-CSDN博客

在大事件项目前端有所应用 https://blog.csdn.net/potato123232/article/details/129323882