現在位置:主頁 > SEO技術分享 > html網頁模板制作入門教程

html網頁模板制作入門教程

阿里瑞SEO2021年04月10日SEO技術分享

簡介HTML(Hypertext Markup Language),即超文本標記語言,是一種用于描述網頁文檔的標記語言。 HTML是學習網頁制作的基礎,...

HTML(Hypertext Markup Language),即超文本標記語言,是一種用以敘述網頁頁面文本文檔的標記語言。

  HTML是學習網頁制作的基本,制做簡易,可是功能齊全。本文是對于新手學習網頁制作的,簡明扼要,通俗易懂。

  一、應用 html的基本上標準,只做第一個網頁頁面。

  <html>

  <head>

  <title>我的第一個網頁頁面</title>

  ………………………..

  </head>

  <body>

  ………………….

  </body>

  </html>

  html語言表達以< >逐漸,以</ >完畢, 稻城SEO,大家稱作一對標識。每一個網頁頁面全是由成千上萬對標識構成的,大部分網頁頁面全是依照上邊的這一文件格式來程序編寫的,在句號的地區我們可以加上一些別的的款式,豐富多彩大家的網頁頁面。

  最先,拷貝上邊的編碼到一個文本文檔,隨后另存text.html文檔,就變成一個網頁頁面文本文檔。

  隨后,以文本文檔方法開啟,在<body>中間再加上“熱烈歡迎進到我的第一個網頁頁面”,儲存。

  最終,用打開瀏覽器這一文檔,你能見到那樣的設計效果圖:

  

html網頁模板制作入門教程

  二、在網頁頁面中加上連接

  記事本格式開啟剛剛的文檔,將“熱烈歡迎進到我的第一個網頁頁面”改成“進到淘寶網”,隨后在的“進到淘寶網”前后左右再加上標識<a> ,變成 <a href=https://www.yuntask.com/expert/blog/”http:/www.taobao.com/”>進到淘寶網</a>,儲存。

  這就是我們平常網上見到的網頁鏈接了,隨便轉換網站地址就可以到不一樣的連接。

  三、 網頁頁面構造

  假如你網上時留意得話,實際上網頁頁面全是分層的,如下圖所示:

  

html網頁模板制作入門教程

  自然這僅僅一個大概的構造,你要能夠 依據必須分為許多塊,分層主要是為了更好地改動層面及明確分別的主要表現款式。

  這關鍵根據<div></div>標識來完成,下邊我還在 “主頁”再加上<div>標識試一下:

  <div>

  <a href=https://www.yuntask.com/expert/blog/”b.html”>主頁</a>

  </div>

  儲存,在開啟試一下,哪些實際效果呢?

  是否或是和改動以前一樣呢,下邊大家為其再加上一些裝飾:

  <div style=”width:201080x;height:100px;border-style:solid;” >

  在運作,大家標識的這一塊就以藍色背景表明出去啦!

  在添加許多的<div></div>塊就可以將網頁頁面大卸八塊了,呵呵呵,隨后在你每一個塊里放入你要放的物品就可以。

  自然,許多個<div>都再加上style=””,假如這種style設定都類似得話,大家每一個設定就太麻煩了,大家一般將style這種放到此外的.css文件(操縱網頁頁面中各標識的表明款式)中,隨后開展必須啟用的地區開展啟用,下邊來試一下

  新創建一個文本文檔,重新命名為c.css隨后開啟,載入:

  #header{width:201080x;height:100px;border-style:solid;}

  并將其在a.html里刪除

  隨后再</head>前添加 <link rel="stylesheet" type="text/css" href=https://www.yuntask.com/expert/blog/"c.css" />

  也就是將c.css這一文檔引進進去。將css放進獨立的文檔益處是:假如許多地區都引入了這一款式,大家只需改動這一個地區,就所有都轉變 了,要不然大家得手動式改動每一處,不利中后期維護保養。

  最終將a.html的<div> 改成<div id=header>

  實際效果是否和以前一樣呢?

  類似,到這兒,應當“不容易寫詩也會吟”了吧,本文主要是為了更好地讓大伙兒大體上對html有一個掌握,了解大約是什么原因,也有許多標識都沒牽涉到,這一就想要你找本網頁制作的書看來一看,背一背了。

評論

說點什么吧
  • 全部評論(0
    還沒有評論,快來搶沙發吧!