第一节:前端开发基础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>之间: 运行的时候,请点击文本会变成谢谢!
<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
web基础知识第二章:web开发基础知识
最新推荐文章于 2022-01-26 21:21:09 发布