一、表单相关知识

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. iOS开发的另类神器：libimobiledevice开源包【类似android adb 方便获取iOS设备信息】

    简介 libimobiledevice又称libiphone,是一个开源包,可以让Linux支持连接iPhone/iPod Touch等iOS设备.由于苹果官方并不支持Linux系统,但是Linux上 ...

  2. 【sunday算法】玄学字符串匹配

    和KMP相似,用于字符串的匹配,貌似平均复杂度比KMP快,也比KMP更好理解. 大概意思是: 如果串b被串a包含,那么串a此时与串b匹配的部分一定一样 所以如果从开头开始匹配到不同处时,在a串找中此时 ...

  3. 【数论】洛谷P1313计算系数

    题目描述 给定一个多项式(by+ax)^k,请求出多项式展开后x^n*y^m 项的系数. 输入输出格式 输入格式: 输入文件名为factor.in. 共一行,包含5 个整数,分别为 a ,b ,k , ...

  4. CSS（二） 颜色 盒模型 文字相关 border

    一.颜色 rgb(r,g,b)  rgb取值 0-255   分别是 色光三元色  red green blue rgba(r,g,b,a) rgb同上  a 是 alpha  代表透明度 colot ...

  5. PostgreSQL查询优化器之grouping_planner

    grouping_planner主要做了3个工作: 对集合进行处理 对非SPJ函数进行优化 对SQL查询语句进行物理优化 grouping_planner实现代码如下: static void gro ...

  6. [笔记]Linux命令行大全

    date 显示当前时间和日期 cal 显示当前月份的日历 df 查看磁盘剩余空间的数量 free 显示空闲内存的数量 pwd 打印当前工作目录 cd 切换目录 ls 列出文件夹内容 绝对路径:开始于根 ...

  7. Nginx的虚拟服务器域名配置

    虚拟服务器名(server name)是通过指令server_name来指定的.在< Nginx是如何处理Request的?>一节中,我们讲到nginx分两步来匹配过来的Request请求 ...

  8. VirtualBox - RTR3InitEx failed with rc=-1912 (rc=-1912)

    有一天重启电脑后虚拟机virtual box突然打不开了,提示类似 https://askubuntu.com/questions/900794/virtualbox-rtr3initex-faile ...

  9. 阻止a标签的默认事件及延伸

    先贴一段代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  10. Java与算法之(10) - 希尔排序

    希尔排序是插入排序的一种,是直接插入排序的改进版本. 对于上节介绍的直接插入排序法,如果数据原来就已经按要求的顺序排列,则在排序过程中不需要进行数据移动操作,即可得到有序数列.但是,如果最初的数据是按 ...