HTML:超文本标记语言
1.简介
Hyper Text markup Language是一种标识型的语言,不是编程语言,不能使用逻辑运算。通过标签将网络上的文档格式进行统一,使分散的Internet(网络资源)连接为一个逻辑整体。
超文本:可以包含图片音频视频等等。一般通过超链接进行信息关联。
标记:也就是标签。用<>包裹具有一定含义的内容,比如:< strong >…。。。。。< /strong >。这里为了可以显示,所以我加了4个空格,实际上,/前面是不能加空格的
开始我们的第一个网页吧
<html>
<head>
<meta charset="utf-8"><!--用来设置汉字编码-->
<title>我的第一个html网页</title>
</head><!--头部主要用来完成一个网页的相关设置-->
</html>
当我们发现我们使用软件编辑第一个网页打开之后是一个乱码之后,我们一定非常惊讶
不用担心,我们稍微做一些些小改变就可以了
<html>
<head>
<meta charset="utf-8"><!--用来设置汉字编码-->
<title>我的第一个html网页</title>
</head><!--头部主要用来完成一个网页的相关设置-->
</html>
你们可能也注意到了,html的注释格式和C语言可不一样,格式如下:
<!--注释内容-->
你看现在,就正常了。
接下来,我们告诉大家如何在不付费的情况下,让我们的网站排在稍微前面一点。
<html>
<head>
<meta charset="utf-8"><!--用来设置汉字编码--> <!--meta是元的意思,用来完成对应设置-->
<!-- 以下两行的设置,可以让我们在不付费的情况下,让我们的网站尽可能在用户搜索的时候排在前面一点点。-->
<meta name="keywords" content=""><!--设置网站搜索的关键字-->
<meta name="description" content=""><!--设置网站的描述内容-->
<title>我的第一个html网页</title>
</head><!--头部主要用来完成一个网页的相关设置-->
</html>
这里面的内容需要你们根据自己的网站的性质,自己定义。
好,接下来,我们注意到我们的网站的图标是webstorm的图标,那我们肯定是要更换的。
那么我们应该怎么做呢?
首先我们输入:
这个就是链接:图标 的意思。
link:favicon
输入之后,我们只要按tab键,就可以变成这样了:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
然后我们来分析一下这段代码:
这就是我们这段代码的结构分析,接下来,我们自己制作一个代码,放进去就行了
<link rel="shortcut icon" href="https://oss.tool.lu/cache/202103/08/1754484fwq7ebjmwk4wf45.png.icon.ico" type="image/x-icon">
我的整段代码就是这样的。然后,我们刷新一下我们的网页,就可以看到我们的网页图标发生了改变。
我的变成这样了,说明我们的操作是有效的。
或者我们再来试一下,我们本地的图片能不能用来设置图标呢?
<link rel="shortcut icon" href="C:\Users\zbossz\Desktop\我的图标.png" type="image/png">
好像还是有点毛病的.
那我们先不管,我们先看一个新的标签
<style>/*书写样式的地方*/
</style>
link:css
tab之后会变成这样:
<link rel="stylesheet" href="style.css">
还有就是主体标签:
<body>
</body>
这下整个网站的整体就定义完成了,接下来,我们在html标签之前,插入一个标签:
<!DOCTYPE html>
首先,!的意思是声明;这一整行的代码的意思是:下面的文档标签将以html5的规范去解析。