框架标签，CSS，div，span

在开始写之前先介绍CSS中常见的两种标签
**div：**是一个非常纯净的块标签，没有自带任何样式，没宽，没有高度，没有背景颜色。块标签默认宽度会占一整行。
span： 是一个非常纯净的行标签，没有自带任何样式，没宽，没有高度，没有背景颜色。行标签不会占据一整行，内容有多宽它就多宽。
多媒体标签

<video src="mp4/monkey.mp4" width="320" height="240" controls="controls">
（大多数浏览器无法识别上面的视频，下面的框架标签可以识别网络视频，所以代一下）
<iframe src="//player.bilibili.&cid=95251075&page=1" scrolling="no" border="0"
 frameborder="no" framespacing="0" allowfullscreen="true" width="500px" height="400px">
</iframe>

框架标签：
框架标签可以让一个页面有多个独立的板块，现在的很多页面都是如此，新闻一半视频一半。但是值得注意的是框架视频不能和body标签共存。
框架标签frame的一些属性：
①name
设置框架名称。此为必须设置的属性。
②src
设置此框架要显示的网页名称或路径。此为必须设置的属性。
③scrolling
设置是否要显示滚动条。设定值为auto, yes, no。
④bordercolor
设置框架的边框颜色。
⑤frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
⑥noresize
设置框架大小是否能手动调节。
⑦marginwidth
设置框架边界和其中内容之间的宽度。
⑧marginhight
设置框架边界和其中内容之间的高度。
⑨width
设置框架宽度。
⑩height
设置框架高度。
这是我粘的一些属性，基本在我们初期的时候已经够用了
除此之外还有两个非常重要的属性介绍一下
cols： 纵向分割页面。其数值表示方法有三种：“30%、30（或者30px）、" * ”；数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%；“30”表示该区域横向宽度为30像素；“ * ”表示该区域占用余下页面空间。例如：cols=“25%,200,*” 表示将页面分为三部分，左面部分占页面30%，中间横向宽度为200像素，页面余下的作为右面部分。
rows： 横向分割页面。数值表示方法与意义与cols相同。
在框架分割过程中尽量避免出现横向和纵向分割出现在一个 frame 标签中。

 <frameset rows="20%,*"  framespacing="10">
			 <frame src="top.html"  noresize="noresize">
	     	<frameset cols="20%,*">
	     		 <frame src="left.html"  noresize="noresize" >
				  <frame src="right.html" name="right_body"  noresize="noresize" scrolling="yes">
	     	</frameset>
	     </frameset>

然后你在根据链接名创出相应html文件让其可以跳转。
这里要贴一下left.html的格式

	<ul>
			<li><a href="http://www.baidu.com" target="right_body">进入百度</a></li>
			<li><a href="http://www.163.com" target="right_body">进入网易</a></li>
			<li><a href="home.html" target="right_body">进入首页</a></li>
			<li><a href="newss.txt" target="right_body">观看小说</a></li>
			<li><a href="img/timg.jpg" target="right_body">查看图片</a></li>
		</ul>

这里的target可以像我上一篇提到的一样可以让它在新的网页打开或者在本网页打开，但如果你想让它在这个框架的右端部分出现则可以将其写为right_body。

CSS

它的标准格式

<div id="" style="font-size: 20px;color: red;font-family:微软雅黑;">

<div id="" style="width: 200px; height: 300px;border: 1px black solid;margin-top: 20px;background-image: url(img/timg.jpg);background-size: 100% 100%;">

这个就像上面指令一样，它的格式全都是要用style包裹起来，这里要说一下font-family（字体格式）和background-size（背景尺寸），由于有的电脑上没有那么多的字体，因此选字体的时候先查查字体库，然后就是背景尺寸。这个标签比较有用，因为在实际中我们的图片大小并不能跟我们规定的地方大小相匹配，所以将图片的宽和高都设置为100%就可以让图片吃满整个地方，但这有可能会让图片变形。

CSS跟HTML 结合的方式

由于每个html标签都有一个style属性，而我们可以在这个属性里通过CSS代码来控制标签的一些样式，所以就有了它们二者的组合方式。
1.内联样式：就是将CSS代码写在标签的内部
2.内部样式：就是将CSS代码单独写在一个style标签内，他要配合选择器来使用，可以控制多个标签的展示样式
3，外部样式：将CSS代码单独写在一个文件中，可以对多个页面的样式进行控制
这几种方式里第一中不太常用因为要完成一个网页所需要的代码以及标签非常多，如果用第一二种那么代码的复用性则非常差。

这里要提一下的是CSS里面的元素定位标签position，它的两种模式在使用中非常常见， 相对定位relative 和绝对定位absolute，相对定位运用在浮动中，绝对定位则运用在页面的下拉菜单之类的用途中。

层的浮动

	<div id="" style="width: 200px;height: 200px;background: yellow;float: left;margin-left:10%;">

层的浮动是使用标签float来实现的，向左浮动就写left，向右浮动就写right。这里要说明的是层的浮动是搭配着div使用的，因为div是一个纯净的快标签，如果没有浮动的话那么它会将整行占满，而浮动之后则会消除这个弊端。

<div id="" style="clear:left"> 消除层的浮动

消除浮动之后接下来的层不会再挨着上一个层，而是重新开始。

行标签和快标签

块标签；在设置上下左右的间距时，等能够起作用
行标签：设置左右间距，起作用，但是设置上下间距不起作用

		display:none 隐藏这个标签
		inline 可以将块标签转成行标签
		block:可以将行标签转成块标签
		inline-block; 可以让行标签设置上下间距

行和快标签的转换

<h1 style="display: inline;">这是一个块标签</h1>
		<b style="display: block;">这是一个行标签</b>
		<b style="display:inline-block;">这是一个行标签</b>

标签的隐藏

标签的隐藏有两种方式：
1，visibility：hidden 隐藏后这个块标签的位置还在 visible 显示
2，display：none 隐藏后这个块标签的位置不在了 block显示