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>