html网页制作学习心得体会

原创已于 2024-10-17 18:23:28 修改 · 784 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2024-10-17 18:05:52 首次发布

在学习 HTML 的这段时间里，我仿佛打开了一扇通往数字世界构建的大门。HTML，这个看似简单却蕴含着无限可能的标记语言，给我带来了许多深刻的感悟和收获。

一、HTML

一开始接触 HTML 时，我被它的简洁性所吸引。仅仅通过一些标签和属性的组合，就可以构建出丰富多彩的网页内容。从最基础的<html>、<head>、<body>标签开始，逐步了解到标题标签<h1>到<h6>、段落标签<p>、链接标签<a>等，每一个标签都像是一块拼图，等待着我去组合出完整的画面。

随着学习的深入，我发现 HTML 不仅仅是一种技术，更是一种艺术表达的工具。通过合理地运用标签和样式，可以创造出美观、易用的网页界面。例如，使用<table>标签可以创建整齐的表格，用<ul>和<li>可以构建清晰的列表，而插入图片<img>和视频<video>则能为网页增添生动感。

相对路径和绝对路径

实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。

² 绝对路径

绝对路径一般是指带有盘符的路径或完整的网络地址，

例如“D:\HTML+CSS网页制作\chapter02\img\logo.gif”

或者“http://www.itcast.cn/images/logo.gif”

网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器，这时图像文件可能在服务器的C盘，也有可能在D盘、E盘，可能在aa文件夹中，也有可能在bb文件夹中。也就是说，很有可能不存在“D:\HTML+CSS网页制作\chapter02\img\logo.gif”这样一个路径。

² 相对路径

相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。

相对路径的设置分类

元素的定位属性主要包括定位模式和边偏移两部分，具体介绍如下：

（1）定位模式

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

从表中可以看出，元素的定位主要分为四类，后面会针对每一种定位方式进行详细讲解

（2）边偏移

定位模式（position）仅仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在CSS中，通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置。

边偏移的设置方式

二、CSS

而当我开始接触 CSS 时，整个网页设计的世界仿佛又被拓宽了无数倍。CSS 就像是一位神奇的魔法师，能够为原本略显单调的 HTML 结构赋予绚丽的色彩和独特的风格。

比如，通过以下 CSS 代码可以让网页中的文字颜色变为蓝色，字体大小变为 18 像素：

p { color: blue; font-size: 18px; }

还可以使用 CSS 来设置背景颜色和背景图片：

body { background-color: #f0f0f0; background-image: url(https://blog.csdn.net/'beautiful-background.jpg'); }

利用 CSS 还能轻松实现元素的定位和布局。例如，使用float属性可以让图片或文本块在页面中浮动：

.img-container img { float: left; }

或者使用flexbox布局来创建灵活的页面结构：

.container { display: flex; justify-content: space-between; align-items: center; }

图像标记的格式：

HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记<img />以及和他相关的属性。其基本语法格式如下：

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，他是img标记的必需属性。

（1）图像的替换文本属性alt

由于一些原因图像可能无法正常显示，比如网速太慢，浏览器版本过低等。因此为页面上的图像加上替换文本是个很好的习惯，在图像无法显示时告诉用户该图片的内容。

（2）图像的宽度、高度属性width、height

通常情况下，如果不给<img />标记设置宽和高，图片就会按照它的原始尺寸显示，当然也可以手动更改图片的大小。width和height属性用来定义图片的宽度和高度，通常我们只设置其中的一个，另一个会按原图等比例显示。如果同时设置两个属性，且其比例和原图大小的比例不一致，显示的图像就会变形或失真。

（3）图像的边框属性border

默认情况下图像是没有边框的，通过border属性可以为图像添加边框、设置边框的宽度，但边框颜色的调整仅仅通过HTML属性是不能够实现的。

（4）图像的边距属性vspace和hspace

在网页中，由于排版需要，有时候还需要调整图像的边距。HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距

（5）图像的对齐属性align

图文混排是网页中常见的效果，默认情况下图像的底部会相对于文本的第一行文字对齐。但是在制作网页时经常需要实现其他的图像和文字环绕效果，例如图像居左文字居右等，这时可以使用图像的对齐属性align。

多学一招：使用title属性设置提示文字

图像标记<img/ >有一个和alt属性十分类似的属性title，title属性用于设置鼠标悬停时图像的提示文字。

在实践过程中，我也遇到了不少挑战。有时候会因为标签的嵌套错误或者属性设置不当，导致网页无法正常显示。而在运用 CSS 时，也会出现样式冲突、兼容性问题等。但是，通过不断地调试和查阅资料，我逐渐掌握了解决问题的方法，这也让我更加深刻地理解了 HTML 和 CSS 的工作原理。

三、网站推荐

以下是一些学习 HTML 的优质网站：

1.菜鸟教程：HTML 教程 | 菜鸟教程

2.W3Schools：https://www.w3schools.com.cn/html/

3.MDN Web Docs：https://developer.mozilla.org/zh-CN/docs/Web/HTML

4.FreeCodeCamp：https://www.freecodecamp.org/

5.Codecademy：https://www.codecademy.com/learn/learn-html

6.H5 之家：Online Free Games & web Free Game & free H5 Games - GAMECLUB - html5home.com

四、收获

HTML 的学习还让我体会到了团队合作的重要性。在实际的项目开发中，往往需要与设计师、后端开发人员等密切配合。只有大家共同努力，才能打造出高质量的网页应用。而 CSS 的运用则需要与 HTML 紧密结合，设计师和开发人员之间的沟通协作显得尤为重要，以确保网页的视觉效果和功能实现都能达到最佳状态。

回顾这段学习历程，我深感 HTML 和 CSS 是一个充满魅力和潜力的领域。它们不仅让我掌握了一项实用的技能，还培养了我的逻辑思维和创造力。我相信，在未来的学习和工作中，HTML 和 CSS 将继续发挥重要的作用，而我也会不断地深入学习和探索，为创造出更加精彩的数字世界贡献自己的一份力量。

总之，HTML 和 CSS 的学习是一次充满挑战和收获的旅程，我期待着在这个领域中继续前行，创造出更多令人惊艳的作品。

标签

#html #学习 #前端