zr20170114-html+css

html表单：

method属性：表单数据可以作为 URL 变量（method="get"）或者 HTTP post （method="post"）的方式来发送

input的type属性：color可以选择颜色；range可以左右调节（类似音量调节）；file是用来选择文件路径；email是填邮箱的；number可以用来设置步长调数字的数量；radio是单选项；submit是提交按钮；reset是重置按钮.

下拉菜单option：通过select>option*n来设置下拉菜单

进度条meter：<meter min="0" max="100" value="60"></meter>，value的60代表是进度，0和100表示的是进度条的进度单位。

输入首字母弹出下拉菜单datalist：<input type="text" list="year"/>   <datalist id="year">   <option value="aaaaaa"></option> </datalist>其中input的list要和datalist的id一样。

css的选择器：

!important:优先级最高的，放在样式的属性值的后面，分号的前面。例如：.one{font-size:20px!important;}
行内选择器：是在body中的标签里面进行设置，优先级今次!important。例如：<h2 class="one" style="font-size: 16px; color:red;">
 id选择器：#id表示，是仅次域!important和行内选择器的优先级比较高的选择器。例如：#two{font-size:16px; color:green;}
类选择器：.class表示，是网站制作中用得最多的选择器，优先级排id选择器后面点。例如：.box{width:300px; height:300px; color:red;}
后代选择器：用div p表示。例如：div p{width:500px}
交集选择器：用.div.box表示。例如：div.box{width:500px;}
并集选择器：用.div,.box表示。例如：.box,.txt{width:300px;}

作用域:作用域小则优先级较高，交集选择器.box,.txt比交集选择器div,div的优先级高
万能通配符*： *{padding:0; margin:0; list-style:none; font-size:12px; text-decoration:none; text-decoration:line-through;}
子代选择器：写法为：.dad>p{color:green;}。

css3的选择器：

div p:nth-child(2){color:yellow;}/*css3中的子代选择器写法*/

第几个：ul li:nth-child(1){color:red;}
偶数： ul li:nth-child(2n){color:blue;}
奇数： ul li:nth-child(2n-1){color:paleturquoise;}

改变第一个的样式：.list li:first-child{color:red;}
改变最后一个的样式：.list li:last-child{color:green;}

伪类选择器：

*在盒子里面的内容后面插入：.box:after{content:"" ; display:block; width: 200px; height:200px; background:green;}/*像是一个公式*//*/
*在盒子里面的内容前面插入：.box:before{content: ""; display: block; width: 100px; height: 100px; background:blue;}

简单计算机：

<form action="1.php" οninput="result.value=(+sum1.value)+(+sum2.value)">
  <input type="number" name="sum1" /><!--number里面只能输入数字-->     +
 <input type="number" name="sum2" /><br />     =
 <output name="result"></output>
</form>