html中的框架元素
通过使用框架,你可以在同一个浏览器窗口中显示不止一个网页内容,不是层层叠叠的在一起,而是显示在不同的区域。
通常可以用来做网页的布局。
frameset标记--表示一个框架集【包含框架的集合】
定义了如何将窗口拆分成框架单元。
使用frameset标签时候不需要body元素
rows属性--将窗口拆分成上下结构,取值的个数决定了拆分成个数,取值大小数决定了拆分的每一个窗口的比例。
cols属性--将窗口拆分成左右结构,取值的个数决定了拆分成个数,取值大小数决定了拆分的每一个窗口的比例。
frame标记--表示一个框架[每个框架中放入什么文件]
src属性--指定每一个框架中所显示的网页的路径
frameborder 属性用于定义frame表示是否显示边框。
设置属性值为 "0" 移除frame的边框。
noresize="noresize"属性frame边框是否可以被拖动改变大小。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset rows="20%,80%,10%">
<frame src="top.html" frameborder="no" noresize="noresize"></frame>
<frameset cols="20%,80%">
<frame src="left.html" frameborder="no" noresize="noresize"></frame>
<frame name="iframe_right" src="right1.html" frameborder="no" noresize="noresize"></frame>
</frameset>
<frame src="bottm.html" frameborder="no" noresize="noresize"></frame>
</frameset>
</html>
html中的div和span标记
<div> 元素是块级元素,它可用于组合其他 HTML 元素的容器
实际上就是网页中的一块空白区域,在这个区域中可以包含其他的html元素。
浏览器会在其前后显示折行。
通常与css一起使用,可以用来设置网页的布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html中的div</title>
<style>
div{
width: 300px;
height: 300px;
background-color: chartreuse;
}
</style>
</head>
<body>
<h2>div标记【层】</h2>
<h2>实际上就是网页中的一块空白区域,在这个区域中可以包含其他的html元素。</h2>
<div>
<p>这个区域中可以包含其他的html元</p>
<img src="imgs/avatar2.png"/>
<br>
<font>通常与css一起使用,使用css设置div的尺寸个颜色</font>
</div>
<font size="6">浏览器会在其前后显示折行。自成一行,占满整行</font>
</body>
</html>
<span> 元素是内联【行内】元素,可用作文本的容器。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html中的span元素</title>
<style>
span{
color: blue;
font-size: 50px;
}
</style>
</head>
<body>
<h1>span 元素是内联【行内】元素,可用作文本的容器。</h1>
<h1>当与 CSS 一同使用时,span元素可用于为部分文本设置样式属性</h1>
<font size="7" color="red">测试span元素,<span>与CSS 一同使用修改部分文本的样式</span></font>
</h1>
</body>
</html>
Html中块级元素与行内元素的区别?
块级元素在浏览器显示时,通常会以新行来开始(和结束)。浏览器会在其前后显示折行。
实例: <h1>, <p>, <ul>, <table>,<div>
内联行内元素在显示时通常不会以新行开始。不会单独占据当前行,其后可以继续显示其他元素。
实例: <b>, <td>, <a>, <img>