一、表单相关知识

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. 表迁移工具的选型-复制ibd的方法

    1.1. 场景 有的时候开放人员自己的库需要帮忙导一些数据,但是表的数据量又很大.虽然说使用mysqldump或mysqlpump也可以导.但是这耗时需要比较久. 记得之前建议开放人员可以直接使用na ...

  2. html的布局demo

    header section footer 都是水平,垂直居中,文本内容居中 section的高度是根据文本内容自适应的,footer会一直在最下面 <!DOCTYPE html> < ...

  3. GO开发[三]：fmt,strings,strconv，指针，控制结构

    一.fmt包 %v 值的默认格式表示.当输出结构体时,扩展标志(%+v)会添加字段名 %#v 值的Go语法表示 %T 值的类型的Go语法表示 %% 百分号 %t 单词true或false %b 表示为 ...

  4. MySQL常用查询语句汇总（不定时更新）

    在这篇文章中我会通过一些例子来介绍日常编程中常用的SQL语句   目录: ## 1.数据库的建立     ## 1.数据库的建立   实例将ER图的形式给出:   由此转换的4个关系模式:      ...

  5. BZOJ 1597: [Usaco2008 Mar]土地购买【斜率优化+凸包维护】

    1597: [Usaco2008 Mar]土地购买 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4989  Solved: 1847[Submit] ...

  6. [hdu5632][BC#73 1002]Rikka with Array

    点开BC发现今晚没比赛..然后似乎上一场有数位DP?...(幸好我没去 一开始被BCDcode那题的思路带歪了..后来发现得把n转成二进制才能搞TAT 题目大概是要求一种类似逆序对的鬼东西: 有一个长 ...

  7. 51nod1649- 齐头并进-最短路

    1649 齐头并进 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 在一个叫奥斯汀的城市,有n个小镇(从1到n编号),这些小镇通过 ...

  8. BZOJ1258: [CQOI2007]三角形tri

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1258 如果最后一位是4,那就改成123就好了. 然后最后一位不是4的话,至多三个答案,然后可以 ...

  9. JSON对象添加删除属性

    假如目前我们有如下一个Json对象 var jsonObj={ 'param1':22, 'param2' :33 }; 增加属性: 我们现在向该对象jsonObj中添加一个新的属性字段:param3 ...

  10. block的修饰词为什么选用copy

    想必很多开发人员知道一般用copy修饰block,接下来就讲解为什么需要用copy,甚至会讲到其实用strong修饰block也是可以的 在 Objective-C 语言中,一共有 3 种类型的 bl ...