整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頁開發設計是在面試創新實驗室時面試官給的二面試題，讓自己設計實現一個簡單的網頁。所以我決定來做一個邀請函網頁，并將開發過程寫在博客上供有需要的朋友們查看。
網頁開發工具有很多，我使用的是對新手較為友好的Dreamweaver，其優點在于簡便、直觀、功能豐富，簡稱為“傻瓜化”。下載請點擊這里。
1.1 創建首個HTML5頁面
在準備好的開發工具中，首先輸入第一行HTML代碼，如下：
<!doctype html>
接下來，我們需要為頁面構建最基本的結構框架。首先要建立最外側的圍“圍墻”，來囊括整個頁面，這需要使用到< html >標簽，后續所有頁面內容都卸載這對標簽之內。而圍墻之內又分為“頭”和“身體”兩部分，分別用< head >和< body >標簽來指定。
<html> <head> </head> <body> </body> </html>
< head >類似“身份證”，里面需要兩項基本信息，一項是“名字”和“語言”。
正如每個人都有一個名字，< head >中唯一必須的元素就是< title >，即頁面的標題。此外，還需要標注“語言”來使瀏覽器正確解讀我們的頁面而不會出現亂碼
<head> <meta charset="UTF-8"> <title>HTML5學習邀請函</title> </head>
< body >標簽中則包含了所有要呈現給瀏覽者的內容信息。
<head> Let's Learn HTML5 </head>
.
1.2 增加必要的頁面元素
為了對頁面內容加以充實，我們使用標題標簽。在HTML的各種標簽中，標題標簽有六個，按從大到小的層次結構為< h1 >到< h6 >。在這里我們就用< h1 >。
<body> <h1>Let's Learn HTML5</h1> </body>
接著要添加說明文字。說明文字放在段落標簽< p >里。
<body> <h1>Let's Learn HTML5</h1> <p>發揮您的美感和想象力，探索Web開發的無限可能性，先誠邀您一同踏上HTML5的學習之路。</p> </body>
最后是添加按鈕。按鈕的實質是文本鏈接，單擊后跳轉到某個URL。鏈接的標簽為< a >，跳轉的URL可以用該標簽的href屬性來指定，單擊跳轉到href所指”界面。
<body> <h1>Let's Learn HTML5</h1> <p>發揮您的美感和想象力，探索Web開發的無限可能性，先誠邀您一同踏上HTML5的學習之路。</p> <a href="invite.php">邀您參加</a> </body>
1.3 頁面中看不見的代碼
頁面中加入區塊，可以將各種標簽放入不同的內容區域中，可以是頁面結構變得井井有條，便于后續的頁面美化。而此次使用的就是通用區塊< div >。修改代碼如下：
<body> <div> <h1>Let's Learn HTML5</h1> <p>發揮您的美感和想象力，探索Web開發的無限可能性，先誠邀您一同踏上HTML5的學習之路。</p> <a href="invite.php">邀您參加</a> </div> </body>
此外，區塊還可以進行命名，我們以便直接對應到這個區塊。添加一個id屬性，命名為container：
<div id="container"> <h1>Let's Learn HTML5</h1> <p>發揮您的美感和想象力，探索Web開發的無限可能性，先誠邀您一同踏上HTML5的學習之路。</p> <a href="invite.php">邀您參加</a> </div>
2.1 添加頁面背景
背景圖片要放置在和 index.html相同的路徑下。css樣式代碼可以指定各種頁面元素的呈現形式，但是在創建css樣式代碼之前，還需要在頭部創建style元素來作為樣式的容器。
<head> <meta charset="utf-8"> <title>HTML5學習邀請函</title> <style type="text/css"></style> </head>
添加背景需要創建background樣式：
<style type="text/css">
body{background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)}
</style>
這是網頁的預覽圖，有沒有發現什么問題？網頁背景圖片沒有和網頁的大小相匹配，出現了兩張或好多張圖片一起填充網頁背景的情況。這是因為圖片分辨率和瀏覽器的顯示分辨率不同，因此要使圖片根據瀏覽器的分辨率進行縮放。這就需要設置background屬性在橫向和縱向上的屬性，使其充滿全屏。
<style type="text/css">
html,body{height: 100%;}
body{
background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)center center;
background-size:cover;
}
</style>
想要改變字體顏色的話，需要使用color屬性：
html,body{
height: 100%;
color: #ffffff;
}
2.2 調整區域位置
調整區域位置在網頁設計中很重要，就想寫微信推文，一個好的排版總能讓人心情愉悅想要繼續讀下去，網頁也一樣，不能總是把東西都堆在一塊，或者所有頁面千篇一律。
在這個頁面上，我想讓內容居中顯示，于是通過設置container這個容器（就是前面的id為container的div），使其寬度為100%，即橫向充滿整個屏幕，然后設置其中的文字居中：
#container{
width: 100%;
text-align: center;
}
*在創建css樣式時，id類型的選擇器需要使用“#”來定義。
之后需要變成垂直居中，先對container的父級，即頁面的body做些屬性定義，然后通過改變top屬性來實現：
body{
background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)center center;
background-size:cover;
margin: 0;
padding: 0;
position: relative;
}
#container{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
}
要控制container的top屬性，就要使container的定位方式為“絕對定位”，而這又需要body（container的父級）為“相對定位”。
top: 50%;使得container的頂部位于整個頁面的50%位置。
不過要使得內容區塊整體居中，還要使container向上移動其高度的一半。但問題在于container的高度是隨著后續的字體、按鈕樣式而不斷動態變化的值，所以不可以直接設置確定值，需要設置transform屬性，設置其translateY的數值，使其在Y軸上移動-50%，即向上移動其高度的一半而無需聲明container具體多高。代碼如下：
#container{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
-ms-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-o-transfrom:translateY(-50%);
}
這里多次重復定義是因為，不同瀏覽器對于transform屬性的支持并不相同，為了使得頁面在各種瀏覽器下都能夠正常顯示不得不這么做。
2.3 調整字體和字號
考慮到不同電腦上字體庫的問題，可能同一個字在不同電腦上顯示不同或生僻字不能顯示，需要設置font-family屬性為sans-serif，即系統默認的無襯線字體;
html,body{
height: 100%;
color: #ffffff;
font-family: sans-serif;
}
接下來要調整文字大小，將h1標題的字號設置為了更大的54像素，并且小寫變大寫：
h1{
font-size: 54px;
text-transform: uppercase;
margin-bottom: 20px;
}
設置說明文字的樣式，使段落文字字號更大，且拉開距離，代碼如下：
p{
font-size: 21px;
margin-bottom: 40px;
}
?后記：對于大部分轉行的人來說，找機會把自己的基礎知識補齊，邊工作邊補基礎知識，真心很重要。"我們相信人人都可以成為一個IT大神，現在開始，選擇一條陽光大道，助你入門，學習的路上不再迷茫。這里是北京尚學堂，初學者轉行到IT行業的聚集地。"
lt;a>標簽是常用的標簽之一，今天就一起說說這個<a>標簽，不足之處，還望指正。
<a>標簽的作用：鏈接、下載、錨點等。其中最為重要的屬性為href.
鏈接是其最基本的功能，例如：
<a href="#">這是一個鏈接</a>
<a href="##">這是一個鏈接</a>
那么這時候就會產生一個鏈接指向#或者##
第二個屬性target
<a href="#" target=“_blank”>這是一個鏈接</a>
這時候，點擊鏈接時，會在一個新的頁面打開，那么target有哪些值呢？如下：
_self -- 在當前窗體打開鏈接,此為默認值
_blank -- 在新窗口中打開鏈接
_parent -- 在父窗體中打開鏈接（我喜歡用name）
_top -- 在當前窗體打開鏈接，并替換當前的整個窗體(框架頁)（跳出框架）
我們做的都是文字鏈接，當然也可以生成圖片鏈接：
<a href="#"> <img src="#" ></a>
下載功能：
<a href="#">下載</a> 此時#為文件地址
錨點功能：
<a href="#錨點名字">錨點</a>
<h2 name="錨點名字">標題</h2>
此外，<a>標簽還有偽類，偽類選擇符包括：
① a:link：未訪問鏈接 ,如 a:link {color:blue}
② a:visited：已訪問鏈接 ,如 a:visited{color:blue}
③ a:active：激活時（鏈接獲得焦點時）鏈接的顏色 ,如 a:active{color:blue}
④ a:hover：鼠標移到鏈接上時 ,如 a:hover {color:blue}
一般a:hover和a:visited鏈接的狀態（顏色、下劃線等）應該是相同的。
前三者分別對應body元素的link、vlink、alink這三個屬性。
【重要】四個“狀態”的先后過程是：a:link ->a:visited->a:hover ->a:active。另外，a:active不能設置有無下劃線（總是有的）。
：為什么SEO人員要學會HTML代碼標簽的使用?
請注意，會建站不一定意味著懂HTML，現在隨便找個CMS或者博客程序(如WordPress、Z-blog)，一個毫無HTML常識的菜鳥都能輕易建站，所以我要強調“一定要懂HTML”。或許很多人在網上看到或者聽某家SEO培訓機構說：“SEO很簡單，你在我們這里學會了，以后直接去指導別人就可以，所以學SEO不用懂HTML”，不要以為我危言聳聽，我確實碰到過很多朋友走進了這樣的誤區，在這里我想說：“學SEO不懂HTML，那你就不用學了!” HTML是SEO不可或缺的一部分，關鍵詞布局、策略的調整都離不開HTML，網站制作時的諸多修改、調整也要用到HTML，想學SEO，先學會HTML吧!
① 首先我們大體來介紹了網頁的基本結構，網頁里面標簽分為head和body標簽，翻譯起來很容易理解。head是頭部，里面包含著title(網頁標題)、keyword(關鍵詞)、description(網頁描述)這三個基本標簽，可能還有css以及JS等在head標簽里面，這里我們先不用管他。而我們一般SEOer主要工作就是做網頁標題、關鍵詞、描述這幾個塊，這是不得不做的，但是主要內容都還在body里面，其實這個我們可以把它理解為身體，一個比較成熟的網頁要求五臟六腑俱全。所以里面有很多模塊和功能，現在比較流行的CSS+DIV，代碼比較簡潔，美觀，表現力比較強，所以table也漸漸的退出市場，因為對SEO來說table(表格)占用內存比較多，是DIV的10倍以上，所以我們也能不用最好不用。
② 做SEO還必須知道代碼的規范標準，現在通過W3C標準很難，因為網站很難不出現錯誤，其實細小的錯誤肯本沒有影響，只要不多搜索引擎也比較容易接受。但是能不錯誤就不要出現，網頁前面最好申明標準體系，一般我們中國大陸的編碼是GB2312和UTF-8，一般后者用的比較多，這個我們先不解釋。
③ 還有就是現在搜索引擎可以讀懂JS代碼，所以對網站影響越來越小，不要在影響用戶體驗的情況下而去除JS，這是不明智的。特別是谷歌，幾年前就可以讀懂一般性JS代碼，就算是導航也沒有影響，但是這里我們也不推薦用JS寫導航.如果朋友們現在想學Html知識了，我向大家推薦去下本HTML標簽的電子書，里面的例子很多，也很詳細，非常適合初學者。如果你想成為一名合格的優化，那么就去學下HTML，不然程序員會認為你什么都不懂在瞎指揮。
SEO人員應該都知道HTML語言是什么?那么我就來給大家寫一篇SEO和HTML的文章，所以本文就為廣大的seo人員介紹SEO必須懂的HTML代碼標簽。總體來說，SEO人員大部分情況下并不需要直接參與網站程序的編寫，所以，我們只需要能看懂一部分html代碼，并且在工具的輔助下，能夠增、改、刪這9個標簽就可以了。
二：SEO人員必須懂的HTML語言代碼
1．標題標簽：如果我們不知道網頁的標題是由哪個標簽來控制的，是一件很失敗的事情。曾與一位朋友交流其站點的優化問題，我對他說頁面的標題要優化一下，標題的寫法最好是“文章標題-欄目名稱-網站名稱”的結構，結果他將正文的標題修改了。這充分說明這位朋友并 懂標題標簽，所以不知道如何去修改頁面標題。而頁面標題對于搜索引擎來說是非常重要的，所以我們 作為SEO人員，一定要會使用標題標簽。
2．頁面關鍵詞標簽：作為SEO人員，所有的工作內容都是在做與關鍵詞相關的工作，所以我們千萬不能將這個標簽忽略了。對于常見有兩種錯誤：
a. 沒有使用頁面關鍵詞標簽：通過源碼，我們可以發現很多網站其實沒有這個標簽。沒有此標簽的網站，大部分情況是因為CMS程序不支持，而有些則是因為不明 白它的作用，所以沒有添加。不論是那種情況，我們都可以通過某些方法來改進。
b. 關鍵詞分隔符號使用不正確：關鍵詞內容的正確形式是【content=“關鍵詞，關鍵詞2,……”】，關鍵詞與關鍵詞之間使用英文半角逗號分隔開來，而不是使用下劃線、豎線或者空格等符號。
3．頁面描述標簽：此標簽可以看著是定義文章的主要內容，與標題一樣，搜索引擎會將其顯示在搜索結果頁中。所以我們千萬不要忽略，甚至于我們可以利用這一點來將一些促銷和利好信息展示給搜索者，描述的寫法可以參見我們之前的文章。
4．默認地址標簽：在某些情況下，我們的網站會被某些人惡意復制，造成網站排名下降和權重流失等損失，為了在一定程度上防御這種復制帶來的后果，很 多SEO人員提出在外鏈接中使用絕對url的方法。實際上除了使用絕對地址，我們還可以使用默認地址標簽，使用了默認地址標簽的頁面，其頁內所有的相對url地址所指定的url作為基準，進行鏈接。同時，在此也提醒一下建站的朋友，如果使用了默認地址標簽，在修改各種包含文件--如css,js等引用文件--的時候，要去掉默認地址標簽，否則修改本地文件是無效的，因為它會默認去調用href指定的文件。
5．文字加粗標簽：這兩組html標簽在 視覺效果上都是讓文字加粗，都有強調的作用，它會告訴用戶和搜索引擎，這部分內容在本頁面是很重要的。所以我們在頁面中可以將重要的詞組--一般是關鍵 詞，進行或加粗強調。但是要避免通篇都是加粗，或者 通篇都沒有詞組被加粗，這兩種方式都是不可取的。大部分情況下，使用或者效果是類似的，有專家 提出使用字符更少、更能節約帶寬，所以建議將都換 成，但顯然這個理由并不是那么充分和吸引人，幾個字符，對于現在的福鼎網絡速度來說，完全可以忽略不計。
6．內容最大標題標簽：被包含的內容，搜索引擎會給予很高的權重，所以作為SEO人員，一定要重視這一點。并且要記住：是用來定義正文內容最大標題，而不是頁面標題，不要與混淆。同時，一個頁面只允許有一個標簽，否則會被認為是作弊--目前來說是這樣的，HTML5擁有更強的功 能，允許一個頁面有多個標簽，但目前還未完全被搜索引擎所支持，所以我們堅持在一個頁面使用一個是沒錯的。
7．內容次級標題標簽：一篇文章，除了標題，還會有各種次級段落標題，比如本文：就存在多個次級標題。一般建議，頁面必須有和標簽，和標簽不作要求，也不建議使用及更次級的標簽，因為作用不大，但 不阻止使用，因為他們是文檔的標準標簽，即使無用，也無害。
8．超鏈接標簽：作為SEO人員，這個HTML標簽是必須懂的，在互聯網中超鏈接標簽可以說是靈魂一般的存在，如果 沒有超鏈接標簽，網站將失去意義。不管我們是做錨文本，還是做圖片鏈接，都需要使用它。這里我們要注意它的兩個屬性，一個是【target】，它決定了鏈接以何種方式打開，一般站內鏈接會被定義為在當前頁面打開，外部鏈接被定義為在新窗口中打開。另外一個屬性是【rel】，其最讓SEO人員關注的就是【Nofollow】值，因為它代表不傳遞權重。對內可以集中權重，不使其分散到無意義的頁面;對外，可以防止權重流失和避免被騙友情鏈接。
9．圖片標簽：圖片標簽我們要注意的是其【alt】屬性，因為搜索引擎并不認識圖片，而【alt】屬性則在大概意義上告訴了搜索引擎此圖片的內容。 所以，作為SEO人員，一定要重視【alt】屬性的使用，對每一幅具有實際意義的圖片都應該加上【alt】屬性，并為其指定內容。在大多數瀏覽器中，定義 了【alt】屬性內容的圖片，當鼠標懸停在圖片上的時候，會顯示【alt】屬性值：鼠標懸停顯示【alt】屬性值
另外兩個屬性【widht】和【height】用來定義圖片的寬度和高度，大部分情況下，很多程序編寫人員都是忽略，讓瀏覽器自行判斷圖片的大小。 這種做法在圖片的顯示上面是沒有什么錯誤的，但是忽略【width】和【height】屬性，會增加圖片顯示的時間，所以我們應該主動給圖片加上寬度和高 度屬性，并指定其值。
關注本頭條（常州姜東），帶您詳細了解SEO培訓優化十四步：（如何做出一個好的SEO效果）
1、做SEO優化第0步:你真的了解SEO優化嗎？淺談網站優化之用戶體驗優化
2、做SEO優化第一步:初步了解SEO的作用
3、做SEO優化第二步:背熟所有SEO基礎名詞
4、做SEO優化第三步:學習了解HTML基礎知識
5、做SEO優化第四步:學會搭建一個個人網站（cms系統）
6、做SEO優化第五步:定位目標關鍵詞和長尾關鍵詞
7、做SEO優化第六步:設置Title、keywords和Description
8、做SEO優化第七步:如何選擇網站程序模版?
9、做SEO優化第八步:如何設置網站目錄優化?
10、做SEO優化第九步:如何設置頁面內容優化
11、做SEO優化第十步:內容源找尋和網站更新維護方法
12、做SEO優化第十一步:如何設置外部鏈接優化
13、做SEO優化第十二步:網站優化推廣方案
14、做SEO優化第十三步:一定要最好用戶體驗優化
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
