HTML5常用技术介绍
div标签和span标签
<div>…</div> 标签定义 HTML 文档中的分隔(division)或部分(section)。此标签常用于组合块级元素,以便通过样式表来对这些元素进行格式化——通过CSS样式为其赋予不同的表现效果(外观)。
<span>…</span>用来将文档中的行内元素单独区分出来,方便修改样式——通过CSS样式为其赋予不同的表现效果。被 <span>包含的文本,您可以使用 CSS 对它定义样式。
将标签内的内容单独区分出来可以方便修改样式。
下面给出一个简单的例子
<!DOCTYPE html> <!-- html5标准网页声明 -->
<html>
<head>
<meta charset=utf-8" />
<title>第一个网页</title>
</head>
<body>
我编写的<span style="color:#F00">第一个网页。</span>
<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>
</body>
</html>
保存为文件名为 div标签和span标签的例子.html,用浏览器打开显示如下:
div标签和span标签常与CSS使用。
【什么是CSS
CSS(Cascading Style Sheets、层叠样式表)用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning(CSS-P)是CSS的一个扩展,它可用来控制任何东西在网页上或是说在窗口中的位置。position(位置、放置方式)决定DIVtag是如何放置的。
position语法:
position : 参数
其中,参数,常见的有:
static : 无特殊定位,对象遵循HTML定位规则
absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距,但仍有补白和边框
relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置。
DIV标签作用:设定文字、图形、表格等的摆放位置。当你把文字、图形、表格等放在DIV中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”(层)。
例1、该示例在div元素内包含一些文本,按钮,并使用style标签为div设置样式,放在head标签内,然后使用div {}并将样式信息放入花括号中。
源码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {width:200px; background:#D8FBD6; border:3px dotted black; padding:8px;}
</style>
</head>
<body>
<div>
你好!我的朋友。
<button>ABC</button>
</div>
</body>
</html>
保存为文件名为 div标签的例子.html,用浏览器打开显示如下:
DIV在实现弹出层窗口中的应用
弹出层窗口在网站/网页制作经常用于登录、注册。弹出层窗口也就是你点击到某个按钮,便会弹出一个小窗口,只要内容不是大于页面的大小,就可以使用弹出层,就不用设置跳转页面那么麻烦。
实现基本原理:
首先,我们将弹出窗口默认隐藏,当用户执行某个动作时――比如点击某个按钮、链接或者将鼠标光标移动到某个链接上时显示该窗口。此外,还要有关闭窗口的功能。
下面给出简单的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹框例子</title>
<style>
.popPosition {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#pop-container {
display: none;
z-index: 999;
}
/*遮盖层*/
#cover-tier {
background-color: #D9D9D9;
opacity: 0.5;
}
/*弹出层*/
#pop-tier {
width: 550px;
height: 350px;
border: 5px solid #C3C3C3;
background-color: #fff;
margin: auto;
text-align: center;
}
/*关闭弹出层窗口*/
#close-pop {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<button id="btn">点击显示弹出层窗口</button>
<div id="pop-container">
<div id="cover-tier" class="popPosition"></div>
<div id="pop-tier" class="popPosition">
<i id="close-pop">✖</i> <!-- 关闭符号-->
<p>这里是弹出层窗口内容部分</p>
<hr>
<p>你好</p>
</div>
</div>
</div>
<script type="text/javascript">
function temp(id) {
return document.getElementById(id);
}
// 点击按钮出现弹出层窗口
temp('btn').onclick = function() {
temp('pop-container').style.display = 'block';
}
// 点击右上角X弹出层窗口隐藏
temp('close-pop').onclick = function() {
temp('pop-container').style.display = 'none';
}
</script>
</body>
</html>
保存为文件名为 弹出层窗口简单例子.html,用浏览器打开显示如下: