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等属性在正常文档流中偏移位置。

详见 CSS快速入门 https://blog.csdn.net/cnds123/article/details/112976663

】

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">&#10006;</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，用浏览器打开显示如下：

HTML5常用技术介绍

HTML5常用技术介绍

猜你喜欢