【javaweb学习笔记】WEB02_HTML&CSS

一、表单相关知识

1.表单:

  所有需要提交到服务器端的表单项必须使用<form></form>括起来

  form标签属性(有两个):

    1)action,整个表单提交的位置(可以是一个页面,也可以是一个后台java代码)

    2)method,表单提交的方式(get / post / delete ... ...等7种)

       get提交方式:所有的内容显示在地址栏,不够安全,长度有限制

       post提交方式:所有的内容不会显示在地址栏,比较安全,长度没有限制

2.表单标签:

  1)文本输入项:<input type = "text"  name = ""  size = ""  maxlength = ""  readonly = ""  placehoder = "" />

  2)密码输入项:<input type = "password"  name = ""./>

  3)单选按钮:<input type = "radio"  name = ""  value = ""  checked = "" />

  4)多选按钮:<input type = "checkbox"  name = ""  value = ""  checked = "" />

  5)下拉列表:

    <select name = "">

      <option value = ""  selected = "">北京</option>

      <option value = "">上海</option>

    </select>

  6)文件上传项:<input type = "file"  name = "" />

  7)文本输入域:<textarea name = ""></textarea>

  8)提交按钮:<input type = "submit"  value = "" />

  9)普通按钮:<input type = "button"  value = "" />

  10)重置按钮:<input type = "reset"  value = "" />

  11)隐藏项:<input type = "hidden"  name = "" />

3.表单标签及属性代码

<body>
  <form action="#" method="get">
    隐藏字段:<input type="hidden" name="id" value="" /><br />
    用户名:<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="5" placeholder="请输入用户名"/><br />
    密码:<input type="password" name="password" required="required"/><br />
    确认密码:<input type="password" name="repassword"/><br />
    性别:<input type="radio" name="sex" value="男"/>男
    <input type="radio" name="sex" value="女" checked="checked"/>女<br />
    爱好:<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
    <input type="checkbox" name="hobby" value="打电动"/>打电动
    <input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br />
    头像:<input type="file" name="file"/><br />
    籍贯:<select name="province">
         <option>--请选择--</option>
         <option value="北京">北京</option>
         <option value="上海" selected="selected">上海</option>
         <option value="广州">广州</option>
       </select><br />
    自我介绍:
      <textarea name="zwjs">

      </textarea><br />
    提交按钮:<input type="submit" value="注册"/><br />
    普通按钮:<input type="button" value="zhuce"/><br />
    重置按钮:<input type="reset" />
  </form>
</body>

二、div和span

1.div:是一个html标签,一个块级元素(单独显示一行)。它单独使用没有任何意义。必须结合CSS来使用。主要用在页面的布局。

2.span:是一个html标签,一个内联元素(显示一行)。它单独使用没有任何意义。必须结合CSS来使用。主要用于对摞起来的内容进行样式的修饰。

三、CSS

1.作用:

  HTML:它是整个网站的骨架

  CSS:它是对整个网站骨架的内容进行美化(修饰)

2.引入方式(3种):

  1)行内引入

  2)内容引入方式

  3)外部引入

3.基本选择器(3种):

  1)ID选择器:(保证唯一性

      #id 属性名{

        属性名n:属性值n;    最后一行的分号可以省略,但最好不要省略。

      }

  2)元素选择器:(一般所有的元素设置相同样式时使用)

      元素名{

        属性名n:属性值n;

      }

  3)类选择器:(一般较多元素设置相同样式时使用)

      .类名{

        属性名n:属性值n;

      }

4.其他选择器:

  1)层次选择器:

      元素名 子元素名{

        属性名n:属性值n;

      }

  2.属性选择器:

      元素名[属性名 = "属性值"]{

        属性名n:属性值n;

      }

      如:input [ type = "text" ] {

          ... ...

        }

5.浮动:

  浮动的框可以向左或向右移动,知道它的外边缘碰到包含框或另外一个浮动框的边框为止。

  由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。


四、补充:

1.去掉超链接下划线:

  a{

    text-decoration : none;

  }

2.让div居中:

  margin:0px auto;

3.让块级元素称为内联元素

  display : inline;

4.块级元素内容居中:

  text-align : center;

原文地址:https://www.cnblogs.com/wujiaolv/p/8401102.html