您现在的位置是：热点 >>正文

小白如何创建网页

热点6人已围观

简介你打开浏览器看到的每一个页面，背后都是一份纯文本文件。它叫HTML。别被缩写吓到，这东西比Word还简单——Word你得调字体、调行距、调页边距，HTML只需要你记住几个用尖括号包起来的单词。我第一 ...

你打开浏览器看到的小白每一个页面，背后都是何创一份纯文本文件。它叫HTML。建网别被缩写吓到，小白这东西比Word还简单——Word你得调字体、何创调行距、建网调页边距，小白HTML只需要你记住几个用尖括号包起来的何创单词。

我第一回写网页是建网2003年，用Windows自带的小白记事本。敲了不到十行，何创存成`.html`，建网双击，小白浏览器弹出一个白底黑字的何创页面，上面写着“你好”。建网就这么成了。没有安装任何软件，没有注册任何账号。你现在也能这么干。

打开电脑上的记事本（Windows）或TextEdit（Mac）。Mac用户注意，TextEdit默认是富文本模式，得先按`Cmd+Shift+T`切成纯文本，不然存出来的东西浏览器不认。

把下面这段原样敲进去，或者复制粘贴：

<!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <h1>早上好</h1> <p>这是我写的第一个网页。</p> </body> </html>

存文件。文件名用`index.html`，存到桌面上新建的文件夹里。注意后缀必须是`.html`，不是`.txt`。记事本保存时把“保存类型”改成“所有文件”，否则它会偷偷给你加个`.txt`，浏览器打开就是一堆代码，不是页面。

你敲的每一对标签都在告诉浏览器一件事。<h1>到</h1>之间是标题，<p>到</p>之间是段落。浏览器读到<h1>，就把里面的字放大加粗；读到<p>，就另起一段。

就这么直接。没有编译，没有构建，没有依赖。你写什么，浏览器就显示什么。

<html>、<head>、<body>这三层是骨架。<head>里放的是给浏览器看的信息，比如<title>决定了浏览器标签页上显示什么字。<body>里才是给人看的内容。你写的大部分东西都塞在<body>里面。

纯文字太干。找一张图片放在和`index.html`同一个文件夹里，假设叫`cat.jpg`。在<body>里加一行：

<img src="cat.jpg" alt="一只猫">

刷新浏览器。图片出来了。src告诉浏览器图片文件在哪，alt是图片加载失败时显示的文字。就这么两个属性，够用了。

我第一次加图片时路径写错了，浏览器显示一个裂开的图标。折腾了半小时才发现图片在另一个文件夹里。路径这事，新手必踩。记住一条：`index.html`和图片在同一个文件夹，直接写文件名就行。

网页之所以叫网页，是因为能跳。加个链接：

<a href="https://www.example.com">点我去example</a>

<a>标签里的href就是目标地址。浏览器看到它，把文字变成蓝色带下划线，点一下就跳过去。

列表也常用。无序列表用<ul>包住每一项<li>：

<ul> <li>第一项</li> <li>第二项</li> </ul>

浏览器自动给你加上圆点。有序列表把<ul>换成<ol>，圆点变成数字。不用你手动敲“1. 2. 3.”。

你会觉得默认的页面丑。黑字白底，Times New Roman字体，像上世纪的东西。想改颜色、改字体、改布局，那是CSS的活。但第一周别碰CSS。先把HTML的标签用熟，知道哪个标签产生什么结构。结构对了，样式是后面一层皮的事。

我见过太多新手一上来就复制一堆CSS框架，页面确实好看了，但问他<div>和<span>有什么区别，答不上来。那是空中楼阁。

双击那个`index.html`，浏览器打开，地址栏显示的是你电脑上的路径，不是`https://`开头。这就算本地网页。想让别人也能访问，得把它传到服务器上。GitHub Pages免费，拖拽上传就行。但那是下一步的事。

现在你手里有一个能改、能刷新、能立刻看到结果的文件。改一行字，存盘，切到浏览器按F5，页面变了。这种即时反馈，比任何教程都管用。去改吧。

Tags：