当前位置：网站首页 > 技术文章 > 正文

前端入门——先从制作一个简单的html5网页开始

myzbx 2024-12-18 15:45 16 浏览

前端工作都是从创建一个网页文件开始的，一个最小的网页文件应该总是包含一些东西。

声明文档类型

<!doctype html>- HTML5。

网页标题

<title></title>-标题。

定义字符编码

<meta charset="utf-8">- UTF8。

定义视口的宽度

<meta name="viewport" content="width=device-width, initial-scale=1"> 针对移动设备进行优化并防止缩放或水平滚动。

包含指向自定义 CSS 和 JavaScript 的链接

css/style.css 样式文件和 js/scripts.js js文件。

使用最新的 Internet Explorer 渲染模式（可选）

<meta http-equiv="x-ua-compatible" content="ie=edge">-不是强制性的，但可能会有所帮助。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>标题</title>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="icon" href="images/favicon.png" />
  </head>
  <body>
    <script src="js/scripts.js"></script>
  </body>
</html>

其中，head 主要包含，提供有关页面的元信息标签 <meta>，比如针对搜索引擎，关键词和描述及编码类型等，网页标题，css样式文件。

一般建议，script 标签写在body 结束之前。

是不是很简单，这是一个网页的基本框架，要想制作一个内容丰富，漂亮的网页，还需要学习很多知识。

需要重点学习的几个点

meta 标签，这个标签类型很多，可以参考这里以下：

https://www.w3school.com.cn/tags/tag_meta.asp

https://www.haorooms.com/post/html_meta_ds

在HTML中使用css样式的方法有：行内式、内嵌式、外联式，而外联式又分：链接式（link）和导入式（@import）
script 脚本文件

到此，你基本已经了解了如何制作一个网页，建议能够亲手练习下，这样加深理解。

接下来，我会大概讲下，网页如何布局并填充内容，感谢您的关注。

HTML 文档类型

上一篇：付费文档怎么下载?一分钟学会这4个套路，全网任意免费复制
下一篇：「前端」HTML之结构 html基本结构

前端入门——先从制作一个简单的html5网页开始

声明文档类型

网页标题

定义字符编码

定义视口的宽度

包含指向自定义 CSS 和 JavaScript 的链接

使用最新的 Internet Explorer 渲染模式（可选）

index.html

需要重点学习的几个点

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」