zoukankan      html  css  js  c++  java
  • html5

        

    HTML <span> 元素是内联元素,可用作文本的容器

    <span> 元素也没有特定的含义。

    当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

     div:定义了文档的区域,块级的(block-level)

    span 用来组合文档中的行内元素,内联元素(inline)

     <span>表示内联属性

    使用 <span> 元素对文本中的一部分进行着色:

    <p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
     
     
    <div style="color:#0000FF"> <h3>这是一个在 div 元素中的标题。</h3> <p>这是一个在 div 元素中的文本。</p> </div>
     
     

    文本域(Text Fields)

    文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

    <form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
    </form>

    密码字段

    密码字段通过标签<input type="password"> 来定义:

    <form>
    Password: <input type="password" name="pwd">
    </form>
     

    单选按钮(Radio Buttons)

    <input type="radio"> 标签定义了表单单选框选项(使用radio来表示单选的时候,必须将name设置为一样的值,不然不会起作用

    <form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
    </form>

    浏览器显示效果如下:

    Male
    Female

    表示发送电子邮件 。value表示默认值

    <form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
    Name:<br>
    <input type="text" name="name" value="your name"><br>
    E-mail:<br>
    <input type="text" name="mail" value="your email"><br>
    Comment:<br>
    <input type="text" name="comment" value="your comment" size="50"><br><br>
    <input type="submit" value="发送">
    <input type="reset" value="重置">

    </form>

    =====================================================

    HTML 表单标签

    New : HTML5新标签(http://www.runoob.com/html/html-forms.html)

    <form> 定义供用户输入的表单
    <input> 定义输入域
    <textarea> 定义文本域 (一个多行的输入控件)
    <label> 定义了 <input> 元素的标签,一般为输入标题
    <fieldset> 定义了一组相关的表单元素,并使用外框包含起来
    <legend> 定义了 <fieldset> 元素的标题
    <select> 定义了下拉选项列表
    <optgroup> 定义选项组
    <option> 定义下拉列表中的选项
    <button> 定义一个点击按钮
    <datalist>New 指定一个预先定义的输入控件选项列表
    <keygen>New 定义了表单的密钥对生成器字段
    <output>New 定义一个计算结果

    ===========================================================================


    复选框(Checkboxes) checked="checked"表示默认被勾选

    <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

    <form>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car 
    </form>

    浏览器显示效果如下:

    I have a bike
    I have a car

    使用selec作为下拉菜单时候,如果在option中设置selected 作为默认被选中的 ,下面例子代表Fiat是默认被选中的。(也叫“预选下拉列表”)

    <form action="">
    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected>Fiat</option>
    <option value="audi">Audi</option>
    </select>
    </form>

    文本域:使用textarea

    <textarea rows="10" cols="30">
    我是一个文本框。
    </textarea>

    对按钮上的字设置为自己想要的字,在value中设置即可。

    <input type="button" value="Hello world!">

    本例演示如何在数据周围绘制一个带标题的框。(legend表示标题名字 <fieldset>将form里面的内容放入一个框框里面 )

    <fieldset>
    <legend>我的个人信息</legend>
    name:<input type="text" name="name">
    email:<input type="text" name="email">
    </fieldset>

     
     
     
     
  • 相关阅读:
    JavaWeb--HttpSession案例
    codeforces B. Balls Game 解题报告
    hdu 1711 Number Sequence 解题报告
    codeforces B. Online Meeting 解题报告
    ZOJ 3706 Break Standard Weight 解题报告
    codeforces C. Magic Formulas 解题报告
    codeforces B. Sereja and Mirroring 解题报告
    zoj 1109 Language of FatMouse 解题报告
    hdu 1361.Parencodings 解题报告
    hdu 1004 Let the Balloon Rise 解题报告
  • 原文地址:https://www.cnblogs.com/xiaohouzai/p/7669131.html
Copyright © 2011-2022 走看看