10.11(day50)form表单，css的引入，css选择器，css修改字体属性
关于浏览器
一般使用谷歌浏览器，在谷歌浏览器可以执行的同样可以用于别的浏览器
检查功能：可查看当前页面代码
Elements:当前页面代码：
Console:编写js代码
Network:数据发送流程
Style：当前页面css格式，可修改但是无法保存
手机图标下：Responsive模拟手机端测试
form表单
功能：向服务端传送数据
表单属性
action:向何处提交表单
method:提交表单的方法
enctype:规定被提交数据的编码
<form action="" method="" enctype="">
<!--action:法向某个文件或者当前页面 提交地址-->
<!--method：默认get 提交方式，也叫请求方式-->
<!--enctype传输方式-->
表单元素
input：
text:文本框，可见
password:密文
radio:单选框
checkbox:复选框
submit:提交按钮；发送数据
reset:重置：清空当前的数据
hidden:隐藏输入框
file;发送文件
name:表单提交的键
value:当用于button,reset,submit是为文本内容
当用于text,password,hidden是为默认值
用于radio,checkbox,file是为想关联的值
<form action="" method="" enctype="">
<!--action:法向某个文件或者当前页面 提交地址-->
<!--method：默认get 提交方式，也叫请求方式-->
<!--enctype传输方式-->
<!--提交的内容写在from里面-->
<!--一般用div来换行-->
<input type="text" name="" value="">
<!--text文本模式，可见，name：拼接信息,value增加默认值,readonly不可改
disabled,不可修改，hidden:隐藏
password，密文不可见
radio，单选
checkbox,多选，check=checked默认选中
submit，提交 value可改变值
file,文件
reset,充值，清空已输入的信息
button，按钮
-->
select:
选择：
multiple：设置为多选，需要按住crtl
disabled:禁用
selected;默认值
value:提交的值
<div>
<select name="" id="" multiple>
<!--多个选择一个,multiple ctrl按住多选,selected默认选中-->
<!--option value，选项-->
</select>
</div>
lable:没有实际意义
textarea
多行文本框
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
<!--文本框，比如评论栏，中间写默认值,cols列数，rows行数-->
</div>
行内元素与块级元素
行内元素：与其他元素在一行
高度，宽度，内边距不可控
宽度就是内容高度，不可变
只能嵌套行内元素，不能包含块级元素
块级元素：总是从新的一行开始
高度，宽度可控
宽度没有设置是，默认为100%
块级元素可以包含块级元素和行内元素
p标签不能包含块级标签，p标签也不能包含p标签。
css简介与引入方式
css定义如何显示html元素
组成：选择器：{属性1：值；属性2：值},
注释：/**/
行内样式
<!--行内样式，写在标签里面-->
<div style="width:10px;height:20px;background-color: blue"></div>
内部样式
<!--内部样式,写在head下style内-->
<style>
.a{width:10px;height:20px;background-color: blue}
</style>
外部样式
<!--外部样式,导入css文件-->
<link rel="stylesheet" href="b.css">
css选择器
基本选择器
标签选择器：直接选择标签名添加属性
<style>
div{
color:red;
}
</style>
</head>
<body>
<!--标签选择器，只要是这个标签就会被选中他下面的所有标签都会继承样式-->
<div>hahahaha</div>
</body>
id选择器：选择标签的id添加属性
<style>
#a{
color:red
}
</style>
</head>
<body>
<div id="a"></div>
</body>
类选择器：给class属性添加属性，又该class属性的标签继承添加的属性
<style>
.p{
color:red;
}
.q{
color:blue;
}
</style>
</head>
<body>
<div class="p q">asd</div>
<!--如果多个类属性且有相同的属性值，使用最后一个的
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。-->
</body>
</html>
通用选择器：给全部标签添加属性
<style>
*{}
</style>
</head>
<body>
<div></div>
<span></span>
<p></p>
</body>
</html>
组合选择器
后代选择器:第二代继承的属性第(2+n)代也会继承
<style>
div div{color:darkred}
/*找到div下面的所有第二层div*/
div .a{}
#b .a{}
</style>
</head>
<body>
<div id="b" class="b">
<div></div>
<div class="a"></div>
</div>
</body>
</html>
儿子选择器:只有第二代会继承
<style>
div>div{ color:red;}
</style>
</head>
<body>
<div>
<!--只选择儿子-->
<div>erzi
<div>sunzi</div>
</div>
</div>
</body>
</html>
毗邻选择器:相邻的下一个标签
<style>
div+p{color:red}
</style>
</head>
<body>
<div>
asd
</div>
<p>ppp</p>
兄弟选择器:sapn后面所有兄弟及其后代继承
<style>
span~.a{color:red}
</style>
</head>
<body>
<div>
<span>1</span>
<div class="a">2
<div>4</div>
</div>
<p class="a">3</p>
</div>
</body>
属性选择器:选取具有某一属性某种标签添加属性
<style>
div[name]{color:red;}
div[name="123"]{color:red;}
</style>
</head>
<body>
<div name="1"></div>
<p name="2"></p>
<div></div>
</body>
组合选择器：使用多种选择器合作来选取标签,选取多个标签用逗号隔开
<style>
/*div{color:red}*/
/*p{color:red}*/
div .b .a,p{color:red}
</style>
</head>
<body>
<div>
<div class="b">1
<div class="a">2</div>
</div>
<div class="a">3</div>
</div>
<p>4</p>
</body>
</html>
伪类选择器
<style>
a:link{color:red}
/*未访问的*/
a:hover{color:blue}
/*鼠标悬浮显示的颜色*/
a:active{color:purple}
/*选定时的颜色*/
a:visited{color:green }
/*访问过显示的颜色*/
/*之后访问会保留颜色，除非删除浏览器记录*/
input:focus{outline:yellow}
</style>
</head>
<body>
<a href="http://www.baidu.com">点击</a>
</body>
</html>
伪元素选择器:添加特殊样式
<style>
p:first-letter { font-size: 48px; color: red; }
body{
font-size: 16px; color: red;
}
span{
color: blue;
}
</style>
</head>
<body>
<p>我<span >爱</span>你</p>
</body>
</html>
选择器的优先级
行内样式：1000
id选择器：100
类选择器：10
权重计算永不进位
css设置字体属性
<style>
body{font-family:}
/*font_family,多个字体，从第一个开始，使用浏览器支持的第一个字体
font_size;字体大小
color:字体颜色，英文，16进制，RGB值
font-weight:字体粗细
*/
</style>
