一、表单相关知识

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. SQLAlchemy基础操作一

    用前安装 pip3 install sqlalchemy ORM ORM就是运用面向对象的知识,将数据库中的每个表对应一个类,将数据库表中的记录对应一个类的对象.将复杂的sql语句转换成类和对象的操作 ...

  2. reduce 方法 (Array) (JavaScript)

    对数组中的所有元素调用指定的回调函数.该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供. 语法         array1.reduce(callbackfn[, in ...

  3. [bzoj3191] [JLOI2013]卡牌游戏

    概率DP. 首先由题解可得>_<,胜出概率只与剩余人数.与庄家的相对位置有关. 所以设f[i][j]表示剩下i个人,从庄家开始第j个人的胜利概率... 根据卡牌一通乱搞即可... #inc ...

  4. BZOJ2300: [HAOI2011]防线修建

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2300 (我只是在发以前写过的题.. 因为题目没说强制在线,所以离线乱搞就可以了.先把点删掉然后 ...

  5. Shell菜单脚本

    今天在这儿给大家分享一个我简单编写的Shell菜单脚本,傻瓜式的人机交互,人人都可以操作linux. #!/bin/sh #Shell菜单演示 function menu () { cat <& ...

  6. 【Keras】基于SegNet和U-Net的遥感图像语义分割

    上两个月参加了个比赛,做的是对遥感高清图像做语义分割,美其名曰"天空之眼".这两周数据挖掘课期末project我们组选的课题也是遥感图像的语义分割,所以刚好又把前段时间做的成果重新 ...

  7. HTML 和 PHP 、MySQL 的交互

    为什么要用到数据库? World Wide Web (WWW)不仅仅是一个提供信息的地方.如果你有什么东西,作一个网站,同样可以和全世界的人一起分享.但是,这并不是一件很容易的事.当网站越做越大时,你 ...

  8. c++(排序二叉树删除)

    相比较节点的添加,平衡二叉树的删除要复杂一些.因为在删除的过程中,你要考虑到不同的情况,针对每一种不同的情况,你要有针对性的反应和调整.所以在代码编写的过程中,我们可以一边写代码,一边写测试用例.编写 ...

  9. [国嵌攻略][100][嵌入式Linux内核制作]

    Linux内核制作步骤 1.清除原有配置 make distclean 2.配置内核 选择一个已有的配置文件简化配置 make menuconfig ARCH=arm 3.编译内核 ARCH指明处理器 ...

  10. javaIO详解、包含文件以及流操作

    1.File 文件操作 java.io.File用来表示文件或者目录.只能用来表示文件或者目录的大小名称等信息,而无法完成对文件内容的CRUD. 1.1构造方法 有四种,当然基本都是根据文件的路径或者 ...