零基础怎么用HTML做个简单网页?手把手教你!HTML入门,零基础打造个人简单网页教程

"哎我说,现在谁还不会做个网页啊?" 前两天听见同事老张在茶水间吹牛,刚毕业的小王愣是憋得满脸通红。其实吧,咱要搞懂HTML做网页,就跟学骑自行车似的,看着难,上手就会。今天就带大家用最接地气的方式,把这事儿整明白!


​一、先整明白网页的骨架是咋回事​

你知道吗?每个网页都有个标配的"三件套"——就像人要有头有身子。打开记事本(对,就是windows自带的那个!),敲下面这段:

html运行复制
html><html><head><title>我的第一个网页title>head><body>这里放要显示的内容body>html>

保存成.html文件,双击打开就能看见浏览器里显示的字了。这里头,相当于身份证,就是展示给大伙儿看的真身。


​二、给网页穿衣服的必备标签​

  1. ​标题不能少​

    六个级别,就跟写作文的标题似的。举个例子:
html运行复制
<h1>欢迎来到我的小破站h1><h2>今日推荐h2>

这里有个坑要注意:千万别拿标题当放大镜用,人家是给搜索引擎看的。

  1. ​段落要分家​

    标签就是天然的分段符。比如:

html运行复制
<p>今天天气真好p><p>适合出去浪p>

但你要是偷懒不分段,整个网页就会变成一坨字,跟老太太的裹脚布似的。

  1. ​重点要突出​
    加粗、斜体,比用更符合现在的标准。举个栗子:
html运行复制
<strong>注意!strong>今天<em>不加班em>

这样既能让重点跳出来,又对搜索引擎友好。


​三、整点高级玩意​

  1. ​链接跳转​
    文字这个组合必须记住。比如:
html运行复制
<a href="https://baidu.com">有问题找度娘a>

要是想在新窗口打开,加个target="_blank"就成,跟开新tab一个道理。

  1. ​图片插入​
    这个标签,新手最容易栽在路径上。记住啊:
  • 同一文件夹直接写文件名
  • 子文件夹要加文件夹名/
  • 上级目录得用../
    去年我徒弟就因为路径写错,把公司logo显示成表情包,差点被开除。
  1. ​列表整理​
    买东西清单用
      ,步骤说明用
      html运行复制
      <ul><li>鸡蛋li><li>牛奶li>ul><ol><li>打开冰箱li><li>拿出食物li>ol>

      这可比用顿号看起来专业多了,就跟超市货架似的整整齐齐。


      ​四、 *** 翻车现场​

      去年有个哥们儿做企业官网,表格 *** 活对不齐。后来发现是忘了写

      ,整个页面跟车祸现场似的。这里教你们个绝招:

      html运行复制
      <table><tr><th>商品th><th>价格th>tr><tr><td>苹果td><td>5元td>tr>table>

      记住是表头,会自动加粗居中,千万别拿凑合。


      ​五、个人观点时间​

      要我说啊,学HTML就跟学做菜一样,别老盯着菜谱看,得真下锅炒两下。见过太多人抱着《HTML大全》啃半年,结果连个简单的登录框都写不出来。建议你们:

      1. 每天就学两三个标签
      2. 自己瞎改代码看效果
      3. 遇到报错先别慌,F12开发者工具能救命

      最后送你们句话:网页做丑了没关系,能用就行;代码写乱了不要紧,能跑就行。重要的是迈出第一步,剩下的,浏览器会帮你兜着!