内联框架、标签划分及嵌套

学习内容

1：了解iframe标签
2：掌握标签嵌套规则
3：了解标签划分

---

---

一、iframe标签

后台管理的前台门户通常都是以单页面为主实现的，此时需要进行页面内容的嵌套，iframe标签可以在一个页面中嵌套其他页面的内容。
<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

<iframe src="http://www.baidu.com"></iframe>

属性	值	描述
align	left right top middle bottom	规定如何根据周围的元素来对齐 。
rameborder	1 0	规定是否显示 周围的边框。
width	pixels	规定 的宽度。
height	pixels	规定 的高度。
scrolling	yes no auto	规定是否在 中显示滚动条。
src	URL	规定在 中显示的文档的 URL。

二、标签划分及嵌套

1.标签划分

块元素：单独占整行（自带换行符），可以设置宽高属性的

行元素：可以在同一行显示，设置宽高不生效

行内块元素：既可以设置宽高，也可以在同一行显示（img-本身自带了宽高属性，display属性控制）

2.嵌套规则

1.行元素之间可以互相嵌套，行元素中不能嵌套块元素（html中是可以的，但是理论上来讲是不允许的）

2.块元素中可以嵌套任意的行元素，块元素之间也可以互相嵌套，但是有两种标签需要注意

p标签中是不允许嵌套其他任意的块元素
h系列的标签是不能互相嵌套（因为每个h标签都有默认的字体大小）

代码如下（示例）：

<span>价格：<strong style="color: red;">998</strong>元</span>
<hr>
<p>
  <a href="http://news.baidu.com">百度新闻</a>
  <a href="http://www.baidu.com">百度首页</a>
</p>
<hr>
<div>
  <p>在div中嵌套任意的块元素是很常见的</p>
</div>
<p>
<div>在p标签中嵌套任意的块元素都会发生页面结构的变化</div>
</p>
<h3>
  <h2>在一个小的字体中嵌套了一个大的字体</h2>
</h3>

三.div和span

div

1.<div>标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
2.<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
3.<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。
4.可以通过<div> 的 class 或 id 应用额外的样式。不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
5.<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

span

1.<span> 用于对文档中的行内元素进行组合。
2.<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
3.<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。被 <span> 元素包含的文本，可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。

<!-- span -->
		<!-- 有内容就显示，没有内容就不显示 -->
		<span></span>
		<span>我是span</span>
		<span>我是小面包</span>
		
		<form action="" method="">
			用户名：<input type="text" name="" /><span id="uid"></span><br>
			密码：<input type="text" name="" /><span id="pid"></span><br>
			<input type="submit"/>
		</form>
		
		<hr>
		<!-- div 
		有内容就显示，没有内容就不显示
		-->
		<div>
			<a href="http://news.baidu.com" target="_blank" class="mnav c-font-normal c-color-t">新闻</a>
			<a href="https://www.hao123.com" target="_blank" class="mnav c-font-normal c-color-t">hao123</a>
		</div>

其他标签

加入音频视频
<embed> 标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）。
注意：现在已经不建议使用 <embed> 标签了，可以使用 <img>、<iframe>、<video>、<audio> 等标签代替。
<source> 标签为媒体元素（比如 <video> 和 <audio>）定义媒体资源。
<source> 标签允许您规定两个视频/音频文件共浏览器根据它对媒体类型或者编解码器的支持进行选择。

	html标签还有很多，可自行百度

特殊字符

总结

1.网页基本结构的组成需要了解，方便后期JavaScript中对DOM结构进行操作

2.图片标签的相对路径使用及超链接的跳转使用要熟练

3.表单的action及method属性要掌握，input标签注意其name属性一定要存在

4.标签的嵌套规则没有明确的要求，只是根据其特征从理论上进行划分从而规范开发