WEB安全第二章：web开发基础知识

最新推荐文章于 2024-09-06 19:40:02 发布

原创最新推荐文章于 2024-09-06 19:40:02 发布 · 255 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#web #web安全

web安全专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍前端HTML、CSS和JavaScript的基本用法，包括标签、语法、DOM操作及BOM应用，同时概述了后端服务端环境搭建，如Apache、PHP和MySQL的组合使用。

TO BE CONTINUED


第一节：前端开发基础HTML


一、概述

	·HTML
		超文本标记语言 hyper Text Markup Language
	·CSS：
	·JS：动态效果

	
二、HTML语法
			
			注释：	<!-- 这里是注释信息，不会页面展示 -->
			图像：	<img src="http://study.163.com/res/images/logo4.png"width="500" height="100" />
			链接：	<a href="http://study.163.com/smartSpec/intro.htm">点我访问网页！！！</a>
			表单：	<form>
					username:
					<input type="text" name="username" />
					password:
					<input type="password" name="password" />
					<input type="submit" value="Submit" />
					</form>
			内联框架<iframe src="http://study.163.com/smartSpec/intro.htm"frameborder="0" width="480" height="240"
			
三、HTML DOM
			
			将文档转换成树结构

四、小结：
			1、web页面通常使用哪几种语言开发？
				HTML+JS+CSS
			2、HTML结构包含哪两部分？
			
			3、HTML元素由哪几部分组成？
			4、常见的GTML标签有哪些？
			5、HTML DOM 是什么结构？
				树

		
		

第二节：前端开发基础JavaScript


一、概述
		1、在哪些地方可以运行JavaScript？
				·HTML的<script></script>之间: 运行的时候，请点击文本会变成谢谢！
				
									<html>
									<head>
									<title>开始学习！</title>
									</head>
									<body>
									<p id="intro">Hello World!</p>
									<script>
									function changetext(id)		 JAVASCRIPT部分
									{                            JAVASCRIPT部分
									id.innerHTML="谢谢！";	     JAVASCRIPT部分
									}                            JAVASCRIPT部分
									</script>
									<h1 onclick="changetext(this)">请点击该文本</h1>
									
									</body>
									</html>
				·google浏览器中开发者工具console平台也是可以执行JS代码的
					
二、JAVASCRIPT	DOM	(控制HTML)
					
					1、如何获取一个HTML元素内容?
									<html>
									<head>
									<title>我的网页</title>
									</head>
									<body>
									<p id="intro">Hello World!</p>
									
									<script>
									x=document.getElementById("intro")
									alert('id为intro元素的文本是：'+x.innerHTML);
									</script>
									
									</body>
									</html>
									
							第一步，获取元素：
										 getElementByld():通过id获取元素
							第二步，获取元素内容
										.inneerHTML:获取元素内容
										
					1.1、实战
						console里面：
							alert(1):会弹出对话框，显示一个1
						
						开发者工具-左上角的小箭头 - 选择网页要获取内容 -alert(document.getElementById("urs - lg -form").innerHTML) -就会将元素内容显示出来了。
						
					2、如何修改一个HTML元素内容?	document.write()
						
									<html>
									<head>
									<title>我的第三个网页</title>
									</head>
									<body>
									<p id="intro">Hello World!</p>
									
									<script>
									x=document.getElementById("intro");
									//document.write('id为intro元素的文本是'+x.innerHTML);
									document.write(Data());
									</script>
									
									</body>
									</html>
									
						console里面：	 document.write("<iframe src='http://www.163.com'></iframe>")
									
									
					 3、如何给页面增加点互动	onclick
					 
					 4、总结：DOM本质就是连接Web页面和编程语言的桥梁
					 
							
					
					
					
三、BOM(Browswe Object Model)			控制浏览器

					1、如何让浏览器来警告用户？
							
							·警告弹窗alert()
							·确认弹窗confirm()
							·提示弹窗prompt()
							
					2、如何从浏览器获取用户cookie？
						
							2.1	cookie：
								通常是服务器发放给用户客户端的一小段文本信息
								（用户输入用户名和密码成功登陆网站后，网站会生成一个cookie给用户，当做用户凭证）
								（这个凭证cookie就相当于我们的要是，我们每次访问玩站的时候浏览器都会带上钥匙（cookie））
								
							2.2 document.cookie
								document.cookie="写入值"
								
							2.3、实战
								console-->document.cookie-->documen.cookie="哈哈哈哈哈"	//写入新的cookie
								alert(document.cookie)//展示出来cookie
								 
					3、获取浏览器屏幕信息
							(window.)screen
							
					4、获取/控制用户页面URL
							(window.)location
							例如：
								window.location.href="http://aq.163.com"
							网页上面的地址就会发生变化
							
					5、获取访问者浏览器信息	(window.)navigator
							window.navigator.userAgent
							window.navigator
							
					6、操作浏览器窗口：
						window  open
						window	close
						window.open("http://aq163.com")

四、总结：
			
					1、ECMAScript是JavaScript标准

			
							
第三节：WEB服务端环境

一、web服务端概述
		
				1、web服务端经历了哪些变化
					·web静态网页时期
					·web动态网页时期（php）
						此时web服务端：
									·配置文件
									·语言解释器
									·数据库
				2、目前流行的架构有哪些呢？
					（web服务端）：		·操作系统：windows，linux
										·web服务：IIS,Apache
										·解释执行环境：ASP,PHP
										·数据库服务:SQL Server,MySQL
										
					.net环境：
							Window sever:IIS + ASP(.NET) + SQL Server
					·LAMP环境：
							Linux: Apache + PHP + MySQL
					·J2EE环境：
							UNIZ/Windows：Tomcat + JSP +Oracle
				
				3、如何搭建一个建议的WEB服务器呢？
				 
				--Window + Apache + PHP +MySQL
					
二、web服务端搭建