首先学习了表单标签:form
<form action="#" method="get">
<!--当要提交表单，想要提交的项目我们就应该添加一个name属性-->
用户: <input type="text" name="username" required="required" /><br />
密码: <input type="password" name="password" readonly="" /><br />
确认密码:<input type="password" /><br />
性别:<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
<br />
爱好:<input type="checkbox" />吃饭
<input type="checkbox" />睡觉<br />
年龄:<select name="age">
<option>--选择年龄--</option>
<option>20</option>
<option>21</option>
<option>22</option>
</select><br />
隐藏字段:<input type="hidden" name="id" value="" /><br />
文件:<input type="file" /><br />
提交:<input type="submit" /><br />
重置:<input type="reset" /><br />
</form>通过form标签，我们可以将页面数据提交到服务器。当然这都是后话。
关键还是对于CSS的学习。
------------------------------------------分割------------------------------------------
css主要是在<style></style>这个标签里书写的.
1.ID选择器 使用#+id
这里要说一下什么是ID了，其实就是每一个标签里的一个重要属性，而ID选择器就是我们为所有ID值等于某个值的标签设置css
第一个选择器，我怕只是贴出style标签那一段，会看不懂，所以全贴出来了
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
#div1{
font-size: 40px;
color: green;
}
</style>
</head>
<body>
<div id="div1">
说起苏轼的感情生活，相信大部分人首先想到的就是王弗和那首千古流传的悼亡词《江城子·乙卯正月二十日夜记梦》。
</div>
<div>
说起苏轼的感情生活，相信大部分人首先想到的就是王弗和那首千古流传的悼亡词《江城子·乙卯正月二十日夜记梦》。
</div>
</body>
</html>上边的代码就是为所有id=div1的标签设置格式.
2.类选择器 使用.+类名
<style>
.myDiv{
font-size:30px;
color:red;
}
</style>只要标签的class这个属性是myDiv的都设置为上边的风格.
3.元素选择器 标签名
<style>
div{
font-size: 20px;
color: yellow;
}
</style>这里只要是div标签的都会使用这个风格.
4.层级选择器 标签名+空格+标签名
<style>
div p{
font-size: 40px;
color: #FFFF00;
}
</style>这里只要是div标签下的p标签都会使用这个风格.
5.属性选择器 标签名[属性='???']
<style>
/* 注意标签与[]之间不可以留下空格 */
input[type='text']{
background-color: #008000;
}
input[type='password']{
background-color: #FF0000;
}
</style>这里只要是input标签下的属性为type为text的都会使用这个风格.
------------------------------------------分割------------------------------------------
然后，学习CSS引入方式，一共分为三种
行内引入，内部引入，外部引入
1.行内引入
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
color: #FF0000;
}
</style>
</head>
<body>
<div>大家好我是红色的</div>
<div style="color: #008000;">大家好因为我使用了行内引入 因为就近原则 所以我是绿色的</div>
</body>
</html>可以看出在下方的第二个div里有个属性style也是设置风格的，因为就近原则，所以最后的风格是属性里的style的设置
2.行内引入
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
font-size: 200px;
}
</style>
</head>
<body>
<div>
说起苏轼的感情生活，相信大部分人首先想到的就是王弗和那首千古流传的悼亡词《江城子·乙卯正月二十日夜记梦》。
</div>
</body>
</html>
可以看出，我们一直使用的就是上面的内部引入.
3.外部引入
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div> 我使用了外部引入 </div>
</body>
</html>什么叫外部引入呢?学习过Java就可以知道，我们通过import关键字来导入包，使用类。这里也是这样我们从外部导入了一个css文件:style.css，这里要注意路径，就是在我的上一篇博文中的img标签里的路径问题.