Web开发技术介绍:HTML,CSS,PHP和JavaScript的作用

Anyone approaching modern web development is immediately confronted with a blizzard of confusing terms and technologies: REST, AJAX, adaptive design, FTP, and much more. In the face of all that information, it’s very easy to become lost and intimidated. While there’s no denying that there are many disciplines and specializations in web development, the big picture can very easily be explained with cake.

任何进行现代Web开发的人都将立即面对令人困惑的术语和技术:REST,AJAX,自适应设计,FTP等。 面对所有这些信息,很容易迷失和恐吓。 虽然不能否认Web开发中有许多学科和专业,但是可以用蛋糕很容易地解释全局。

制备
面粉,鸡蛋,黄油和器皿
(Preparation)

To make an apple pie from scratch, you must first create the universe

要从头开始制作苹果派,您必须先创建Universe

- Carl Sagan

-卡尔·萨根(Carl Sagan)

Just as a baker works best in a clean, well-organized kitchen, so the best web development takes place with a clear purpose, defined by the answers to two questions: who are you making the site for, and why?

就像面包师在干净整洁的厨房中工作得最好一样,最好的Web开发也要有明确的目的,这要由以下两个问题的答案来定义: 您要为谁创建网站,为什么?

Preparation also involves setting up the right in place to create a productive, efficient workflow.

准备工作还包括建立正确的以创建高效,高效的工作流程。

内容 (Content)

To make a cake you need ingredients: flour, salt and eggs. In web development, those ingredients are content: the text and images you wish to share. Before starting the development of any site, you should have as much content as possible prepared beforehand.

制作蛋糕需要原料:面粉,盐和鸡蛋。 在Web开发中,这些成分的内容 :文字和图像,你想分享。 在开始开发任何网站之前,您应该事先准备尽可能多的内容。

Many web designers start from the opposite end, trying to make a design first and then attempting to shoehorn content into the structure. This is akin to planning a meal without having anything in the cupboard, and then at the last moment pouring eggs and flour into a pan and hoping it will form a cake.

许多Web设计师从相反的一端开始,尝试先进行设计,然后尝试将内容刺入结构。 这类似于在柜子里没有任何东西的情况下计划一顿饭,然后在最后一刻将鸡蛋和面粉倒入锅中,希望它能形成蛋糕。

Users come to website for content, not a design. Making a website with content that is poorly planned but well designed may make something that looks good, but that remains unappealing. Time spent writing text and editing pictures – sourcing and refining the best ingredients possible – gives you a far better idea of the scale and structure of what you are about to create, and will provide the best possible result.

用户访问网站是为了获取内容,而不是设计。 制作一个内容计划不当但设计合理的网站可能会使外观看起来不错,但仍然没有吸引力。 花时间编写文本和编辑图片–采购和优化可能的最佳成分–使您对要创建的内容的规模和结构有了更好的了解,并将提供最佳的结果。

When everything is ready, it’s time to design your creation.

一切准备就绪后,就可以设计创作了。

设计 (Design)

Once you understand the purpose of your site and have the content ready, you can design the pages. Site design takes in typography, color theory and information architecture to create a well-organized, attractive and useful online experience for the visitor.

了解网站的用途并准备好内容后,就可以设计页面了。 网站设计结合了版式色彩理论和信息体系结构,为访问者创造了组织良好,有吸引力且有用的在线体验。

It’s difficult to design a site without knowing the technical challenges and limitations of the medium. For that reason, I tend to reference design issues as I teach, rather than as individual lessons.

不了解媒体的技术挑战和局限性,很难设计站点。 因此,我倾向于在教学时参考设计问题,而不是作为单独的课程。

HTML (HTML)

Basic cake

The basic cake: a simple sponge cake, let’s say – is HTML, which serves to “bake” your content into a format that makes sense to browsers. It’s the first language you’ll learn in web development, and the most important: every website you see, no matter how complex, is written in HTML.

基本的蛋糕:比如说一个简单的海绵蛋糕是HTML ,它可以将您的内容“烘焙”为对浏览器有意义的格式。 它是您在Web开发中学习的第一门语言,也是最重要的语言:无论您看到的每个网站如何复杂,都以HTML编写。

Wrapped around your content, HTML forms the base level of your site. It won’t look terribly exciting, but it will have all the basic functionality and features – headings, paragraphs, , links and images. As simple as this is, it is also foundational: a half-made base will endanger the stability and success of any multi-tiered baked masterpiece you wish to create.

HTML围绕您的内容,构成了网站的基本级别。 它看起来并不令人兴奋,但是它将具有所有基本功能和特性- 标题,段落 ,链接和图像 。 如此简单,这也是基础:半成品的基座将危及您要创建的任何多层烘焙杰作的稳定性和成功性。

In HTML, a well-formed page is based on two principles: and validation.

在HTML中,格式良好的页面基于两个原则: 验证

Accessibility is the equivalent of placing a Lazy Susan under the cake, so that everyone can partake of your work: it allows equality of access to your content. Basic accessibility isn’t difficult or complex, but must be integrated into your development process: left by itself, accessibility becomes an afterthought, or ignored entirely.

可访问性等同于在蛋糕下放一个懒惰的苏珊,这样每个人都可以参与您的工作:它允许平等地访问您的内容。 基本可访问性并不困难也不复杂,但是必须集成到您的开发过程中:可访问性本身就成为事后的想法,或者被完全忽略。

Validation is akin to the rules of physics: the heat of the oven, the reactions of sugars and enzymes in the ingredients. Working within the rules creates something that can be consumed by browsers, while ignoring them usually produces disaster.

验证类似于物理规则:烤箱的热量,配料中糖和酶的React。 在规则内工作会创建一些可供浏览器使用的内容,而忽略它们通常会造成灾难。

HTML comes in various “flavors”: XHTML, HTML 3.2, HTML5, and so on. In the past I have recommend that serious students start with XHTML 1.0 Strict, if they have time. While leaner and stricter – think French haute cuisine – learning XHTML provides a better, more disciplined foundation for web development skills. If you’re after immediate results, you could learn HTML5 instead: looser, broader, more “anything goes”. The downside is that the language is far newer, and not to the “taste” of every browser (indeed, no browser yet supports the complete HTML5 specification), and thus more likely to confound and frustrate your expectations.

HTML具有各种“风味”:XHTML,HTML 3.2,HTML5等。 过去,如果有时间,我建议认真的学生从XHTML 1.0 Strict开始。 虽然更瘦,更严格(例如法国高级美食),但是学习XHTML为Web开发技能提供了更好,更严格的基础。 如果您追求立竿见影的效果,则可以学习HTML5:更宽松,更广泛,更多“任何内容”。 缺点是该语言是较新的语言,并且没有达到每个浏览器的“趣味”(实际上,没有浏览器还支持完整HTML5规范),因此更可能使您感到困惑和沮丧。

CSS (CSS)

CSS is decorating your cake, the presentation of your site. If the base layer (your content, wrapped in HTML) is poorly formed, no amount of icing or decoration will make it better. CSS controls the color, layout, and design of your site: increasingly, it is also used in areas such as animation. CSS is learned after HTML, for the same reasons that you can’t form a cake out of pure icing.

CSS正在装饰您的蛋糕,网站的展示。 如果基础层(您的内容,用HTML包裹)格式不正确,则没有任何糖衣或装饰会使它变得更好。 CSS控制网站的颜色,布局和设计:越来越多CSS也用于动画等领域。 CSS是 HTML 之后学习的,原因与您不能仅凭纯粹的糖衣结成蛋糕一样。

Combining good content and design skills while using HTML and CSS to create an accessible, valid site will give you a complete work, in the sense of the site’s presentation in the browser. What the web pages may lack is functionality, scalability and efficiency, which are the domains of the next three technologies.

结合良好的内容和设计技能,同时使用HTML和CSS创建可访问的有效网站,就网站在浏览器中的呈现而言,它可以为您提供完整的工作。 网页可能缺少的是功能,可伸缩性效率,这是接下来三种技术的领域。

JavaScript (JavaScript)

Tiered web development cake

is used for client-side behavior: broadly speaking, actions that are beyond the scope or capability of HTML or CSS. For example, HTML will mark up a table of data on a web page, and CSS can be used to present that tabular data attractively, but allowing the user to sort that information – changing the order of rows in the table – is beyond the ability of both.

用于客户端行为:广义上讲,超出HTML或CSS范围或功能的动作。 例如,HTML将在网页上标记一个数据表 ,而CSS可用于以有吸引力的方式呈现该表格数据 ,但允许用户对信息进行排序(更改表中的行顺序)超出了能力范围两者。

There tends to be a great deal amount of confusion around JavaScript among new web developers. Part of this lies in its closely shared portmanteau with Java, to which it is wholly unrelated; partly it is the fact that many of the features people assume they need the technology for (image galleries, animation, interactive navigation) are best achieved with CSS. This confusion is added to by the popularity of JQuery and AJAX: the former is a framework for JavaScript (i.e. a series of syntax shortcuts), the latter a way of merging JavaScript with a server-side language such as .

在新的Web开发人员中,关于JavaScript的混淆往往会很多。 部分原因在于它与Java紧密共享的portmanteau,与Java完全无关。 部分原因是人们认为,使用CSS可以最好地实现他们需要技术的许多功能(图像画廊,动画, 交互式导航 )。 JQuery和AJAX的流行进一步加剧了这种混乱:前者是JavaScript的框架(即一系列语法快捷方式),后者是将JavaScript与服务器端语言(例如合并的方式。

JavaScript forms a second tier on your cake, but it is important to note that it is an optional one. You can learn PHP first instead, if you wish.

JavaScript在您的蛋糕上占了第二层,但是要注意,它是可选的 。 如果愿意,可以先学习PHP。

PHP (PHP)

PHP is a server-side technology. Leveraging it allows your site to scale from less than a dozen pages to several hundred, if that is your ambition, through the use of server-side includes. It is also secure, allowing confidential storage and retrieval of user data.

PHP是一种服务器端技术。 利用它,您可以通过使用服务器端包含功能将您的网站从不到十二个页面扩展到数百个页面。 它也是安全的 ,允许机密存储和检索用户数据。

PHP is not the only server-side language, but it is the most popular one. Other possibilities include ASP.Net, Perl and Ruby.

PHP不是唯一的服务器端语言,但它是最受欢迎的一种。 其他可能性包括ASP.Net,Perl和Ruby。

To this point, everything that we have been making can be created with nothing more than a text editor and a browser, but in order to run PHP or any other server-side technology you must have access to a server.

至此,我们所做的一切都只能使用文本编辑器和浏览器来创建,但是要运行PHP或任何其他服务器端技术,您必须有权访问服务器。

MySQL (MySQL)

The final step to all of this is storing information into a database. This information may include customer data, such as login verification, order history and passwords, or the content of the site itself. Again, MySQL is not the only database capable of achieving this, merely the most popular.

所有这些的最后一步是将信息存储到数据库中。 此信息可能包括客户数据,例如登录验证,订单历史记录和密码,或网站本身的内容。 同样, MySQL不是唯一能够实现此目的的数据库,而是最受欢迎的数据库。

MySQL is also the most advanced and, arguably, the most complex of these technologies, and is best approached last.

MySQL也是这些技术中最先进的,而且可以说是最复杂的,并且最好采用最后一种方法。

A “fully featured” modern site will be a large vertical slice through all these cake layers, but it is entirely possible to make a good site with just informative content, organized pages, and HTML.

一个“功能齐全”的现代站点将是贯穿所有这些蛋糕层的大型垂直切片,但是完全可以通过仅提供信息内容,组织页面和HTML来构建一个好的站点。

翻译自: https://thenewcode.com/619/Web-Development-Technologies-Explained-The-Roles-Of-HTML-CSS-PHP-and-JavaScript

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值