Alarm's Blog

简易博客，记录学习

0%

静态网页部署

发表于 分类于 ， 阅读次数： 评论： 本文字数： 2.4k 阅读时长 ≈ 2 分钟

一、初识HTML

1.简单介绍

HTML（超文本标记语言）根据我的理解，就是用特定的语言规则描述一个页面，包括图形，色彩，文字等。

它是网页前端的主要构成，浏览器就是根据HTML文件的描述，将网页内容一一渲染出来。

一般只有HTML前端的网页被称为静态网页。

补充一点，电子邮件也是采用HTML格式进行发送和渲染。

2.HTML简单示例

HTML通过标签区分不同的内容，以下列举一些简单的标签及其使用。（本人也是新手，就用AI代写了）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>       <!-- 说明文件类型 -->
<html lang="zh-CN"> <!-- 总标签附上语言 -->
<head>                       <!-- head标签，说明一些基本内容，网页标题字符编码 -->
    <meta charset="UTF-8">
    <title>HTML基础标签大全</title>
</head>
<body>                       <!-- 网页主体部分 -->

    <!-- 标题 -->
    <h1>HTML基础标签演示</h1>
    <h2>1. 标题标签</h2>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <hr>     <!-- 分割线 -->   

    <!-- 段落和文本 -->
    <h2>2. 段落和文本格式</h2>
    <p>这是一个普通段落。</p>
    <p>这是另一个段落，包含
<b>加粗文本</b>、
<strong>重要文本</strong>、<i>斜体文本</i>
和<em>强调文本</em>。</p>
    <p>换行<br>在这里
<br>使用了换行标签。</p>

    <hr>

    <!-- 积木盒子 -->
    <div style='background-color : rgba(25,25,25,0.6);'>
    <p>你好,这是一个灰色的盒子</p>
    </div>    
    
    <hr>

    <!-- 链接和图片 -->
    <h2>3. 链接和图片</h2>
    <p>访问<a href="https://alarmandcxz.dpdns.org" target="_blank">
示例网站</a></p>
    <p><img src="
https://i.imgs.ovh/2025/04/29/r7TrM.png" 
alt="示例图片" width="1920" height="1080"></p>
</body>
</html>

如何预览：复制代码到记事本，默认保存为TXT文本文件，手动改文件.txt后缀名为.html。

打开HTML文件（默认打开应用为浏览器），即可在浏览器中预览。

由于HTML本质就是纯文本，故可以直接改后缀名，作用是让系统知道他是HTML以调用浏览器打开并渲染文件。

相信你已经发现了标签通常是一对的，即<标签名></标签名>，而文本内容被包含在其中间。

此外标签还可以添加一些额外的样式属性，如大小，颜色等。具体方式为在一对标签的第一个标签<>内标签名后空一个添加style="",class=""等。

1
2
<p style="font-size: 16px;">这是16像素大小的文字</p>
<p style="font-size: 6px;">这是6像素大小的文字</p>

3.HTML,CSS和JavaScrip

到这里就差不多超出我的知识范围了，这里有很多具体复杂的东西。大家可以查找其他资料深入学习。

简单说

  • HTML是主体
  • CSS是赋予标签的样式（排列，大小，色彩，形状等）
  • JavaScrip则是动态交互

二、部署HTML至网络

有很多免费的静态网页托管服务,例如：

  1. Github pages
  2. CloudFlare的workers and pages