电话

0411-31978321

html网页设计有哪些基本步骤?跟着学零基础入门!

标签: 2025-10-23 

昨天刷手机看到个教做网页的广告,我寻思着反正周末闲着也是闲着,干脆自己动手试试。今天吃完早饭就坐电脑前开整了,咱从零开始哈。

第一步:新建文件夹找地方

先打开我的破笔记本,在桌面上右键戳了个新文件夹,名字就起"我的第一个丑网页"。这破名儿真贴切,后来证明确实丑得要命。

第二步:创建第一个文件

鼠标双击点进文件夹,直接右键选新建文本文档。文件名瞎敲了个"首页.txt",结果闪退两次才发现忘关杀毒软件。关掉后终于建好了,但还得改后缀名:

  • 对着文件按F2把txt改成html
  • 弹窗警告问要不要改,手一抖差点点取消

改完图标就变成浏览器图标了,双击后直接白花花一片,啥也没有很正常。

第三步:敲骨架代码

用记事本打开那个空文件,照着网图抄了五行基本框架:

  • 第一行写<!DOCTYPE html>告诉浏览器这是啥玩意儿
  • 后面包了个<html>当套娃盒子
  • 盒子里分<head><body>俩小格子
  • 在head里塞了个<title>我的土味网页</title>

保存后刷新浏览器,标签页上真出现了"我的土味网页"几个字!虽然页面还是白的,但成就感已经窜上来了。

第四步:瞎编内容

<body>里开始胡写:

  • <h1>搞了个超大字标题
  • <p>标签里敲了两段瞎编的鸡汤文
  • <ul>列了三行吹牛的话

保存完刷新一看,字全挤在左上角,段落之间没空隙,丑得眼睛疼。

第五步:挽救颜值

<head>里加了<style>标签开整:

  • body背景色改成米黄色(#ffe4b5),立刻顺眼多了
  • 给标题调成蓝色,再加了个居中显示
  • 给段落设了行高,终于不像挤在一起的蚂蚁了

调试最气人,给列表项加圆点符号时手滑写成list-style: squre;,死活不显示。后来才发现把square拼错了,改完才蹦出黑方块。

成果

折腾一上午搞出个四不像:标题歪歪扭扭居中,段落像被扯开的棉花糖,配色还是土得掉渣。但每个字都是自己敲的!浏览器标题、段落、列表都乖乖按指令排布了。建议新手别纠结美观度,能跑起来就是胜利!下次准备试试插图片,听说那个更闹心...