论HTML

柒梅久久

2025-09-10 21:03:03

发布于：浙江

4阅读

0回复

0点赞

网页，大家都不陌生，但网页所用到的编程语言不是C++，不是Python，而是HTML。

要创建一个网页，就得准备好一个电脑（废话），键盘和鼠标（~~依旧废话~~），以及一个文本文档。（有VScode的把VScode准备一下，方便修改）

右键桌面，选择“新建”，在右侧弹框中选择 文本文档。
有些电脑不显示后缀名（即像 *.txt *.bat 之类的），选择此电脑中的查看，勾上 文件扩展名。

接下来开始上正课。

<!--第一步：文档声明-->

<!DOCTYPE HTML>
<!--在html5，这里可以不大写 -->
<!-- 位于文件最开头，声明当前 HTML 文档遵循的规范，告诉浏览器如何解析页面。 -->

<!-- 第二步：根元素-->
<html lang="zh-CH">
<!--
整个 HTML 文档的根容器，所有其他元素都嵌套在其中。
通常包含 lang 属性指定页面主要语言，如 <html lang="zh-CN">。
-->

<!--第三步：头部-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标准 HTML 结构</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 内部样式 */
    </style>
    <script src="script.js"></script>
</head>

<!--
这里就开始上强度了。
<meta>：定义字符编码（如 <meta charset="UTF-8">）、视口设置（适配移动端）等
<title>：设置网页标题（显示在浏览器标签栏）
<link>：引用外部资源（如 CSS 样式表、图标）
<style>：嵌入内部 CSS 样式
<script>：嵌入或引用 JavaScript 脚本
这里可能还有人不知道CSS是什么意思

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML
（或 XML 等标记语言）文档呈现样式的语言。它主要负责控制网页的布
局、颜色、字体、间距等视觉表现，实现了内容（HTML）与样式（CSS）
的分离，让网页设计更灵活、维护更高效。
-->

<!--第四步：主体-->
<!--这里才是真正的重中之重-->
<body>
    <h1>页面标题</h1>
    <p>这是可见内容</p>
</body>
<!--
h1是一级标题，相当于 Markdown 中的 # ，对应的，有h1,h2,h3,h4,h5,h6。
<p>标签就是显示内容，最为基础。
body中的大部分标签都有结束标签
例如<p>标签，写时就要写成：
-->
<p>显示的内容</p>
<!--
对于初学者而言，常用标签分7类：
一、文本类标签（展示文字内容）
1. <h1>-<h6>，1至6级标题，权重递减，一个网页建议只用一个<h1>，对SEO友好。
2. <p>，显示文本内容，会自动换行。
3. <br>，强制换行，没有结束标签，即不存在</br>
4. <hr>，水平分割线，单标签，即不存在</hr>，用于分割不同内容板块，显示一条
水平线。
5. <strong>，强调、加粗文本
6. <em>，强调文本（斜体）
7.<span>，行内文本容器，无默认样式，主要用于 “包裹部分行内文本”（如单独修改
某几个字的颜色、大小）。
-->
<body>
    <h1>欢迎来到我的个人博客</h1>
    <hr>

    <h2>关于我</h2>
    <p>大家好！我是一名<span style="color: #2c3e50; font-weight: bold;">前端开发爱好者</span>，热衷于学习HTML、CSS和JavaScript等网页技术。</p>
    <p>我喜欢分享技术心得，记录学习过程中的收获与思考。<br>希望通过这个博客与更多志同道合的朋友交流！</p>

    <h2>我的文章</h2>
    <h3>HTML基础学习笔记</h3>
    <p>HTML是构建网页的基础，掌握好语义化标签非常重要。<br>
    例如&lt;h1&gt;-&lt;h6&gt;用于标题层级，&lt;p&gt;用于段落文本，这些标签能让页面结构更清晰。</p>
    <p><strong>重点提示：</strong>语义化标签不仅有助于SEO，还能提高代码的可维护性。</p>

    <h3>CSS样式入门</h3>
    <p><em>CSS可以让网页变得更加美观</em>，通过设置颜色、字体和布局，能极大提升用户体验。<br>
    后续我会分享更多关于选择器和盒模型的知识。</p>

    <hr>
    <h2>联系方式</h2>
    <p>邮箱：example@mail.com<br>
    微信：web_dev_learner</p>
</body>
<!--下面这张图，是以上代码的预览-->