HTML
表单标签<form></form>
-
form标签属性
- action:表单提交的路径,可以是html,也可以是服务器地址
- method:表单提交方式,默认get提交,还有post提交
- get提交的数据追加到url上
- post提交的数据不追加到url上
<form action="#" method="get"> ... </form> -
input标签类型
- hidden:隐藏字段
- 数据需要和表单一同带到服务器中,但是不现实在客户端页面
隐藏字段:<input type="hidden" name="id" value="" /><br />- text:文本输入框
<!--value属性一般不用--> <!--maxlength:最多输入数--> <!--readonly:不可编辑--> <!--size:输入框长度--> 用户名:<input type="text" name="user_name" id="user_name" value="" maxlength="5" size="30" readonly="readonly" placeholder="请输入用户名"/><br />- password:密码输入框
<!--required:必填项--> 密码：<input type="password" name="password" required="required"/><br />- radio:单选框
性别:<input type="radio" value="0" name="gender" />男 <input type="radio" name="gender" value="1" />女<br />- checkbox:复选框
爱好:<input type="checkbox" name="hobby" value="fish" />钓鱼 <input type="checkbox" name="hobby" value="game" />打电动 <input type="checkbox" name="hobby" value="code" />敲代码- file:文件上传
头像:<input type="file" name="pic" id="pic" value="" />- submit:提交按钮
- reset:重置按钮
- button:普通按钮
<input type="submit" id="submit" name="" value="注册"/> <input type="button" value="普通按钮"/> <input type="reset" value="重置" /> - hidden:隐藏字段
-
select:下拉框
籍贯:<select name="province">
<option value="0">--请选择--</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
- textarea:文本域
<textarea name="about_me" rows="1" cols="15"></textarea>
CSS
div & span
- div:块状元素
<div id="">
余浩宏
</div>
余浩宏
- span:行内元素
<span id="">
余浩宏
</span>
余浩宏
css基本选择器
- 元素选择器
- style标签在head标签内
- style标签的type属性"text/css"可以省略
- 不同的属性之间用分号隔开
<style type="text/css">
div {
font-size: 30px;
color: gold;
font-family: "微软雅黑";
}
- 类选择器
<style>
.div2{
font-size: 30px;
color: gold;
}
</style>
<body>
<div class="div2">
余浩宏
</div>
</body>
- id选择器
#id_name{
font-size: 30px;
color: yellow;
}
css其他选择器
- 层级选择器
<!--div标签下的p标签-->
div p{
font-size: 30px;
color: green;
}
- 属性选择器
<!--input标签中属性type为text的标签-->
input[type='text']{
background-color: red;
}
css引入方式
- 内部引入:在style标签中写css属性
<style type="text/css">
div{
font-size: 30px;
color: pink;
}
</style>
- 行内引入:通过每个标签的style属性引入css
<div style="font-size: 20px;color: blue;">
余浩宏
</div>
- 外部引入:通过引入外部css文件
<!--在head中通过link引入外部文件-->
<link rel="stylesheet" href="style.css" type="text/css"/>
css浮动
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
- 由于浮动框不在文档的普通流中， 所以文档的普通流中的块框表现得就像浮动框不存在一样。
- 浮动:float: left;
#id_name{
border: 1px solid red;
width: 600px;
height: 150px;
float: left;
}
- 清除浮动
.clear{
clear: both;
}
css补充
- ul-li去除垂直格式:css中,display=inline(水平显示且去除点)(块状标签转为行内标签)
- div中text-align:center内部居中
- margin: auto;div部居中
- a标签css属性去除下划线
a {
text-decoration: none;
}
网友评论