首页 > 代码库 > 表单，框架，样式表的分类及选择器基础
表单，框架，样式表的分类及选择器基础
表单元素
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可以不写" /> <input type="password" name="mm" value="密码框，value可以不写" /> <input type="hidden" name="ycy" value="隐藏域，value可以不写" /> <textarea name="文本域">这是一个双标签，其值不是写在value里面的，是写在开始结束标签之间的</textarea> <br /> <br /> <br /> <input type="button" name="普通按钮，name可以不写" value="普通按钮" /> <input type="submit" name="提交按钮，name可以不写" value="提交按钮" /> <input type="reset" name="重置按钮，name可以不写" value="重置按钮" /> <input type="image" src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/21224260.jpg" /> <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 /> <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>
表单，框架，样式表的分类及选择器基础