關于我們 RRS sitemaps 網站地圖

首頁 > SEO基礎 > SEO優化 > 正文

SEM論壇

認識基本的HTML代碼

2019-07-10 09:25:32 |  評論:0  |  點擊:  |  SEM論壇

認識基本的HTML代碼

對于seoer來說,掌握html代碼是最基本的要求(某些大神提出seoer不需要懂代碼或者程序,只需懂內容策劃即可,對此筆者不做更多辯解,只簡單的說句具體情況具體分析,誰做誰知道!)。

對于剛接觸seo的朋友來說,最想了解的問題可能是:網頁到底是怎么做出來的?今天筆者就帶大家來解開網頁的神秘面紗,通過簡單的html代碼講述頁面的大致結構。

先上圖,這是筆者剛做的頁面結構圖:

效果圖.jpg

頁面雖然簡單,但能說明頁面的結構。不管是大型網站還是中小型網站,其結構都大致如此。我們先來看下最基本的代碼框架,如圖:

html基本結構.jpg

這就是一個靜態頁面的基本結構,html代碼簡化如下

<html>

<head>

</head>

<body>

</body>

</html>

頁面內容包含在<html>和</html>之間,其中<head></head>之間的是頭部信息,包含title屬性及meta屬性等,在頁面前端顯示的內容則包含在<body></body>里。

下面再來完善代碼,讓其在前端展示出來(效果就是第一張圖),代碼自上而下分析。

1.<head></head>部分,這里重要添加了頁面標題關鍵詞、描述三個屬性(css內容下面再講),這也是seo優化非常重要的地方,html代碼如下:

<title>簡單的html代碼</title>

<meta name="keywords" content="這里是關鍵詞" />

<meta name="description" content="這里是描述" />

2.<style></style>部分,這里是頁面的樣式(css),對html代碼熟悉后可以進一步學習div+css(利用div和css對頁面進行布局),這里對css暫且不做過多解釋。

一般而言,css內容會單獨存放到一個獨立的文件,這里方面講解所以就放在了<head></head>里。

<style>

.anli_main{margin:0 auto;width:500px; color:#FFF;}

.anli_top{ width:500px; height:50px; float:left; text-align:center; background-color:#333; }

.anli_main_main{ width:500px; height:500px; float:left; text-align:center; background-color:#00F}

.anli_main_left{ width:120px; height:500px; float:left; text-align:center; background-color: #F3F;}

.anli_main_right{ width:380px; height:500px; float:left; text-align:center;}

.anli_footer{ width:500px; height:50px; float:left; text-align:center; background-color:#633 }

</style>

3.<body></body>部分,整體代碼如下,其中分為了頭部、主體、底部三個區塊,主體中又分為了左側邊欄及右側主體欄。

<body>

<div class="anli_main">

<div class="anli_top">

這里是頭部

</div>

<div class="anli_main_main">

<div class="anli_main_left">

這里是左邊

</div>

<div class="anli_main_right">

這里是主體內容的左邊

</div>

</div>

<div class="anli_footer">

這里是底部

</div>

</div>

</body>

html代碼頗為簡單,本文旨在讓大家對頁面html代碼有大概的了解,知道網頁其實并沒有想象中那么神秘。筆者認為,掌握html代碼是做好seo的基本條件,大家可以利用dreamweaver等網頁編輯工具多做練習,同時也可以學習css相關知識(建議去http://www.w3school.com.cn/css/學習),利用div+css進一步美化頁面。

基本的html代碼就介紹到這里,希望大家能熟練掌握!

關鍵字:




网球比分扳