web开发初步认识及总结

最新推荐文章于 2024-05-26 22:45:03 发布

超自然祈祷

最新推荐文章于 2024-05-26 22:45:03 发布

阅读量1.3k

点赞数 4

分类专栏： web网页、网络技术

本文链接：https://blog.csdn.net/sinat_27382047/article/details/97509095

版权

web网页、网络技术专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一、语言

教程：
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>

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> <!-- id是getElementById函数的依据 -->
<button type="button" onclick="displayDate()">显示日期</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版本也可能导致项目乱码。
……

超自然祈祷

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
web开发初步认识及总结

一、语言1.HTML<!DOCTYPE html><html><head><meta charset="utf-8"><title>网站标题</title></head><body> <h1>我的第一个标题</h1> <p>我的第一个段...
复制链接

扫一扫