html布局方式
『壹』 html中的布局有多種方法，其中最常用的是div加css進行頁面布局，這種布局的優缺點是什麼
優點：
第一、利於搜索引擎蜘蛛爬行
根據總結和經驗，div+css布局有利於蜘蛛的爬行，拿html的table布局和div+css布局的網頁來做對比，很顯然table的位元組大於div+css的，位元組小就有益於搜索引擎蜘蛛下載頁面所用的時間，而且也有益於蜘蛛爬行到網站深處。
第二、易於修改
在一般情況下，div+css布局的網站，都是將html頁面和css文件分開的，div+css的特點就是能將網頁的內容和表現形式分離，所以，假如你要修改網站整站布局的話，一般只需要修改css文件里的的個別屬性即可，而這種特點是table不具備的。
第三、減少網頁載入時間
前面就提到過，div+css是將css文件和html文件分開的，當用戶點擊網站時，是在同時下載css文件和html文件，所以可以提高打開網頁的速度。
缺點：
第一、開發技術高
眾所周知，div+css要兼容各種瀏覽器，這樣增加了div+css開發的難度。
第二、開發時間長
div+css布局相對於table布局來說，div+css的耗費時間要比table布局的時間長很多，另外考慮到瀏覽器兼容的問題，各種瀏覽器間的測試也是一個費時的事情。
第三、開發成本高
就上兩點所說，高技術和長時間決定了他的成本。
『貳』 html你平常開發中使用的布局方式有哪些
一般用的是div+css,在移動端時會用到flex和rem
『叄』 HTML網頁製作中，總共有幾種布局方式
1.自然布局。
沒有任何修飾的布局是自動靠左的。
2.流動布局
上面講的float:left的情況。
3.定位布局
相對定位和絕對定位都是相對於父div標簽的。
相對------以這個元素的本來應該在的位置為參照點
絕對——以父div標簽的原點（左上角）為參照點。
由於外層是position:relative，所以里層是absolute的話，則會以外層的左上角為位移參考對齊。當然外層只寫position:relative，寫上left,top這兩個值，則表示以：以這個元素的本來應該在的位置為布局參照原點進行left,top對齊。
還有一種情況是，只是一個position:absolute;外層沒有position:relative，這時會找尋那個點為參考呢？這時候的原則是：如果某父級元素中有relative者，則以某父級元素為參考原點，如果沒有position:relative，則以body為參考原點。如果position:absolute外層沒有relative時，這兩個布局上是沒有區別的。
當然最後一種情況是：外層是：position:absolute;里邊是position:relative，那會是什麼情況？按著原來的原則，absolute會參考body為布局原點，relative會參考他本來應該在的位置為布局原點，這時候其實就是參考外層左上角為布局原點。
『肆』 這種HTML布局怎麼寫
有很多實現手段，比如table，frame和div。但是現在一般用div來進行布局。
下面是一個簡單得例子
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
*{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<divstyle="width:100%;height:972px;background-color:#5e5e5e;">
<divstyle="width:20%;height:100%;float:left;background-color:#4cae4c;"></div>
<divstyle="width:80%;height:30%;float:left;background-color:#d43f3a"></div>
<divstyle="width:80%;height:70%;float:left;background-color:#31b0d5"></div>
</div>
</body>
</html>
效果：
『伍』 html表格布局
DW就是這點煩人，所抄以不喜歡用它。
建議襲你不要使用表格布局，用設計布局，先畫一個足夠大的TABLE，然後先畫第一列，寬和高都畫得比圖片大，然後插入圖片，再調整單元格大小到圖片大小。
意思也就是說，如果你先定義好寬窄，DW會根據內容自動調整，因此會改變排版。所以你先畫一個足夠大的單元格，先將內容加進去，再來改變單元格的大小。
『陸』 HTML中怎樣的布局方式稱為響應式布局
借用網路一句話：響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而專言之，就是一個網站能夠兼容多個終端——屬而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。
響應式布局就是可以，適應多種設備的網頁，比如電腦端和移動端 可以共用同一套CSS。不需要為單獨的設備而開發相應程序
『柒』 html的布局方式有哪些
浮動布局復，定位布局以及響應式制布局，這三種布局是最基本最常見的，此外比較特殊的是彈性布局，彈性布局相對使用較少，需要根據項目的具體情況而定。
在網站開發當中，通常是需要結合多種布局去實現網頁布局的。如果是在學習網頁布局的相關知識，可以弄本 HTML5布局之路 ，來輔助自己的學習
『捌』 html布局策略
『玖』 如何學會 布局 html
早期是用<table>布局，
現在大多用DIV+CSS布局，需要理解DIV的盒子模型，然後掌握幾種常見的CSS屬性，例回如position, float, margin, padding, top, left, right, bottom, width, height等等，掌握一答些常見的布局模式，如雙飛翼、聖杯、柵格模型等等。此外，還可以用一些框架如BootStrap輔助布局。
現在CSS 3支持一些最新的布局方式，如Flex布局，Fluid布局等等，在手機等移動設備上已經支持得很好了，如果只是移動設備，可以拋棄傳統布局，用這些布局既快速又方便。
『拾』 講講html布局（包括標簽、屬性、還有代碼編輯舉例，要迅速、詳細）
-- HTML標記大全參考手冊[推薦]
總類（所有HTML文件都有的）
文件類型 <HTML></HTML> （放在檔案的開頭與結尾）
文件主題 <TITLE></TITLE> （必須放在「文頭」區塊內）
文頭 <HEAD></HEAD> （描述性資料，像是「主題」）
文體 <BODY></BODY> （文件本體）
------------------------------------------------------------結構性定義（由瀏覽器控制的顯示風格）
標題 <H?></H?> （從1到6，有六層選擇）
3.0 標題的對齊 <H? ALIGN=LEFT|CENTER|RIGHT></H?>
3.0 區分 <DIV></DIV>
3.0 區分的對齊 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
引文區塊 <BLOCKQUOTE></BLOCKQUOTE> （通常會內縮）
強調 <EM></EM> （通常會以斜體顯示）
特別強調 （通常會以加粗顯示）
引文 <CITE></CITE> （通常會以斜體顯示）
碼 <CODE></CODE> （顯示原始碼之用）
樣本 <SAMP></SAMP>
鍵盤輸入 <KBD></KBD>
變數 <VAR></VAR>
定義 <DFN></DFN> （有些瀏覽器不提供）
地址 <ADDRESS></ADDRESS>
3.0 大字 <BIG></BIG>
3.0 小字 <SMALL></SMALL>
------------------------------------------------------------與外觀相關的標簽（作者自訂的表現方式）
加粗 <B></B>
斜體 <I></I>
3.0 底線 <U></U> （尚有些瀏覽器不提供）
3.0 刪除線 <S></S> （尚有些瀏覽器不提供）
3.0 下標 <SUB></SUB>
3.0 上標 <SUP></SUP>
打字機體 <TT></TT> （用單空格字型顯示）
預定格式 <PRE></PRE> （保留文件中空格的大小）
預定格式的寬度 <PRE WIDTH=?></PRE>（以字元計算）
N1.0+ 向中看齊 <CENTER></CENTER> （文字與圖片都可以）
N1.0 閃耀 <BLINK></BLINK> （有史以來最被嘲弄的標簽）
N1.0 字體大小 <FONT SIZE=?></FONT>（從1到7）
N1.0 改變字體大小 <FONT SIZE=+|-?></FONT>
N1.0 基本字體大小 <BASEFONT SIZE=?> （從1到7; 內定為3）
N2.0 字體顏色 <FONT COLOR="#$$$$$$"></FONT>
--------------------------------------------------------------------------------
連結與圖形
連結 <A HREF="URL"></A>
連結到錨點 <A HREF="URL#***"></A>（如果錨點在另一個檔案）
<A HREF="#***"></A> （如果錨點目前的檔案）
N2.0 連結到目的視框 <A HREF="URL" TARGET="***"></A>
設定錨點 <A NAME="***"></A>
圖形 <IMG SRC="URL">
圖形看齊方式 <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE>
N1.0 圖形看齊方式 <IMG SRC="URL"
ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
取代文字 <IMG SRC="URL" ALT="***"> （如果沒有辦法顯示圖形則顯示此文字）
點選圖 <IMG SRC="URL" ISMAP> （需要CGI程式）
N2.0 點選圖 <IMG SRC="URL" USEMAP="URL">
N2.0 地圖 <MAP NAME="***"></MAP>（描述地圖）
N2.0 段落 <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>
3.0 大小 <IMG SRC="URL" WIDTH="?" HEIGHT="?">（以pixels為單位）
N1.0 圖形邊緣 <IMG SRC="URL" BORDER=?> （以pixels為單位）
N1.0 圖形邊緣空間 <IMG SRC="URL" HSPACE=? VSPACE=?> （以pixels為單位）
N1.0 低解析度圖形 <IMG SRC="URL" LOWSRC="URL">
N1.1 用戶端拉 <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">（使用端自動更新 ）
N2.0 內嵌物件 <EMBED SRC="URL"> （將物件插入頁面）
N2.0 內嵌物件大小 <EMBED SRC="URL" WIDTH="?" HEIGHT="?">
--------------------------------------------------------------------------------
分隔
段落 <P> （通常是兩個return）
3.0 段落 <P> （新定義成容器型標簽）
3.0 文字看齊方式 <P ALIGN=LEFT|CENTER|RIGHT>
換行 <BR> （一個return）
N1.0 文字部份看齊方式<BR CLEAR=LEFT|RIGHT|ALL>（與圖形合用時）
橫線 <HR>
N1.0 橫線對齊 <HR ALIGN=LEFT|RIGHT|CENTER>
N1.0 橫線厚度 <HR SIZE=?> （以pixels為單位）
N1.0 橫線寬度 <HR WIDTH=?> （以pixels為單位）
N1.0 橫線比率寬度 <HR WIDTH=%> （以頁寬為100%）
N1.0 實線 <HR NOSHADE> （沒有立體效果）
N1.0 不可換行 <NOBR></NOBR> （不換行）
N1.0 可換行處 <WBR> （如果需要，可在此斷行）
--------------------------------------------------------------------------------
列舉 （可以巢狀列舉）
無次序式列舉 <UL><LI></UL> （<LI> 放在每一項前）
N1.0 公布式列舉 <UL TYPE=DISC|CIRCLE|SQUARE>（定義全部的列舉項）
<LI TYPE=DISC|CIRCLE|SQUARE>（定義這個及其後的列舉項）
有次序式列舉 <OL><LI></OL> （<LI> 放在每一項前）
N1.0 數標型態 <OL TYPE=A|a|I|i|1> （定義全部的列舉項）
<LI TYPE=A|a|I|i|1> （定義這個及其後的列舉項）
N1.0 起始數字 <OL value=?> （定義全部的列舉項）
<LI value=?> （定義這個及其後的列舉項）
定義式列舉 <DL><DT><DD></DL>（<DT>項目, <DD>定義）
表單式列舉 <MENU><LI></MENU>（<LI> 放在每一項前）
目錄式列舉 <DIR><LI></DIR> （<LI> 放在每一項前）
--------------------------------------------------------------------------------
背景與顏色
3.0 重復排列的背景 <BODY BACKGROUND="URL">
N1.1+ 背景顏色 <BODY BGCOLOR="#$$$$$$"> （依序為紅、綠、藍）
N1.1+ 文字顏色 <BODY TEXT="#$$$$$$">
N1.1+ 連結顏色 <BODY LINK="#$$$$$$">
N1.1+ 看過的連結 <BODY VLINK="#$$$$$$">
N1.1 使用中的連結 <BODY ALINK="#$$$$$$">
--------------------------------------------------------------------------------
特殊字元（以下標簽需用小寫）
特別符號 &#?; （其中 ? 代表 ISO 8859-1 的編碼）
< < > > & & " "
注冊商標TM