web开发从入门到精通一(详细)

简介: 每次学点东西都喜欢总结一下,顺便可以分享给大家。因此,在博客写知识点总结无疑成为我们目前最喜欢的总结方式。我们来介绍一下web开发 web的起源: 1989年CERN(欧洲粒子物理研究所)中由Tim Berners-Lee领导的小组提交了一个针对Internet的新协议和一个使用该协议的文档系统,该小组将这个新系统命名为World Wide Web,它的目的在于使全球的科学家能够利用Internet交流自己的工作文档。

每次学点东西都喜欢总结一下,顺便可以分享给大家。因此,在博客写知识点总结无疑成为我们目前最喜欢的总结方式。


我们来介绍一下web开发


   web的起源: 1989年CERN(欧洲粒子物理研究所)中由Tim Berners-Lee领导的小组提交了一个针对Internet的新协议和一个使用该协议的文档系统,该小组将这个新系统命名为World Wide Web,它的目的在于使全球的科学家能够利用Internet交流自己的工作文档。


这个新系统被设计为允许Internet上任意一个用户都可以从许多文档服务计算机的数据库中搜索和获取文档。1990年末,这个新系统的基本框架已经在CERN中的一台计算机中开发出来并实现了,1991年该系统移植到了其他计算机平台,并正式发布。 所以啊,web又叫全球广域网。


  主要的表现形式:1:超文本,目前最常用的就是HTML这种屌丝文本了,当然还有富文本,这个富文本我都没见过,应该是用的比较少了。现在可能初次听说超文本或者是HTML的网友们有疑问----超文本到底是啥,HTML又是啥。


   超文本:简单地说,顾名思义,超级文本。它使用超链接的方式将不同空间的文字信息进行了一个组合的网状文本。所谓超链接就是可以允许我们同其他网页和站点进行连接。什么意思呢?就是这种文本里可以加入链接,实现网页的跳转。相比之下,我们的文本文档没有这种功能,我们的word文档也没有这种功能,只有超文本才可以和外部建立链接。

   HTML:我们先上图,像谷歌浏览器这样的浏览器都有检查元素或是查看源代码的功能,我们打开一个网页里,进行检查元素或者查看源代码,我们都可以看到HTML。如下:

我们看,其实它整体框架就是这样,html标签,以及下面的head,就是头部,还有body,就是主体部分。最后还有一个结束的HTML标签。



我们打开看,刚刚为展现整体框架,就折叠起来了。我们展开看。如下:

看到没有,是不是有很多,其中有metal,title,script等等。其中有src,这个常常就是放链接的。我们后面再讲。



2:超媒体,我们简单讲,就是超文本和媒体信息的一个结合,可以有音频,图片等等,例如,我们可以写一个里面可以播放放音乐的超文本。


3:超文本传输协议,简单讲,我们常见像http,https等等这样的协议,就是一种传输的网络协议。


实战编写一个HTML的文件:

注:初次学习的猿友们,建议使用notepad++,或者直接用电脑自带的记事本也ok,初次学习,或者对代码不是很熟练的猿友们,不要太着急用屌丝软件,目前要锻炼动手能力。否者会对软件有太多的依赖。这里我用notepad编写。因为我觉得我还很菜,需要锻炼动手能力,熟悉代码。


   1:ok,我们先建立一个文本文件命名后缀名.html,注意一定要是.html。

   2:编写一个html文件,写出Hello World.我们用notepad++打开刚才建立的文件。我们写这样几句:这个下面这个是源代码


<DOCTYPE html><h1>
<html>
  <head>
  <body>
  </body>
  </head> 
    <h1>web基础</h1>
    <p>Hello World</p>
    <a href="https:blog.csdn.net" target="_blank">欢迎访问博客</a>
</html>


下面这个是我为大家写的相关注释,与上边的代码区分一下,别混淆注释。


<DOCTYPE html><h1><!--注释:申明html的固定格式-->
<html><!--注释:html标签开始部分-->
  <head><!--注释:head头部开始部分-->
  <body><!--注释:body头部开始部分-->
  </body><!--注释:结束部分-->
  </head> <!--注释:结束部分-->
    <h1>web基础</h1><!--标题-->
    <p>Hello World</p><!--段落-->
    <a href="https:blog.csdn.net" target="_blank">欢迎访问博客</a><!--注释:这里我在此加入下链接-->
</html> <!--html结束部分>


我们写好这些后保存关闭,然后在点击打开,我们来看效果,会在你的浏览器上显示,我这里是chrome浏览器。


看到上面的图片的蓝色字体没有,点击后转到我在源代码给的链接,就是如下的页面,进入博客。


其实我们还可以加如跳入链接,我们这样写,这里的head下面我加入了meta标签,其中http-equiv="refresh"就是设置了一个跳转,content="5’

代表5秒后跳转,后面的链接就是要跳转的链接。


<DOCTYPE html><h1>
<html>
  <head>
  <meta http-equiv="refresh" content="5;https://blog.csdn.net/jgdabc">
  <body>
  </body>
  </head> 
    <h1>web基础</h1>
    <p>Hello World</p>
    <a href="https:blog.csdn.net" target="_blank">欢迎访问博客</a>
</html>


我们点击欢迎访问博客后,进入博客页面,然后5秒进入我要跳转的链接。

如下:这里是我的博文页面


具体还能干什么呢,html可不止这些功能,我们来演示插入背景图和音乐和文字,以及修改字体颜色的相关操作。

废话不多说,上代码片:


<!DOCTYPE html>
<html>
</head> 
<body background ="E:/唯美.jpg"style="background-repeat:no repeat;
background-size:100% 100%;background-attachment:fixed;">
<video width="160" height="120" controls>
  <source src ="E://catch_music//大雪.mp3"type="video/mp4">
</video>  
        <h1 style = "text-align:center">雪景之歌</h1>
  <a href="https://blog.csdn.net/jgdabc/article" target="_blank"style="text-decoration:none;"><font color="red" >点击:欢迎访问博客</a>
  <h2>jgdabc</h2>
  <font color="yellow"size=5>
  <p style="text-align:center">
    <pre>
    白茫茫天与地相接,北风吹着树挂摇曳。<br>
    漫天的雪花像白色的蝴蝶,那么寂静,那么纯洁。<br>
    大雪到,天空下起了雪,愿你与烦恼告别,将忧愁忘却,愿你快乐无边。<br>
    冬天,一层薄薄的白雪,像巨大的轻软的羊毛毯子,覆盖摘在这广漠的荒原上,闪着寒冷的银光。<br>
    如果可以的话,我想化作冬日里的一篇雪花,捎上几分桃花香,然后落在你的肩头<br>
    </pre>
        </p>
</html>


我们来看注释


<!DOCTYPE html>
<html>
</head> 
<body background ="E:/唯美.jpg"style="background-repeat:no repeat;
background-size:100% 100%;background-attachment:fixed;">
<video width="160" height="120" controls><!--这里设置播放器-->
  <source src ="E://catch_music//大雪.mp3"type="video/mp4"><!--这里给出我音乐的链接,以及格式-->
</video>  
        <h1 style = "text-align:center">雪景之歌</h1><!--这里是我给的题目-->
  <a href="https://blog.csdn.net/jgdabc/article" target="_blank"style="text-decoration:none;"><font color="red">点击:欢迎访问博客</a>
  <h2>jgdabc</h2><!--这是又一个题目-->
  <font color="yellow" size =5><!--这是我给下面文字设置的颜色和大小-->
  <p style="text-align:center"><!--这里设置居中显示,下面是段落-->
    <pre><!--pre可以帮助我操纵空格-->
    白茫茫天与地相接,北风吹着树挂摇曳。<br><!--br可以设置换行-->
    漫天的雪花像白色的蝴蝶,那么寂静,那么纯洁。<br>
    大雪到,天空下起了雪,愿你与烦恼告别,将忧愁忘却,愿你快乐无边。<br>
    冬天,一层薄薄的白雪,像巨大的轻软的羊毛毯子,覆盖摘在这广漠的荒原上,闪着寒冷的银光。<br>
    如果可以的话,我想化作冬日里的一篇雪花,捎上几分桃花香,然后落在你的肩头<br>
    </pre>
        </p>
</html>


好,我们来看效果:


如下:

上面是有个播放器得,我给的是王梓钰的大雪这首歌,我个人非常喜欢这首歌,超级喜欢,哈哈,所以加上了。左边红色的分别是我博客的链接地址,和我的博客的名字,中间黄色的是和雪结合的唯美的句子。背景也是一张唯美图片。

好累好累,肩膀疼,今天就讲到这里,比较基础,欢迎大家关注下一章,也欢迎猿友们留言指点。



相关文章
|
8天前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
46 3
|
8天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
14天前
|
设计模式 测试技术 持续交付
开发复杂Web应用程序
【10月更文挑战第3天】开发复杂Web应用程序
28 2
|
16天前
|
Java PHP
PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。理解其垃圾回收机制有助于开发高效稳定的PHP应用。
【10月更文挑战第1天】PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。其垃圾回收机制包括引用计数与循环垃圾回收,对提升应用性能和稳定性至关重要。本文通过具体案例分析,详细探讨PHP垃圾回收机制的工作原理,特别是如何解决循环引用问题。在PHP 8中,垃圾回收机制得到进一步优化,提高了效率和准确性。理解这些机制有助于开发高效稳定的PHP应用。
35 3
|
1月前
|
数据可视化 图形学 UED
只需四步,轻松开发三维模型Web应用
为了让用户更方便地应用三维模型,阿里云DataV提供了一套完整的三维模型Web模型开发方案,包括三维模型托管、应用开发、交互开发、应用分发等完整功能。只需69.3元/年,就能体验三维模型Web应用开发功能!
221 8
只需四步,轻松开发三维模型Web应用
|
5天前
|
网络协议 安全 JavaScript
Web实时通信的学习之旅:WebSocket入门指南及示例演示
Web实时通信的学习之旅:WebSocket入门指南及示例演示
30 0
|
6天前
|
Web App开发 Java 测试技术
一、自动化:web自动化。Selenium 入门指南:从安装到实践
一、自动化:web自动化。Selenium 入门指南:从安装到实践
15 0
|
1月前
|
前端开发 开发者 Python
从零到一:Python Web框架中的模板引擎入门与进阶
在Web开发的广阔世界里,模板引擎是连接后端逻辑与前端展示的重要桥梁。对于Python Web开发者而言,掌握模板引擎的使用是从零到一构建动态网站或应用不可或缺的一步。本文将带你从基础入门到进阶应用,深入了解Python Web框架中的模板引擎。
27 3
|
1月前
|
安全 API 开发者
Web 开发新风尚!Python RESTful API 设计与实现,让你的接口更懂开发者心!
在当前的Web开发中,Python因能构建高效简洁的RESTful API而备受青睐,大大提升了开发效率和用户体验。本文将介绍RESTful API的基本原则及其在Python中的实现方法。以Flask为例,演示了如何通过不同的HTTP方法(如GET、POST、PUT、DELETE)来创建、读取、更新和删除用户信息。此示例还包括了基本的路由设置及操作,为开发者提供了清晰的API交互指南。
95 6
|
1月前
|
存储 JSON API
实战派教程!Python Web开发中RESTful API的设计哲学与实现技巧,一网打尽!
在数字化时代,Web API成为连接前后端及构建复杂应用的关键。RESTful API因简洁直观而广受欢迎。本文通过实战案例,介绍Python Web开发中的RESTful API设计哲学与技巧,包括使用Flask框架构建一个图书管理系统的API,涵盖资源定义、请求响应设计及实现示例。通过准确使用HTTP状态码、版本控制、错误处理及文档化等技巧,帮助你深入理解RESTful API的设计与实现。希望本文能助力你的API设计之旅。
56 3