1.form表单提交
<form></form>
属性:
name:表单的名称
action:行动(提交的路径)
method:方法,提交的方式
post:向服务器传送数据、传递量大不受限制,数据是隐藏的,用作数据修改、更新
get:从服务器上获取数据,执行效率高,传递量小,数据会显示在URL中(可见的 安全性低),用作数据查询
input标签-输入
type:类型
id:唯一标识
name:名称(元素名称)
value:值(输入项的内容)
size:大小(可以是文字字体的大小,也可以是输入框的宽度
maxlength:最大长度(输入框可以输入的最大长度)
文本输入:text
用户名:<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="5" placeholder="请输入用户名"/>
密码:password
<input type="password" name="password" required="required"/>
单选按钮 :radio
checked:选中状态,如果是选中的话其值会等于ture 否则就是false
性别:<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女" checked="checked"/>女
复选框 :chexbox
<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
<input type="checkbox" name="hobby" value="打电动"/>打电动
<input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码
文件上传:file
<input type="file" name="file"/>
下拉列表:select
籍贯:<select name="province">
<option>--请选择--</option>
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
</select>
文本区域:textarea
自我介绍:<textarea name="zwjs">
隐藏域
<input type="hidden" name="id" value="" />
提交按钮
<input type="submit" value="注册"/><br />
重置按钮
<input type="reset" />
普通按钮
<input type="button" value="zhuce"/>
2.DIV+CSS
1)DIV
表格布局并没有那么灵活,绝大多数UI工程师使用DIV+CSS方式进行布局,这种布局方式更为灵活
div:进行区域划分,普通的html标签,单独使用并没有什么效果,div通常是块级元素,独占一行
span:同dic类似,span是内联元素,可以与其他元素同行
div span相对于p标签的区别有了id name属性
2)CSS
CSS通常被称为css样式或css层叠样式,主要用于设置HTML页面中的文本内容(字体、大小、对齐方式),图片的外形(高宽、边框样式、边距)以及版面的布局等外观显示样式
HTML是主要内容,CSS是用于修饰HTML的外观
选择器{属性1:属性值1;属性2:属性值2;}
"选择器"用于指定css样式作用的html对象,花括号是该对象设置的具体样式。属性和属性值是以键值对方式出现,使用英文冒号":"分隔,多个属性使用分号";"分隔,属性和属性值不区分大小写
<style>
span{
font-size: 30px;
color: red;
}
</style>
2.1)CSS选择器
选择器分为基本选择器(元素选择器,类选择器,id选择器),其他选择器(层级选择器,属性选择器)
元素选择器
用html的标签名称作为选择器,按标签分类,语法格式:标签名{属性1:属性值1;属性2:属性值2;},例如:h1、p等
优点:能快速对页面中同类型的标签统一样式,
缺点:不能设计差异化
<style>
div{
font-size: 30px;
color: pink;
}
</style>
类选择器
用"."(英文点)标识,后面紧跟类名,语法格式:.类名{属性1:属性值1;属性2:属性值2;}
优点:可以为元素对象定义单独或者相同的样式(可多少)
<style>
.div2{
font-size: 30px;
color: gold;
}
</style>
<div class="div2">
你的一句话,往往能够牵动我所有的情绪
</div>
id选择器
使用“#”进行标识,后面紧跟id名,语法格式:#id名{属性1:属性值1;属性2:属性值2;}
优点:大多数元素都可以定义id值,id值是唯一的,
<style>
#div5{
font-size: 30px;
color: yellow;
}
</style>
<div id="div5">
你我虽只有半世的情缘,却无法改变我对你一生的情长
</div>
层级选择器
也叫包含选择器,给父标签的后代标签设置样式,语法格式:父标签 后代标签{属性1:属性值1;属性2:属性值2;}
优点:可以方便区域内编写样式
<style>
div p{
font-size: 30px;
color: green;
}
</style>
<div>
<p>
层级选择器
</p>
</div>
属性选择器
在标签后面使用中括号标记,语法格式:标签名[标签属性='标签属性值']{属性1:属性值1;属性2:属性值2;}
该选择器是对“元素选择器”的扩展,对一组标签进一步过滤
<style>
input[type='text']{
background-color: red;
}
input[type='password']{
background-color: blue;
}
</style>
<body>
用户名;<input type="text" name="username"/><br />
密码:<input type="password" name="password"/>
</body>
2.2)CSS引入方式
内部样式
内部样式又称内嵌式,是将CSS代码集中在<head></head>标签中,使用<style></style>标签定义,偶尔用
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<style type="text/css">
div{
font-size: 30px;
color: pink;
}
</style>
</head>
行内样式
直接在需要的标签内书写style样式,此种方法没有将CSS与HTML分离,极少使用
<div style="font-size: 20px;color: blue;">
我们一起玩游戏啊
</div>
外部样式
外部样式又称链入式,是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link>标签引入
优点:同一个css样式可以被不同的html页面链接使用,同一个html也可以多个<link>css样式,强烈建议使用
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
外部css样式表文件:
div{
font-size: 30px;
color: pink;
}
2.3)CSS浮动
在实际的开发中需要左右排版,就要使用浮动(div是单独占一行)
语法格式:选择器{float:属性值},常用属性值:left左浮动,right右浮动,none不浮动(默认值)
由于浮动元素不再占用原文档流的位置,所以它会对页面中其他元素的排版产生影响。如果要避免影响,使用clear属性清除浮动
<style>
#one{
border: 1px solid red;
width: 600px;
height: 150px;
float: left;
}
#clear{
clear: both;
}
</style>
<body>
<div id="one">
</div>
<div id="clear">
</body>
2.4)盒子模型
2.5)display
display属性规定元素应该生成的框的类型,把对象元素都看成框类型
属性值:
none:此元素不会被显示
block:此元素将会显示为块级元素,前后带有换行符
inline:默认,此元素将会显示为内联元素,前后不带有换行符
inline-block:行内块元素
list-itme:此元素将作为列表显示
ul li{
display: inline;
color: white;
}
<ul>
<a href="#"><li style="font-size: 20px;">首页</li></a>
<a href="#"><li>手机数码</li></a>
<a href="#"><li>家用电器</li></a>
<a href="#"><li>鞋靴箱包</li></a>
<a href="#"><li>孕婴保健</li></a>
<a href="#"><li>奢侈品</li></a>
</ul>