《响应式Web图形设计》一1.1 为什么要学习HTML?

简介:

本节书摘来异步社区《响应式Web图形设计》一书中的第1章,第1.1节,作者: 【美】Christopher Schmitt 译者: 曾斌 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.1 为什么要学习HTML?

响应式Web图形设计
作为一种最完善的体系,HTML可以让人们以更快、更有效的方式在全世界范围内交换信息。

1.1.1 HTML使得因特网更受欢迎

虽然因特网使得计算机能够通过网络相互连接,但是通过命令行或者基本的程序(如Gopher,见图1.1,或Archie)来上网的体验是不连续的。Web浏览器改变了这一切。


1

万维网基于HTML创建的页面和链接,使得Internet用户能够更容易地对内容进行操作。随着图像在浏览器中广泛使用,以及基础文本格式的普及,这种快速、令人沉浸的内容发布与共享,向更多的人敞开了大门。

手工编写完整网站

一些人认为,手工编程的时代已经一去不复返了。多亏了像WordPress、Drupal和ExpressionEngine这样内容管理程序包,你才可以创建一些网站,并在这些网站中自由地制作导航菜单或组织日志。把这些可重用的组件拼成一个网站是很简单的,但是创建一个博客网站并不是简单地装配好各个部分就可以了,因为每个人的需求和目标都是独一无二的。所以理解HTML可以帮助你更好地实现目标。

1.1.2 学习HTML,更好地理解网页设计

学习HTML的基础知识可以帮助你成为一个更出色的网页设计师,更快地将设想中的网页实现出来;即便不能,它也能让你知道为什么以及如何使用它。将某些编程语言和HTML结合使用,就能为网站创造更多的亮点。

1.1.3 学习HTML很容易

许多设计师通过自学HTML来让自己更加全面和专业。随着行业持续不断的发展,甚至连一些经验丰富的网站设计师也能通过别人了解到HTML更多的潜能。

和查看桌面程序和手机应用程序的代码相比,查看网页的代码非常简单。代码的透明使得学习HTML和网页设计的其他相关细节变得很容易。为了揭示HTML在网页中是如何运用的,你可以在浏览器中选择“查看源代码”之类的命令(通常可以在“文件”或“查看”菜单中找到),这样就能够准确地看到代码是什么样的(见图1.2~图1.5)。通过这种方法,很多初学者和专业人员都可以复制例子中的代码——我不会反对这种做法,反而要鼓励!


2_3
4_5

程序与标记 程序通过一些信息告诉软件去做一些事情,而HTML则可以被视为一种编程语言。然而,用计算机编程语言(如Java、C++、Python和无数其他编程语言)在处理更复杂的任务时,需要用到比HTML更多的专业技能和软件。因此,虽然HTML被称为一门语言,但是,它并不像别的编程语言那样令人却步。

分享你所学到的

在网页设计和开发行业中,许多方面的成果都是公开的。通过博客帖子、博客评论,以及GitHub、Dribbble或其他一些网站上的代码,可以与其他人一起分享你学到的东西。我们的行业以闪电般的速度前进着,而帮助别人就等于帮助自己。

!从模仿到掌握,不要停止

照搬喜欢的示例代码是一种很好的学习方式。需要注意的是,不要盲目地复制和粘贴代码和图像,并认为其是自己的。你不可以照搬从网站上找到的网页,并把它作为自己的作业交给老师——网页设计也一样(任何行业都是这样)。

网站词典

为了更透彻地理解这本书内容,你需要知道以下术语和关于网页设计的知识。

互联网包含了数以百万计的网站,每个网站都有一个唯一的网站地址,被- 称为资源定位符或URL(例如,http://www.google.com)。

  • 每个网站都包含许多相关内容的页面。
  • 网站中的每个页面都能通过桌面电脑或移动设备(如智能手机或平板电- - 脑)的Web浏览器来浏览(如Chrome、Internet Explorer、Firefox、Safari和Opera)。

网站访客从一个页面跳转到另一个网站的链接,也被称为超链接。

相关文章
|
6天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
30天前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox的力量
【2月更文挑战第25天】 在现代网页设计中,创建能够适应不同屏幕尺寸的布局是至关重要的。Flexbox,一种CSS布局模式,提供了强大的工具来轻松地设计和调整灵活的响应式界面。本文将深入探讨Flexbox的核心概念,并通过实例展示如何使用它来构建美观、灵活且易于维护的响应式Web界面。
|
21小时前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
5 1
|
23小时前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
12天前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox与Grid布局的深度对比
【4月更文挑战第4天】 在现代前端开发中,构建灵活且响应式的用户界面是至关重要的。随着移动设备浏览量的增加,能够适应不同屏幕尺寸和分辨率的布局技术变得必不可少。Flexbox和Grid是CSS提供的两种强大的布局机制,它们各自以独特的方式解决了响应式设计的挑战。本文将深入探讨Flexbox和Grid的核心概念、使用场景和性能考量,为开发者提供在面对不同布局需求时做出明智选择的依据。
|
18天前
|
移动开发 监控 数据可视化
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
组态软件之万维组态、web组态、html组态、vue2/vue3组态,组态在工业自动化领域越来越重要,但由于市面上组态软件费用昂贵、集成复杂,使用技术门槛高,万维组态就应运而生;万维组态是一款功能强大的基于Web的可视化组态编辑器,采用标准HTML5技术,使用Vue2和Vue3语言,基于B/S架构进行开发,支持WEB端显示;支持快速集成,集成简单方便;支持在浏览器端完成便捷的人机交互,简单的拖拽即可完成可视化页面的设计;可快速构建和部署可扩展的SCADA、HMI、仪表板或LoT系统;
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
|
24天前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
29 3
Web前端全栈HTML5通向大神之路
|
27天前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox与Grid布局的深度解析
【2月更文挑战第28天】 在现代前端开发中,打造灵活且适应不同屏幕尺寸的用户界面是至关重要的。随着移动设备的普及,响应式设计已经成为网页制作不可或缺的一部分。本文将深入探讨两种强大的CSS布局模块——Flexbox和Grid,它们如何简化布局创建过程,并赋予设计师更大的灵活性去构建动态和流畅的响应式界面。通过对这两种技术的比较、使用场景分析以及代码示例,读者将能够更好地理解何时以及如何使用这些工具来提升前端项目的质量和效率。
14 0
|
27天前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
开发框架 Dart 前端开发
构建响应式Web界面:Flutter的跨界前端技术
【2月更文挑战第23天】随着移动互联网的飞速发展,响应式Web设计成为现代前端开发的重要趋势。在众多框架中,Google推出的Flutter以其高效的渲染性能、跨平台能力及丰富的组件生态,为前端开发者带来了新的选择。本文将深入探讨如何利用Flutter进行高效、美观的响应式界面构建,同时剖析其与传统前端技术的差异和优势。