标签：河北省 size select div2 weight field 部分 script 复选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>Regis Page</h2> <from action="" method="post"> <!--from标签,模式为post--> <p><label for="username">username:</label> <!--label标签本身不会呈现任何元素,for后面的数值跟id 是一致的,关联前面的字符跟后面的输入框--> <input type="text" id="username"> </p> <!--输入框,类型是文本输入,id是方便上面的label关联--> <p>password:<input type="password"> </p> <!--这里同上,但是没有关联--> <p>hobby:<input type="checkbox" name="hobby" value="basketball">basketball <!--复选框--> <input type="checkbox" name="hobby" value="foottball">football </p> <p> Sex:<input type="radio" name="sex">radio_1 <!--单选框--> <input type="radio" name="sex">radio_2 </p> <P> <input type="button" value="Test Button"> <!--按钮本身无任何意义,跟submit不同,不会提交from中的数据--> </P> <P> <input type="file"> <!--选择而文件 from中的method 必须设置为post--> </P> <input type="submit" value="submit"> <!--submit按钮,点击会提交from中的数据给服务端--> </from> <P>Home: <select name="Home" multiple size="2"> <!--select 选择框 multiple为多选(Ctrl多选) size为默认显示几条--> <option value="hebei">河北省</option> <option value="henan">河南省</option> <option value="hunan">湖南省</option> <option value="hubei">湖北省</option> </select> </P> <p>description:<textarea name="personal" cols="30" rows="10" placeholder="个人简介"></textarea> </p> <!--长文本输入框--> <fieldset> <legend>登录</legend> <!--外边框--> <P>username:<input type="text"></P> <!--边框中的参数设置--> <P>password:<input type="password"></P> <input type="submit" value="login"> </fieldset> </body> </html>
表单属性
name: 表单提交项的键.
注意和id属性的区别：name属性是和服务器通信时使用的名称；
而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的
value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
checked: radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使.
CSS:
规则主要由两部分构成:选择器和一条或者多条声明。
引入方式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--内嵌式引入--> <style> a{ color: rebeccapurple; font-size: 30px; font-weight: 900; } p{ background-color: gold; } </style> <!--链接式引入:会在网页加载前先装载css文件--> <link rel="stylesheet" href="index.css"> <!--导入式引入:会在网页加载完毕后在加载css,当网页很大时将导致先显示没有css样式的网页,闪一下以后再出现css样式 --> <style> @import "index.css"; /*这里要注意文件的路径*/ </style> </head> <body> <p>I am P!</p> <a href="">click</a> <div>DIV</div> <div>DIV2</div> <!--行内式:在style标记后直接使用css ,不推荐使用,没有体现css 的优势--> <div style="color: red;background-color: darkgreen">DIV</div> </body> </html>
选择器:
基础选择器: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器*/ p{ background-color: rebeccapurple; } /*id选择器*/ p2{ background-color: rebeccapurple; } /*class选择器*/ .p_ele{ color: gold; } /*通用选择器*/ *{ background-color: green; } </style> </head> <body> <p class="p_ele">PPP1</p> <p id="p2">PPP</p> <p class="p_ele">PPP3</p> <div>DIV</div> <span>SPAN</span> </body> </html>
组合选择器: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ .inner p{ color: red; } .outer p{ color: red; } /*子代选择器*/ .outer > p{ color: red; } /*多元素选择器*/ .inner p,.p4{ color: red; } /*毗邻选择器 */ .outer + p{ background-color: red; } /*兄弟选择器*/ .outer ~ p{ color: red; } /*匹配class和标签名*/ ul.item li{ color: red; } div.c1{ color: red; } </style> </head> <body> <div class="c1">c1</div> <div class="outer"> <p>P1</p> <div class="inner"> <p>P3</p> </div> <p>P2</p> <a href="">click</a> </div> <a href="">aaa</a> <p>P5</p> <p class="p4">P4</p> <ul class="item"> <li>11</li> <li>11</li> <li>11</li> <li>11</li> </ul> <ol class="item"> <li>222</li> <li>222</li> <li>222</li> <li>222</li> </ol> <ul> <li>222</li> <li>222</li> <li>222</li> <li>222</li> </ul> </body> </html>
标签：河北省 size select div2 weight field 部分 script 复选框
原文地址：http://www.cnblogs.com/ldsly/p/7270058.html
