衡水名师工作室
首页 教研文章 教学资源 名师课堂 专题活动 名师工作室
AI网页编程基础HTML的那些事

桂建旺发表于2025-12-13


最近在做课程，大家在追求网页课件炫酷效果的同时，都对网页课件的一些知识存在疑惑，今天张老师就把基础部分补足，用到的相关的基础模块有3个分别是html，css和JavaScript，相较于后者html属于最基础最简单的部分，从0-1也不会超过1个小时。第 1 课：HTML 基础与网页结构学习目标了解 HTML 的定义和作用掌握 HTML 基本结构学会使用常见的 HTML 标签能够创建一个简单的 HTML 文件知识讲解HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言。它不是编程语言，而是一种标记语言，通过标签来描述网页内容。HTML5 是 HTML 的第五个版本，增加了许多新特性，例如语义化标签、本地存储、Canvas 绘图、多媒体支持等，这些都为 AI 网页编程提供了更多可能。HTML 基本结构：<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>我的第一个网页</title>

</head>

<body>

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

<p>这是一个段落。</p>

</body>

</html>

基本标签说明：<!DOCTYPE html>：声明 HTML5 文档<html>：HTML 文档的根标签<head>：包含文档的元数据<title>：浏览器标签页显示的标题<body>：网页可见内容代码示例<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>我的第一个网页</title>

</head>

<body>

<h1>你好，HTML5！</h1>

<p>这是我的第一个HTML5网页。</p>

<imgsrc="https://example.com/logo.png"alt="示例图片">

</body>

</html>

总结与练习总结：HTML 是网页的骨架HTML5 是最新标准，支持更多功能网页由标签组成，标签通常成对出现练习：创建一个 HTML 文件添加标题和几个段落插入一张图片第 2 课：HTML 常用标签与属性学习目标掌握常用 HTML 标签了解标签属性的用法学会创建列表和链接知识讲解HTML 标签是构成网页的基本元素，每个标签都有特定的功能。属性可以为标签提供更多信息。常用标签：标题：<h1> 到 <h6>段落：<p>链接：<a href="url">文本</a>图片：<img src="路径" alt="描述">列表：<ul>(无序列表)、<ol>(有序列表)、<li>(列表项)分隔线：<hr>换行：<br>标签属性：id：唯一标识class：类名，用于 CSS 样式style：内联样式href：链接地址src：资源路径代码示例<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>HTML常用标签</title>

</head>

<body>

<h1>HTML常用标签示例</h1>

<h2>1. 链接</h2>

<a href="https://www.example.com"target="_blank">访问示例网站</a>

<h2>2. 图片</h2>

<img src="https://example.com/image.jpg"alt="示例图片"width="300">

<h2>3. 列表</h2>

<h3>无序列表：</h3>

<ul>

<li>苹果</li>

<li>香蕉</li>

<li>橙子</li>

</ul>

<h3>有序列表：</h3>

<ol>

<li>第一步</li>

<li>第二步</li>

<li>第三步</li>

</ol>

</body>

</html>

总结与练习总结：标签决定内容的类型和结构属性提供额外信息合理使用标签能让网页结构更清晰练习：创建一个包含标题、段落、链接和图片的网页添加有序和无序列表尝试使用不同的属性第 3 课：HTML5 语义化标签与多媒体（约 1000 字）学习目标了解 HTML5 语义化标签的优势掌握常用语义化标签学会嵌入音频和视频知识讲解HTML5 引入了许多语义化标签，这些标签不仅描述了内容的外观，还描述了内容的含义。常用语义化标签：<header>：页眉<nav>：导航栏<main>：主要内容<article>：文章内容<section>：章节<aside>：侧边栏<footer>：页脚多媒体支持：HTML5 原生支持音频和视频，无需插件。音频：<audio>视频：<video>代码示例<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>HTML5语义化与多媒体</title>

</head>

<body>

<header>

<h1>我的网站</h1>

<nav>

<a href="#home">首页</a> |

<a href="#news">新闻</a> |

<a href="#contact">联系我们</a>

</nav>

</header>

<main>

<article>

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

<p>这是一个使用HTML5语义化标签创建的网页。</p>

<h3>视频演示</h3>

<video width="400"controls>

<source src="movie.mp4"type="video/mp4">

                您的浏览器不支持HTML5视频播放。

</video>

<h3>音频演示</h3>

<audio controls>

<source src="music.mp3" type="audio/mpeg">

                您的浏览器不支持HTML5音频播放。

</audio>

</article>



<aside>

<h3>相关链接</h3>

<ul>

<li><ahref="#">HTML5教程</a></li>

<li><ahref="#">CSS3教程</a></li>

<li><ahref="#">JavaScript教程</a></li>

</ul>

</aside>

</main>

<footer>

<p>&copy; 2025 我的网站. 保留所有权利.</p>

</footer>

</body>

</html>

总结与练习总结：语义化标签提高代码可读性和 SEO 效果HTML5 原生支持多媒体合理布局让网页结构更清晰练习：使用语义化标签创建一个网页框架嵌入一个视频和一个音频添加导航链接第 4 课：HTML 表单与输入验证学习目标掌握 HTML 表单的创建方法了解常用表单控件学会使用 HTML5 表单验证知识讲解表单是网页与用户交互的重要元素，用于收集用户输入的信息。表单基本结构：<form action="处理地址"method="提交方式">

<!-- 表单控件 -->

</form>

常用表单控件：文本框：<input type="text">密码框：<input type="password">单选按钮：<input type="radio">复选框：<input type="checkbox">提交按钮：<input type="submit">下拉列表：<select> 和 <option>文本域：<textarea>HTML5 新增输入类型：邮箱：<input type="email">网址：<input type="url">日期：<input type="date">数字：<input type="number">搜索：<input type="search">代码示例<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<title>HTML5表单示例</title>

</head>

<body>

<h1>用户注册</h1>

<form action="/register"method="post">

<label for="username">用户名：</label>

<input type="text"id="username"name="username"requiredminlength="3"maxlength="20">

<br><br>

<label for="email">邮箱：</label>

<input type="email"id="email"name="email"required>

<br><br>

<label for="password">密码：</label>

<input  type="password"id="password"name="password"requiredminlength="6">

<br><br>

<label for="age">年龄：</label>

<input type="number"id="age"name="age"min="18"max="100">

<br><br>

<label for="birthday">生日：</label>

<input type="date"id="birthday"name="birthday">

<br><br>

<label>性别：</label>

<input  type="radio"id="male"name="gender"value="male">

<label for="male">男</label>

<inputtype="radio"id="female"name="gender"value="female">

<labelfor="female">女</label>

<br><br>

<label>爱好：</label>

<inputtype="checkbox"id="reading"name="hobby"value="reading">

<labelfor="reading">阅读</label>

<inputtype="checkbox"id="sports"name="hobby"value="sports">

<labelfor="sports">运动</label>

<inputtype="checkbox"id="music"name="hobby"value="music">

<labelfor="music">音乐</label>

<br><br>

<labelfor="country">国家：</label>

<selectid="country"name="country">

<optionvalue="china">中国</option>

<optionvalue="usa">美国</option>

<optionvalue="uk">英国</option>

</select>

<br><br>

<labelfor="message">留言：</label>

<textareaid="message"name="message"rows="4"cols="50"></textarea>

<br><br>

<inputtype="submit"value="注册">

<inputtype="reset"value="重置">

</form>

</body>

</html>

总结与练习总结：表单用于收集用户输入HTML5 提供了丰富的输入类型和验证功能合理使用表单控件能提升用户体验练习：创建一个包含多种输入类型的表单添加必要的验证规则美化表单布局第 5 课：HTML 与 AI 的结合学习目标了解 HTML 与 AI 结合的基本原理掌握如何通过 API 调用 AI 服务学会创建一个简单的 AI 交互网页知识讲解HTML 本身不具备 AI 功能，但它可以作为前端界面，通过 JavaScript 调用 AI API 来实现智能功能。常见的 AI API：Baidu AITencent AI实现步骤：创建 HTML 界面，用于显示和输入使用 JavaScript 获取用户输入调用 AI API，发送请求接收 API 返回的结果在网页上显示结果代码示例html预览<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>简单的AI聊天机器人</title>

<style>

body{font-family: sans-serif;max-width:800px;margin:0 auto;padding:20px;}

#chat-container{border:1px solid #ccc;border-radius:10px;padding:10px;height:400px;overflow-y: auto;}

.message{margin:5px0;padding:8px;border-radius:5px;}

.user-message{background-color:#e6f2ff;text-align: right;}

.ai-message{background-color:#f0f0f0;}

#input-container{margin-top:10px;display: flex;}

#message-input{flex-grow:1;padding:8px;border:1px solid #ccc;border-radius:5px;}

#send-button{margin-left:5px;padding:8px15px;background-color:#4CAF50;color:white;border: none;border-radius:5px;cursor: pointer;}

</style>

</head>

<body>

<h1>AI聊天机器人</h1>

<divid="chat-container"></div>

<divid="input-container">

<inputtype="text"id="message-input"placeholder="请输入消息...">

<buttonid="send-button">发送</button>

</div>

<script>

const chatContainer =document.getElementById('chat-container');

const messageInput =document.getElementById('message-input');

const sendButton =document.getElementById('send-button');



// 模拟AI回复

functiongetAIResponse(message){

// 在实际应用中，这里应该调用真实的AI API

const responses =[

"我是一个AI聊天机器人，很高兴为您服务！",

"您刚刚说的是："+ message,

"能再详细解释一下吗？",

"我正在学习更多知识，以便更好地帮助您。",

"这个问题很有趣，让我思考一下..."

];

return responses[Math.floor(Math.random()* responses.length)];

}

functionaddMessageToChat(text, isUser){

const messageDiv =document.createElement('div');

            messageDiv.className=`message ${isUser ?'user-message':'ai-message'}`;

            messageDiv.textContent= text;

            chatContainer.appendChild(messageDiv);

            chatContainer.scrollTop= chatContainer.scrollHeight;

}

functionsendMessage(){

const message = messageInput.value.trim();

if(!message)return;

addMessageToChat(message,true);

            messageInput.value='';



// 模拟网络延迟

setTimeout(()=>{

const aiResponse =getAIResponse(message);

addMessageToChat(aiResponse,false);

},1000);

}

sendButton.addEventListener('click', sendMessage);

        messageInput.addEventListener('keypress',(e)=>{

if(e.key==='Enter')sendMessage();

});



// 初始欢迎消息

addMessageToChat("你好！我是一个AI聊天机器人，有什么我可以帮助你的吗？",false);

</script>

</body>

</html>

总结与练习总结：HTML 负责构建 AI 应用的用户界面JavaScript 负责处理用户交互和 API 调用AI 功能通常通过调用第三方 API 实现练习：注册一个 AI API 服务（如 OpenAI）获取 API 密钥修改示例代码，使其能够调用真实的 AI API课程总结通过这 5 节课，我们从 HTML 基础开始，学习了网页结构、常用标签、语义化、表单以及如何与 AI 结合。这些知识为你进一步学习前端开发和 AI 应用打下了坚实的基础。下一步学习建议：学习 CSS3，美化你的网页深入学习 JavaScript，处理更复杂的交互了解更多 AI API 的使用方法尝试构建一个完整的 AI 应用

评论详情