HTML & CSS

HTML

页面三部分组成：结构（HTML）、表现（CSS）、行为（JavaScript）

书写规范

<html><head><title>标题</title></head><body><!-- 网页主体 --></body>
</html>

标签

不分大小写
有自己的属性：
- 基本属性：携带的数据以及设置的样式；
- 事件属性：设置事件响应后的动作，比如 onclick
换行不是 \n，而是 </br>

字符实体：就是显示一些 <xxxx>这些本应该作为 html 结构的内容；

name 属性规定了 input 标签的名称，标识了用户输入数据后，传到服务器or javascript 的数据的标识！
单选框可以用两个 name 一样的 input 实现

表单、get、post

表单一般结合表格使用，整体美观，form table tr td；

action 是提交的服务器地址
method 是提交的方式：get（默认） or post

Get 方式特点：
上传到服务器的形式是：服务器网址?name：value&name=value······
点击提交后，数据传不到服务器的三种方式：

表单项没有 name 属性值
单选、多选框没有 value 属性值，要不然就是有 name=on 这样的东西，不会提交具体内容
表单项不在提交的表单中
不安全，内容都在提交时显示了；
长度限制，不超过100个字符；

Post特点：
浏览器地址栏只有action 属性值
理论上没有长度限制
比Get安全

CSS

设置网页的样式，内容与样式可以实现分离；
语法规则：

选择器决定受影响的页面元素；
属性是要修改的样式名，键值对的形式；

HTML嵌入CSS的三种形式：

HTML内容里的标签嵌入CSS，<xxxxx style="color:red">，无法复用；
HTML头部嵌入全局的CSS，只能在当前页面复用；
HTML引入CSS文件嵌入，通过 link 标签，完全可以复用；

id选择器

#id{属性：值;
}

通过id属性选择性地去使用这个样式；

ID选择器和Class选择器的区别
1、一个HTML标签只能应用于一个ID选择器
2、一个HTML标签可以应用多个class选择器
3、ID选择器是以“#”开头，并且只能在单个元素使用
4、Class选择器是以“.”开头，可以多个元素应用，中间用“，”隔开

组合选择器
class 和 id 选择器随意组合，.xxxx,#yyyy{}，用的时候，class 和 id 只写一个就能应用这个样式；

常用样式

color是字体颜色，注意；

文本居中：text-align:center;
块(div)居中：margin-left:auto;margin-right:auto;，左右边距都 auto 那么就居中了；

Javascript & jQuery

JavaScript

JavaScript用户页面的数据验证以及动态渲染；
JavaScript是弱类型，就是变量类型可变；
Java是强类型，变量类型在定义时就指定，一般不可变；
它俩没关系，本来叫 liveScript，后来为了吸引java 程序员而改为 javaScript；

特点：

交互性（信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要可以解释JS的浏览器都可以指向，与平台无关，有浏览器就行）

在HTML中嵌入使用
head or body 中加入 script 标签就可以写js代码，或者直接引入整个 js 文件中；

alert() 函数，在页面出抛出提示信息，括号内接提示内容；

变量
undefined：变量未初始化赋值；
null：空值；
NAN：not a number 非数值型；

0、null、undefined、""(空串) 都认为是 false；其他的都是true；

字符串和数字相加，则自动转换字符串；

等于和全等于
等于==：只比较字面数值是否相等，比如 12==“12” 返回 true；
全等于===：不仅比较字面数值，还比较类型是否相等；上面例子返回false；

js数组
数组里面元素类型可以不一致；
长度可变，不用指定长度，最大下标就是长度；

函数
js函数不允许重载，会覆盖上一层的定义；
js有隐形参数，跟java的可变长参数一样；

对象object
形式一：
定义一个对象后，可以直接添加/修改它的属性和方法；

形式二：
直接以为是json格式的数据，没想到是对象 object；

var 变量名 = {属性名,值,属性名:值,函数名:function(){}
}

js中的事件
电脑输入设备与页面进行交互的响应，即为事件；

常见的事件：

onload 加载完成事件，页面加载完成后，常用于做页面js代码初始化操作；
onclick 单击事件，常用于按钮的单击响应操作；
onblur 失去焦点，常用于输入框失去焦点后验证其输入内容是否合法；
onchange内容改变事件，常用于下拉列表和输入框内容发生改变后操作；
onsubmit表单提交事件，常用于表单提交前，验证所有表单项是否合法；

DOM模型
Document Object Model 文档对象模型
把文档中的标签、属性、文本转换为对象来管理；

这几个方法得好好掌握；

正则表达式
格式/正则表达式内容/

jQuery

jQuery => JavaScript Query，辅助JavaScript的js库

步骤差不多，但是少些很多：

查询到标签对象
定义响应函数

$是jQuery的核心函数；

传入参数为函数时，页面加载完成后自动调用；
传入参数为 HTML字符串时，会在页面上创建这个 HTML标签对象；
传入参数为选择器字符串时自动选择
- $ ("#id属性值")，id选择器，根据id 查询标签对象；
- $("标签名")，标签选择器；
- $(".class属性值")，类选择器；
传入参数为 DOM对象时，会把这个 DOM 对象转换为 jQuery 对象；

DOM 对象的方法 jQuery对象不能用，反之同样；
但是 DOM 对象和 jQuery对象可以相互转换；

jQuery过滤器：

基本过滤选择器；
内容过滤选择器；
属性过滤选择器；
表单过滤选择器；

html() text() val() 方法

jQuery还能实现动画；
jQuery在页面加载后先执行，执行完之后在执行原生，因为原生要等标签需要的内容拿到之后才能显示；

阻止事件冒泡：
在子元素的事件函数结尾 return false；

书城注册页面表单验证

使用jquery

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>尚硅谷会员注册页面</title><link type="text/css" rel="stylesheet" href="../../static/css/style.css"><script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script><script type="text/javascript">// 页面加载后$(function () {// 给注册按钮绑定事件$("#sub_btn").click(function () {// 用户名检验：5-12位数字字符下划线，如果不合法则提示// 拿到用户名var usernameText = $("#username").val()// 设定正则表达式规则var usernamePatt = /^\w{5,12}$/if (!usernamePatt.test(usernameText)) {$('.errorMsg').text("用户名不合法")return false;}// 密码：5-12位数字字符下划线，确认密码要求与密码保持一致；// 拿到密码var passwordText = $('#password').val()// 设定正则表达式规则var passwordPatt = /^\w{5,12}$/if (!passwordPatt.test(passwordText)) {$('.errorMsg').text("密码不合法")return false;}// 检验两次密码输入是否一致if ($('#repwd').val() !== passwordText) {$('.errorMsg').text("密码不一致")return false;}// 邮箱检验；var emailText = $('#email').val()var emailPatt = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/if (!emailPatt.test(emailText)) {$('.errorMsg').text("邮箱不合法")return false;}// 验证码输入，只要有字符就行（暂时）var verificationCode = $('#code').val()if (!verificationCode) {$('.errorMsg').text("请输入验证码")return false;}// 最后把提示不合法信息给清空$('.errorMsg').text("")})})</script><style type="text/css">.login_form {height: 420px;margin-top: 25px;}</style>
</head>
<body>
<div id="login_header"><img class="logo_img" alt="" src="../../static/img/logo.gif">
</div><div class="login_banner"><div id="l_content"><span class="login_word">欢迎注册</span></div><div id="content"><div class="login_form"><div class="login_box"><div class="tit"><h1>注册尚硅谷会员</h1><span class="errorMsg"></span></div><div class="form"><form action="http://localhost:8080"><label>用户名称：</label><input class="itxt" type="text" placeholder="请输入用户名"autocomplete="off" tabindex="1" name="username" id="username"/><br/><br/><label>用户密码：</label><input class="itxt" type="password" placeholder="请输入密码"autocomplete="off" tabindex="1" name="password" id="password"/><br/><br/><label>确认密码：</label><input class="itxt" type="password" placeholder="确认密码"autocomplete="off" tabindex="1" name="repwd" id="repwd"/><br/><br/><label>电子邮件：</label><input class="itxt" type="text" placeholder="请输入邮箱地址"autocomplete="off" tabindex="1" name="email" id="email"/><br/><br/><label>验证码：</label><input class="itxt" type="text" style="width: 150px;" id="code"/><img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px"><br/><br/><input type="submit" value="注册" id="sub_btn"/></form></div></div></div></div>
</div>
<div id="bottom"><span>尚硅谷书城.Copyright &copy;2015</span>
</div>
</body>
</html>

XML

作用：

保存数据，数据可读性高；
作为项目的配置文件；
网络传输的数据格式（现在以JSON为主）；

xml标签也有属性，属性值同样的用""包起来；
支持单标签、双标签；

必须有唯一一个根标签（没有父节点的标签），比如图上的 students

<![CDATA[ XXXXXXXX ]]>告诉里面是纯文本，不用解析为XML内容；

XML解析技术
把XML内容读取到html中；

dom4j解析XML；
学得没意思，跳过，反正是过时的技术；

Tomcat

JavaWeb学习之路相关推荐

JavaWeb学习之路——SSM框架之SpringMVC(八)
SpringMVC参数传递:把内容写到方法(HandlerMethod)参数中,SpringMVC只要有这个内容,则会注入,在这里使用注解的方式来传递参数前提使用springmvc注解功能,相应配置 ...
JavaWeb学习之路——SSM框架之Spring(五)
前情提要请看JavaWeb学习之路--SSM框架之Spring(四) 整合Spring和Mybatis框架 1.在项目的 ...
JavaWeb学习之路——SSM框架之Mybatis(三)
数据库配置和相关类创建看上篇:JavaWeb学习之路--SSM框架之Mybatis(二) https://blog.csdn.net/kuishao1314aa/article/details/832 ...
JavaWeb学习之路——SSM框架之Spring(四)
SSM框架学习-Spring01 1,.Spring介绍 Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用哪一个组件,同 ...
表格嵌套—JavaWeb学习之路Day1
<html > <head> <meta http-equiv="Content-Type" content="text/html; cha ...
JavaWeb学习之路——SpringBoot 中几种异常处理方法（四）
Spring Boot(三) 错误处理 1.自定义处理异常,返回指定界面 controller出现错误的方法中: @RequestMapping("/error")public S ...
JavaWeb学习之路——SpringBoot 中thymeleaf模板用法（三）
thymeleaf模板用法 thymeleaf通过它特定的语法,对HTML的标记做渲染,能够访问后台的动态数据,实现静态html界面的动态化 1.添加架包 < ...
JavaWeb学习之路——SpringBoot整合Mybatis(二)
1)pom文件中添加相应的jar包: <dependency><groupId>org.mybatis.spring.boot&l ...
JavaWeb学习之路——SpringBoot搭建项目框架(一)
1.使用maven创建Spring Boot项目 1)在pom.xml中修改jdk版本  <properties> <java.version&g ...
JavaWeb学习之路——SSM框架之SpringMVC(九)
SpringMVC跳转.视图解析器和@ResponseBody的用法 1.跳转方式 (1)默认方式字符串内容来转发 (2)设置返回值内容转发添加redirect:资源路径· 重定向添加forwa ...

JavaWeb学习之路