zoukankan      html  css  js  c++  java
  • 表单,框架,样式表的分类及选择器基础

    表单元素
    1.<from>代表表单,其中属性有action提交给你所设定的页面,method数据提交的方式(get显示提交有长度限制,post隐式提交)。

    2.文本的表示类型:1.文本框<input>其属性有type类型选择其中的text,valune是文本框的值,name是文本框的名称。2.<input>密码框,其中属性tybe选择password。3.隐藏域其tybe选择hidden。4!文本域用双标签<textarea>,他的值是写在开始和结束标签之间的。

    3.按钮类型:1.普通按钮<input>其属性是button。2.提交按钮其属性是submit。3.重置按钮,其属性是reset。4.图片按钮其属性是image,src选取图片。(在按钮中必须学value)。

    4.选择类型:1.单选按钮其属性是radio,2.复选框其属性是checkbox,(checked主要用于单选和复选中来默认其选项的)。 3.下拉列表用双标签<select name="下拉列表的名称">
    <option>列表中的各个项</option>
    </select>
    (在下拉列中常用selected来选中其默认项)
    4.文件选择<input tybe="file" />

    5.readonly用于只读。disabled是不可用,同时不能提交。hidden用于隐藏。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表单</title>
    </head>
    
        <body>
        
            <form action="www.666.com" method="get">
            <br /> <br /> <br />
           
                <input type="text" name="wek" value="文本框,value可以不写" />&nbsp;&nbsp;&nbsp;
                <input type="password" name="mm" value="密码框,value可以不写" />&nbsp;&nbsp;&nbsp;
                <input type="hidden" name="ycy" value="隐藏域,value可以不写" />&nbsp;&nbsp;&nbsp;
                <textarea name="文本域">这是一个双标签,其值不是写在value里面的,是写在开始结束标签之间的</textarea>&nbsp;&nbsp;&nbsp;<br /> <br /> <br />
                
                
                <input type="button" name="普通按钮,name可以不写"  value="普通按钮" />&nbsp;&nbsp;&nbsp;
                <input type="submit" name="提交按钮,name可以不写" value="提交按钮" />&nbsp;&nbsp;&nbsp;
                <input type="reset" name="重置按钮,name可以不写" value="重置按钮" />&nbsp;&nbsp;&nbsp;
                <input type="image" src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/21224260.jpg" />&nbsp;&nbsp;&nbsp;<br /> <br /> <br />
                
                
                
                <input type="radio" name="性别" value="男" checked="checked" /><input type="radio" name="性别" value="女"/><br />
                
                <input type="checkbox" name="年份" value="1995" checked="checked"/>1995
                <input type="checkbox" name="年份" value="1994"/>1994<br /><br />
                
                <select name="年份">
                    <option>1994</option>
                    <option>1995</option>
                    <option>1996</option>
                    <option>1997</option>
                    <option selected="selected">1998</option>
                    <option>1999</option>
                    <option>2000</option>
                </select><br /> 
            
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="file" name="nba" />
            </form>
        
        </body>
    </html>

    框架framest
    用framest是要去掉body。其中属性有cols代表左右拆分,rows代表上下拆分。frameboder是边框。<frame>中src是框架中页面要显示的地址,scrolling是滚动条。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>框架framest</title>
    </head>
        
         <frameset cols="300,*" frameborder="1">
                     <frame src="10.28.html" scrolling="yes" />
                    <frame src="10.28自我练习.html" scrolling="yes" />
         </frameset><noframes></noframes>
      
    </html>

    框架iframe
    是但标签元素,可以嵌在普通页面里面。src是框架中页面要显示的地址,scrolling是滚动条。frameboder是边框。width是框架宽度,height是框架的高度。
    marquee是双标签元素,其中可添加image图片。用作滚动效果,其中direction用以滚动方向。mark做标记。hr用作分隔线。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>框架iframe</title>
    </head>
    
        <body>
            <iframe src="搜狗.html" width="500" height="500" frameborder="1" scrolling="yes">
            </iframe>
            <iframe src="10.30表单自我练习.html" width="500" height="500" frameborder="0" scrolling="auto" >
            
            </iframe>
            
           <marquee direction="right"> <img src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/裤带提到胸膛,最帅是我老江.jpg" /></marquee><hr />
           <mark>卓最闪的衫</mark>扮十分感慨,有人拍照要记得插袋
            
        </body>
    </html>

    样式表的分类
    1.内联:下载body标签里面,控制精确,但是重用性差。
    2.内嵌:写在页面的head里面,没有内联精确,代码重用性好。
    3.外部:引入,右键css样式表-附加样式表,控制没有内联精确,代码重用性最好。
    优先级为内联》内嵌》外部
    选择器
    1.#id名表示,精确地寻找其有id类型命名的元素
    2..class名表示,寻找以class类型命名的所有元素
    3.标签名选中,例如div,span开头的所有元素
    4.复合元素:1.div,span表示寻找所有此类型开头的元素
    2.#id名 空格 div或span表示寻找id名下元素中,所有的div元素或者span元素。
    3.div.class名表示筛选出所有div中用以class名的所有元素。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>样式表分类与选择器</title>
    
            <style type="text/css">
                 /***{ color:#00F}/**蓝色**/
                 #d1{color:#0F0}/**绿色**/
                .c1{ color:#00F}/**蓝色**/
                 span{ color:#F0F}/**粉色**/ 
                /**#c span{ color:#F0F}/**粉色**/
                
                /**div.c1{ color:#F00}**/
                /**div,span{ color:#0F0}/**绿色**/
                
            </style>
            <link href="10.30下午样式表基础css.css" rel="stylesheet" type="text/css" />
    </head>
    
        <body>
        
                <div style="color:#F00">内联</div>
                
                <div id="d1">id准确控制</div>
                
                <div class="c1">这是第一个</div>
                <div class="c1">这是第二个</div>
                <div class="c1">这是第三个</div>
                <div class="c1">这是第四个</div>
                <div class="c1">这是第五个</div>
                
                <span>这是span1</span>
                <span>这是span2</span>
                <span>这是span3</span>
                <span>这是span4</span>
                <span>这是span5</span><br />
                
                胡hi补充包半年了南昌路上呢 胡hi补充包半年了南昌路上呢 胡hi补充包半年了南昌路上呢 胡hi补充包半年了南昌路上呢 胡hi补充包半年了南昌路上呢 胡hi补充包半年了南昌路上呢 胡hi补充包半年了南昌路上呢 胡hi补充包半年了南昌路上呢 胡hi补充包半年了南昌路上呢 胡hi补充包半年了南昌路上呢 胡hi补充包半年了南昌路上呢 胡hi补充包半年了南昌路上呢
                
                <span id="c">
                <div >这是第一个</div>
                <div>这是第二个</div>
                <div >这是第三个</div>
                <div >这是第四个</div>
                <div>这是第五个</div>
                 <span>这是span1</span>
                <span>这是span2</span>
                <span>这是span3</span>
                <span>这是span4</span>
                <span>这是span5</span>
                </span>
                
                
        
        </body>
    </html>
  • 相关阅读:
    结构体中的冒号_转
    随机数产生random
    gdb调试段错误及使用
    gcc选项-g与-rdynamic的异同_转
    linux设备模型_转
    boost 1.57.0安装
    技术的正宗与野路子_转
    (转)Java里的堆(heap)栈(stack)和方法区(method)(精华帖,多读读)
    (转)面试大总结之一:Java搞定面试中的链表题目
    (转)类加载器与双亲委派模型
  • 原文地址:https://www.cnblogs.com/AnswerTheQuestion/p/6013607.html
Copyright © 2011-2022 走看看