Web前端中关于url、href、src的知识汇总

Web前端中关于url、href、src的知识汇总,第1张

今天小编要跟大家分享的文章是Web前端中关于url、href、src的知识汇总。熟悉web前端的小伙伴们一定不会对这三个内容陌生。但是对于刚刚接触web的小伙伴肯定不是很了解,今天小编就为大家准备了这篇文章让我们一起来看一看关于url、href、src的知识汇总。





一、URL的概念


统一资源定位符(或称统一资源定位器/定位地址、URL地址等,英语:UniformResource
Locator,常缩写为URL),有时也被俗称为网页地址(网址)。如同在网络上的门牌,是因特网上标准的资源的地址(Address)。


二、URL的格式


21标准格式


协议类型:[//服务器地址[:端口号]][/资源层级UNIX文件路径]文件名查询


22完整格式


协议类型:[//[访问资源需要的凭证信息@]服务器地址[:端口号]][/资源层级UNIX文件路径]文件名查询


其中访问凭证信息@;:端口号;查询;#片段ID都属于选填项。


三、URL的语法规则


比如网址#/html/indexasp,必须遵守以下的语法规则:


scheme://hostdomain:port/path/filename


31说明


(1)scheme-定义因特网服务的类型。最常见的类型是>查阅资料之后想到一下几种解决方法
1,使用position:absolute模拟
<script type="text/javascript">
windowonscroll=function(){
$("fixed")css("top",$(window)scrollTop());
$("foot")css("top",$(window)scrollTop()+$(window)height());
}
</script>
问题来了:滑动页面时头部底部div会有明显的抖动。
2,判断当前获得焦点元素是input则隐藏div改为position:absolute
<body onload=setInterval("a()",500)>
<script type="text/javascript">
function a(){
if(documentactiveElementtagName == 'INPUT'){
$("fixed")css({'position': 'absolute','top':'0'});
} else {
$("fixed")css('position', 'fixed');
}
}
</script>
问题来了:不停监控dom,消耗资源。如果input个数较少,可在input里面添加onfocus事件好一些。但是如果是底部固定div此方法好像不太给力。
3,插件iscrolljs个人感觉不是很好用。可能方法不对,jQuery Mobile 没尝试,感觉会增负担。
4,重点来了:
只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果,无需插件。可拷贝下面代码运行。
<!DOCTYPE html>
<html lang="zh_cmn">
<head>
<meta charset=utf-8 />
<meta >

这里整理了一份web前端学习路线的思维导图,需要掌握和学习的内容如下:

第一阶段:专业核心基础

阶段目标:

1熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。

2熟练运用HTML+CSS特性完成页面布局。

4熟练应用CSS3技术,动画、d性盒模型设计。

5熟练完成移动端页面的设计。

6熟练运用所学知识仿制任意Web网站。

7能综合运用所学知识完成网页设计实战。

知识点:

1、Web前端开发环境,HTML常用标签,表单元素,Table布局,CSS样式表,DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化,能够仿制任意网站的前端页面实现。

2、CSS3选择器、伪类、过渡、变换、动画、字体图标、d性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端,整理网页开发技巧。

3、预编译css技术:less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用less、sass完成项目开发,深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。

第二阶段:Web后台技术

阶段目标:

1了解JavaScript的发展历史、掌握Node环境搭建及npm使用。

2熟练掌握JavaScript的基本数据类型和变量的概念。

3熟练掌握JavaScript中的运算符使用。

4深入理解分之结构语句和循环语句。

5熟练使用数组来完成各种练习。

6熟悉es6的语法、熟练掌握JavaScript面向对象编程。

7DOM和BOM实战练习和H5新特性和协议的学习。

知识点:

1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。

2、JavaScript面向对象基础、异常处理机制、常见对象api,js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。

3、BOM *** 作和DOM *** 作。熟练使用BOM的各种对象、熟练 *** 作DOM的对象。

4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。

第三阶段:数据库和框架实战

阶段目标:

1综合运用Web前端技术进行页面布局与美化。

2综合运用Web前端开发框架进行Web系统开发。

3熟练掌握Mysql、Mongodb数据库的发开。

4熟练掌握vuejs、webpack、elementui等前端框技术。

5熟练运用Nodejs开发后台应用程序。

6对Restful,Ajax,JSON,开发过程有深入的理解,掌握git的基本技能。

知识点:

1、数据库知识,范式,MySQL配置,命令,建库建表,数据的增删改查,mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理,为Nodejs后台开发打下坚实基础。

2、模块系统,函数,路由,全局对象,文件系统,请求处理,Web模块,Express框架,MySQL数据库处理,RestfulAPI,文件上传等。熟练运用Nodejs运行环境和后台开发框架完成Web系统的后台开发。

3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vuejs框架的基本使用有清晰的理解,能够运用Vuejs完成基础前端开发、熟练运用Vuejs框架的高级功能完成Web前端开发和组件开发,对MVVM模式有深刻理解。

4、需求分析,数据库设计,后台开发,使用vue、node完成pc和移动端整站开发。于Nodejs+Vuejs+Webpack+Mysql+Mongodb+Git,实现整站项目完整功能并上线发布。

第四阶段:移动端和微信实战

阶段目标:

1熟练掌握Reactjs框架,熟练使用Reactjs完成开发。

2掌握移动端开发原理,理解原生开发和混合开发。

3熟练使用react-native和Flutter框架完成移动端开发。

4掌握微信小程序以及了解支付宝小程序的开发。

5完成大型电商项目开发。

知识点:

1、React面向组件编程、表单数据、组件通信、监听、声明周期、路由、Rex基本概念。练使用react完成项目开发、掌握Rex中的异步解决方案Saga。

2、react-native、开发工具、视图与渲染、api *** 作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架,并分别使用react-native和Flutter分别能开发移动端项目。

3、微信小程序基本介绍、开发工具、视图与渲染、api *** 作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。

4、大型购物网站实战,整个项目前后端分离开发;整个项目分为四部分:PC端网页、移动端APP、小程序、后台管理。团队协作开发,使用git进行版本控制。目期间可以扩展Threejs、TypeScript。

Web前端目前还是一个比较新的职业,其在国内乃至国际上真正受重视的时间还未超过五年。昆明北大青鸟>

Web前端需要掌握哪些技术

1、熟练掌握html基本知识,包括每个标签的用法等。

2、熟练掌握div+css基本知识,这个东西基本就是web前端的基础了,它可以将你写的东西直观的展示出效果给你看,所以须熟练掌握。不管你做了什么,瞬间就可以看到效果,对调试、修改有很大的帮助,这个就是前端开发的显示效果。

3、我觉得这里应该是至少掌握一个后台的内容管理系统,比如现在流行的WordPress,phpcmsv9、dede、帝国等都是比较好用的。这个也会了,你就基本可以在本地建站了,就可以用来熟悉你前面学到的html和div+css,让自己熟练的掌握这些,并且你会发现这样比枯燥的学习更有乐趣。

4、重头戏,学习javascript编程,深入学习,包括jquery等框架。js东西会比较多,一定要有耐心,和决心去学下去,加油~Js就是前段的行为和数据交换。

5、学习一门简单的后台编程语言,比如asp或者php,不需要学的太深入,主要为了培养编程思想!

6、现在很火的html5+css3,学习web前端,这些与时俱进的东西一定要看。

你的学习方向找到了没有? html+css+javascript! 掌握了这三项技能就可以写出完整的静态页面,下面介绍一下几大等级,你修炼道了那个程度?
一入门
能够解决一些问题的水平。有一定的基础(比如最常见的html标签及其属性、事件、方法;最常见的css属性;基础的javascript编程能力),能够完成一些简单的web前端研发需求。
二登堂
能够正确地解决问题。不管你是通过搜索网络,或者通过改造某些成品代码(jquery/dojo/ext/yui)案例,只要能够无错地完成需求。
三入室
最强代码,知道所有能够解决需求的各种方案,能够选择使用最优秀的方案满足需求。这个级别基本上产品开发编程中的代码主力。给出的一招一式,招招都是绝招。
四入微
最强解决方案。你能够走在需求的前面,将当前需求里有的、没有直接提出来的、现在暂时没有但将来可能有的等等,及前端编程潜规则等各个方方面面都综合考虑,给出最优方案。以一招胜万招。
五化蝶
破茧重生,这个层次关注的是编程语言本身,而不再关心产品需求。什么是茧?产品需求就是茧。当你一招胜万招,打遍天下需求之时,你如果还拘泥于需求开发,那就是你限于茧中而不自知。要么就在这个茧里默默地老去,要么就破开茧获得新生。
六大侠
这里所说的大侠,不是大家互相吹捧的”大侠”,而是实至名归的高手。这个级别的人完全有能力写出不差于bindows/jquery/ext/yui/dojo的同等级别规模的前端开发框架。应用成熟的开发框架指导、解决问题。
七宗师
这个级别的人已然到了无招胜有招的境界。项目开发中的难题?没有难题!运行平台的差异?从根本上搞定!代码规范、开发模式,早已经被抛在身后。这个级别的人已经不再关注于某个前端开发框架,而是应对具体的环境给出最佳的理论指导。
八飞升
其实严格来说,飞升已经不是原领域的范围了。在web研发领域,对于这个层次的有一个很好听的称谓:架构师。当然那些”伪架构师”另当别论。
一通则百通。在其它的技术领域,也可以按照《入门》《登堂》《入室》《入微》《化蝶》《大侠》《宗师》来划分等级。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13394537.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-27
下一篇 2023-07-27

发表评论

登录后才能评论

评论列表(0条)

保存