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>
  • 相关阅读:
    io学习
    asp.net文件上传进度条研究
    asp.net页面中的Console.WriteLine结果如何查看
    谨慎跟随初始目的不被关联问题带偏
    android 按钮特效 波纹 Android button effects ripple
    安卓工作室 日志设置
    安卓工作室 文件浏览器 android studio File browser
    一个新的Android Studio 2.3.3可以在稳定的频道中使用。A new Android Studio 2.3.3 is available in the stable channel.
    新巴巴运动网上商城 项目 快速搭建 教程 The new babar sports online mall project quickly builds a tutorial
    码云,git使用 教程-便签
  • 原文地址:https://www.cnblogs.com/AnswerTheQuestion/p/6013607.html
Copyright © 2011-2022 走看看