tft每日頭條

 > 圖文

 > 做一個前端網頁需要用到哪些技術

做一個前端網頁需要用到哪些技術

圖文 更新时间:2024-12-16 09:24:21

今天我們來制作我們的第一個網頁,我們先在桌面新建一個記事本文檔:

做一個前端網頁需要用到哪些技術(前端學習第二天)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

好啦,今天就學到這裡,有什麼問題可以在評論區留言或者私聊我呦。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved