整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頁布局對改善網站的外觀非常重要。
請慎重設計您的網頁布局。
在線實例
使用 <div> 元素的網頁布局
如何使用 <div> 元素添加布局。
使用 <table> 元素的網頁布局
如何使用 <table> 元素添加布局。
網站布局
大多數網站會把內容安排到多個列中（就像雜志或報紙那樣）。
大多數網站可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。
| 雖然我們可以使用HTML table標簽來設計出漂亮的布局，但是table標簽是不建議作為布局工具使用的 - 表格不是布局工具。 |
HTML 布局 - 使用<div> 元素
div 元素是用于分組 HTML 元素的塊級元素。
下面的例子使用五個 div 元素來創建多列布局：
實例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><divid="container"style="width:500px"><divid="header"style="background-color:#FFA500;"><h1style="margin-bottom:0;">主要的網頁標題</h1></div><divid="menu"style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</div><divid="content"style="background-color:#EEEEEE;height:200px;width:400px;float:left;">內容在這里</div><divid="footer"style="background-color:#FFA500;clear:both;text-align:center;">版權 ? runoob.com</div></div></body></html>
上面的 HTML 代碼會產生如下結果：
HTML 布局 - 使用表格
使用 HTML <table> 標簽是創建布局的一種簡單的方式。
大多數站點可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。
| 即使可以使用 HTML 表格來創建漂亮的布局，但設計表格的目的是呈現表格化數據 - 表格不是布局工具！ |
下面的例子使用三行兩列的表格 - 第一和最后一行使用 colspan 屬性來橫跨兩列：
實例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>主要的網頁標題</h1></td></tr><tr><tdstyle="background-color:#FFD700;width:100px;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle="background-color:#eeeeee;height:200px;width:400px;">內容在這里</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">版權 ? runoob.com</td></tr></table></body></html>
上面的 HTML 代碼會產生以下結果：
HTML 布局 - 有用的提示
Tip: 使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護。通過編輯單一的文件，就可以改變所有頁面的布局。如需學習更多有關 CSS 的知識，請訪問我們的CSS 教程。
Tip: 由于創建高級的布局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網站模板（您可以使用這些預先構建好的網站布局，并優化它們）。
HTML 布局標簽
| 標簽 | 描述 |
|---|---|
| <div> | 定義文檔區塊，塊級(block-level) |
| <span> | 定義 span，用來組合文檔中的行內元素。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
：為什么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優化第十三步:一定要最好用戶體驗優化
<html></html>雙標簽 開頭結尾 HTML標簽為最大的標簽 稱為根標簽
<head></head> 文檔頭部標簽 且必須設置title
<title></title> 頁面標題
<body></body> 文檔的主體 包含頁面的內容
<h1>-<h6> HTML提供6個等級的頁面標題 有大到小
<p></p> p標簽用于定義段落 可以將頁面分為若干個段落 根據窗口大小自動換行
<br/>單標簽 換行標簽 （break打斷）
加粗 <strong></strong>or<b></b>
斜線 <em></em>or<i></i>
刪除線 <del></del>or<s></s>
下劃線 <ins></ins>or<u></u>
沒有語義 屬于一種盒子 來裝內容
<div></div> 表示分割分區 用來布局 一行一個 大盒子
<span></span>意為跨度，跨距 一行可以哦有多個 小盒子
<img src="圖像路徑(url)"/> 定義頁面中的圖像
圖像標簽包含多個屬性
src 圖片路徑 必須屬性
alt 文本 替換文本 圖像不能顯示的文字
title 文本 鼠標放到圖像上顯示文字
width 像素 寬度
height 高度
border 邊框
相對路徑和絕對路徑
相對路徑：以引用文件所在位置為參考基礎，而建立出的目錄路徑
分類：下級路徑/ 上級路徑../
絕對路徑：是指目錄下的絕對位置，如硬盤中的路徑或網路地址
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
href用于指定鏈接目標的url地址(必須屬性)
target用于指定鏈接打卡方式 _self為默認值 _blank為在新窗口打開方式
錨點鏈接：可以快速到頁面某個位置
在鏈接文本中的href屬性中，設置屬性值為#名字的形式，如<a href="#two">目標</a>
找到目標位置標簽，里面添加一個id屬性 = 名字，如：<h3 id="two">目標</h3>
<!-- 注釋語句 --> 快捷鍵CTRL + /
HTML 原代碼 | 顯示結果 | 描述 |
< | < | 小于號或顯示標記 |
> | > | 大于號或顯示標記 |
& | & | 可用于顯示其它特殊字符 |
" | “ | 引號 |
? | ? | 已注冊 |
? | ? | 版權 |
? | ? | 商標 |
半個空白位 | ||
一個空白位 | ||
不斷行的空白 |
<table></table> 是用于定義表格的標簽
<tr></tr> 標簽用于定義表格中的行，必須嵌套在<table></table>標簽中
<tb></tb> 用于定義表格的單元格，必須嵌套在<tr></tr>標簽中
<td> 元素中的文本通常是普通的左對齊文本。字母td指表格數據(table data)，即數據單元格的內容
表頭單元格標簽：
<th>標簽表示HTML表格的表頭部分 <th> 元素中的文本通常呈現為粗體并且居中。
表格屬性：
align left center right 規定表格相對于周圍元素的對齊方式
border 1or"" 規定表格單元是否擁有邊框默認為"",表示沒有邊框
cellpadding 像素值 規定單元邊沿與其內容的空白，默認1像素
cellspacing 像素值 規定單元格直接的空白 默認2像素
with 像素值or百分比 規定表格的寬度
合并單元表格方式：
跨行合并：rowspan="合并單元格的個數"
跨列合并：colspan="合并單元格的個數"
<ul>標簽表示無序列表 里面只能包含li
<ol>有序標簽 里面只能包含li
<li>相當于一個容器定義列表項 與<ui>or<li>嵌套使用 li里面可以包含任何標簽
<dl>標簽用于定義描述列表(或自定義列表),該標簽會與<dt>(定義項目和名字)和<dd>(描述每一個項目名字)一起使用
標簽 | 描述 |
<form> | 定義供用戶輸入的表單 |
<input> | 定義輸入域 |
<textarea> | 定義文本域 (一個多行的輸入控件) |
<label> | 定義了 <input> 元素的標簽，一般為輸入標題 |
<fieldset> | 定義了一組相關的表單元素，并使用外框包含起來 |
<legend> | 定義了 <fieldset> 元素的標題 |
<select> | 定義了下拉選項列表 |
<optgroup> | 定義選項組 |
<option> | 定義下拉列表中的選項 |
<button> | 定義一個點擊按鈕 |
<datalist> New | 指定一個預先定義的輸入控件選項列表 |
<keygen> New | 定義了表單的密鑰對生成器字段 |
<output> New | 定義一個計算結果 |
<input>標簽用于收集用戶信息 包含一個type屬性 可以有多種樣式
<input type="value">
<input type="屬性值" />屬性值：
button | 定義可點擊按鈕（多數情況下，用于通過 JavaScript 啟動腳本）。 |
checkbox | 定義復選框。 |
file | 定義輸入字段和 "瀏覽"按鈕，供文件上傳。 |
hidden | 定義隱藏的輸入字段。 |
image | 定義圖像形式的提交按鈕。 |
password | 定義密碼字段。該字段中的字符被掩碼。 |
radio | 定義單選按鈕。 |
reset | 定義重置按鈕。重置按鈕會清除表單中的所有數據。 |
submit | 定義提交按鈕。提交按鈕會把表單數據發送到服務器。 |
text | 定義單行的輸入字段，用戶可在其中輸入文本。默認寬度為 20 個字符。 |
<label> 標簽為 input 元素定義標注（標記）。 label是標注的意思
label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同
詳情可參考
https://www.runoob.com/ 菜鳥教程
https://www.w3school.com.cn/ w3c
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
