码迷,mamicode.com
首页 > 其他好文 > 详细

表单,框架,样式表的分类及选择器基础

时间:2016-10-30 19:53:33      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:选择器   rom   checkbox   结束   表单   action   class类   ted   nal   

表单元素
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>

 

表单,框架,样式表的分类及选择器基础

标签:选择器   rom   checkbox   结束   表单   action   class类   ted   nal   

原文地址:http://www.cnblogs.com/AnswerTheQuestion/p/6013607.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!