HTML是所有網頁的基礎，并且設計良好的網頁都需要遵循規范的布局。為了方便前端開發者編寫流暢、有效和易于理解的代碼，我們經常使用起名約定（naming conventions）。

起名約定是一種約定俗成的方式，用于指定HTML元素的類名和ID的名稱。這可以幫助開發者更好地組織他們的代碼、增強代碼的可維護性和可讀性。

下面列出了一些HTML布局規范，以及與之對應的起名約定代碼：

/* 布局規范：頁面容器 */
.page-container {
width: 90%;
margin: 0 auto;
}
/* 布局規范：網格容器 */
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
/* 布局規范：菜單欄 */
.nav {
background-color: #333;
color: #fff;
text-align: center;
height: 50px;
line-height: 50px;
}
/* 布局規范：頁腳 */
.footer {
text-align: center;
margin-top: 50px;
padding: 20px;
}
/* 布局規范：主要內容區域 */
.main {
width: 70%;
float: left;
}
/* 布局規范：側邊欄 */
.sidebar {
width: 30%;
float: right;
}
/* 布局規范：表單 */
.form {
width: 60%;
margin: 0 auto;
padding: 20px;
}
/* 布局規范：錯誤提示 */
.error-message {
color: red;
font-size: 14px;
}
/* 布局規范：按鈕 */
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 5px;
cursor: pointer;
}
/* 布局規范：圖像 */
.img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}

在編寫HTML代碼時，遵循這些布局規范和起名約定會提升開發效率、代碼可維護性以及代碼可讀性，從而使項目實現更加高效和成功！