任务1.4 HTML5文件的编写方法

模块1HTML5概述任务1.4编写HTML文件网页设计项目教程（HTML5+CSS3+JavaScript）学习目标▸从记事本手写到VSCode智能编写，掌握两种建站方式知识目标掌握使用记事本编写HTML5文件的方法；掌握使用VSCode编写并预览网页的方法；理解两种方式的差异与适用场景。能力目标能用记事本与VSCode分别创建网页；能正确保存为.html并选择UTF-8编码。素养目标培养对比分析与归纳总结能力；养成规范保存、及时预览的习惯；强化精益求精的工匠精神。02任务描述▸网页文件是纯文本文件，可用记事本或VSCode创建网页文件是纯文本文件，可用记事本或VSCode创建本任务将分别阐述使用记事本和VSCode编写HTML5文件的步骤，通过“欢迎页面”实例，体验和比较不同开发环境下编写HTML的基本流程。纯文本

网页文件的本质扩展名

.html编码

UTF-8031.4.1使用记事本手工编写▸最基础、无需额外工具的编写方式操作步骤打开“记事本”程序。输入网页代码后点击“另存为”。文件名以.html结尾，并选择UTF-8编码。注意事项默认编码为ANSI，浏览器中会显示乱码。双击保存好的文件，浏览器即可打开。右键“打开方式→记事本”可再次编辑。04两种编写方式对比▸各有长短，按场景选择记事本手工编写优点：无需安装，随处可用缺点：没有高亮与补全，容易出错适用：简单页面与临时测试VSCode智能编写优点：高亮、补全、插件丰富缺点：需要安装与配置适用：日常开发与项目实践提示：无论使用哪种方式，保存时都要选择UTF-8编码，避免中文乱码。05编写文件的三个关键点▸细节决定页面能否被浏览器正确打开扩展名要写.html保存类型选“所有文件”否则可能被存成.html.txt编码要用UTF-8记事本默认ANSI，中文会乱码另存为时手动改选UTF-8结构要完整DOCTYPE必须位于首行html、head、body三对标签齐全06编写流程：使用记事本手工编写▸纯文本编辑，适合快速验证一个简单页面1输入代码录入HTML代码2另存为网页类型选“所有文件”3浏览器预览双击文件即可打开4查看源代码右键选“查看源文件”提示：保存时编码要选UTF-8；若选成ANSI，浏览器中的中文会显示为乱码。07编写流程：使用VSCode智能编写▸有语法高亮与自动补全，还能一键生成基本结构1新建文件输入html后回车2保存文件文件名以.html结尾3生成结构输入“!”再按Tab键4编写内容在body中补标签提示：输入“!”按Tab键，可自动生成含DOCTYPE、head、body的完整结构。08案例演示：编写并预览第一个网页▸同一段代码，用两种工具写出来的显示效果完全一致1实例：咏柳h1标题与p段落，中文显示正常2任务实施：欢迎页面记事本写法与VSCode写法效果相同提示：页面标题显示在浏览器标签上；h1与p的呈现差异一眼就能看出来。09案例演示1-4：编写第一个网页<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>实例</title>

</head>

<body>

<h1>咏柳</h1>

<p>贺知章</p>

<p>碧玉妆成一树高，</p>

<p>万条垂下绿丝绦。</p>

<p>不知细叶谁裁出，</p>

<p>二月春风似剪刀。</p>

</body>

</html>index.html咏柳贺知章碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。运行观察：metacharset声明编码避免中文乱码；浏览器按标签语义呈现标题与段落。10任务实施：创建“欢迎页面”▸分别用记事本与VSCode完成同一页面01记事本编写打开记事本并输入HTML代码02另存网页另存为.html，编码选UTF-803智能编写新建文件，输入“!”生成基本结构04保存文件按Ctrl+S保存为.html文件05预览验证在浏览器中检查标题与段落提示：在VSCode中输入“!”再按Tab键，可自动生成HTML5基本结构。11任务实施代码（一）：欢迎页面▸页面标题为“欢迎页面”<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>欢迎页面</title>

</head>

<body>

<h1>欢迎来到我的网站</h1>

<p>您好！感谢访问我的个人网站。

这里将分享我的学习笔记和项目作品。</p>

</body>

</html>代码要点title设置浏览器标签页显示的标题。h1定义页面一级标题。p定义段落，容纳欢迎语文本。lang="zh-CN"声明页面为中文。12单元实训：编写“个人简历”网页▸用标题、段落与列表组织一份结构清晰的简历<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>张三-个人简历</title>

</head>

<body>

<header>

<h1>张三</h1>

<p>电话：131-2345-6789｜邮箱：zhangsan@</p>

</header>

<h2>教育背景</h2>

<ul>

<li>武汉软件工程职业学院2021—2024</li>

<li>主修课程：数据结构、算法、Web开发</li>

</ul>

<h2>技能</h2>

<ul>

<li>HTML5/CSS3/JavaScript</li>

<li>Vue.js/React｜Git版本控制</li>

</ul>

</body>

</html>编写要点header标记简历头部，集中放姓名与联系方式h2划分“教育背景”“技能”等栏目ul与li生成结构化列表，比连续段落更清晰分别用记事本和VSCode各写一遍，体会差异保存后双击文件，在浏览器中核对显示效果13任务小结▸本任务完成从“记事本手写”到“VSCode智能编写”的学习会手写能用记事本编写HTML5文件并另存为.ht