前端静态网页是网站开发中的一种基本形式,它是指那些内容在服务器端生成后不再变动、用户访问时直接返回固定HTML文件的网页。静态网页的特点和开发主要包括以下方面:

1. **内容不变性**:

静态网页的内容在被创建之后即固定下来,不会随着用户的操作或不同时间点而改变。这意味着每个用户看到的内容都是相同的,且不依赖于数据库查询或其他动态数据源。

2. **技术栈**:

– **HTML (HyperText Markup Language)**:

用于构建网页结构和内容,定义文档的各个部分如标题、段落、链接、图像等。

– **CSS (Cascading Style Sheets)**:

负责网页的样式设计,包括颜色、字体、布局、响应式设计等方面,使网页具有良好的视觉表现和用户体验。

– **JavaScript**

(可选):虽然静态网页的主要内容不变化,但仍然可以使用JavaScript来实现客户端交互效果,比如表单验证、图片轮播、简单动画等。

3. **制作流程**:

– 设计阶段:

通常会根据UI设计师提供的设计稿(例如PSD文件)进行布局规划。

– 切图与资源准备:

将设计稿切割成需要的图片资源,并优化尺寸和格式。

– 编码阶段:

使用HTML编写页面结构,CSS控制页面样式,如有必要,使用JavaScript增强交互功能。
– 测试与发布:

完成编码后,通过浏览器测试页面在不同设备和屏幕尺寸下的显示效果,并上传至服务器供用户访问。

4. **优点**:

– 加载速度快:

因为无需服务器端处理,可以直接从服务器读取并发送给客户端,加载速度相比动态网页更快。

– 服务器负载低:

不需要运行复杂的脚本或者数据库查询,对服务器性能要求较低。

– 安全性相对较高:

不存在动态网页常见的SQL注入、跨站脚本攻击等问题。

5. **缺点**:

– 内容更新繁琐:

每次内容修改都需要重新编辑HTML文件并上传到服务器。

– 不适合大型站点或频繁更新内容的场景:

静态网页的技术

对于博客、新闻类网站等需要实时更新信息的场景,静态网页的维护成本高。

总的来说,静态网页在简单的个人主页、展示型网站以及一些对SEO友好度要求高的场合较为常用。随着现代Web技术的发展,虽然动态网页应用更为广泛,但静态网页仍有着其不可替代的应用场景,尤其是结合静态站点生成器(SSG)可以生成预渲染的静态页面,既能保持加载速度优势,又能实现一定的动态特性。

静态网页(Static Web Page)是由HTML、CSS和JavaScript等技术编写的网页,这些页面的特点是内容固定不变,用户访问时服务器直接返回预设的文件,不涉及服务器端的数据处理或动态生成内容。

1. **HTML (HyperText Markup Language)**:

HTML是构成网页的基础标记语言,它定义了网页的结构和内容。HTML文档包含了文本、图像、链接、表格等各种元素,并通过标签(tags)来描述各个部分的功能和关系。

2. **CSS (Cascading Style Sheets)**:

CSS负责网页的样式设计,如字体、颜色、布局等视觉表现形式。通过CSS可以将网页的内容与样式分离,提高代码可读性和维护性。开发者可以通过CSS为HTML元素指定样式规则,使得网页具有统一且美观的外观。

3. **JavaScript**:

虽然静态网页本身不包含动态数据交互,但现代静态网页往往也会使用JavaScript进行客户端交互增强。JavaScript是一种脚本语言,可以在浏览器中运行,实现页面加载后的行为响应、表单验证、UI动态效果等功能。

4. **其他辅助技术**:

– 图像(Images):包括JPEG、PNG、SVG等格式的图片资源。
– 字体(Web Fonts):例如通过`@font-face`引入自定义网络字体。
– favicon.ico:网站图标,显示在浏览器标签页上。
– 等等

总结来说,一个静态网页主要由HTML编写结构和内容,CSS控制样式,JavaScript(可选)添加交互性功能。用户每次请求时获取到的是预先制作好的相同内容,而不是根据用户的特定操作或者服务器状态动态生成的结果。随着前端框架的发展,如今也有越来越多基于JavaScript的静态站点生成器(SSG, Static Site Generator),它们可以从Markdown或其他源文件生成静态HTML网页,这些网页同样可以具有复杂的布局和交互特性,但在部署时已经是预渲染好的静态文件。

接下来,我们详细的介绍一下HTML标签

⚠️:HTML的文档的后缀名是html

1.标题标签

HTML中的标题标签用于定义文档的各级标题,共有六级,从

,其中

是最重要的(最大的)标题,而

是最不重要的(最小的)标题。这些标题标签不仅影响视觉呈现,还对网页内容结构和SEO(搜索引擎优化)有着重要作用。

示例:

页面标题

这是最重要的标题 - 主页标题

这是次要标题 - 章节标题

三级标题

四级标题

五级标题
六级标题 - 最小的标题

通常建议每个页面只使用一个

标签来表示页面的主要主题或标题,并根据需要合理使用其他级别标题以组织内容层次结构。搜索引擎爬虫会利用这些标题来理解网页的内容结构,因此合理的标题设置有助于提高网站的搜索排名。

2.段落标签

标签在HTML(HyperText Markup Language)中代表段落元素,它用于定义文档中的文本段落。当浏览器解析HTML文档时,遇到

标签会为其中的文本内容创建一个新的视觉段落。

使用示例:

这是一个段落。在这里可以输入任何想要展示给用户的一段文字内容。

特性与作用:

  1. 默认样式:在没有CSS(Cascading Style Sheets)的情况下,浏览器会给

    标签内的文本应用一个标准的段落间距和行距,使其在视觉上与其他段落区分。

  2. 结构化内容

    标签有助于网页内容的语义化和结构化,使开发者能够清晰地划分不同文本块,同时也有利于搜索引擎理解和抓取网页内容。

  3. 内联元素限制

    标签是一个块级元素(block-level element),它不能直接包含其他块级元素,但可以包含多个内联元素(inline elements),如等。

  4. 换行规则:每个

    标签都表示一个新的段落,因此浏览器会在相邻两个

    标签之间自动插入一个换行符。

  5. 可样式化:通过CSS,开发者可以对

    标签应用各种样式,包括但不限于字体大小、颜色、背景色、边距、填充等属性,以满足页面设计的需求。

正确且合理地使用

标签可以帮助构建具有良好可读性和易维护性的网页内容结构。

3.链接标签

HTML中的标签(Anchor)用于创建超链接,它允许用户点击后跳转到另一个网页、同一页面内的锚点或其他资源,如电子邮件地址、文件下载等。以下是标签的基本用法和属性:

可点击的文本或图像内容

href属性:这是必需的属性,定义了链接的目标地址。它可以是一个完整的URL,也可以是同一个页面内的锚点(通过在href中指定锚点ID实现)。

访问示例网站跳转至第1节...这里是第1节的内容
  • target属性:可选,决定链接在何处打开。

    • _self(默认):在同一窗口或标签页中打开链接。
    • _blank:在新窗口或标签页中打开链接。
    • _parent:在当前框架集的父框架集中打开链接。
    • _top:在整个浏览器窗口中打开链接,取消所有包含该链接的框架。
  • rel属性:提供与目标链接之间的关系信息,例如noopener noreferrer可以防止新窗口覆盖当前窗口的导航历史记录,并阻止恶意脚本获取对原始窗口的引用。

  • download属性:如果设置此属性,则表示链接指向的资源应该被下载而不是显示在浏览器中。

  • 其他可能的属性

    • title:为链接添加提示文本,在鼠标悬停时显示。
    • classid:用于CSS样式选择器或JavaScript操作。
    • style:直接在元素上应用内联样式。

举例说明一个完整且常见的标签实例:

访问示例网站

HTML锚点(Anchor)允许在同一页面内部进行跳转,通过给目标元素设置ID属性,并在链接中使用该ID作为href值的片段标识符。以下是一个HTML锚点示例:

锚点示例/* 仅为演示效果,设置每个section的高度和滚动条 */section {height: 400px;overflow-y: auto;border: 1px solid #ccc;padding: 20px;}

页面内容导航

  • 跳转到第1节
  • 跳转到第2节
  • 跳转到第3节

第1节标题

这里是第1节的内容,可能很长...

第2节标题

这里是第2节的内容,也可能很长...

第3节标题

这里是第3节的内容,同样可能很长...

在这个示例中,当用户点击导航列表中的一个链接时,浏览器会滚动到具有对应ID属性的

元素位置。

4.


标签

在 HTML 页面中创建水平线。

这是一个段落。


这是一个段落。


这是一个段落。

5.
标签

是HTML(HyperText Markup Language)中的一个单标签元素,全称为“line break”,即换行符。它的主要功能是在网页中插入一个软换行,使得文本内容在显示时能在指定位置进行换行。

使用示例:

这是第一行文本内容
这是第二行文本内容

在这个例子中,当浏览器解析并渲染这段HTML代码时,”这是第一行文本内容”与”这是第二行文本内容”之间会有一个换行,它们分别位于两行独立的行上展示。

注意,
标签是一个自闭合标签,不需要成对出现,直接写入即可。它通常用于文本内容中需要手动换行但又不属于新段落的情况,比如地址、诗歌、邮箱签名等。而在HTML中创建新段落则应使用

标签。

6.b标签和i标签

``和``是HTML中用于文本样式的标签,但它们在不同的HTML版本中有不同的语义含义:

1. ``标签:

– 在早期的HTML(如HTML4)中,``标签(bold)主要用来表示文本加粗样式,不承载特殊的语义意义,纯粹是为了视觉上的强调。
– 到了HTML5,``标签被重新定义为一种“本义强调”(stylistic emphasis),它用来表示文本中的某个部分需要在语气或表现上有所突出,而不一定是重要的内容。例如,它可以用来标记产品名称、品牌名或者用户搜索关键词等。

2. ``标签:

– 在HTML4及以前,``标签(italic)主要用于呈现斜体文本,同样没有明确的语义信息,通常用于引文、外来词、技术术语或生物学名等的排版。
– 在HTML5规范中,``标签被赋予了新的语义,即表示一个不同于普通文本的语音或样式变异,可以用来表示外语短语、专业术语、变量名、想象内容、诗歌引用等内容,或者是具有特殊语境下的文字。

尽管如此,在现代网页设计与开发中,为了更好的语义化和无障碍访问支持,推荐使用更具有语义化的标签来替代 `` 和 `` 标签:
– 若要强调重要性,请使用 `` 标签代替 ``。
– 若要表示语气上的强调或着重,请使用 `` 标签代替 ``。

同时,根据实际应用场景,可能还有其他更适合的语义标签,例如 `` 用于引用作品标题,`` 用于定义术语等。

运行结果是:

7. `` 标签:

- `` 是HTML中用于表示计算机代码片段或编程语法的标签。它将文本内容以等宽字体显示,通常为单色、无衬线字体,这样有助于区分普通文本与代码样式的文本。

示例:

8.`` 和 `` 标签:

- ``(Subscript):此标签用于创建下标文本,即位于当前行文字底部的小号字符,常用于化学式、数学公式和脚注等场景。

- ``(Superscript):此标签用于创建上标文本,即位于当前行文字顶部的小号字符,常见于指数、平方根符号、引用文献编号等。

这两个标签都是行内元素,并且它们的内容通常比周围文本小一些,位置根据标签类型分别位于文本的上部或下部。

示例:

通常标签 替换加粗标签 来使用, 替换 标签使用。

然而,这些标签的含义是不同的:

定义粗体或斜体文本。

或者 意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过,未来浏览器可能会支持更好的渲染效果。

接下来,介绍一下字体标签

9.img标签

`

各个属性说明:

- **src** (必需):指定了图片文件的URL或路径。例如,`src="images/picture.jpg"` 就表示图片源位于当前目录下的“images”子目录中的“picture.jpg”文件。

- **alt** (推荐使用):提供了图像的替代文本描述,当图像无法加载或用户禁用了图片显示时,浏览器会显示这个文本内容。此外,这对于辅助技术(如屏幕阅读器)和SEO优化也是至关重要的。

- **width** 和 **height** (可选):分别定义了图片的宽度和高度,单位通常是像素。设置这些属性可以帮助浏览器预先预留出正确的位置来放置图片,并且可以提高页面加载速度,因为浏览器可以在图片加载前就开始渲染布局。

其他可能用到的属性还包括:

- **title**:为图片提供额外的提示信息,鼠标悬停在图片上时通常会显示。
- **loading** (HTML5 新特性):控制图片的加载策略,例如 `loading="lazy"` 表示延迟加载,只有当图片即将进入视口时才开始加载。

需要注意的是,为了保证网页内容的可访问性和搜索引擎友好性,应当始终为 `` 标签提供有意义的 `alt` 属性值。

10.HTML表格

HTML表格由一系列标签构成,主要用于在网页上展示和组织结构化的数据。以下是一些关键的HTML表格标签及其功能:

  1. 标签:定义整个表格,是所有表格内容的容器。

标签:用于定义表格的头部(表头行),通常包含列标题。

列标题1列标题2

标签:用于定义表格的主体部分,包含了表格的主要数据行

单元格数据1单元格数据2

标签:用于定义表格的页脚部分,通常包含总结或计算结果等信息。

总计计算结果
  1. 标签:定义表格中的行(Row)。

  2. 标签:定义表格中的表头单元格,通常具有粗体和居中对齐的效果,用于显示列标题。

  3. 标签:定义表格中的标准单元格(Data Cell),用来存放表格的具体数据。

  4. 边框属性:border属性可以设置表格边框的宽度,默认情况下HTML表格没有边框,需要通过CSS样式来添加边框样式。

  5. 合并单元格:

    • colspan属性允许一个单元格跨越多个列。
    • rowspan属性允许一个单元格跨越多个行。

例如:

姓名年龄城市
张三25北京
李四30 上海
王五广州
总人数 3人

以上是一个基本的HTML表格结构示例,实际上还可以结合CSS进行复杂的样式定制和交互处理。

12.HTML 列表标签

HTML 中有三种主要类型的列表标签,它们分别是无序列表(Unordered Lists)、有序列表(Ordered Lists)和定义列表(Definition Lists)。每种列表类型都有其特定的用途和结构。

1. **无序列表 (Unordered Lists)**:
使用 `

    ` 标签创建一个无序列表,其中的每个列表项由 `

  • `(list item)标签表示。浏览器通常会为无序列表项显示点状、圆点或实心方块等项目符号。

     
    • 列表项 1
    • 列表项 2
    • 列表项 3

    2. **有序列表 (Ordered Lists)**:
    使用 `

      ` 标签创建一个有序列表,同样使用 `

    1. ` 标签定义列表项,但浏览器会自动为每个列表项添加一个编号(默认从1开始递增)。

       
      1. 第一项
      2. 第二项
      3. 第三项

      3. **定义列表 (Definition Lists)**:
      定义列表用于展示术语及其定义,它包含两个部分:术语(术语名)和描述(术语解释)。术语用 `

      `(definition term)标签定义,描述则用 `

      `(definition description)标签定义。

       
      术语 1
      这是术语 1 的详细描述。
      术语 2
      这是术语 2 的详细描述。

      这些列表标签在网页中常用于组织内容、展示项目清单、步骤说明、术语解释等多种场景。

      以上介绍了常用的大部分标签,剩下的标签我在下一篇介绍链接:

      点击跳转

      感谢支持,请各位美女点赞