12月20日学号：478291 表单+CSS基础 - HTML基础

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>`	标签

序号

标签

描述

<input type="text" />

文本框

<input type="password" />

密码框，数据以密文的形式显示

<input type="radio" />

单选框

<input type="checkbox" />

复选框

<input type="hidden" />

隐藏域，不显示在页面上，但数据仍会提交。可用于发送令牌，防止表单重复提交

<input type="submit" />或<button type="submit"></button>

提交按钮，提交表单数据

<input type="reset" />或<button type="reset"></button>

重置按钮，重置表单数据为初始数据

<select></selcet>

下拉列表，可控制用户输入的内容

<option></option>

列表项，与<select></selcet>配合使用

<label></label>

标签

表单属性

序号	属性名	描述
1	name	名称，相当于提交数据时的变量名。与单选框多选框配合使用时也有类似编组的作用
2	value	控件的值，相当于是变量值
3	checked	当选框与多选框属性，设置是否选中
4	for	`<label>`标签属性，用于绑定控件，其值为控件的id属性值
5	method	`<form>`标签属性，用于设置提交的方式，分为`post`和`get`。`get`使用地址栏的形式提交数据，安全性较低，可提交的数据较少，数据保密性不高的数据可以使用get方式提交，如：页码；`post`使用请求报文头的形式提交，安全性和可提交的数据量较`get`更好、多
6	type	控件的类型

序号

属性名

描述

name

名称，相当于提交数据时的变量名。与单选框多选框配合使用时也有类似编组的作用

value

控件的值，相当于是变量值

checked

当选框与多选框属性，设置是否选中

for

<label>标签属性，用于绑定控件，其值为控件的id属性值

method

<form>标签属性，用于设置提交的方式，分为post和get。get使用地址栏的形式提交数据，安全性较低，可提交的数据较少，数据保密性不高的数据可以使用get方式提交，如：页码；post使用请求报文头的形式提交，安全性和可提交的数据量较get更好、多

type

控件的类型

2.使用css

css为层叠样式表，用于控制页面样式和布局

<style></style>：标签，在<head></head>`使用，格式为：选择器{属性：值}

style=""：元素属性，格式为：style=”属性:值”

3.display

块元素（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>

运行结果如下：

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：看上去效果还不错, 代码也规范, 加油