JavaWeb

JavaWeb 知识点总结

HTML/CSS/JS

HTML

HTML简介

HTML：HyperText Markup Language，超文本标记语言

超文本：超级文本，能做到普通文本做不到的事情，比如：图片，视频，音频，点击跳转……

标记：标签。将你需要的功能封装成各种各样的标签，你需要使用什么功能，就使用对应的标签即可。

常规标签

标签名称	语法
标题标签	…
分割线标签
文字标签
加粗标签
斜体标签	/
下划线标签
删除线标签
换行标签
段落标签
实体字符	空格: ,&:&
注释

超文本标签

标签名称	语法
图片标签
超链接标签	点击的内容
列表标签	无序: ,有序: (常用属性type);列表项:
表格标签
表单标签
表单域标签
下拉框标签
文本域标签
框架标签

表格标签

• 的属性：
  • border：边框
  • cellpadding：内容与边框之间的距离
  • cellspacing：框与框之间的距离
  • width：表格的宽度
  • height：表格的高度
  • align：设置表格水平位置，常用值：left，center，right
  • bgcolor：表格背景颜色
  的属性:
  • height：行的高度
  • align：设置行内容的水平位置，常用值：left，center，right
  • bgcolor：设置行的背景颜色
  ：表头
  ：表内容

  的属性: width：设置单元格的宽度，设置宽度以后，当前单元格所在的列都会跟着变化 align：设置单元格内容的水平位置，常用值：left，center，right bgcolor：设置单元格的背景颜色 合并单元格属性: rowspan：上下合并 colspan：左右合并 注意：被合并的单元格需要删除掉
  ：内容自动居中且加粗的单元格 表单标签 的常用属性: action：数据提交的位置 method：数据提交的方式 的常用属性: type属性: text: 文本框 password: 密码框 radio: 单选按钮，一组单选按钮的name属性值必须一致才能实现单选 file: 文件框 checkbox: 多选框，通常一组多选框的name属性值是一致的 submit: 提交按钮，将表单中的数据提交到action指定的位置 reset: 重置按钮 button: 普通按钮 maxlength：设置输入数据的最大长度 value：设置初始值 size：设置输入框大小 readonly：只读 disabled：不可用 name：给表单域取名字 checked：设置单选按钮和多选框默认选中项目 框架标签 作用：将页面划分为几个模块 常用属性： rows：上下划分 cols：左右划分 border：边框 noresize：不能改变模块大小 注意：和不能同时使用 作用：将指定的HTML文件放到指定的模块中显示出来 CSS DIV&CSS简介 DIV: DIVison, 层叠样式表单元的位置和层次 其实，就是一个标签，主要用于布局。宽度是父标签的100%，高度默认是0，有内容，高度就是内容的高度。 CSS: Cascading Style Sheets, 层叠样式表 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 CSS的三种使用方式 行内样式 在标签中使用style属性设置CSS样式 内部样式 在标签中使用
  外部样式

  CSS选择器

  在内部样式或者外部样式中使用

  语法:

  选择器{
  样式名1:样式值1;
  样式名2:样式值1;
  ……
  }
  

  选择器类型	HTML中	选择器语法
  标签选择器	<标签名>	标签名{...}
  ID选择器	<标签名 id="ID名">	#ID名{...}
  类选择器	<标签名 class="类名">	.类名{...}

  三种基本选择器的优先级：

  • ID选择器>类选择器>标签选择器

  CSS基本样式

  样式类型	属性1	属性2	属性3	属性4	属性N…
  字体样式	font-family	font-size	font-style (字体倾斜)	font-weight (字体加粗)	font-…
  文本样式	width/height	background-color/color	text-decoration (装饰加线)	text-indent (首行缩进)	text-…
  超链接伪样式	a:link (点击之前)	a:visited (点击后)	a:hover: (鼠标放到上面)	a:active: (鼠标点击未释放)	a:…
  边框样式	width/height	border	border-left/right/top/buttom	border-radius	border-…
  背景样式	width/height	background-color	background-image	background-position	background-…

  盒子模型

  • 盒子模型: content（标签设置的宽和高）–>padding（内边距）–>border–>margin（外边距）

  • 内边距: 内容与边框之间的空白区域

    相关样式: padding，padding-top，padding-right，padding-bottom，padding-left

  • 外边距：边框与父标签之间的空白区域

    样式: margin，margin-top，margin-right，margin-bottom，margin-left

  • 使用margin让盒子水平居中

    margin: auto;

  浮动

  • 样式：float
    • 常用值：left，right
    • 浮动的框可以向左或者向右移动，知道它的外边框碰到父标签的边缘或者另一个浮动框的边缘为止。
  • 样式：clean
    • 常用值：left，right，both
    • 清除前面的浮动对后面的标签造成的影响。

  定位

  • 样式：position
    • 常用值：relative，absolute，fixed
    • 偏移量样式：left，right，top，bottom

  定位样式	常用值	特征
  相对定位	relative	相对于原来的位置进行偏移，原本的位置会保留
  绝对定位	absolute	相对于页面的顶点来偏移，原本的位置不保留
  固定定位	fixed	相对于页面顶点进行偏移，原本的位置不保留，不受滚动条的影响

  实现导航效果

  标签的分类：

  • 行标签：不会自动换行，不能设置宽高
    • ,,,,,,,,……
  • 块标签：能自动换行，能设置宽高
    • ,,

      ,
      • ,
        ,……

      行块标签：不会自动换行，能设置宽高

      标签类型的转换

      • 样式：display
        • 常用值：
          • inline：转换成行标签，
          • block：转换成块标签，
          • inline-block：转换成行块标签，
          • none：隐藏

      浮动与行块转换的区别：

      1. 浮动会对后面的标签产生影响，行块转换不会
      2. 浮动后，标签是紧挨在一起的，行块转换后，标签之间有默认的空隙

      ---

      JavaScript

      JS简介

      • JavaScript (简称JS) 是一种具有函数优先的轻量级，解释型的高级编程语言。

      • JS是一门客户端脚本语言

        • 运行在客户端JS浏览器中的。每一个浏览器都有JavaScript的解析引擎
        • 脚本语言：不需要编译，直接就可以被浏览器解析执行了

      • JS可以通过DOM操作HTML的标签，读写标签的内容，验证提交的数据，验证浏览器的信息，也可以给页面添加动画效果。

      JS组成

      • ECMAScript：核心，包含了基本的语法，语句，事件，对象等等
      • DOM：Document Object Model，文档对象模型，操作元素
      • BOM：Broswer Object Model，浏览器对象模型，操作浏览器

      JS的三种使用方式

      1. 行内式

         在标签中的事件里使用javascript:加JS语法。

      2. 内嵌式

         将JS代码写在

      外链式

      JS基础语法

      1. 变量

      • JS本身是一门弱类型语言，不需要指定数据类型，直接使用var关键字即可。

      • 语法：(三种写法)

        • var 变量名;
        • var 变量名 = 变量值;
        • var 变量名1,变量名;

      2. 数据类型

      数据类型分类	数据类型	介绍
      基础数据类型	Undefined	值只有undefined，定义的变量未初始化
      基础数据类型	Null	值只有null，Undefined是Null派生出来的。ECMAScript将Undefined与Null认定为等值
      引用数据类型	Number	任意数字
      引用数据类型	String	字符串，可以使用双引号也可以使用单引号
      引用数据类型	Boolean	布尔，值只有true和false

      引用数据类型：通常叫做类（Class），JS会将之转换成对象来使用。

      3. 运算符

      运算符分类	运算符
      算数运算符	+ - * / % ++ --
      赋值运算符	= += -= *= /= %=
      比较运算符	> >= < <= == !=
      逻辑运算符	&& || !
      条件运算符(三元运算符)	?:

      4. 分支结构

      分支结构	语法
      单分支	if(条件){...}
      双分支	if(条件){...}else{...}
      多分支	if(条件1){...}else if(条件2){...}else{...}
      等值多分支：	switch(值){case 分支1: ...; break; ... 分支N: ...; break; default: ...;}

      5. 数组

      创建数组方法	语法
      创建空数组	var arr1 = new Array();
      创建有长度的数组	var arr2 = new Array(5);
      创建有初始值的数组	var arr3 = ["d","a","n","n","y"];

      6. 循环结构

      JS中的循环与Java中循环基本一致。

      循环语句	语法
      while	while(条件){...}
      do while	do(...)while(条件){...}
      for	for(var i=0; i<5; i++){...}
      forEach	for(var str in 数组名){...}

      JS函数

      函数类型	语法
      无参函数	function 函数名(){函数体;}
      有参函数	function 函数名(形参1,形参2,...){函数体;}
      有返回值的函数	function 函数名(形参1,形参2,...){函数体;return...;}

      JS事件句柄(Event Handlers)

      HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

      属性	此事件发生在何时…
      onabort	图像的加载被中断。
      onblur	元素失去焦点。
      onchange	域的内容被改变。
      onclick	当用户点击某个对象时调用的事件句柄。
      ondblclick	当用户双击某个对象时调用的事件句柄。
      onerror	在加载文档或图像时发生错误。
      onfocus	元素获得焦点。
      onkeydown	某个键盘按键被按下。
      onkeypress	某个键盘按键被按下并松开。
      onkeyup	某个键盘按键被松开。
      onload	一张页面或一幅图像完成加载。
      onmousedown	鼠标按钮被按下。
      onmousemove	鼠标被移动。
      onmouseout	鼠标从某元素移开。
      onmouseover	鼠标移到某元素之上。
      onmouseup	鼠标按键被松开。
      onreset	重置按钮被点击。
      onresize	窗口或框架被重新调整大小。
      onselect	文本被选中。
      onsubmit	确认按钮被点击。
      onunload	用户退出页面。

      JS事件绑定

      1. 方式一: 直接在标签上使用对应的事件属性即可

         <script>
         function changeText(id) { 
             id.innerHTML = "Hello:)";
         }
         script>
         <h1 onclick="changeText(this)">点击此文本！h1>
         

      2. 方式二: 在JS中找到要绑定事件的标签，再给它绑定对应的事件

         <p>请点击“试一试”按钮，以执行 displayDate() 函数。p>
         <button id="myBtn">试一试button>
         <p id="demo">p>
         <script>
         document.getElementById("myBtn").onclick = displayDate;
         function displayDate() {
           document.getElementById("demo").innerHTML = Date();
         }
         script>
         body>
         html> 
         

      ---

      DOM

      DOM简介

      HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

      • 作为对象的 HTML 元素
      • 所有 HTML 元素的属性
      • 访问所有 HTML 元素的方法
      • 所有 HTML 元素的事件

      换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

      HTML DOM（文档对象模型）

      当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

      HTML DOM 模型被结构化为对象树：

      对象的 HTML DOM 树

      

      通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

      • JavaScript 能改变页面中的所有 HTML 元素
      • JavaScript 能改变页面中的所有 HTML 属性
      • JavaScript 能改变页面中的所有 CSS 样式
      • JavaScript 能删除已有的 HTML 元素和属性
      • JavaScript 能添加新的 HTML 元素和属性
      • JavaScript 能对页面中所有已有的 HTML 事件作出反应
      • JavaScript 能在页面中创建新的 HTML 事件

      使用DOM查找元素

      四种方法查询元素	语法
      通过id属性的值来找到元素。只能找到一个元素	document.getElementById(“id属性值”);
      通过name属性值来找到元素。因为name属性的值可以重复，所以能找到多个元素，所以返回的是元素数组。	document.getElementsByName(“name属性值”);
      通过class属性值来找到元素。因为class属性的值可以重复，所以能找到多个元素，所以返回的是元素数组。	document.getElementsByClassName(“class属性值”);
      通过标签名来找到元素。因为标签名可以重复，所以能找到多个元素，所以返回的是元素数组。	document.getElementsByTagName(“标签名”);

      使用DOM修改元素

      修改元素	语法
      修改属性	document.getElementById(id).attribute = new value
      修改内容	document.getElementById(id).innerHTML = new text
      修改样式	document.getElementById(id).style.property = new style

      关于innerText和innerHTML的区别

      1. 获取内容时:
         • innerText只能获取文本内容，不能获取标签；
         • innerHTML能获取所有内容。
      2. 设置内容时:
         • innerText会将标签当成普通文本放进去；
         • innerHTML放进去的标签能被浏览器直接翻译。

      ---

      BOM

      BOM简介

      • 浏览器对象模型（Browser Object Model (BOM)）

      • 不存在浏览器对象模型（BOM）的官方标准。

      • 现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。

      Window 对象

      Window 对象表示浏览器中打开的窗口。

      如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

      **注释：**没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

      • Window 对象集合

      集合	描述
      frames[]	返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或