专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

前端学习第二天——制作我们的第一个网页

ins518 2024-10-11 16:42:55 技术文章 13 ℃ 0 评论

今天我们来制作我们的第一个网页，我们先在桌面新建一个记事本文档：

新建之后重命名，将拓展名更改为html（就是点后面的txt改成html）然后拖到sublime图标上打开或者右键——打开方式——选择sublime。

法①打开之后可以在界面中写<html>一般编辑器都会有提示，直接按回车生成完整的html标签就行，法②如果安装了emmet插件的话直接在编辑器中输入 ! 然后编辑器会有提示，再按tab键即可生成完整的html标签（注：两种方式下生成的html标签不完全一样，此为html版本不同导致，现阶段不用在意）。

我这个是用第二种方法生成的，html语言的特点之一是标签化，就像图中的代码都是带有< >的一般开头和结尾的标签不完全一样，例如html的投标签为<html>而结束标签为</html>（有的标签是成对出现的，而有的标签不是，之后遇到会讲）。（HTML代码中所有的标点符号和字母全是英文半角状态下否则会报错）。

我们的所有html代码都要写在<html></html>他俩中间。

图中的head标签为对网页的设置（代码内容不会显示在网页中），

<meta charset="UTF-8">表示字符编码的方式，计算机是不识别汉语的，为了防止出现乱码的情况，所以要将编码的方式改为utf-8。

<meta name="viewport" content="width=device-width, initial-scale=1.0">这行代码主要是为了解决兼容性问题，写项目的时候会用到，（如果是用第一种方法生成的html标签则不会有这行代码）。

<title>Document</title>这行代码是我们网页的题目2，document可以改成我们想要的网页题目。

我们所有在网页中展示的部分都要写在body标签中。

下面我们来写我们的第一行代码。

<h1>作者最帅</h1>

<h2>作者最帅</h2>

<h6>作者最帅</h6>

<strong>作者最帅</strong>

<em>作者最帅</em>

h1是标题标签，一共有六个h标签，分别为h1,h2,h3,,,,,h6,字体由大到小。

strong标签是加粗用的，可以对字体进行加粗。

em标签的作用是将字体设置为斜体。

标签是可以嵌套的，例如：

我们可以右击，然后点 open in Browser在浏览器中打开，作者建议用谷歌浏览器，并且设为默认浏览器。


打开之后浏览器会显示如下界面：

好啦，今天就学到这里，有什么问题可以在评论区留言或者私聊我呦。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表