一、表单相关知识

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;

【javaweb学习笔记】WEB02_HTML&CSS的更多相关文章

  1. javaweb学习笔记整理补课

    javaweb学习笔记整理补课 * JavaWeb: * 使用Java语言开发基于互联网的项目 * 软件架构: 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端 ...

  2. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. JavaWeb学习笔记总结 目录篇

    JavaWeb学习笔记一: XML解析 JavaWeb学习笔记二 Http协议和Tomcat服务器 JavaWeb学习笔记三 Servlet JavaWeb学习笔记四 request&resp ...

  4. 前端学习：学习笔记（CSS部分）

    前端学习:学习笔记(CSS部分) CSS的学习总结(图解) CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <hea ...

  5. Webpack4 学习笔记二 CSS模块转换

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要 ...

  6. 【JAVAWEB学习笔记】06_jQuery基础

    接05的学习笔记. 四.使用JQ完成省市二级联动 1.需求分析 使用jquery完成省市二级联动 2.技术分析 2.1数组的遍历操作 方式一: $(function(){ // 全选/ 全不选 $(& ...

  7. javaweb学习笔记（二）

    一.javaweb学习是所需要的细节 1.Cookie的注意点 ① Cookie一旦创建,它的名称就不能更改,Cookie的值可以为任意值,创建后允许被修改. ② 关于Cookie中的setMaxAg ...

  8. Javaweb学习笔记（一）

    一.javaweb学习是所需要的细节 1.发送响应头相关的方法 1).addHeader()与setHeader()都是设置HTTP协议的响应头字段,区别是addHeader()方法可以增加同名的响应 ...

  9. Javaweb学习笔记——（二）——————CSS概述，进入JavaScript

    day02day01内容回顾 1.html操作思想 **使用标签把要操作的数据包起来,通过修改标签的属性值来是实现标签内数据样式的变化 ***<font size="5"&g ...

随机推荐

  1. 小程序wxss和css3的区别

    经过设置发现,微信小程序中wxss并不能完全支持css3的全部功能. 总结记录在此文中,以免忘记. 0 . wxss不能直接通过css3中的background-image属性来设置显示的背景图片. ...

  2. 使用ajax调用webservice加载table

    写了个ajax调用webservice动态加载表格的案例 不废话直接上代码 webservice代码: /// <summary> /// 首页显示会员信息 /// </summar ...

  3. windows 下进程池的操作

    在Windows上创建进程是一件很容易的事,但是在管理上就不那么方便了,主要体现在下面几个方面: 1. 各个进程的地址空间是独立的,想要在进程间共享资源比较麻烦 2. 进程间可能相互依赖,在进程间需要 ...

  4. Node Express 初探

    一如既往,先上一张图 Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. 关于Express更多相关知识请链接至官网http://www.expressjs.com.c ...

  5. python库termcolor用法

    termcolor是python中标注文本颜色的库 ANSII Color formatting for output in terminal. 利用termcolor查看log,进行代码调试,清晰标 ...

  6. Jquery_基础(一) 常用方法与选择器

    一.Jquery常用方法: $(function(){ //掌握$() 以及function(){} 结合 $("#a01").click(function(){ alert('h ...

  7. 利用Eclipse构建SpringMVC项目

    简述 SpringBoot对Spring的的使用做了全面的封装,使用SpringBoot大大加快了开发进程,但是如果不了解Spring的特性,使用SpringBoot时会有不少问题 目前网上流传使用I ...

  8. AtCoder Beginner Contest 069【A，水，B，水，C，数学，D，暴力】

    A - K-City Time limit : 2sec / Memory limit : 256MB Score : 100 points Problem Statement In K-city, ...

  9. itoa函数，sprintf函数

    itoa函数 itoa 为c语言的一个函数.itoa 函数是一个广泛应用的,从非标准扩展到标准的C语言.它不能被移植,因为它不是标准定义下的C语言,但是,编译器通常在一个不遵循程式标准的模式下允许其通 ...

  10. Linux使用Public Key方式远程登录

    一.前言: ssh远程登录密码认证的方式有三种,password.Keyboard Interactive.Public Key 前面两种方式就是密码认证,含义都是一样大同小异.第三种是登录方式最安全 ...