label标签为input元素定义标注。

label元素不呈现任何特殊效果。不过他为鼠标用户改进了可用性。如果你在label元素内点击文本就会触发此控件。就是说当用户选择该标签是，浏览器就会自动的将焦点转到与表单相关的控件上来。

其有两个属性for from。

for 规定绑定到哪一个表单元素上。（label元素的for属性值必须和相关表单元素的id属性值相同）

from规定字段所属的一个或多个表单。

例：常见的网页侧边栏弹出效果也可以完全用css动画实现。此时label标签就得到应用。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        p{

            padding: 10px 0;

        }

        body{

            min-height: 100%;

        }

        input{

            display: none;

        }

        aside{

            position: absolute;

            left: -200px;

            top: 0;

            bottom: 0;

            width: 200px;

            background-color: #BB6868;
　　　　　　　transition:0.25s ease-out;

            -webkit-transition:0.25s ease-out;

        }

        #sidebutton:checked + aside{

            left: 0;

        }

        #sidebutton:checked ~ #wrap{

            padding-left: 220px;

        }

        #wrap{

            margin-left: 20px;

            padding: 10px;
　　　　　　　transition:0.25s ease-out;

            -webkit-transition:0.25s ease-out;

        }

        #wrap>label{

            border:none;

            background-color: green;

            color: white;

        }

        #wrap>label:hover{

            background: #000;

        }

    </style>

</head>

<body>

    <input type="checkbox" id="sidebutton">

    <aside>导航栏</aside>

    <div id="wrap">

        <label for="sidebutton">Menu</label>

        <p>HTML和CSS实现侧边栏弹出效果</p>

    </div>

</body>

</html>

此例很好的展示了label标签的应用。通过label标签与input的结合在应用上css动画可以很好的解决网页上面的一些简单点击动画效果。（如ppt效果的幻灯片也可以用此实现）

HTML label标签的一点理解的更多相关文章

  1. 在学习HTML——form表单中的label标签时的一点小体会

    在我啃了一遍书本之后,开始了在慕课看视频的过程,从最开始的HTML+CSS的基础课程看起,在第5-9小节讲到了form表单的label标签, 首先看一下慕课的讲解:  label 标签不会向用户呈现任 ...

  2. 说说HTML5中label标签的可访问性问题——张鑫旭

    一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...

  3. WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

    一．前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本 ...

  4. [HTML5]label标签使用以及建议

    for 属性规定 label 与哪个表单元素绑定. 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <label&g ...

  5. a标签中的label在IE下触发不了a标签的href链接（label标签——解析）

    <a href="http://www.baidu.com/" target="_blank"> <span>百度</span&g ...

  6. RxSwift 入坑好多天 - 终于有了一点理解

    一.前言 江湖上都在说现在就要赶紧学 swift 了,即将是 swift 的天下了.在 api 变化不大的情况下,swift 作为一门新的语言,集众家之所长,普通编码确实比 oc 要好用的多了 老早就 ...

  7. 【转】WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

    一．前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要是对文本输入控件进行样式开发,及相关扩展功能开发,主要内容包括: 基本文 ...

  8. mycat的schema.xml的个人的一点理解

    官方文档里讲的详细的部分的我就不再赘述了,我只是谈谈我自己的理解 刚开始接触mycat,最重要的几个配置文件有server.xml,schema.xml,还有个rule.xml配置文件 具体都是干啥用 ...

  9. 关于css中层叠性的一点理解

    关于css层叠性的一点理解 标签(空格分隔): html css 我们平时在写css的时候会遇到这样的情况 <!DOCTYPE html> <html lang="en&q ...

随机推荐

  1. 【转】ubuntu下最好用的输入法fcitx-sunpinyin

      http://www.freetstar.com/index.php/ubuntu-most-use-friendly-fcitx-sunpinyin 今天难得折腾一会儿输入法,对于系统美化方面的 ...

  2. IOS9.0中hash值的bug与解决方案

    事件起因 事情是这样的:产品上线发布,突然出现了问题.运营Gg过来反应,当场给露珠演示,运营同事的手机是iphone,bug确实是存在的.奇怪的是露珠用了其他iphone手机(借别人的,露珠的是吊死安 ...

  3. 剑指Offer面试题：12.在O(1)时间删除链表结点

    一.题目:在O(1)时间删除链表结点 题目:给定单向链表的头指针和一个结点指针,定义一个函数在O(1)时间删除该结点. 原文采用的是C/C++,这里采用C#,节点定义如下: public class ...

  4. [nRF51822] 12、基础实验代码解析大全 · 实验19 - PWM

    一.PWM概述: PWM(Pulse Width Modulation):脉冲宽度调制技术,通过对一系列脉冲的宽度进行调制,来等效地获得所需要波形. PWM 的几个基本概念: 1) 占空比:占空比是指 ...

  5. [SDK2.2]SQL Azure (13) Azure的两种关系型数据库服务：SQL Azure与SQL Server VM的不同

    <Windows Azure Platform 系列文章目录> 如果熟悉Windows Azure平台的用户不难发现,对于SQL Server数据库来说,微软提供了两种服务,分别是: -W ...

  6. Linux学习之Exam系统发布

    配置时间:2015年11月27日 配置人:撰写人:微冷的雨   Happy 01.Linux安装图 欢迎页面 桌面 02.Linux命令之文件目录操作 给北大青鸟五道口校区创建三个机房(L4,L5,L ...

  7. Visualize The Workshop

    这篇文章是从我的 github 博客 http://lxconan.github.io 导入的. 今天这篇文章是准备瞎扯的.平常工作的时候,我希望尽可能的将一切自动化,让自己尽可能的舒适与懒惰.两个输 ...

  8. .NET 基础 一步步 一幕幕 [注释、命名规则、访问修饰符、数据类型、常量、变量]

    注释.命名规则.访问修饰符.数据类型.常量.变量 话说一个不会写注释的程序猿的不是一个好吃货,我们本篇就从注释开始说起好了. 在C#中有三种注释: 第一种:单行注释  以//开头,后面的就是注释内容 ...

  9. int and string

    int转string一.#include <sstream> int n = 0; std::stringstream ss; std::string str; ss<<n; ...

  10. iOS---runtime介绍

    本文目录 1.Runtime简介 2.Runtime相关的头文件 3.技术点和应用场景 3_1.获取属性\成员变量列表 3_2.交换方法实现 3_3.类\对象的关联对象,假属性 3_4.动态添加方法, ...