html+css201809281

今天学习了html的表单以及快速的学习了一遍css，一切都是为了明天学习javascript的时候能更好的理解吧，目前已经找好了两个教程，一个入门一个进阶，大致看了看，都挺简短的，今天学的太多了，挺乱的，梳理一下吧。

form表单，带有两个属性，method和action,method是跟着post或者get方法，这个主要是后台使用的，这里先不追究了就，action是将数据传向的地址，也就是引导的地址。

form表单里面主要用了input标签，input里面有type,name,value三个属性，来完成界面上的各种东西，显示的不同主要是type的不同，name是后台使用的,这个等web开发的时候在学吧,value是提交的数据值。

多行文本的话type可以用textarea。

当type设置成radio或者checkbox的时候，界面显示的是单选按钮，当type设置成radio的时候，name一定要都一样，才能实现单选的效果，radio有个checked属性，用checked="checked"可以设置成默认选中，type设置成checkbox的时候，和radio是一样的。

下拉框的实现：<select><option></option></select>,option有个value属性，就是选择的时候传的值，option有个selected属性，默认选择的是哪个，也就是说多选的小框内显示的是哪个。

表单的提交按钮，要把type设置成submit,重置功能要把type设置成reset，重置的意思是重置到开始给予的value值，而不是重置为空值。

label可以把其他标签绑定到label身上,利用的是标签的id，用的是label的for属性，将for的值设置为input的id，那么就可以绑定到一起了。

<label>你对什么运动感兴趣</label><br>

<label for="run">慢跑</label>

<input type="checkbox" name="hobby" id="run" />

<label for="dengshan">登山</label>

<input type="checkbox" name="hobby" id="dengshan" />

<label for="basketball">篮球</label>

<input type="checkbox" name="bobby" id="basketball">

css嵌入的三种格式，内嵌，嵌入，外茜，嵌入在head内放到style标签，外茜在head内加link标签，

<link href="styles.css" rel="stylesheet" type="text/css">，引用css文件。

css选择器 ：标签选择器,标签选择器当多个标签时候，中间用，连接，比如p,span{}，还有类选择器以及id选择器,子选择器，后代选择器，通用选择器，伪类选择器，

id选择器是#，类选择器用.，id选择器和类选择器的区别以及相同点

首先相同点是可以应用于任何标签，不同点，1、类选择器可以用于多个标签，而id选择器不行。2、类选择器可以同时定义两个类，如 <span class="myclass1 myclass2"></span>

这样两个类同时作用于span的内容的，id不能这样做。

子选择器的写法是p>span，在p下面有span标签，中间用>连接，后代选择器是.p的class span

子选择器是对其下面第一层起作用的,下面在p里面嵌套了一个p,然后在第二层p里面加span,这样是不起作用的，但是后代选择器是可以的,格式为.class+空格+标签名。

通用选择器用#，意思就是所有的都是这个格式的。

伪类选择器大多用于a标签，点击，鼠标划过等等的各种状态。

最后是几种选择器的先后顺序：

当我们为同一个设置不同类型的时候，元素会根据权限值的高低来判断哪个会显示，

标签的权值为1，类选择符的权值为10，ID选择符的权值为100。例如下面的代码：

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/ 这里是p下面span的标签属性1+1

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/  

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

权限值的计算是随着嵌套一层一层的加如果权限值一样的情况下那么后面的起作用。如果这时候在某个样式中加上！importment，那么就是这个样式起作用。importment的用法如下，

p{color:red!important;}这样无论在下面在定义多少个p的类型，都是这个p来决定。

内容有点多了，再写一个手记吧，这篇手记主要是html的表单、css的引用以及css的选择器，
下篇是css的一些字体方面的设置以及最重要而且核心的css盒子模型。