【前端基础】初识HTML

Digital_Spring
78 阅读11分钟

前端基础--初识HTML

1.1 HTML5前端开发的前景与必要认知

1.1.1 发展历史

HTML5草案的前身名为Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。 HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。” 2013年5月6日， HTML5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。 本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。

支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

1.1.2 前景

HTML5前端开发在2023年的前景仍然十分广阔。随着移动设备和Web应用的普及，HTML5已经成为了构建现代Web应用的标准之一。

以下是一些2023年HTML5前端开发的趋势和前景：

  1. 移动优化：随着手机和平板电脑的普及，移动设备成为人们访问Web的主要方式之一。因此，移动优化的需求将对HTML5前端开发产生重要影响。在2023年，开发人员将更关注响应式设计、移动友好的界面和性能优化。

  2. AI和机器学习：AI和机器学习技术的发展将对HTML5前端开发产生重要影响。在2023年，前端开发人员将集中精力开发能够与AI系统和机器学习算法集成的应用程序。这些应用程序可能包括人工智能助手、智能搜索和个性化推荐系统。

  3. VR和AR：虚拟现实（VR）和增强现实（AR）技术的快速发展将对HTML5前端开发产生影响。在2023年，HTML5前端开发人员可能需要了解和开发适用于VR和AR应用程序的界面和功能。这些应用程序可能在游戏、教育、医疗和其他领域发挥重要作用。

  4. Web组件：Web组件是一种允许开发人员创建可重用的定制元素的HTML5标准。在2023年，前端开发人员可能会越来越多地使用Web组件来加速开发过程并提高代码的可维护性。这可能导致更多的开源组件库和工具的出现。

  5. PWA：渐进式Web应用程序（PWA）是一种结合了Web和原生应用程序优点的应用程序类型。2023年，PWA将更加流行，因为它们提供了更好的用户体验、离线访问能力和快速加载速度。HTML5前端开发人员将越来越多地为PWA开发应用程序。

总之，HTML5前端开发在2023年将继续发展和进步，其前景将取决于移动优化、AI和机器学习、VR和AR、Web组件和PWA等关键技术的发展和应用。

1.1.3认知

（1）认识HTML

​ 超文本标记语言（HyperText Markup Language，简称为HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

image-20230911220038130.png

百度网站首页的源代码

（2）认知HTML

​ 简单来说，HTML 5是对HTML标准的第五次修订，其主要的目标是将互联网语义化。

image-20230911221739749.png

图1-2 微信小程序“跳一跳”

狭义的HTML（Hypertext Markup Language）仍然是一种用于创建网页的标记语言。它由一系列标记（或称为标签）组成，这些标记用于定义网页的结构、内容和样式。

HTML标记使用尖括号（<和>）包围，并且通常以成对出现，具有一个开始标记和一个结束标记。例如，一个段落标记可以如下所示：

<p>这是一个段落。</p>

在2023年，广义的HTML可能已经演变为更加包容性的定义。除了传统的HTML标记之外，广义的HTML可能还包括其他标记语言、脚本语言和样式表语言的使用。这样的定义可能将HTML与其他技术和语言集成在一起，以满足不断增长的网页需求和用户体验的要求。

广义的HTML可能包括以下内容：

  1. CSS（Cascading Style Sheets）：用于定义网页的样式和布局。
  2. JavaScript：一种脚本语言，用于实现网页的交互功能和动态效果。
  3. XML（Extensible Markup Language）：一种用于描述数据的标记语言，可以与HTML一起使用，以更好地表示和组织数据。
  4. Web组件：用于创建可重用的网页元素和部件的技术。
  5. 响应式设计：用于创建适应不同设备和屏幕尺寸的网页的技术和方法。

1.1.4 认识网页的构成元素

  1. 网页

    网页是一个文件，存放到服务器的站点里面

  2. 网站

    网站是由很多网页组成的集合，而网站中是由各个网页是由超链接联系起来的

  3. 首页

    首页是由某个网站的入口网页，即打开网站后看到第一个页面，大多数作为首页的名称是index加上.html加上扩展名。

  4. 静态网页和动态网页

​ 静态网页和动态网页是根据网页内容的生成方式来区分的。

​ 静态网页是指网页内容是固定不变的，网页中的文本、图片、样式等都是事先编写好的，并且在用户访问时直接从服务器上发送给用户。静态网页通常使用HTML和CSS等前端技术来实现。

​ 动态网页是指网页内容是根据用户的请求或者其他条件来动态生成的，网页中的内容可以根据用户的输入、数据库的查询结果或者其他动态数据来实时更新。动态网页通常使用服务器端技术（如PHP、ASP、Java等）来处理用户请求，并将动态内容生成后发送给用户。

​ 静态网页的优点是加载速度快，简单易于维护，适用于内容不经常更新、交互性较低的网站。而动态网页的优点是内容可以实时更新，适用于交互性较强、内容经常变动的网站（如电子商务网站、社交媒体等）。

  1. 网页的构成元素

    （1）文本

    （2）图像

    （3）超链接

    （4）表单

    （5）动画

    （6）音频和视频

​

1.1.5 了解专业术语

  1. WWW

WWW是环球信息网的缩写，英文全称为“World Wide Web”，中文名字为“万维网”。

  1. Internet

Internet（互联网）是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

  1. W3C

W3C英文全称为World Wide Web Consortium（万维网联盟），它是Web技术领域最具权威和影响力的国际中立性技术标准机构。

  1. HTTP

    HTTP是Hypertext Transfer Protocol的缩写，即超文本传输协议。

  2. URL

    统一资源标识符（Uniform Resource Locator，URL），这是一个世界通用的负责给万维网上每个“资源”定位的系统。

  3. DNS

    DNS（Domain Name System，域名系统）。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析。

  4. JavaScript

    JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，它的解释器被称为JavaScript引擎。

  5. CSS

    CSS（Cascading Style Sheets，层叠样式表）是一种用来表现网页样式的语言，能够对网页中的对象的位置排版进行精确控制。

1.2 表现和结构相分离

​ 前端表现和结构的分离是指将网页的外观和布局与网页的代码结构分开。通过将样式和脚本从网页的HTML结构中分离出来，可以提高网页的可维护性和可重用性。

​ 通过使用CSS来定义网页的样式，可以实现页面的美观和一致的外观。通过将样式单独保存在CSS文件中，可以轻松地修改或替换样式，而不需要修改HTML代码。同时，通过使用类和ID选择器，可以在不影响HTML结构的情况下修改特定的元素样式。

​ 在前端开发中，还可以通过使用CSS框架，如Bootstrap或Foundation，来快速构建响应式和可重用的界面组件。

​ 另外，通过使用JavaScript来控制网页的行为和交互，可以实现动态效果和用户交互。通过将JavaScript代码分离到外部的脚本文件中，可以提高代码的可读性和重用性。

​ 总之，前端表现和结构的分离可以为网页开发带来很多好处，包括提高开发效率、提高可维护性和可重用性，以及实现更好的用户体验。

1.3 Web标准

image-20230913223208810.png

Web标准示意图

验证

访问W3C的验证地址（jigsaw.w3.org/css-validat…

image-20230913223403731.png

在线验证服务

image-20230913223610201.png

通过验证后显示

1.4 Web前端开发流程

  1. 需求分析：明确项目的需求和目标，确定网站或应用的功能和特点，以及用户的使用方式和需求。

  2. 设计阶段：设计网页的外观和布局，包括页面的结构、颜色、字体、图标等，同时要考虑用户体验和交互性。

  3. 前端编码：根据设计稿和需求分析开始编写前端代码，包括HTML、CSS和JavaScript等技术的运用，以及相关的框架和库的使用。

  4. 调试与测试：在编码过程中进行调试，确保网页在各种浏览器和设备上都能正常显示和运行，同时进行功能测试和性能优化。

  5. 后期维护：对网站或应用进行定期维护和更新，修复Bug和添加新的功能，同时进行安全性和稳定性的检查和改进。

以上是一个基本的前端开发流程，具体的流程可能会因项目的规模和复杂度而有所不同。同时，合理的项目管理和团队协作也是保证开发流程顺利进行的重要因素。

1.5 常见的开发使用软件介绍

  1. 记事本

  2. Visual Studio Code

    下载地址：visualstudio.microsoft.com/zh-hans/fre…

  3. HBuilderX

    下载地址：dcloud.io/

  4. WebStorm

    官方下载地址：www.jetbrains.com/webstorm/ 收费的，但是可以申请教育免费

  5. Google chrome

    下载地址：Google Chrome 網路瀏覽器

image.png

Goole浏览器的调试模式

1.6 W3C组织机构解析

（1）W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。 W3C (制定了结构(xhtml、xml)和表现(css)的标准，非赢利性的。) （2）ECMA(European Computer ManufacturesAssociation) 欧洲电脑场商联合会。 ECMA制定了行为(DOM(文档对象模型)，ECMAScript)标准 （3）WHATWG网页超文本应用技术工作小组是： 一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

1.7 第一个HTML文件

<!doctype html> 
<!--声明文档类型是html超文本标记语言的-->
<html>
<!--html 也叫根元素-->
<head>
<meta charset="utf-8">
<!--设置编码格式国际编码-->
    <link rel="icon" href="https://www.a1l.xyz/img/yjtp.png">
<!--网站标题小图标-->
<title>HTML基础-第一阶段学习</title>
<!--网页标题-->
</head>

<body>
<!--页面主体-->
    <h1>hello word!</h1>
</body>
</html>
avatar
文章
阅读
粉丝