下面我們就來總結下：

一.html標簽注意

1.html編寫要合法的，帶有良好結構并擁有語義

2.避免過度使用p和span，使文檔更易于應用樣式，且在邏輯段落上也更加清晰。

根據重要性使用h1-6標簽，段落使用p，列表使用ul，內聯元素中不可嵌套塊級元素，為含有描述性表單元素（input，tetarea）添加label

3.盡可能少地使用標簽

4.適當地使用class和id：相同的class可以重復出現，相同的id一個頁面只能出現一次

5.標題標簽共分為：h1~h6，它們分為表示標題在文檔中從高到底的優先順序。

H1在一個網頁中最好只使用一次,用來修飾主標題，一般是網頁的標題。但是實踐中h1都是作為logo的標簽，靠近 body，以便讓搜索引擎最快的領略主題。
h2表示文章標題或是文檔副標題;

h3網站首頁以及其他頁面中的欄目標題。
H2、H3、H4標簽則可以在一個網頁中多次出現，但必要隨意添加或添加過度。

6.在表單form中：

fieldset

legend 表單標題 /legend

/fieldset

當存在表單標題的時候才使用，如果不存在 legend /legend ,那么就不要出現 fieldset

7.關于表單的id和name，這倆個都是為了標記對象名稱。id是后來引入的，在這之前都是用name來實現。很多程序員都是通過用name屬性來獲取表單元素的值；id可以來定義css樣式，所以id和name一起使用比較好。

8.選擇表格布局，那么網站中的各個頁面必須統一使用table，使用表格布局要注意：因為table布局頁面的加載過程通常都不會那么平穩自然，所以這種笨拙守舊的布局方式將很有可能擾亂作品的視覺流向。

9.內聯元素float與塊元素float的區別：內聯元素float后，增加邊框為從邊界處往內增加邊框，而塊元素為往外增加邊框。即內聯元素float后，再設置size px的邊框，其所占區域并不會增加，所以也不會影響布局。

 !DOCTYPE html  html  head  title 測試內聯元素浮動后邊框問題 /title  meta charset= utf-8 /  style type= text/css  *,p,button{  margin:0;  padding:0;  border:0;  button,p{  float: left;  width: 50px;  height: 100px;  background-color: pink;  button+button{  background-color: gray;  border:10px solid red;  p+p{  border:10px solid blue;  /style  /head  body  button button1 /button button button2 /button  p 段落1 /p  p 段落2 /p  /body  /html 

10.a標簽的rel屬性：給鏈接設置不同的樣式很方便

 a href= #1 rel= prev prev /a  a href= #2 rel= next next /a a[rel= prev ]{}a[rel= next ]{}

所有瀏覽器都支持 rel 屬性。不過這個rel的值是固定的，可以查看w3c

二.頁面布局有以下幾種：

1.table布局

2.css布局：

①固定布局(固定寬高大小)

②流式布局(用寬高百分比)

③彈性布局(彈性盒子)

④浮動布局(float，可以設置left或者right)

⑤定位布局(position: fixed相對定位，position: absolute;絕對定位)

以上就是你需要了解的html標簽和頁面布局的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。