Web前端开发概述

最新推荐文章于 2024-09-06 19:40:02 发布

糯米小辣条

最新推荐文章于 2024-09-06 19:40:02 发布

阅读量1.6k

点赞数 2

分类专栏： Web practice of Educoder

本文链接：https://blog.csdn.net/m0_47174730/article/details/110290537

版权

Web practice of Educoder 专栏收录该内容

38 篇文章 65 订阅

订阅专栏

第一关：Web前端开发相关的概念
Web系统的组成
Web是Internet上最受欢迎的一种多媒体信息服务系统。
整个系统由Web服务器、浏览器和通信协议组成。
Web开发
Web开发就是设计实现Web系统的过程。主要包括浏览器端页面的制作和服务器端程序的编写。
 浏览器端称作Web前端；
 服务器器端称作Web后端。
浏览器
浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。
常见的浏览器有：Firefox、Internet Explorer、Safari、Opera、Google Chrome、QQ浏览器、百度浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等
不是所有的浏览器都支持HTML5，同一浏览器不同的版本对HTML5的支持情况也不同。
URL
URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符”,是互联网上标准资源的地址。互联网上的每一个文件都有唯一的URL。
基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名。完整的、带有授权部分的普通统一资源标志符语法格式如下：
协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志
WWW
WWW（英文World Wide Web的缩写）中文译为“万维网”，是Intertnet提供的一种网页浏览服务，常简称Web。
http
HTTP (英文Hypertext transfer protocol的缩写) 中文译为超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
网站
是指在因特网上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。用户可以通过浏览器来访问网站，获取需要的资讯或者享受网络服务。
Web标准
Web标准是由W3C和其他标准化组织制定的一系列标准的集合。该标准用来创建和解释基于 Web 的内容，其网页部分的标准通过三部分来描述：结构、表现和行为。
参考答案：
在这里插入图片描述

第二关： Web前端开发相关的技术
本关任务：创建第一个网页。
相关知识
为了完成本关任务，你需要掌握：1.Web前端开发相关技术，2.Web前端开发工具。
基本应用技术
HTML
HTML是Internet上用于设计网页的基础语言。它是一种标记语言，用于对网页中的文本、图片、声音等内容进行描述，告诉浏览器以什么方式或结构显示网页内容。
CSS
CSS称作层叠样式表，“层叠”是指当在HTML中引用了多个样式文件，且当样式发生冲突时，浏览器能依据层叠顺序处理。CSS弥补了HTML对网页格式化方面的不足，不仅为网页元素提供了更为丰富显示效果，还可以实现网页布局和排版定位的作用。
JavaScript
JavaScript是一种脚本语言，它和HTML结合，使得用户与网页元素之间不只是浏览与显示的关系，而是实现了一种实时、动态、交互的页面功能。
Web前端开发工具
HTML是一种标签语言，标签语言代码是以文本形式存在的。因此，所有的记事本工具都可以作为它的开发环境。HTML文件的扩展名为.html或.htm。将编写好的文件另存为.html或.htm文件，就可以在浏览器中预览效果了。
NotePad
Notepad指代码编辑器或Windows中的“记事本”程序。是一种开源、小巧、免费的纯文本编辑器，建议初学者使用，以增加代码编写体验，增强对代码的理解和记忆。
TextPad
Textpad是一个强大的替代Notepad的文本编辑器，编辑文件的大小只受虚拟内存大小的限制。支持Unicode编码，可以编译、运行简单的Java程序。
Dreamweaver
Dreamweaver是美国Adobe公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
HTML文档结构
完整的HTML文件包括头部和主体两大部分。代码示例如下：
在这里插入图片描述

HTML文档结构
其中：
文档类型说明：<!DOCTYPE html>
文档的开始和结束标签：

<html>
......
</html>
文档头部的开始和结束标签：
<head>
......
</head>
文档主体的开始和结束标签：
<body>
......
</body>
网页标题的开始和结束标签：
<title>
......
</title>
一级子标题的开始和结束标签：
<h1>
......
</h1>

对齐属性：align属性用于设定标题的对齐方式，其取值可以为left、center、right、justify。
编程要求
仿照上面的示例，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.在<head></head>之间添加网页标题的设置，标题文字为“我的第一个网页”；
2.在<body></body>之间添加一级子标题的设置，子标题文字为“初识HTML”，在<h1>标签的align属性取值设置为左对齐。这里插入代码片
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。

参考代码：

<!DOCTYPE html>
<html>
<!-- ********* Begin ********* -->
 <head>
  <meta charset="utf-8"/>
  <title>我的第一个网页</title>
 </head>
 <body>
  <h1 align="left">初识HTML</h1>
 </body> 
<!-- ********* End ********* -->
</html>