静态网页设计实践（HTML+CSS）

本文记录了以葫芦娃动画片为主题的静态网页设计实践，基于HTML和CSS前端语言设计编码。

doll ～CJ

1988人浏览 · 2024-01-10 16:08:45

doll ～CJ · 2024-01-10 16:08:45 发布

一、前端程序员必会三大编程语言

（一）HTML（.html/.htm）

超文本标记语言（HyperText Markup Language，简称:HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页，HTML描述了一个网站的结构语义，其是一种标记语言而非编程语言[1]。

HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等，也可用来在一定程度上描述文档的外观和语义。HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素[1]。

HTML学习资源详见参考资料[2][3][11]。

（二）CSS（.css）

层叠样式表（Cascading Style Sheets，简称：CSS）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护[4]。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力[4]。

CSS学习资源详见参考资料[5][6][12]。

（三）JavaScript

JavaScript（缩写：JS）是一门基于原型和头等函数的多范式高级解释型编程语言，它支持面向对象程序设计、指令式编程和函数式编程。它提供方法来操控文本、数组、日期以及正则表达式等。不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它由Ecma通过ECMAScript实现语言的标准化。目前，它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari和Opera）所支持[3]。

JavaScript在语法结构上和C语言很相似。对于客户端来说，JavaScript通常被实现为一门解释型语言，但如今它已经可以被即时编译（JIT）。随着HTML5和CSS3语言标准的推行，它还可以用于游戏、桌面和移动应用程序的开发，以及在服务器端网络环境运行（如Node.js）[7]。

JavaScript学习资源详见参考资料[8][9]。

二、HTML引入CSS样式的三种方法[12][17]

（一）内联式

CSS样式直接放在代码行内的标签中，一般都是放入标签的style属性中。该方式直接内嵌入具体标签中，大范围修改较为不便。具体例程可见参考资料[17]。

（二）内嵌式

CSS样式放置于网页源文件（HTML文件）的头部，即在<head>和</head>之间，通过使用HTML标签中的<style></style>标签将其包围。该方法解决了内联式多次编写的弊端，但该样式只能在此网页使用。具体例程可见参考资料[17]。

（三）链接式

链接式通过 HTML 的 <link> 标签，将外部样式表文件链接到 HTML 文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。具体例程可见参考资料[17]。