整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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

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

声明文档类型

  • <!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标签的纯文本文件

网页制作离不开浏览器制作网页工具

浏览器推荐【谷歌浏览器】或【火狐浏览器】

制作网页工具用电脑自带的【记事本】即可

六步即可学会最基础的网页制作!

第一步

右击桌面,选择新建,选择文本文档

第二步

打开新建的文本文档,输入以下内容(建议照敲一遍)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>

<body>
</body>
</html>

上面这些内容就是超文本标记语言,也称为HTML,现在HTML已经发展到第五代——HTML5,上面这些HTML5代码是帮助我们写出网页的基础。


第三步

右击文档重命名,修改文件后缀,将文件扩展名修改为.html


什么浏览器打开就会出现什么浏览器图标

如果你看不到文件的扩展名那么就打开此电脑(我的电脑),在菜单栏查看勾选文件扩展名即可。

第四步

双击打开它,你会发现一片空白。


但并不是什么都没有,上图中箭头指的那一串字母就叫URL,也称“统一资源定位器”。因为这个文件只是本地文件,所以它现在的作用是定位你的文件存放位置,显示文档地址,说明文档放在什么地方。

第五步

忍受不了空空的感觉,那么就开始添加一些东西吧!

右击选择打开方式,选择用记事本打开

点击其他应用可以看到记事本

试试看把标题改成“这是一个标题”,按快捷键ctrl+s保存

刷新一下浏览器,于是标题就变成了“这是一个标题”

那么我们就可以知道,修改<title></title>里面的内容可以改变标题;同时<title>标签是<head>标签中唯一要求包含的东西。

第六步

一鼓作气,再添加一些内容吧!

在<body></body>这一对标签里面加上这样一段话:

<p>Hello</p>
<p>World</p>

然后保存刷新


Hello World

恭喜你,你已经学会了最基础的网页制作了。

<p>这是什么意思呢?

这些被称为标签,上面出现尖括号的都属于标签,它们通常都是成对的,由开始标签和结束标签(结束标签加上斜杠)构成一组标签,例如<title></title>、<p></p>。

<p>标签定义段落,我们写文章一般是敲一下回车就换一行,但是网页不一样,你敲多少个回车都是不被识别的。

<p>有志者,事竟成,破釜沉舟,百二秦关终属楚;


苦心人,天不负,卧薪尝胆,三千越甲可吞吴!</p>
<p><p></p>

可以看到上面的一段话,敲多少个回车都没有用,而下面的一段话,用两个<p>标签就换行了。

TML5是一种标记语言,用于创建和呈现网页内容。与早期的HTML版本相比,HTML5具有许多新的功能和改进,可以更好地支持动态内容、多媒体、图形和互动性。在本文中,我们将讨论如何使用HTML5制作网页,以及HTML5与旧版本HTML的区别。

首先,让我们了解一下HTML5的一些主要功能和优势。HTML5具有以下特点:

1. 语义化标签:HTML5引入了一些新的语义化标签,例如、、、等。这些标签的使用可以增强网页的结构并提高搜索引擎的可读性。

2. 多媒体支持:HTML5内置了对多媒体的支持,例如和标签,可以在网页上直接播放视频和音频文件,而无需使用第三方插件。

3. Canvas绘图:HTML5引入了元素,允许开发者通过JavaScript在网页上绘制图形和动画。这对于创建复杂的图表、可视化效果和游戏非常有用。

4. 本地存储:HTML5提供了几种本地存储方法,例如localStorage和sessionStorage。这些方法可以在客户端存储数据,使得网页可以更快地加载和响应用户的操作。

5. 表单增强:HTML5为表单提供了许多新的输入类型和属性,例如日期、时间、颜色、URL等。这些功能减少了对JavaScript的依赖,在客户端验证和收集用户输入数据时更加方便。

现在,让我们看看如何使用HTML5制作网页的基本步骤。

步骤一:创建HTML文档结构HTML5的网页结构包括、和等标签。在标签中,可以设置网页的语言属性()和字符编码()。在标签中,可以添加网页的标题()和其他元数据(标签)。在标签中,可以编写网页的内容。

步骤二:使用语义化标签为了增强网页的结构和可读性,应尽量使用语义化标签。例如,标签用于网页的标题和导航栏,标签用于网页的导航链接,和标签用于划分网页的内容部分。

步骤三:插入多媒体使用、和

等标签插入多媒体内容。例如,使用标签可以插入视频文件,并设置其属性(例如src、width、height)来指定视频的来源和尺寸。

步骤四:绘制图形和动画使用标签和JavaScript绘制图形和动画。通过在标签中指定宽度和高度,并调用JavaScript函数绘制图形,可以在网页上显示自定义的图形和动画效果。

步骤五:使用本地存储使用localStorage和sessionStorage等方法,在客户端存储数据。通过调用JavaScript的API,可以将数据存储在浏览器中,并在需要时读取和更新数据。

步骤六:优化网页性能使用HTML5的新功能来优化网页性能。例如,使用新的表单输入类型和属性可以在客户端验证和收集用户输入数据,减少对服务器的请求和响应时间。

现在,让我们来了解一下HTML5和HTML的区别。

HTML5是HTML的第五个版本,是对以前的HTML版本进行的改进和扩展。与HTML4相比,HTML5具有许多新的功能和语义化标签,使开发者能够创建更现代、丰富和交互性的网页。

以下是HTML5和HTML的一些区别:

1. 标签语义化:HTML5引入了许多新的语义化标签,如、、、等。这些标签增强了网页的结构和可读性,有助于搜索引擎优化和可访问性。

2. 多媒体支持:HTML5内置了对多媒体的支持,如和标签,可以在网页上直接播放视频和音频文件。而在HTML4中,需要使用第三方插件(如Flash)来实现相同的功能。

3. Canvas绘图:HTML5引入了元素,允许在网页上通过JavaScript绘制图形和动画。而在HTML4中,图形和动画的创建通常依赖于第三方插件或JavaScript库。

4. 本地存储:HTML5提供了localStorage和sessionStorage等方法,在客户端存储数据。这使得网页可以更快地加载和响应用户的操作。相比之下,HTML4需要通过服务器来存储和获取数据。

5. 表单增强:HTML5为表单提供了新的输入类型和属性,如日期、时间、颜色、URL等。这减少了对JavaScript和服务器的依赖,提高了用户体验。

总结起来,HTML5相对于HTML4具有更多的功能和改进,使得开发者可以创建更现代、丰富和互动性的网页。它提供了语义化标签、多媒体支持、Canvas绘图、本地存储和表单增强等功能,为网页开发提供了更多的选择和可能性。