网页设计HTML入门练习
网页设计课的作业资源里,挺有代表性的就是这个“网页设计.zip”压缩包。里面的 HTML 文件像是个人微博.html
、friends.html
,都是常见的博客页面。配合布局图和结构图,新手练手刚刚好。基本的 HTML 标签都能看到,用来打基础合适。
HTML 的和
结构挺标准,像
、
、
这种标签,平时写网页也用得最多,学会这些你就能搭个完整页面了。
虽然压缩包没提 CSS,但肯定少不了。样式放在外部style.css
里,也写在标签中。像
position: absolute
、margin
、font-size
这种属性,用来做排版效果还挺直观。
布局图是做网页的草图图纸,结构图就像网页的目录结构,两者配合起来,页面逻辑就清晰多了。像首页、文章页、好友页这种分区划分,都是结构图上看得出来的。
里面的submit
工具听起来像是作业上传工具,说白了就方便展示结果和老师打分用的。嗯,挺方便的,预览功能估计也有。
文件命名都挺直观,比如家乡.html
、勋章.html
,你一看就知道是啥内容,这种命名习惯做项目时候有用。
虽然没写 JS,但你要是想加点交互,可以顺手加个script.js
。比如表单提交验证、弹窗提示,写点document.querySelector
的操作也能派上用场。
如果你是前端初学者,想练 HTML 和 CSS 排版,这包东西还挺合适的。顺带推荐几个不错的博客模板资源:
如果你也在做类似的网页设计作业,不妨从这些文件开始研究下结构和命名方式,练熟 HTML 骨架,再动 CSS 皮肤,效果提升快。
下载地址
用户评论