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

做一个前端网页需要用到哪些技术(前端学习第二天)(1)

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

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

做一个前端网页需要用到哪些技术(前端学习第二天)(2)

我这个是用第二种方法生成的,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标签的作用是将字体设置为斜体。

标签是可以嵌套的,例如:

做一个前端网页需要用到哪些技术(前端学习第二天)(3)

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

做一个前端网页需要用到哪些技术(前端学习第二天)(4)

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

做一个前端网页需要用到哪些技术(前端学习第二天)(5)

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

,