1.表单元素
表单<form></form>是用户与网站进行数据交换的工具，表单数据通常以变量的形式提交
- 常用的表单控件
| 序号 | 标签 | 描述 |
|---|---|---|
| 1 | <input type="text" /> |
文本框 |
| 2 | <input type="password" /> |
密码框，数据以密文的形式显示 |
| 3 | <input type="radio" /> |
单选框 |
| 4 | <input type="checkbox" /> |
复选框 |
| 5 | <input type="hidden" /> |
隐藏域，不显示在页面上，但数据仍会提交。可用于发送令牌，防止表单重复提交 |
| 6 | <input type="submit" />或<button type="submit"></button> |
提交按钮，提交表单数据 |
| 7 | <input type="reset" />或<button type="reset"></button> |
重置按钮，重置表单数据为初始数据 |
| 8 | <select></selcet> |
下拉列表，可控制用户输入的内容 |
| 9 | <option></option> |
列表项，与<select></selcet>配合使用 |
| 10 | <label></label> |
标签 |
- 表单属性
| 序号 | 属性名 | 描述 |
|---|---|---|
| 1 | name | 名称，相当于提交数据时的变量名。与单选框多选框配合使用时也有类似编组的作用 |
| 2 | value | 控件的值，相当于是变量值 |
| 3 | checked | 当选框与多选框属性，设置是否选中 |
| 4 | for | <label>标签属性，用于绑定控件，其值为控件的id属性值 |
| 5 | method | <form>标签属性，用于设置提交的方式，分为post和get。get使用地址栏的形式提交数据，安全性较低，可提交的数据较少，数据保密性不高的数据可以使用get方式提交，如：页码；post使用请求报文头的形式提交，安全性和可提交的数据量较get更好、多 |
| 6 | type | 控件的类型 |
2.使用css
css为层叠样式表，用于控制页面样式和布局
块元素（block） ——独占一行，垂直排列，可设置宽高，该类型的HTML元素有：div、footer、section、table、ul、ol等
行元素（line）——共享一行，水平排列，不可设置宽高，该类型的HTML元素有：a、span、em、b、i等
行内块元素（inline-block）——共享一行，水平排列，可设置宽高，该类型的HTML元素有：img、iframe、video等
4.可替换、不可替换元素
- 可替换元素：引用的外部资源，可在使用外部资源进行替换
- 不可替换元素：只能在文档内部进行更新，无法通过外部进行影响
5.padding内边距
- 元素内容到元素边框的距离，默认为透明不可设置颜色，只允许设置宽度
- 设置内边距会撑开盒子，影响盒子的大小，使用box-sizing可以使盒子的大小控制在边框之内
- 值只有1个的时候，表示上下左右都是同样大小；值为两个的时候，表示为上下、左右；值为三个是，表示为上、左右、下；四个值为上、右、下、左
6.margin外边距
- 设置元素之间的距离，影响盒子的位置
- 值只有1个的时候，表示上下左右都是同样大小；值为两个的时候，表示为上下、左右；值为三个是，表示为上、左右、下；四个值为上、右、下、左
- 如果值被设置为auto，则为相对边的值
7.float浮动
图文混排，只破坏文档流布局，而不会使元素脱离文档。使用float会导致父元素高度塌陷，解决方案：（1）为父元素设置高度；（2）设置overflow为hidden
8.postion定位
- relative：相对定位，元素相对于原来的位置进行定位
- absolute：绝对定位，父元素有设置定位为
relative的，相对于父元素进行定位，否则相对于HTML文档定位
9.css选择器
- 元素选择器：使用HTML元素作为选择符，如：div{}
- 属性选择器：使用元素的属性作为选择符，如：div[name=”hello”]{}
- 类选择器：使用元素的class属性的值作为选择符，以
.开头，如：.class{} - id选择器：使用元素的id属性作为选择符，以
#开头，如：#id{} - 伪类选择器：根据指定的位置选择元素
css样式布局代码如下：
<!DOCTYPE html><html><head><title>css样式布局</title><style type="text/css">.main{margin: auto;width:90%;}.header{width: 100%;}.header div{display: inline-block;height: 50px;vertical-align:middle;}#search_div{width:50%;position: relative;}input[name='search_input']{position: absolute;top:0;bottom:0;right:0;margin: auto;height:30px;width:300px;border-radius: 5px;border:1px solid #CCCCCC;background-size: 25px;background-image: url(images/search.png);background-repeat: no-repeat;background-position: right 10px center;}#icon_div{position: relative;margin-left: 15%;}#icon_div div{background-size: 30px;height: 30px;width: 30px;position: absolute;top:0;bottom:0;margin: auto;cursor: pointer;}#icon_1{background-image: url(images/people_black.png);}#icon_1:hover{background-image: url(images/people_red.png);}#icon_2{background-image: url(images/msg_black.png);left:50px;}#icon_2:hover{background-image: url(images/msg_red.png);left:50px;}#icon_3{background-image: url(images/upload_black.png);left:100px;}#icon_3:hover{background-image: url(images/upload_red.png);left:100px;}#icon_4{background-image: url(images/search_black.png);left:150px;}#icon_4:hover{background-image: url(images/search_red.png);left:150px;}#icon_5{background-image: url(images/user_black.png);left:200px;}#icon_5:hover{background-image: url(images/user_red.png);left:200px;}#icon_6{background-image: url(images/zan_black.png);left:250px;}#icon_6:hover{background-image: url(images/zan_red.png);left:250px;}#nav{width:100%;margin-top: 40px;}#nav .list_item{margin-right: 20px;display: inline-block;}.list_img{display: inline-block;}.list_link{display: inline-block;}.list_link a{text-decoration-line: none;color:#000;margin-right: 5px;}.item_img{width: 40px;height: 40px;margin-right: 5px;}.first_link{border-right: 2px solid #cccccc;padding-right: 10px;}#banner{margin-top: 40px;}</style></head><body><div class="main"><div class="header"><div id="logo_img"><img src="images/logo.png" style="height: 50px;"></div><div id="search_div"><input type="search" name="search_input"></div><div id="icon_div"><div id="icon_1"></div><div id="icon_2"></div><div id="icon_3"></div><div id="icon_4"></div><div id="icon_5"></div><div id="icon_6"></div></div></div><div id="nav"><div class="list_item"><div class="list_img"><img src="images/list.png" class="item_img"></div><div class="list_link"><div><a href="" class="first_link">资讯</a><a href="">器材</a><a href="">大师</a><a href="">学院</a><a href="">实战</a></div><div><a href="" class="first_link">学习</a><a href="">大赛</a><a href="">裤子</a><a href="">影视</a><a href="">其他</a></div></div></div><div class="list_item"><div class="list_img"><img src="images/file_time.png" class="item_img"></div><div class="list_link"><div><a href="" class="first_link">爱好</a><a href="">有品</a><a href="">图片</a><a href="">喝水</a><a href="">飞机</a></div><div><a href="" class="first_link">姐妹</a><a href="">坦克</a><a href="">气球</a><a href="">毛线</a><a href="">其他</a></div></div></div><div class="list_item"><div class="list_img"><img src="images/list.png" class="item_img"></div><div class="list_link"><div><a href="" class="first_link">软件</a><a href="">学习</a><a href="">爱国</a><a href="">敬业</a><a href="">友善</a></div><div><a href="" class="first_link">技能</a><a href="">富强</a><a href="">互助</a><a href="">仁义</a><a href="">其他</a></div></div></div><div class="list_item"><div class="list_img"><img src="images/wps.png" class="item_img"></div><div class="list_link"><div><a href="" class="first_link">编程</a><a href="">吃饭</a><a href="">周易</a><a href="">黄山</a><a href="">合肥</a></div><div><a href="" class="first_link">美女</a><a href="">上海</a><a href="">杭州</a><a href="">北京</a><a href="">其他</a></div></div></div></div><div id="banner"><img src="images/2.jpg" style="width: 820px;height: 320px;"><img src="images/banner-right.jpg" style="width: 310px;height: 320px;"></div></div></body></html>
运行结果如下：