黑马程序员技术交流社区

标题: 【西安校区】web开发初步认识及总结 [打印本页]

作者: 逆风TO 时间: 2019-9-4 09:51
标题: 【西安校区】web开发初步认识及总结
本帖最后由逆风TO 于 2019-9-4 09:52 编辑

一、语言
教程：
https://www.runoob.com/
https://www.w3school.com.cn/tags/att_label_for.asp

1.HTML
HTML：超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
2.CSS
推荐：https://www.cnblogs.com/mangM/p/9682845.html

主要用到了HTML的
style属性、
class属性和id属性（id 和 class 选择器）、
for属性（for 属性规定 label 与哪个表单元素绑定。）类似：<label for="male">Male</label>

2.1 内外样式表对比
2.1.1 内部样式表
直接用style属性标签内嵌于html中：

1.行间式#

<p> style="color:red;"</p>
1
2.内联式#

<style>
p {
color:red
}
</style>
2.1.2 外部样式表
这样将html与样式表有效分离，更易于编辑：
3.外联式#

p {
width: 100px;
height: 100px;
background-color: red;
}
<head>
<link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
CSS 组合选择符

CSS伪类

3.JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>

</head>
<body>
<p id="demo">这里将被显示的日期替换</p> 
<button type="button">显示日期</button>
</body>
</html>
jQuery 是一个 JavaScript 库，它极大地简化了 JavaScript 编程。

4.php内嵌于HTML
由于PHP属于脚本语言，很难直接定位函数定义处，在eclipse中导入php项目文件夹后可以ctrl+左键定位函数位置。

5.JSP内嵌于HTML
（JSP本人没接触过，此处省略……）

6.ASP.net和C#
（本人接触少，略……）

——以上代码主要来源于菜鸟教程。

二、框架
1.前端框架Bootstrap
https://www.bootcss.com/
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

2.PHP的CMS——wordpress、dedeCMS
wordpress：
https://cn.wordpress.org

织梦（dedeCMS）:
http://www.dedecms.com/

php还有很多不同功能的网站系统，比如

limesurvey：（非常强大的开源问卷系统）
https://www.limesurvey.org/fr/

三、环境
一般来说，要配环境的都是动态网页——
动态web中，程序依然使用客户端和服务端，客户端依然使用浏览器，通过网络连接到服务器上，使用HTTP协议发起请求，现在的所有请求都先经过一个WEB Server来处理。
如果客户端请求的是静态资源，则将请求直接转交给web服务器，之后web服务器从文件系统中取出内容，发送回客户端浏览器进行解析；如果客户端请求是动态资源，则先将请求转交给web Container,在web Container 中连接数据库，从数据库中取出数据等一系列操作后动态拼凑页面的展示内容，拼凑页面的展示内容后，把所有的展示内容交给web服务器，之后通过web服务器将内容发送回客户端浏览器进行解析执行。

静态web中，客户端使用web浏览器经过网络连接到服务器上，使用HTTP协议发起一个请求（Request)，告诉服务区我现在需要得到哪个页面，所有的请求交给web服务器，之后web服务器根据用户的需求，从文件系统（存放了所有静态页面的磁盘）取出内容。之后通过web服务器返回给客户端，客户端接收到内容之后经过浏览器渲染解析，得到显示的效果。
为了让静态web页面显示更加好看，使用javascript/VBScript/ajax.但是这些特效都是在客户端上借助于浏览器展现给用户的，所以在服务器上本身并没有任何的变化
（以上来自 https://www.cnblogs.com/CruxAustralis/p/11254360.html）

总结：动态内容（诸如： .jsp、.asp/.aspx、.php）的内容需要服务器经过解析、执行数据库等操作后再将处理后的网页反馈给浏览器。

0.Apache
Apache是世界使用排名第一的Web服务器软件。Apache取自“a patchy server”的读音，意思是充满补丁的服务器

1.php集成环境——wamp（web，Apache+Mysql+PHP）
PHP：全名为Hypertext Preprocessor，中文名叫"超文本预处理器”，是一种通用开源脚本语言。

写好的网页要放在特定位置来解析，比如www文件夹里的index.php，否则浏览器输入localhost路径后出现的就只有一个文件夹列表……或者就是403错误。

2.JSP的tomcat容器\servlet
JSP：全名为Java Server Pages，中文名叫"java服务器页面"，其根本是一个简化的Servlet设计

四、工具
1.浏览器的开发模式f12

网络：用来查找网络资源加载时间
源（又名存储）：查找网络资源
元素（又名查看器）：方便改样式表，（点击左侧指针按钮可以定位元素和样式表）

在右边的“规则”里，可以实时修改css代码并在浏览器上看到效果（css文件不会被修改，刷新就没效果了），所在的css文件名和所在行数也有显示。（开启工作空间后可以直接在浏览器改代码并保存）

2.各种集成开发环境或文本编辑器
idea在构建时要注意UTF-8是否带BOM；浏览器、tomcat版本也可能导致项目乱码。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2