web基础知识第二章：web开发基础知识
2018-12-29 20:38
204 查看
第一节：前端开发基础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 是什么结构？
树
五、练习
****************************************************************************************************************************
创建你的第一个html网页，
包含内容：
网页标题<title>： 我的第一个HTML网页
使用<img>加载素材：
http://edu-image.nosdn.127.net/FBEFFDA6D0AA8FE868373CB4FE111DDA.png?imageView&thumbnail=1920y560&quality=100（width="480" height="150"）
使用<img>加载学员云课堂头像（width="50" height="50"）;
并内联一个包含云课堂的<iframe>框架（width="500" height="100"）。可试用换行符</br>。
并通过浏览器访问。将html代码文件和浏览器显示的内容截图贴到答题框内。
****************************************************************************************************************************
解答：
****************************************************************************************************************************
</head>
<body>
<!-- 这里是注释 -->
<img src="http://edu-image.nosdn.127.net/FBEFFDA6D0AA8FE868373CB4FE111DDA.png?imageView&thumbnail=1920y560&quality=100" width="480" height="150" /> <br /><br />
<!-- 访问自己的头像 -->
<img src="https://edu-image.nosdn.127.net/973992C6DD4C85C2E358B4AAB3F9A8A6.jpg?imageView&quality=100&thumbnail=120y120" width="50" height="50" /> <br /><br />
<iframe src="http://study.163.com/smartSpec/intro.htm" frameborder="0" width="500" height="100"></iframe>
</body>
</html>
****************************************************************************************************************************
六、总结：
· 一个'<br />' 就是一个换行符
· <html>和</html>裹住网页的全部内容
· <head>和</head>之间裹住<title>和</title>
· <title>和</title>之间是网页显示名称
· </head>结束之后是<body>
· <body>和</body>之间是最重要的一部分
· 个人头像地址的获取，右击图片，点击属性
第二节：前端开发基础JavaScript
一、概述
1、在哪些地方可以运行JavaScript？
·HTML的<script></script>之间: 运行的时候，请点击文本会变成谢谢！
1bb8c
<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标准
五、课后练习
****************************************************************************************************************************
1、如下为一个html的元素：
<p id="hello">Hello World!</p>
如果想用javascript语言获取该元素内容，并将元素内容输出在浏览器页面上。则相关javascript代码如何写（不用全部写出，只写出关键的代码即可）。
****************************************************************************************************************************
解答：
<script>
x=document.getElementById("intro");
alert('id为intro元素的文本是：'+x.innerHTML);
</script>
****************************************************************************************************************************
****************************************************************************************************************************
1、在浏览器上获取网站study.163.com的cookie，并弹出在浏览器上。请写出相关javascript代码，并将该弹框截图贴到答题框内。
****************************************************************************************************************************
解答：
document.cookie
alert(document.cookie)
****************************************************************************************************************************
第三节：WEB服务端环境
一、web服务端概述
1、web服务端经历了哪些变化
·web静态网页时期
·web动态网页时期（php）
此时web服务端：
·配置文件
·语言解释器，解释成静态的html文件
·数据库
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服务端搭建
1、下载phpstudy
2、MySQL服务
·其他选项菜单
·MySQL工具（或者phpMyAdmin-点SQL-输入命令）
·MySQL命令行（通过命令行来操作数据库）
·输入用户名和密码（默认值均为default）
·回到界面处-MyHomePage(搭建环境的主页)
3、Apache服务（上述网页是如何工作的呢？）
·URL组成：http://localhost/l.php
·协议：http
·服务器名称：localhost（本地主机=127.0.0.1=本机IP=域名（DNS服务器或者HOSTS文件））
·根路径下的文件：l.php
·设置hosts
·打开C:\Windows\System32\drivers\etc\HOSTS
·自定义域名（地址+tab+自定义域名） 10.71.27.XXX secret.learning.com
·保存关闭重启刘浏览器
·http://localhost/l.php变成了secret.learning.com/l.php(服务器域名/IP地址变成了secret.learning.com（10.71.27.XXX）)
·l.php文件在哪里呢？
·其它选项菜单-->网站根目录
·TIPS:phpstudy默认网站路径C:/www
·创建我们自己的网页
·html:写一个html放到路径下
·php：动态网页
4、演示
·设置自定义域名：
·C:\Windows\System32\drivers\etc\HOSTS
·C:\WWW放一个text.html，然后输入域名\text.html即可打开页面
·html改成php也是可以正常访问的
·多种URL方式访问首页（start.163.com（域名）or IP地址都可以）
·创建一个php网页
三、总结：
1、web服务端
·MySQL:提供数据服务
两种操作方式
·命令行
·phpMyAdmin
·Apache：提供web服务
·访问方式
·Hostss设置
·运行网页
第四节：后端开发基础---SQL
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 01.Web基础知识 第二章 Web开发基础知识
- Jsp开发基础知识+九大隐式对象+11个内置对象+标签库（实际web开发中的典型）
- web开发的基础知识:http请求
- 零基础学习web前端开发需要学习的前端知识
- web前端开发基础知识随笔
- Web项目开发常用基础知识集锦
- javaweb开发之基础知识篇
- WEB开发的那些基础知识(3)--CSS的布局
- C++ 开发 Web 服务框架 - 基础知识：C++11 与 Boost Asio(一)
- 关于JavaWeb开发中的基础知识点——resquest response
- 移动web开发基础知识
- ASP.NET(四)Web开发——其它基础知识
- Web开发中的一些基础知识
- Web开发安全基础知识
- JavaWeb开发知识总结(一)-(oracle_基础)
- Web前端开发基础知识--部分总结
- 基础知识：Web开发相关技术
- Web开发基础知识的整理(一、Http协议的简单介绍)
- 移动web开发基础知识
- Python全栈开发之17、tornado和web基础知识