html+css前端开发一课一得

一、课程初印象

HTML 和 CSS 是构建网页的基础，没有复杂编程逻辑，需熟练记忆和使用，多敲代码积累经验。

HTML（HyperText Markup Language）负责网页的结构和内容，由一系列元素组成，通过标签表示。比如常用的<h1>到<h6>标题标签、<p>段落标签、<a>链接标签、<img>图像标签等。而 CSS（Cascading Style Sheets）负责网页的样式和布局，通过定义各种元素的样式代码，包括字体行为、颜色、高度、宽度、显示样式等，甚至随着 CSS3 的出现，还能创建动画、转换等效果。

学习 HTML 和 CSS 就像是搭建一座建筑，HTML 是建筑的框架，CSS 则是装修和装饰。对于初学者来说，可能会觉得这两者有一定的难度，但实际上，只要掌握了方法，就会发现它们并不复杂。正如很多学习资料中提到的，多敲代码是关键。只有通过不断地实践，才能熟练掌握 HTML 和 CSS 的各种标签和属性。

例如，在学习过程中，可以选择一些优质的教程视频，像哔哩哔哩上的教程就很受欢迎。跟着教程敲代码，课后先自己摸索再看讲解，这样可以加深印象。同时，要坚持每天练习，哪怕只有半小时。一旦中断，很容易遗忘，还得重新复习笔记。

HTML 和 CSS 的学习时间相对较短，在前端三大基石（HTML+CSS+JS）中，HTML+CSS 学习所使用的时间占比才百分之五。但这并不意味着它们不重要，恰恰相反，它们是构建网页的基础，只有打好基础，才能更好地学习 JavaScript 等更复杂的技术。

总之，HTML 和 CSS 虽然没有很多编程逻辑，但需要我们用心去记忆和实践，通过不断地积累代码量，提高自己的技能水平。

二、学习资源与方法

（一）优质教程助力

在学习前端的过程中，优质的教程资源至关重要。哔哩哔哩和网易云课堂等平台提供了丰富的前端教程，这些教程涵盖了从基础知识到高级应用的各个方面。

以哔哩哔哩为例，上面有许多前端大佬发布的前沿技术视频，不仅技术前沿，而且关键还免费。我们可以跟着这些教程敲代码，在学习的过程中，先自行练习一遍，然后再看讲解。这样的学习方法能够加深我们对知识的理解和记忆。

此外，我们还可以通过倍速播放来提高学习效率。像在 Coursera 上的课程，我们可以将播放速度调到 1.5X 倍速甚至 2X 倍速，只要不影响自己听和理解老师所讲的内容即可。这样可以节省学习时间，让我们在有限的时间内学习更多的知识。

（二）查漏补缺策略

在学习前端的过程中，我们可以找一两个课程，一个全心学习，另一个用来查漏补缺。这样的学习策略可以帮助我们更加全面地掌握前端知识。

如果只学习一个课程，可能会存在一些知识漏洞。而通过两个课程的学习，我们可以相互补充，避免知识的遗漏。同时，我们也要避免心浮气躁，不能因为有多个课程就无法静心学习。

我们可以制定一个学习计划，合理安排时间，分别学习两个课程。在全心学习一个课程的基础上，利用另一个课程进行查漏补缺。例如，对于 HTML 和 CSS 的学习，我们可以在一个课程中系统地学习基础知识和常用标签、属性，然后在另一个课程中查找一些不常见的标签和属性，或者学习一些高级的布局技巧和动画效果。

通过这样的学习方法，我们可以更加全面地掌握前端知识，提高自己的技能水平。

三、技术收获与应用

（一）HTML 知识掌握

HTML（超文本标记语言）作为网页构建的基础，有着明确的定义和特定的文档结构。在学习过程中，我深入了解了各种元素及属性，它们在网页设计中发挥着重要作用。

标题元素<h1>到<h6>，为网页内容提供了层次分明的标题结构，使页面更具可读性。段落元素<p>用于组织文本内容，让信息更加清晰有序。换行元素<br>可以在需要的地方进行换行操作，使文本排版更加灵活。图片引入通过<img>标签实现，只需设置src属性指定图片路径，就能在网页中展示各种图像，为页面增添视觉效果。表格元素<table>、<tr>、<td>等可以用来展示数据，使信息更加直观。列表分为无序列表<ul>和有序列表<ol>，分别通过<li>元素来定义列表项，适用于不同的场景，如展示菜单、步骤等。表单元素<form>以及各种输入类型的<input>，如文本输入<input type="text">、密码输入<input type="password">等，为用户与网页的交互提供了途径。

（二）CSS 技巧提升

CSS（层叠样式表）的语法简洁明了，通过选择器来指定要应用样式的元素。其生效方式是将样式规则应用于对应的 HTML 元素，从而改变元素的外观和布局。

盒子模型是 CSS 中的重要概念，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。理解盒子模型对于精确布局网页至关重要。定位方式有相对定位、绝对定位和固定定位等，能够灵活地控制元素在页面中的位置。组合选择器可以更加精确地选择特定的元素，提高样式的针对性。

伪类和伪元素为 CSS 增添了强大的功能。伪类可以选择元素的特定状态，如:hover（鼠标悬停状态）、:active（鼠标点击状态）等。伪元素可以创建并操作元素的特定部分，如::before（在元素内容之前插入内容）、::after（在元素内容之后插入内容）等。

在实际应用中，学会了布局网页，通过设置元素的宽度、高度、浮动等属性，实现各种布局效果。优化 logo 可以通过调整图片的大小、位置和样式，使其更加突出和美观。引入字体图标可以丰富网页的视觉效果，同时减小文件大小。清除浮动是常见的操作，当子元素浮动时，可能会导致父元素高度塌陷，通过设置元素的overflow属性、添加空白div清除浮动或者使用after伪类等方法，可以解决这个问题。

（三）问题解决能力

在学习过程中，我遇到了高度塌陷问题。当父元素高度自适应，子元素浮动后，父元素高度变为 0，这就是高度塌陷。为了解决这个问题，我尝试了多种方法。

设置元素的overflow属性为hidden，可以解决大部分浏览器的高度塌陷问题，但如果子元素有定位属性时，可能会导致容器以外的部分被裁剪掉。添加一个空白div，并设置clear:both样式，虽然所有浏览器都支持，但是会在页面中添加无意义的div，容易造成代码冗余。使用after伪类是一种比较好的解决方案，在父元素中内容的最后添加一个伪元素，设置content、display、height、clear和visibility等属性，可以实现与添加空白div相同的效果，且不会造成代码冗余，性能优化，推荐使用。

通过解决高度塌陷问题，我的问题解决能力得到了提升，也更加深入地理解了 CSS 的工作原理和布局机制。在未来的学习和实践中，我相信这些经验将对我有很大的帮助。

四、网页设计感悟

（一）规划与结构

在进行网页设计时，规划和结构是至关重要的第一步。首先，我们需要对网页的功能进行深入分析，明确各个模块的作用和需求。例如，确定网页的 logo 位置，通常会将其放置在网页的左上角或顶部中央，以突出品牌形象。导航栏则一般位于网页的顶部或侧边，方便用户快速访问不同的页面。

在建立网页的 HTML 结构时，我们需要根据具体情况合理使用div、class或id。div标签可以用来划分不同的区域，将网页分成多个模块。class和id则可以用于为特定的元素或模块设置样式。例如，可以为导航栏设置一个特定的class，以便在 CSS 中对其进行样式设置。

通过合理的规划和结构设计，我们可以为网页的后续开发打下坚实的基础，提高开发效率和网页的质量。

（二）样式编写流程

在网页设计中，样式编写是一个关键环节。通常，我们会从body标签开始设置规则，逐步为网页 “穿衣服”。首先，我们可以设置网页的背景颜色、字体大小、颜色等基本样式。然后，根据网页的结构，为不同的模块设置特定的样式。

在 CSS 编写过程中，我们需要花费大量的时间进行细节调整。这包括调整元素的边距、内边距、边框等，以确保网页的布局美观、整齐。同时，我们还需要注意颜色的搭配、字体的选择等，以提高网页的可读性和美观度。

例如，在设置导航栏的样式时，我们可以调整其背景颜色、字体颜色、鼠标悬停效果等。对于内容区域，我们可以设置不同的字体大小、行高、段落间距等，以提高阅读体验。

（三）适配与优化

在网页设计中，适配不同尺寸的设备是非常重要的。随着移动设备的普及，越来越多的用户通过手机、平板电脑等设备访问网页。因此，我们需要考虑网页在不同尺寸下的适配方案，以保证内容不失真。

一种常见的方法是使用响应式设计。通过媒体查询，我们可以根据不同的设备尺寸设置不同的样式。例如，在小屏幕设备上，可以隐藏一些不必要的元素，调整布局，以适应屏幕尺寸。

此外，对于浮动元素，我们可以设置宽度以保持其大小稳定。例如，当网页在不同尺寸的屏幕上显示时，浮动的广告栏可以设置一个固定的宽度，以确保其不会因为屏幕尺寸的变化而变形。

同时，我们还可以通过优化图片大小、压缩 CSS 和 JavaScript 文件等方式，提高网页的加载速度。这样可以提升用户体验，减少用户的等待时间。

总之，在网页设计中，规划与结构、样式编写流程以及适配与优化都是非常重要的环节。通过合理的设计和优化，我们可以创建出美观、实用、高效的网页。

五、学习心得与展望

（一）学习心得

学习 HTML 和 CSS 的过程就像是一场充满挑战和惊喜的冒险。在这个过程中，我不仅掌握了构建网页的技术，还培养了自己的耐心和解决问题的能力。

HTML 的简洁明了让我感受到了标记语言的魅力。通过各种标签的组合，我能够轻松地构建出一个完整的网页结构。而 CSS 的强大功能则让我惊叹不已。它可以让网页变得更加美观、易用，为用户带来更好的体验。

在学习的过程中，我也遇到了很多困难。比如，在处理复杂的布局时，我常常会感到困惑和无从下手。但是，通过不断地尝试和实践，我逐渐掌握了一些技巧和方法，能够更加高效地完成网页设计。

同时，我也深刻体会到了代码规范和可读性的重要性。良好的代码结构不仅可以提高开发效率，还可以方便后期的维护和修改。因此，在编写代码的过程中，我会尽量遵循代码规范，保持代码的简洁和易读性。

（二）未来展望

虽然我已经对 HTML 和 CSS 有了一定的了解和掌握，但是我知道，这只是前端开发的冰山一角。在未来的学习中，我还有很多东西需要学习和探索。

首先，我希望能够深入学习 JavaScript，掌握更多的前端交互技术。JavaScript 作为前端开发的核心语言之一，具有强大的功能和广泛的应用。通过学习 JavaScript，我可以为网页添加更多的交互效果，提高用户体验。

其次，我也希望能够学习一些前端框架和工具，如 Vue.js、React.js 等。这些框架和工具可以帮助我更加高效地开发网页，提高开发效率和质量。

最后，我希望能够不断地提升自己的设计能力和审美水平。一个好的网页不仅需要有良好的技术实现，还需要有美观的设计和用户体验。因此，我会不断地学习和借鉴优秀的网页设计作品，提升自己的设计能力和审美水平。

总之，学习 HTML 和 CSS 是我前端开发之旅的第一步。在未来的学习中，我将继续努力，不断提升自己