复习html与CSS基础知识4

复习html与CSS基础知识4

复习html基础知识4
今天我们继续学习之前没学完的表单—>
get 提交的数据会显示在浏览器的地址栏
那要做到即能提交，又不想用户看见，怎么办？
那这里就需要用到 hidden 控件，这是一个隐藏域控件

 <form action="://localhost:8080/oa/login" method="post">
    	username<input type="text" name="username"/><br>
    	password<input type="password" name="password"/><br>
    	<input type="submit" name="提交" value="login"/><br>
    </form>

post 提交的数据不会显示在浏览器的地址栏

<form action="://localhost:8080/oa/login" method="post">
    	username<input type="text" name="username"/><br>
    	password<input type="password" name="password"/><br>
    	<input type="submit" name="提交" value="login"/>
    </form>

那要做到即能提交，又不想用户看见，怎么办？
那这里就需要用到 hidden 控件，这是一个隐藏域控件

<form action="://localhost:8080/oa/save" method="get">
    	<input type="hidden" name="usercode" value="212312">
    	username<input type="text" name="username"/></form>

输入用户名<input type="text" name="yonghuming" value="dfd" readonly />
    	password<input type="password" name="password"/>

这里的 redonly 表示用户名只读，但是提交数据时随表单数据一起提交，我们可以做一个让用户一定要提交的东西。

输入密码<input type="text" name="密码" value="dfd" disabled />
    	<input type="submit" value="保存"/>

这里的 disabled 表示也只读，但是提交数据时，不随表单数据一起提交，这里我们可以给用户做一个，警示的作用。

省份：
<select name="province" size="3" multiple="">
     		<option value="">请选择省份</option>
     		<option value="1">广东省</option>
     		<option value="2">河北省</option>
     		<option value="3">湖南省</option>
     		<option value="4">湖北省</option>
     		<option value="5">云南省</option>
     		<option value="6">广西省</option>
     		<option value="7">福建省</option>
</select>

size 属性表示显示条目，属性值就是条目数量
mutiliple 表示多选，支持多选，属性值表示可以选择的数量。还需要CTRL键辅助

file 控件，上传文件用的

<input type="file" name="" value="选择文件"/>

属性设置可输入的最大长度，属性值就是长度值

<input type="text" maxlength="4">

以上就是表单部分的补充内容，下面开始DIV+CSS部分的复习。
那什么是DIV呢
想必都听过，div也就是我们前端页面经常用来布局的一个小方块，被程序员称之为盒子，就像一个一个盒子放在网页上，有规则的显示出所要的页面。
div是图层，也可以叫做盒子，用来网页布局
以前用表单布局，后来使用div，更容易布局，具有相对稳定性，又具有灵活性
span也可以布局
两者区别：div独自占用一行
span块级元素，不会独自占用一行

<div id="div1">
		我是一个div盒子
	</div>
	hello word<br>
	a<span id="span1">
		我是一个span元素
	</span>b

接下来就是div在网页中的应用。在使用div的同时自然少不了盒子的外表啊，颜色啊大小啊之类的，那这时候我们就需要用的CSS来把这个盒子变成你想要的模样了。
那什么是CSS呢
Cascading Style Sheet 层叠样式语言
用来修饰HTML页面。让HTML页面更好看。通俗一点就是给div化妆。

引入CSS的方式

1. 内联样式：内联定义的语法格式：< 标签 style="样式名：样式值;样式名=“样式值”;></标签>

<div id=""  style="width:200px;height: 200px;background-color: pink"></div>

2. 样式块语法，定义内部样式块对象

 <div id="mydiv">
    用户名：<input type="text" name="username" /><br>
    密码：<input type="password" name="password" id="mima" />
    </div>

3. 引入外部独立的样式表文件，这里就需要建立外部css 文件；来存放 css 样式代码。在实际的开发中，这种方式使用较多，可降低维护成本

<link rel="stylesheet" type="text/css" href="css/my.css">

外部建立的css文件，那我们是如何寻找到html页面中的各个盒子的呢，这个时候我们就需要给各个盒子取一个独有的名字了，那这就是所谓的id选则器了

常见的选择元素的方式有三种：

1. id选择器：
   id属性在html的作用，id具有唯一性，不可重复，
   JavaScript语言对某个节点进行操作，可以通过id 先获取节点再改

html代码

<div id="mydiv">
    用户名：<input type="text" name="username" /><br>
    密码：<input type="password" name="password" id="mima" />
    </div>

css代码

#mydiv{
    		width: 200px;
    		height: 300px;
            background-color: yellow;
    	}

注意：id选择器的使用，要在id前面加“#”

2. 标签选择器：就是元素标签

html代码

邮箱地址:<input type="email" name="text">

这里可以使用类选择器，也可以使用标签选择器

css代码

input {
    		width: 300px;
    		height: 50px;
    		/*分开写样式*/
    		border-color: red;
    		border-style:dashed;  /*虚线*/  
    		border-width:1px; 
    			/*总样式*/
    		border:1px solid blue; /*实线*/
      }

3. 类选择器：在html中，任何一个节点元素都有class属性，用来指定标签类名
   标签虽然不同，但是属于同一类，类名相同就是指同一类，在css样式中可以统一定义

html代码

<span class="student">1</span>
<span class="student">2</span>
<div class="student">3</div>

css代码

.student {
    		width: 400px;
    		height: 100px;
    		background-color: red;
    	}

注意：类名的使用，要在类名前面加“.”

注意： 优先级：id选择器>类选择器>标签选择器

以上就是如何选择器选中要修改样式的元素方法，那接下来就看看我们一些常用的样式。
常用样式

字体样式： font-size

html
 <span class="nameerror">用户名不能为空</span>
  <a href="http://www.baidu.com">百度</a>

css
.nameerror {
	font-size: 12px;
	color: red;
        }
a {
	text-decoration:none; /*去掉超链接的下划线*/
}

设置鼠标悬停效果
hover设置鼠标悬停效果
使用hover的时候，冒号两边不能出现空格

html
 <span  id="bj">疯仔今天学习了呢</span>

css
#bj:hover {
    color: red;
    cursor: pointer;
}

内补丁，外补丁 既内外边距。

html
 <div id="mydiv2"></div>

css
#mydiv2 {
	width: 300px;
	height: 300px;
	background-color: red;
    border:1px black solid;
    margin-top: 300px;
    margin-left: 300px;
   padding-right: 100px;/*让原来的盒子在原有的基础上增加*/
   }

浮动效果与定位

html
<div id="waibu">
    <div id="neibu">
    </div>
</div>

<div id="div1"></div>
<div id="div2"></div>

css
#waibu {
	width: 200px;
	height: 200px;
	background-color: red;
}

#neibu {
	width: 150px;
	height: 150px;
	background-color: yellow;
	float: right;
}
#div1 {
	width: 300px;
	height: 300px;
	background-color: red;
	position: absolute;    /*绝对定位：只需设置X轴Y轴坐标即可*/
	top: 100px;
	left: 400px;
	border:2px solid black;

}

#div2 {
	width: 200px;
	height: 200px;
	background-color: blue;
	position: absolute;    /*绝对定位：只需设置X轴Y轴坐标即可*/
	top: 140px;
	left: 440px;
	border:2px solid black;

}

好了以上就是我们今天的复习内容啦，害，从头开始学，突然发现自己真的是什么都不记得了，完全跟没有学过的一样，希望自己能坚持下去，还有两个月，大四上就要结束了，加油，冲冲冲~~~~~~