HTML5常用技术介绍

清疚 2022-10-31 00:38 17阅读 0赞

### HTML5常用技术介绍 ###

**div标签和span标签**

<div>…</div> 标签定义  HTML 文档中的分隔（division）或部分（section）。此标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化——通过CSS样式为其赋予不同的表现效果（外观）。

<span>…</span>用来将文档中的行内元素单独区分出来，方便修改样式——通过CSS样式为其赋予不同的表现效果。被 <span>包含的文本，您可以使用 CSS 对它定义样式。

将标签内的内容单独区分出来可以方便修改样式。

下面给出一个简单的例子

<!DOCTYPE html> 
    <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，用浏览器打开显示如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70][]

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][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，用浏览器打开显示如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1][]

**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，用浏览器打开显示如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70]: /images/20221024/409bde03cc974bdea41af0efc8ff5d1a.png
[https_blog.csdn.net_cnds123_article_details_112976663]: https://blog.csdn.net/cnds123/article/details/112976663
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1]: /images/20221024/c4b25017ef3744a0ba7abfcded67034e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2]: /images/20221024/fcfcf9aefc9e4ce8b50cb4e73e8f7846.png