。
二、通过内联元素与块级元素理解文档流
HTML元素天然具有显示特性,区分块级(独占一行)与内联(同行排列)是理解页面排版逻辑的基础。掌握二者行为差异,有助于后续CSS布局的学习。
1、在
中并列写入
段落
与
文字片段,观察浏览器渲染结果中换行与不换行的区别。
2、用与分别标记重要文字和强调文字,注意其默认加粗与斜体样式,理解语义优先于表现。
3、插入
,确认alt属性必须填写,这是无障碍访问与SEO的关键要求。
4、使用回到顶部创建页面内跳转链接,验证href值以#开头时表示锚点定位。
5、在表单区域添加与,注意required属性可触发原生必填校验。
三、用CSS Flexbox实现响应式基础布局
在HTML结构稳固后,需借助CSS控制元素位置与尺寸。Flexbox是一种一维布局模型,适合处理导航栏、卡片列表等常见场景,学习门槛低于Grid但足够应对多数初阶需求。
1、为父容器添加style="display: flex;",此时所有直接子元素自动变为弹性项目,横向排列。
2、设置父容器style="justify-content: center;"使子项沿主轴居中对齐。
3、添加style="align-items: center;"使子项沿交叉轴垂直居中(适用于高度已知的容器)。
4、为某个子元素单独设置flex: 1,使其占据剩余可用空间;设置flex: 0 0 200px则固定宽度不伸缩。
5、在媒体查询中加入@media (max-width: 768px) { .container { flex-direction: column; } },实现小屏下纵向堆叠。
四、添加基础交互:使用原生HTML5表单验证与简单JavaScript事件
无需框架即可实现用户输入反馈与轻量响应。利用HTML5内置验证机制减少脚本负担,再通过少量JavaScript增强体验,符合渐进式增强原则。
1、在标签中添加type="email"、type="tel"、minlength="6"等属性,浏览器将自动执行格式与长度校验。
2、为表单添加novalidate属性可暂时禁用原生校验,便于自定义提示逻辑。
3、在中绑定onclick事件,验证JS执行通路。
4、获取输入框元素:const input = document.querySelector('input[type="text"]');,为后续监听做准备。
5、添加input.addEventListener('input', () => { console.log(input.value); }); 实时捕获用户输入内容。
五、构建一个完整静态页面进行综合练习
整合前述知识,动手完成一个含页眉、导航、三栏主内容区、侧边栏与页脚的单页结构。该过程强化标签语义选择、Flex布局应用及事件绑定能力,形成闭环训练。
1、使用
2、用包含一个作为文章列表,每个内含标题、
摘要与
3、在旁并列放置
4、为按钮添加data-id属性记录编号,点击时通过this.dataset.id获取对应值。
5、在