构建列表,用创建超链接,所有链接必须包含href属性,空链接请写href="#"。
二、动手练习响应式页面布局
仅记忆标签无法形成真实开发能力,需通过复刻简单页面强化结构组织与CSS协作意识。布局练习重点在于理解盒模型、流式排版及媒体查询触发逻辑,不追求复杂动画或特效。
1、新建一个index.html文件,在
中构建包含header、nav、main、aside、footer五部分的结构。
2、为
3、在中嵌套一个,内部放置一个标题和两段
文字;在中放入一个
小标题和一个
4、创建同目录下的style.css文件,在其中为设置背景色与内边距,为
5、在CSS末尾添加@media screen and (max-width: 768px) { }规则块,将
三、接入JavaScript实现基础交互
HTML5与JavaScript配合可激活静态页面,交互学习应聚焦DOM操作核心路径:获取元素→监听事件→修改内容或样式。避免过早接触框架或异步编程,先建立对“用户动作触发代码执行”的直观感知。
1、在HTML文件前插入
2、调用该元素的addEventListener("click", function() { ... })方法,绑定点击事件处理器。
3、在事件函数体内,使用document.querySelector("p")获取第一个段落,再
通过.textContent = "内容已被修改"更新其文本。
4、为按钮添加disabled属性初始禁用状态,在事件函数第一行执行this.disabled = true,防止重复点击导致多次执行。
5、在
dow.addEventListener("load", function() { ... }),在页面完全加载后执行初始化逻辑,例如自动聚焦到搜索框或预设表单值。