Web前端开发课堂笔记

只想睡觉真君 發表於 2026-3-14 11:58:00

<h1 id="web前端开发课堂笔记">Web前端开发课堂笔记</h1>
<h2 id="一-工具准备">一、工具准备</h2>
<h3 id="11-开发工具hbuilder">1.1 开发工具：HBuilder</h3>
<ul>
<li><strong>操作</strong>：新建项目 → 选择 <strong>Web项目</strong>。</li>
<li><strong>项目存放路径</strong>：<code>D:\web\</code>（如果该文件夹不存在，请先新建）。</li>
<li><strong>项目命名</strong>：建议使用自己的英文名或姓名全拼。</li>
</ul>
<h3 id="12-浏览器环境">1.2 浏览器环境</h3>
<ul>
<li><strong>核心要求</strong>：安装 <strong>谷歌浏览器（Chrome）</strong>。</li>
<li><strong>测试原则</strong>：
<ol>
<li>先保证代码在 Chrome 上正常显示（行业标准）。</li>
<li>再去测试火狐（Firefox）等其他浏览器。</li>
<li>不建议使用 IE 等老旧浏览器进行开发测试。</li>
</ol>
</li>
</ul>
<hr>
<h2 id="二-行业背景与-html5-的重要性">二、行业背景与 HTML5 的重要性</h2>
<h3 id="21-html5h5的革命性意义">2.1 HTML5（H5）的革命性意义</h3>
<ul>
<li><strong>硬件变革</strong>：从“PC 互联网”时代（在电脑上运行）跨越到“移动互联网”时代（在手机上浏览操作）。</li>
<li><strong>统一标准</strong>：解决了过去标准不统一的问题（如淘汰了 Flash 插件）。</li>
<li><strong>原生支持</strong>：H5 自身就支持视频、音频、动画（Canvas 等），无需安装额外插件，是重要的里程碑。</li>
</ul>
<h3 id="22-版本的更迭了解即可">2.2 版本的更迭（了解即可）</h3>
<ul>
<li>第一代 HTML 诞生于 <strong>1990 年代</strong>（距今约 30 多年）。</li>
<li>关于 HTML5 版本的题目需要记忆，因为它解决了跨平台、跨浏览器的问题，增加了新特性。</li>
<li>HTML5之前的HTML标准版本是HTML4.01</li>
</ul>
<hr>
<h2 id="三-新建项目后的基础知识">三、新建项目后的基础知识</h2>
<h3 id="31-新建项目后的默认结构">3.1 新建项目后的默认结构</h3>
<ul>
<li>通常会默认生成 <code>index.html</code> 等文件。</li>
<li>新建项目后默认有<code>css</code>，<code>js</code>，<code>img</code>文件夹，和<code>index.html</code>文件</li>
</ul>
<h3 id="32-认识-html-标记标签">3.2 认识 HTML 标记/标签</h3>
<ul>
<li><strong>定义</strong>：凡是由 <code><</code> 和 <code>></code> 括起来的尖括号内容，就是一个<strong>标记</strong>（也叫标签）。</li>
<li><strong>课堂练习</strong>：分析下面这 10 行代码中的 5 个标记。
<ul>
<li>示例标记：<code><html></code>、<code><head></code>、<code><meta></code>、<code><title></code>、<code><body></code>。</li>
<li><strong>注意</strong>：<code><!DOCTYPE html></code> 比较特殊，它<strong>不是</strong> HTML 标签。</li>
</ul>
</li>
</ul>
<h3 id="33-标准-html-文件的文档头">3.3 标准 HTML 文件的文档头</h3>
<ul>
<li>
<p><strong>第一行必须写</strong>：</p>
<pre><code class="language-html"><!DOCTYPE html>
</code></pre>
</li>
<li>
<p><strong>作用</strong>：这行代码是写给浏览器的“声明”，告诉浏览器：“我这份文件是用 HTML5 写的，请你按照 HTML5 的标准去解析翻译。”</p>
</li>
<li>
<p><strong>生活化理解</strong>：就像你跟老外对话前，先声明“我要开始说英语了，请你按英语来听”。</p>
</li>
</ul>
<hr>
<h2 id="34-html-文件的结构关系">3.4 HTML 文件的结构关系</h2>
<ul>
<li><strong>类比《红楼梦》人物关系</strong>：
<ul>
<li>就像复杂的家族图谱一样，HTML 标签之间也有层级关系（父子、兄弟）。</li>
<li><code><html></code> 是最大的根节点，相当于“贾母”。</li>
<li>它下面通常有两个“孩子”：<code><head></code> 和 <code><body></code>。</li>
</ul>
</li>
<li><strong>如何判断关系</strong>：
<ul>
<li>看 <strong>缩进</strong>。缩进越多的，是子级；缩进相同的，是同级（兄弟）。</li>
</ul>
</li>
<li><strong>结构图示</strong>：<pre><code class="language-html"><!DOCTYPE html> 
<html>    
<head> 
   <meta> 
   <title></title>
</head>
<body> 
   
</body>
</html>
</code></pre>
</li>
</ul>
<hr>
<h1 id="四代码分离操作">四、代码分离操作</h1>
<h2 id="1为什么要进行代码分离">1、为什么要进行代码分离？</h2>
<ul>
<li><strong>遵循W3C标准</strong>：W3C是国际中立性技术标准组织，推荐将HTML、CSS、JavaScript分离。</li>
<li><strong>好处</strong>：代码更清晰、易维护、符合最佳实践。</li>
</ul>
<h2 id="2分离css样式">2、分离CSS样式</h2>
<ol>
<li>
<p><strong>定位样式代码</strong>：</p>
<ul>
<li>在HTML文件中找到<code><style></code>标签及其内容</li>
<li>可使用HBuilder的代码折叠功能，将这部分代码折叠起来，便于观察整体结构。</li>
</ul>
</li>
<li>
<p><strong>剪切样式</strong>：</p>
<ul>
<li>选中所有样式代码，<strong>剪切</strong>（Ctrl+X）。</li>
</ul>
</li>
<li>
<p><strong>新建CSS文件</strong>：</p>
<ul>
<li>在项目文件夹中右键 → 新建 → CSS文件。</li>
<li>命名示例：<code>style.css</code>。</li>
</ul>
</li>
<li>
<p><strong>粘贴并保存</strong>：</p>
<ul>
<li>将剪切的样式代码粘贴到<code>style.css</code>中。</li>
<li><strong>立即保存</strong>（Ctrl+S）。</li>
</ul>
</li>
<li>
<p><strong>链接CSS到HTML</strong>：</p>
<ul>
<li>回到HTML文件，在原来<code><style></code>的位置使用<code><link></code>标签引入外部CSS：<pre><code class="language-html"><link rel="stylesheet" href="style.css">
</code></pre>
</li>
<li>注意：如果已有多个CSS文件，需选择正确的文件（如<code>style.css</code>）。</li>
</ul>
</li>
<li>
<p><strong>保存HTML并预览</strong>：</p>
<ul>
<li>保存HTML文件，刷新浏览器，确认样式正常显示。</li>
<li><strong>测试</strong>：可临时注释掉<code><link></code>行，刷新页面看样式是否消失，验证分离成功。</li>
</ul>
</li>
</ol>
<h2 id="3分离javascript脚本">3、分离JavaScript脚本</h2>
<ol>
<li>
<p><strong>定位脚本代码</strong>：</p>
<ul>
<li>找到<code><script></code>标签及其内部JavaScript代码（也是30多行）。</li>
</ul>
</li>
<li>
<p><strong>剪切脚本</strong>：</p>
<ul>
<li>选中所有JavaScript代码，<strong>剪切</strong>。</li>
</ul>
</li>
<li>
<p><strong>新建JS文件</strong>：</p>
<ul>
<li>在项目文件夹中右键 → 新建 → JavaScript文件。</li>
<li>命名示例：<code>script.js</code>。</li>
</ul>
</li>
<li>
<p><strong>粘贴并保存</strong>：</p>
<ul>
<li>将剪切的代码粘贴到<code>script.js</code>中。</li>
<li><strong>立即保存</strong>。</li>
</ul>
</li>
<li>
<p><strong>链接JS到HTML</strong>：</p>
<ul>
<li>回到HTML文件，在原来<code><script></code>的位置使用<code><script src></code>标签引入外部JS：<pre><code class="language-html"><script src="script.js"></script>
</code></pre>
</li>
<li>注意选择正确的JS文件（如<code>script2.js</code>？根据实际命名选择）。</li>
</ul>
</li>
<li>
<p><strong>保存HTML并预览</strong>：</p>
<ul>
<li>保存HTML文件，刷新浏览器，功能应保持不变。</li>
</ul>
</li>
</ol>
<h2 id="4最终效果">4、最终效果</h2>
<ul>
<li>HTML文件变得非常简洁，只保留结构骨架和外部文件链接。</li>
<li>所有样式集中在<code>.css</code>文件，所有脚本集中在<code>.js</code>文件。</li>
<li>浏览器预览效果与分离前完全一致。</li>
</ul><br><br>
来源：https://www.cnblogs.com/jayl12/p/19717241

頁: [1]

琼殿技术论坛's Archiver

Web前端开发课堂笔记