## 一、准备工作

选择编辑器：使用VS Code作为前端开发的编辑器。安装步骤详见第一章第三节。
创建项目文件夹：在本地环境创建一个新的站点，用于存放HTML文件和其他资源。
## 二、编写HTML代码

### 1.新建HTML文件

在项目文件夹中新建一个名为index.html的文件。
紧接着，在文件里，输入html:5，然后按一下键盘上的Tab键，就可以自动html骨架了，生成的如下内容：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>
```
注释如下
```
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
    
</head>
<body>

</body>
</html>
```
添加 HTML 骨架是构建一个结构清晰、兼容良好、易于维护和可扩展的网页的基础。
### 2.修改lang语言

设置语言有以下作用：
可访问性：辅助技术（如屏幕阅读器）会根据 lang 属性识别页面的默认语言，从而正确朗读内容。
SEO 优化：搜索引擎可以利用该属性判断页面内容的语言类型，有助于向目标语言用户推荐页面。
样式与行为控制：某些 CSS 属性和脚本行为可能依赖语言设置，比如伪元素 :lang() 的使用。
国际化支持：浏览器可以根据语言设置提供合适的本地化体验，例如拼写检查或翻译功能。
```

<html lang="zh-hans">
```
### 3.修改title

设置 <title> 标签有以下几个主要原因：
浏览器显示：<title> 的内容会显示在浏览器的标题栏或标签页上，帮助用户快速识别当前打开的页面。
搜索引擎优化（SEO）：搜索引擎会将页面的标题作为关键因素之一来判断网页内容的相关性。一个清晰、描述性强的标题有助于提高网页在搜索结果中的排名。
书签标识：当用户将网页添加为书签时，<title> 内容会作为默认的书签名称，方便用户查找和识别。
语义化与可访问性：良好的标题可以增强网页的语义结构，并对使用屏幕阅读器等辅助技术的用户更具友好性。
初始状态表示：在开发过程中，“Document”通常作为默认标题，表示该 HTML 文件尚未配置具体的页面标题，提醒开发者进行修改。
```
<title>你好，世界</title>
```
### 4.body语义化标签组织

```
    
    <header>
        这是顶部
    </header>

    
    <nav>
        这里放导航
    </nav>

    
    <main>

        这里是网站的主要内容

    </main>

    
    <footer>
        底部
    </footer>
```
**结构清晰：** 使用语义化标签（如 `<header>、<nav>、<main>、<footer>`）能明确地划分网页的功能区域，使代码更易读、易于维护。 
**提升可访问性（Accessibility）：** 屏幕阅读器等辅助工具可以根据这些语义化标签更好地理解页面结构，提高网站的无障碍访问能力。 
**利于SEO优化：** 搜索引擎爬虫可以通过这些语义标签更高效地解析网页内容，有助于提高页面在搜索结果中的排名。 
**便于响应式设计与样式控制： **各个区块可以独立应用 CSS 样式或 JavaScript 行为，有利于实现响应式布局和交互功能。 标准化开发规范： 采用通用的语义化标签结构，方便团队协作开发，统一项目风格。
### 5、nav导航完善

```
    
    <nav>
        <ul class="container">
            <li><a href="index.html">首页</a></li>
            <li><a href="list.html">列表页</a></li>
            <li><a href="single.html">文章页</a></li>
            <li><a href="page.html">单页</a></li>
        </ul>
    </nav>
```
### 6、main主区域
模块化管理

```
    
    <main>

        
        <section class="container">
            <div class="introduction">
                <h2>介绍</h2>
                <p>
                    520反套路指南，是一个针对 520 群友的指南，用于帮助大家快速了解和掌握 520 反套路的用法。
                </p>
            </div>
        </section>

        
        <section class="container">
            <div class="usage">
                <h2>使用</h2>
                <p>
                    使用方法：
                </p>
                <ol>
                    <li>
                        点击 <a href="guide.html">使用指南</a> 进入使用指南页面。
                    </li>
                    <li>
                        按照使用指南中的步骤操作。
                    </li>
                    <li>
                        遇到问题时，请查看 <a href="about.html">关于</a> 页面。
                    </li>
                </ol>
            </div>
        </section>

    </main>
```

### 7.保存文件

确保文件，快捷键ctrl+s。

## 三、预览网页

双击index.html文件，或右键点击文件并选择“用浏览器打开”。
浏览器会加载并显示你编写的HTML页面。

选择编辑器：使用VS Code作为前端开发的编辑器。安装步骤详见第一章第三节。创建项目文件夹：在本地环境创建一个新的站点，用于存放HTML文件和其他资源。

第三章第二节 HTML主框架搭建

前端

学习HTML5前端开发基础：从编辑器选择到代码编写全流程。详细讲解VSCode环境搭建、HTML骨架创建、语义化标签使用、SEO优化技巧及页面预览方法，帮助开发者快速掌握网页制作核心技能。

响应式设计

HTML5

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

第三章第二节 HTML主框架搭建-腾讯云开发者社区-腾讯云

第三章第二节 HTML主框架搭建

第三章第二节 HTML主框架搭建

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐