Javaweb知识

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javaweb知识，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含19423字，纯文字阅读大概需要28分钟。

内容图文

State2

• 1 HTML编程
• • 1.1 HTML
  • • • 1.1.1 Html规范的发展
      • 1.1.2 主流重点浏览器介绍
      • 1.1.3 锚点
      • • • 1.1.3.1本页面
          • 1.1.3.2 跨网页的锚点访问
      • 1.1.4 id与name声明锚点的区别
      • 1.1.5 target目标窗口
      • 1.1.6 路径
  • 1.2 标记语言
  • • • 1.2.1 文档类型声明（DOCTYPE声明）
      • 1.2.2 标记（标签）语言的特点
      • 1.2.3 Html常用特殊字符
  • 1.3 编码格式
  • 1.4 标签
  • • • 1.4.1 头标签head
      • 1.4.2 元数据标签meta
      • 1.4.3 文本标签
      • 1.4.4 框架标签
      • 1.4.5 超链接a标签（访问非网页资源）
      • 1.4.6 图片以及图像映射
      • • • 1.4.6.1 图片标签
      • 1.4.7 列表
      • • • 1.4.7.1 有序列表
          • 1.4.7.2 无序列表
          • 1.4.7.3自定义列表
      • 1.4.8 table表格标签
      • 1.4.9 表单
      • • • 1.4.9.1 readonly和disabled区别
  • 1.4 HTML语义化
  • • • 1.4.1 为什么要语义化(优点)
      • 1.4.2 HTML语义化注意事项
  • 1.5 get和post区别
  • 1.6 src与href的区别
• 2 CSS编程
• • 2.1 选择器
  • 2.2 引入css文件方法
  • • • 2.2.1 第一种link方法
      • 2.2.2 第二种import方法
      • 2.2.3 链接式和导入式的区别
  • 2.3 css代码文件外置好处
  • 2.4 选择器分组
  • 2.5 派生选择器（子和孙等后代的选择器）
  • 2.6 后代选择器（子元素选择器/子选择器）
  • 2.7 属性选择器
  • 2.8 伪类选择器
  • 2.9 常见属性
  • • • 2.9.1 绝对长度：cm\mm\in(英寸)\pt(点)\pc（派卡）\px（像素）
      • 2.9.2 相对长度：
      • 2.10 布局属性
      • • • 2.10.1 普通流
          • 2.10.2 浮动流
          • 2.10.3 定位流
          • 2.10.4 控制类属性
          • 2.10.5 位置定位属性
      • 2.11 颜色类型
      • 2.12 颜色的区别
      • 2.13 列表
      • 2.14 padding外边距
      • 2.15 背景属性
      • 2.16 文本属性
      • 2.17 字体属性
      • 2.20 一些特性
      • • • 2.20.1 关于inline-block的空隙问题
          • 2.20.2 padding和margin
          • 2.20.3 让一个层始终在浏览器中间
          • 2.20.4 文件项目建立规范
          • 2.20.5 360软件管家logo实现
  • 2.21 CSS3 新特性
  • • • position——fix与sticky
      • clip
      • flex弹性盒子
      • opcity对象透明度
      • 新属性模块
• 3 JS编程
• • 3.1 历史进程
  • 3.2 作用
  • 3.3 JavaScript优点
  • 3.4 浏览器执行基础组成
  • 3.5 js引入方式
  • 3.6 变量与数据类型
  • • • 3.6.1 注释
      • 3.6.2 保留字与关键字
      • 3.6.3 基本数据类型和对象类型
      • 3.6.4 判断对象类型方法
      • 3.6.5 遍历
      • • • 3.6.5.1 for...in遍历对象属性
          • 3.6.5.2 for..of遍历对象属性
      • 3.6.6 函数
      • • • 3.6.6.1 案例：简易计算器
          • 3.6.6.2 案例：递归调用1到n的值
          • 3.6.6.3 打印等腰星号三角形
      • 3.7 函数自调用
      • 页面加载onload
      • 多个参数argument

1 HTML编程

1.1 HTML

xml作数据展示
html:超文本标记语言，用于描述网页中存在哪些网页元素，配合CSS样式表可以

1.1.1 Html规范的发展

1.1.2 主流重点浏览器介绍

1.1.3 锚点

超链接的一种，又叫命名锚记。在网页中的作用是快速定位器。

1.1.3.1本页面

//目标位置
<a href="helloworl.html" id="a1">helloworld</a>
//鼠标点击的锚点
<a href="#" target="#a1">top</a>

1.1.3.2 跨网页的锚点访问

<a href="test.html#jump">跨网页锚点</a> 

1.1.4 id与name声明锚点的区别

• 老版本/最初是使用name作为锚点位置的声明方式
• name的取值属性数值不唯一，容易造成锚点定位不准、
• H5已经声明不使用name这种声明方式

1.1.5 target目标窗口

1.1.6 路径

https://XXXX:port/netpoint/XX/XX.html

1.2 标记语言

1.2.1 文档类型声明（DOCTYPE声明）

不属于HTML标签，标记语言的文档类型声明，通知浏览器以以下哪种方式解析标记语言。

• 严格模式(标准模式)：浏览器以其当前版本支持的最高标准呈现页面。
• 混杂模式（怪异模式）：页面以向后兼容的方式显示,防止老站点无法工作。

注意：

1.2.2 标记（标签）语言的特点

• 嵌套性：标签存在层级关系
• 封闭式：

1. 容器类标签（div）要成对出现的
2. 非容器类标签（input）需要特殊声明

1.2.3 Html常用特殊字符

1.3 编码格式

网页编码格式： 网页编码格式取决于html代码保存的编码格式以及浏览器打开网页的编码格式。

保证网页程序不会乱码要牢记：

• 浏览器支持meta设定的编码
• meta设定的编码与html文件保存的编码一致

1.4 标签

1.4.1 头标签head

包含当前网页的元数据描述，如搜索关键字、编码、引入外部文件等，头标签内的内容不会出现在网页显示区域

1.4.2 元数据标签meta

用来描述一个HTML网页文档的基本属性，例如作者、日期和时间、网页描述、关键词等

常用的元数据描述：

• keywords关键字： meta name=“Keywords” Content=“vacation,greece”>
• Description简介： meta wname=“Description” Content=“你网页的简述”>
• Author作者： meta name=“Author” Content=“张三，abc@sina.com”>
• 文档编码： html5设定编码方式 meta charset=“UTF-8”> 默认也是UTF-8

1.4.3 文本标签

1.4.4 框架标签

iframe该标签可以在当前网页上引入其他网页资源（支持引入非同源网页）

<!--target = iframe的name/id的值，可以在iframe中显示结果-->
<iframe src="" width="300px" height="200px" name="ifr"></iframe>
		<a href="#" target="ifr"></a>

1.4.5 超链接a标签（访问非网页资源）

访问的前提是当前系统安装了相关的处理程序

1.4.6 图片以及图像映射

1.4.6.1 图片标签

<img src="coder.jpg" width="100px" height="100px" alt="图片"/>

1.4.7 列表

1.4.7.1 有序列表

		<ol type="I">
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
		</ol>

1.4.7.2 无序列表

		<ul type="circle">
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
		</ul>

1.4.7.3自定义列表

可以用来缩进文字

		<dl>
			<dt>自定义列表</dt>
			<dd>列表</dd>
			<dt>自定义列表</dt>
			<dd>列表</dd>
		</dl>

1.4.8 table表格标签

完整表格标签实例

<!--cellspacing间距，cellpadding填充,align对齐方式，width百分比/具体像素，height一般具体像素-->
		<table border="1" cellspacing="" cellpadding="" align="">
			<!--标题-->
			<caption>表格标题</caption>

			<!--标题、列明-->
			<!--thead、tbody、tfoot可以省略，浏览器将全部的行列都作为tbody的字元素-->
			<thead>
				<tr>
					<th>Header</th>
					<th>Header</th>
				</tr>
			</thead>

			<!--主要存放表数据-->
			<tbody>
				<tr>
					<td colspan="2">Data</td>
				</tr>
				<tr>
					<td>Data</td>
					<td rowspan="2">Data</td>
				</tr>
				<tr>
					<td>Data</td>
				</tr>
			</tbody>
			<!--总计之类的作用-->
			<tfoot>
				<td>tfoot</td>
				<td>tfoot</td>
			</tfoot>
		</table>

1.4.9 表单

单选按钮—— name相同即为一组
复选按钮—— name相同方便存取
文件域名——文件上传，file
隐藏域——hidden——偷偷传数据给服务器端

H5新
颜色选择器——color 选择颜色

下拉框——select——变多选选择multiple

				<input type="radio" name="sexGroup" id="sex1" value=""/><label for="sex1">男</label>
				<input type="radio" name="sexGroup" id="sex2" value=""/><label for="sex2">女</label>			

标签的私有属性：

1.4.9.1 readonly和disabled区别

• readonly只针对input（text/password），希望框内内容只允许用户看，不能修改
• disabled对于所有表单都有效，限制用户使用

1.4 HTML语义化

html语义化：在使用html编程时，根据内容选择合适的标签（代码语义化），增加可读性与SEO、更好的被爬数据

1.4.1 为什么要语义化(优点)

• 为了在没有CSS的情况下也能呈现出很好地内容结构、代码结构；
• 提高用户体验；
• 有利于SEO；
• 方便其他设备渲染网页；
• 便于团队开发和维护。

1.4.2 HTML语义化注意事项

• Html编码时要保持父子标签之间一个Tab键的缩进；
• 每标签div和span；
• 在语义不明显时，既一个用于布局的div声明前后都有注释；
• 尽可能少的使用无语义的可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
• 不要使用纯样式标签，如：b、font、u等，改用css设置。
• 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式），strong默认样式是加粗（不要用b），em是斜体（不用i）；
• 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
• 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在label标签中设置for=someld来让说明文本和相对应的input关联起来。

1.5 get和post区别

• post请求：声明本次请求的目的是从服务器获取数据——form Date 整个表单
• get请求：声明本次请求的目的是向服务器传送数据——Query String Parmeters字符串
• reset
• put

1.6 src与href的区别

• src（ source ）的值是外部资源的访问路径，在请求src资源时会将其指向的资源下载并应用到当前文档中，此时外部资源作为当前文档的一部分（引入），一般用作非文本引入方式。
• href 表示超文本引用（hypertext reference），在使用href请求外部资源时，会下载外部资源，同时当前网页读取外部资源的内容（引用）。一般用作文本引入方式

注意：Link、a标签使用href，其余使用src

2 CSS编程

Cascading Style Sheets层叠样式表，用来渲染标签的外观样式
Css是由万维网W3C定义的标准

2.1 选择器

标签(html)选择器——h1-h6、div
类选择器——用“.”和class
id选择器——用“#”和id
注：id虽然可以写多个， 不推荐！ 但是在Dom操作中，id表示编号，重复的id容易对结果产生其他影响

2.2 引入css文件方法

内嵌样式表

行内样式表

外部样式表文件

2.2.1 第一种link方法

<link rel="stylesheet" type="text/css" href=""/>

2.2.2 第二种import方法

<style type = "text/css">
	@import url("css/my.css");
</style>

2.2.3 链接式和导入式的区别

注：推荐使用link引入外部css文件

2.3 css代码文件外置好处

• html代码和样式分离
• 方便团队开发

2.4 选择器分组

h1,h3,.p1

2.5 派生选择器（子和孙等后代的选择器）

.div  p

所有后代都有，包括子代、孙子、等等

2.6 后代选择器（子元素选择器/子选择器）

.div > p

又名子代选择器，直属子代才有

2.7 属性选择器

属性指的是标签的属性

a[href = 'http://www.baidu.com']{color:red;}
a[href][title] {color:red;}

2.8 伪类选择器

超链接的样式，称为伪类

a:link
a:hover
a:active
a:visited

2.9 常见属性

2.9.1 绝对长度：cm\mm\in(英寸)\pt(点)\pc（派卡）\px（像素）

width
height

2.9.2 相对长度：

%（百分比）
em（相对于当前标签内文本的字体尺寸）

2.10 布局属性

2.10.1 普通流

默认情况

2.10.2 浮动流

float

2.10.3 定位流

直接定位元素在文档或在父元素中的位置，漂浮在指定元素上方

• 脱离文档流
• 元素可以重叠在一块区域内，按照显示的有限级别以覆盖的方式显示

2.10.4 控制类属性

显示类型（块级 <-> 行内）display：none（不可见，也不占空间）、inline、block、inline-block
是否可见visiable：visible、hidden（不可见，也占空间）

控制溢出类overflow（-x）（-y）：内容溢出时横向、纵向的显示方式
visible（不处理，但可能超出容器）、hidden（隐藏溢出容器的内容且不出现滚动条）、scroll（隐藏溢出容器的内容，溢出的内容以滚动条的方式呈现）、auto（内容溢出，按需出现滚动条）

text-overflow：（ellipsis）文字在层里面超出的话则显示省略号

2.10.5 位置定位属性

positon:absolute、relative、fixed、static、inherit

2.11 颜色类型

• HEX（最常用）：16进制
• RGBA：R红色、G绿色、B蓝色，支持透明
• RGB：R红色、G绿色、B蓝色
• 关键字：color：red，但只能表示少量颜色

2.12 颜色的区别

bgcolor——不属于css标签，属于html标签（写在body后），可以修改网页的背景颜色
color——前景色，字体颜色
background-color——标签的背景颜色

2.13 列表

2.14 padding外边距

2.15 背景属性

针对body的标签

2.16 文本属性

2.17 字体属性

用户界面属性

outline轮廓

2.20 一些特性

2.20.1 关于inline-block的空隙问题

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>

            *{
                margin: 0;
                padding: 0;
            }
			#box{
				position: relative;
                width: 100%;
                height: 500px;    
                float: left;  
			}

			#banner {
				width: 100%;
				height: 150px;
				background-color: aquamarine;
			}
			#container{
				position: relative;
				width: 100%;
				height: 400px;
			}
			#leftcontainer{
				background-color: chocolate;
                display: inline-block;
                width: 24%;
                height: 100%;
			}
            #middletcontainer{
                background-color: blueviolet;
                display: inline-block;
                width: 60%;
                height: 100%;
            }
            #rightcontainer{
                background-color: yellow;
                display: inline-block;
                width: 16%;
                height: 100%;
            }
            #foot{
            	position: relative;
                background-color: brown;
                /*清除浮动*/
                clear: both;
                width: 100%;
                height: 140px;
            }
		</style>
	</head>
	
	<body>
		<div id="box">
			<div id="banner">top</div>
			<div id="container">
				<div id="leftcontainer">leftcontainer</div>
				<div id="middletcontainer">middletcontainer</div>
				<div id="rightcontainer">rightcontainer</div>
			</div>
			<div id="foot">foot</div>
		</div>
	</body>
</html>

解决方法1：
去除设置inline-block的div的空格，回车，tab

			<div id="container">
				<div id="leftcontainer">leftcontainer</div><div id="middletcontainer">middletcontainer</div><div id="rightcontainer">rightcontainer</div>
			</div>

解决方法2：
在父元素，使用letter-spacing（该属性增加或减少字符间的空白（字符间距））

/*父标签*/
            #container {
            	letter-spacing: -5px;
            }

2.20.2 padding和margin

2.20.3 让一个层始终在浏览器中间

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.div1 {
				position: absolute;
				background-color: blue;
				height: 200px;
				width: 300px;
				left: 50%;
				top: 50%;
				margin-left: -150px;
				margin-top: -100px;
			}
		</style>
	</head>

	<body>
		<div class="div1"></div>
	</body>

</html>

2.20.4 文件项目建立规范

• 公用程序都放在common文件目录下
• 全局css文件为global.css，包含如下内容
  重置元素默认样式程序
  常用css样式类
  全局颜色样式类
  全局按钮‘图标样式类等
• img文件下放置全局图片，以及全局样式所引用的图标，图片命名以该图片的功能英文缩写，注意规避广告等关键字，使用下划线换字符，英文可以缩写
• 全局字体放在fonts文件下font.css

2.20.5 360软件管家logo实现

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		#box{
			width: 320px;
			height: 320px;
		}
		.smallbox{
			width: 150px;
			height: 150px;
		}
		#greenbox{
			background-color: greenyellow;
			float: left;
			border-radius: 0px 70px;
		}
		#bluenbox{
			background-color: cornflowerblue;
			float: left;
			border-radius: 70px 0px;
			margin-left: 20px;
		}
		#redbox{
			background-color: lightcoral;
			float: left;
			border-radius: 70px 0px;
			margin-top: 20px;
		}
		#orangebox{
			background-color: orange;
			float: left;
			border-radius: 0px 70px;
			margin-left: 20px;
			margin-top: 20px;
		}
		</style>
		
	</head>

	<body>
		<div id="box">
			<div class="smallbox" id="greenbox"></div>
			<div class="smallbox" id="bluenbox"></div>
			<div class="smallbox" id="redbox"></div>
			<div class="smallbox" id="orangebox"></div>
		</div>
	</body>

</html>

2.21 CSS3 新特性

div{
	-
}

position——fix与sticky

clip

flex弹性盒子

flex-direction：column 行 row 列 row-reverse 反转

opcity对象透明度

取值范围0到1，从1到0逐渐变透明

新属性模块

transition过渡：使目标元素以动画的效果完成样式变化

transform转化：设定目标区域的转换方式（大小、旋转、位移）
transform:scale(2,3)横轴2倍，纵轴3倍

rotate(45deg) 旋转45度
skew（89deg，12deg）X轴转动89度,Y轴转动12度

animation自定义动画

	/*自定义动画格式*/
	@keyframes kfc {
		25% {
			width:60px;
		}
		50% {
			width:100px;
		}
	}
	
	/*用在div2上*/
	.div2:hover{
		animation:kfc 10s;
	}

3 JS编程

ECMAScript:javascirpt，浏览器可以解析并执行的语言，可以控制网页上的元素，形成各种动态效果

3.1 历史进程

• 1995年由Netscape公司的Brendan Eich 在网景导航者浏览器上首次实现
• 是希望外观看起来像Java，所以取名javascipt，语法风格和Self和Scheme较为接近
• 2015前的版本，是叫javascirpt，2015.6.17，ECMA国际组织发布ECMAScript第六版，改名成ECMAScirpt2015，也叫ECMAScript6（ES6）

3.2 作用

3.3 JavaScript优点

3.4 浏览器执行基础组成

1. js核心语法（数据类型、函数封装、内置对象与本地对象）

3.5 js引入方式

引入方式：

• 内嵌JavaScript脚本
• 引入外部的JavaScript
• 模块化引入（vue）

		<!--第一种,内嵌JavaScript脚本-->
		<script type="text/javascript"></script>
		<!--第二种,引入外部的JavaScript-->
		<script src="" type="text/javascript" charset="utf-8"></script>

3.6 变量与数据类型

3.6.1 注释

单行注释&多行注释，注释写法大同小异

3.6.2 保留字与关键字

保留字是可能预计未来会使用的关键字，而关键字是已经在使用的词

3.6.3 基本数据类型和对象类型

注：null == undefined

基本数据类型是js引擎默认支持的数据类型，除了string类型外其余类型都占用固定内存空间，基本数据类型的数据存储在栈内存之中

**注意：**定义变量时：

• 使用var可以再次声明
• 弱类型，声明变量的时候根据变量的值来决定的
• 单引号引起来的也是String
• 没有声明变量则是undefined

3.6.4 判断对象类型方法

• typeof:获取目标变量的数据类型，以字符串形式返回（系统内置函数）
• Object.prototype.toString.call（最佳方式）

<!--第一种-->
Object.prototype.toString.call()
<!--第二种-->
typeof s1

typeof的局限性：只能区别5个基本类型和对象类型，无法识别对象类型的继承关系和对象类型赋值方式

3.6.5 遍历

3.6.5.1 for…in遍历对象属性

和foreach类似

			var arr = ["1","2","1"];
			
			for(let index in arr){
				document.write(arr[index]);
			}

3.6.5.2 for…of遍历对象属性

function fun

3.6.6 函数

函数定义-参数不需要类型定义

function functionname(param1,param2){
	
}

变量指向函数

<!-- 匿名函数 -->
var fun = function () {
	....
}

3.6.6.1 案例：简易计算器

<input type="text" name="num1" id="num1" value="" />
		<select name="operation" id="operation">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		</select>
		<input type="text" name="num2" id="num2" value="" />
		<input type="button" name="calcresult" id="calcresult" value="计算" />
		<input type="text" name="realresult" id="realresult" value="1" />

		<script type="text/javascript">
//			简易计算器
			function getCalc(num1, operation, num2) {
				num1 = parseInt(num1);
				num2 = parseInt(num2);
				var result;
				switch(operation) {
					case "+":
						return num1 + num2;
						break;
					case "-":
						return num1 - num2;
						break;
					case "/":
						return num1 / num2;
						break;
					case "*":
						return num1 * num2;
						break;
					default:
						break;
				}

			}
			var oj = document.getElementById("calcresult");
			oj.onclick = function() {
				var selectobj = document.getElementById("operation");
				var index = selectobj.selectedIndex;
				var operation = selectobj.options[index].value;
				
				num1 = parseInt(document.getElementById("num1").value);
				num2 = parseInt(document.getElementById("num2").value);
				
				var result = getCalc(num1, operation, num2);
				document.getElementById("realresult").value = result;
			}
		</script>

3.6.6.2 案例：递归调用1到n的值

<body>
		<input type="text" name="text1" id="text1" placeholder="输入正整数计算1到这个数的和" />
		
		<input type="button" name="button" id="button" value="计算" />

		<input type="text" name="result" id="result" value="1" />
		
		<script type="text/javascript">
//			递归调用
			function getSum(n) {
				if(n < 1) {
					return 0;
				}
				if(n == 1) {
					return 1;
				}
				if(n > 1) {
					return getSum(n - 1) + n;
				}
			}
			var obj = document.getElementById("button");
			obj.onclick = function() {
				var num = parseInt(document.getElementById("text1").value);
				var result = getSum(num);
				document.getElementById("result").value = result;
			}
	<script>

3.6.6.3 打印等腰星号三角形

3.7 函数自调用

在这里插入代码片

页面加载onload

• 多个onload情况，只有最后一个有效
• 页面加载时就运行

多个参数argument

内容总结

以上是互联网集市为您收集整理的Javaweb知识全部内容，希望文章能够帮你解决Javaweb知识所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端