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>


好,我们来看效果:


如下:

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

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



相关文章
|
22天前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
82 3
|
4天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
74 44
|
2天前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
5天前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
22 2
|
22天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
WK
|
5天前
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
9 0
|
28天前
|
设计模式 测试技术 持续交付
开发复杂Web应用程序
【10月更文挑战第3天】开发复杂Web应用程序
31 2
|
30天前
|
Java PHP
PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。理解其垃圾回收机制有助于开发高效稳定的PHP应用。
【10月更文挑战第1天】PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。其垃圾回收机制包括引用计数与循环垃圾回收,对提升应用性能和稳定性至关重要。本文通过具体案例分析,详细探讨PHP垃圾回收机制的工作原理,特别是如何解决循环引用问题。在PHP 8中,垃圾回收机制得到进一步优化,提高了效率和准确性。理解这些机制有助于开发高效稳定的PHP应用。
40 3
|
6天前
|
JavaScript 前端开发 Java
SpringBoot_web开发-webjars&静态资源映射规则
https://www.91chuli.com/ 举例:jquery前端框架
10 0
|
2月前
|
数据可视化 图形学 UED
只需四步,轻松开发三维模型Web应用
为了让用户更方便地应用三维模型,阿里云DataV提供了一套完整的三维模型Web模型开发方案,包括三维模型托管、应用开发、交互开发、应用分发等完整功能。只需69.3元/年,就能体验三维模型Web应用开发功能!
272 8
只需四步,轻松开发三维模型Web应用