当前位置：首页 > 探索

如何用html制作网页

一个网页文件，何用本质上就是制作一个带 `.html` 后缀的纯文本。你用记事本写两行字，网页保存成 `index.html`，何用用浏览器双击打开，制作那玩意儿就是网页网页。所以第一步不是何用装什么高大上的软件，而是制作搞清楚这个后缀名到底在干什么。 打开记事本，网页敲下这段代码： ```html 我的何用第一个页面

你好，世界

这是制作我用手打的代码。

``` 保存时，网页文件名写 `index.html`，何用编码选 UTF-8。制作双击打开，网页浏览器里出现标题和一行字。就这么简单。你不用理解每一行的含义，先把这个流程走通，后面全是往这个骨架里填肉。 那这些标签到底在说什么？`` 是根，告诉浏览器“从这里开始是网页内容”。`` 里装的是给浏览器看的信息，比如字符编码 `charset="UTF-8"`，这行不写，中文可能变成乱码。`` 里才是给用户看的实际内容。`

` 是标题，`

` 是段落。标签要成对出现，`

` 开，`

` 闭，就像开关。 我自己第一次写的时候，把 `

` 写成了 `

` 没关，结果后面所有字都变成了标题大小。浏览器不报错，它只是默默地把你的错误渲染成另一个样子。这是新手最抓狂的地方——没有报错提示，只有视觉上的“不对劲”。所以你得养成一个习惯：写一个开标签，立刻补上闭标签，再往中间填内容。 光有标题和段落不够，网页要能跳转。用 `` 标签加链接： ```html 点我去别处 ``` `href` 是属性，指定目标地址。属性写在开标签里，用空格隔开。这里有个小坑：`href` 里写 `https://` 开头才是外部链接，如果漏了协议头，浏览器会以为你要跳转到自己网站下的某个路径，结果报 404。我见过不少初学者在这儿卡半小时，就为少打了几个字符。 图片也类似，`图片说明`。注意 `img` 是自闭合标签，不需要 ``。`alt` 属性很重要，图片加载失败时显示的文字就是它，对无障碍访问也有帮助。 接下来是结构。一个页面不能只有一堆元素堆在一起，你得用 `
` 把它们分组。比如顶部导航、中间文章区、底部版权栏。`
` 就是块级容器，相当于一个盒子，你往里面扔什么，它就装什么。但光有盒子不够，你得给它排位置，这时候引入 CSS。 CSS 不用单独学，先内联用一下。在 `` 里加个 ` ``` `.nav` 是类选择器，意思是“所有 `class="nav"` 的元素都应用这些样式”。`background-color` 改背景色，`padding` 是内边距，`margin: 0 auto` 让块居中——这是最常用的布局技巧，没有之一。 把 `
` 套在导航内容外面，整个区域就有了灰色背景和 10 像素的内边距。你会立刻看到视觉上的变化，这种即时反馈是写 HTML 最上瘾的地方。改一个数字，刷新页面，布局就动了。 到这一步，你已经能做出一个单页静态网页。但别急着学 JavaScript，先把 HTML 和 CSS 的基础打牢。试着做一个自己的个人介绍页，要求就三条：有一个标题、一段自我介绍、一张图片。用 `
` 分两栏，左边图片右边文字，用 CSS 的 `float` 或 `flex` 实现。`flex` 更现代，推荐直接学，`float` 是老古董，但网上旧教程到处都是，你看到别慌，知道那是历史遗留就行。 最后说个真实案例。我帮朋友改过一个页面，他用了 `` 这种 90 年代的标签，浏览器虽然能显示，但渲染效果在不同设备上完全不一样。我给他换成 `

` 加 CSS 的 `font-size`，问题立刻解决。这说明什么？HTML 负责语义，CSS 负责表现，两者分开才灵活。你写 `

` 是告诉浏览器“这是主要标题”，至于标题多大、什么颜色，那是 CSS 的事。混在一起，后期维护会想砸电脑。 所以别急着背标签，先把“结构”和“样式”分家的思路理清。你写的每个标签，都是在给内容下定义。浏览器拿到这个定义，再套用 CSS 的规则去画出来。这个模型一旦在脑子里立住，后面学什么框架都顺。

分享到：

相关推荐


最近发表
随机阅读
搜索
友情链接