HTML前端学习 | 初学者日记(二)

0 阅读3分钟

前几天有些忙,进度慢了,我昨天继续学习,进度: 一、学习文本标签,搞定网页“文字排版”

今天开始学习具体的标签,先从最基础的文本标签入手,毕竟网页里最多的就是文字内容。主要学了标题标签、段落标签、加粗倾斜标签,还有换行和分割线标签,每一个都实操了好几遍,慢慢找到了感觉。

标题标签是 < h1 > 到 < h6 > ,从h1到h6,字体越来越小,自带加粗和上下间距,重点是一个页面只能有1个h1标签(用来放最重要的标题,对SEO有帮助),h2到h6可以有多个。我试着写了h1到h6,保存后打开浏览器,一眼就能看出它们的区别,很直观。

段落标签是< p >,用来包裹段落文字,它和直接写文字的区别是,段落之间会有默认的间距,看起来更整齐。我之前直接在body里写文字,所有文字都挤在一起,用了< p >标签后,瞬间清爽多了。

加粗标签是< strong >,倾斜标签是< em >,这里有个小知识点,< b >也能加粗,< i >也能倾斜,但教程说,尽量用< strong >和< em >,因为它们更有语义,< b >和< i >只负责样式,后续用CSS控制样式更规范,新手尽量养成好习惯。

换行标签是< br />,分割线标签是< hr />,这两个都是单标签(自闭合标签),不需要写结束标签,直接写< br / >就能换行,< hr />能在页面上画一条横线,用来分隔不同的内容,特别实用。

刚开始写标签的时候,总忘记写结束标签,比如< p >写了开头,忘了写< /p >,保存后打开网页,文字排版全乱了,后来才知道,大部分标签都是双标签,必须成对出现,只有少数单标签不需要结束标签,一定要注意!

二:实操练习,写一个简单的个人简介页面

学了三天基础,今天试着实操一下,写一个简单的个人简介页面,把之前学的标签都用起来,也算检验一下学习成果。

页面结构很简单:用h1标签写标题“我的个人简介”,用p标签写个人介绍的文字,用< strong >加粗重点内容,用< hr />分隔不同的板块,最后用换行标签调整文字的换行,让页面看起来更整齐。

写的时候,遇到了一个小问题:想让文字居中,不知道怎么操作,查了一下教程,发现HTML本身不能直接控制样式,需要用CSS,而我现在还没学CSS,只能先放弃居中,先保证页面结构正确。不过没关系,慢慢来,先把HTML基础打牢,后续学了CSS再优化。

另外,我还试着用了列表标签,无序列表< ul >和列表项< li >,用来写自己的技能清单,比如“HTML(学习中)”“CSS(未开始)”,用无序列表包裹起来,每一项用< li >标签,页面瞬间有了条理,比用段落标签罗列好看多了。

写完后,用Open in Browser插件右键打开,看到自己写的第一个简单页面,虽然很简陋,没有任何样式,但真的特别有成就感,比单纯看教程、记笔记更有动力。

总结一下这四天的学习:从完全不懂HTML,到能搭建简单的页面结构,学会了基础的文本标签、列表标签,熟悉了VS Code的基本操作,虽然过程中踩了不少坑,但每解决一个问题,都能学到新的知识。

接下来的计划:继续学习图片标签、链接标签,还有表单标签,这些都是网页中常用的标签,学完之后,就能写更丰富的页面了。