整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
lt;header> 顯示網站名稱、主題或者主要信息
<nav> 網站的連接菜單
<aside> 用于側邊欄
<main> 表示頁面的主要顯示內容, 頁面有且只有一個,
不應該被任何其他結構標簽包含, 不能是以下元素的后代: section/nav/footer/header/aside/article等。
<article> 用于定義主內容區
<section> 用于章節或段落
<footer> 位于頁腳，用來放置版權聲明、作者等信息
結構化標志也可以可以自由配置，并沒有規定<aside>標記一定得寫在<article>標記下方。
article和section可以相互嵌套
<!DOCTYPE HTML>
<html>
<head>
<meta charset="GB2312"/>
<title>背包客旅行札記</title>
</head>
<body>
<header id="header">
<hgroup>
<h1>背包客旅行札記</h1>
<h4>旅行是一種休息，而休息是為了走更長遠的路</h4>
</hgroup>
<nav>
<ul>
<li><a href="#">關于背包客</a></li>
<li class="current-item"><a href="#">國內旅游</a></li>
<li><a href="#">國外旅游</a></li>
<li><a href="#">與我聯絡</a></li>
</ul>
</nav>
</header>
<article id="travel">
<section>
<h2>Hello World!</h2>
<p>四季都是結合旅行的季節。</p>
<p>不一定要花大錢，做點功課和多點自信，就能享受旅游的美好</p>
</section>
<aside>
<figure>
<img src="photo.png" alt="悠閑"/>
</figure>
</aside>
</article>
<footer>
HTML網頁練習
</footer>
</body>
</html>注意：
<hgroup> 標簽用于對網頁或區段(section)的標題進行組合。
<figure> 標簽規定獨立的流內容(圖像、圖表、照片、代碼等等)。
則一：支持已有的內容
以下四段代碼，在xhtml中只有第一段是正確的；而在html5中，所有的都是正確的
XML/HTML Code
<img src="foo" alt="bar" />
<p class="foo">Hello world</p>
<img src="foo" alt="bar">
<p class="foo">Hello world
<IMG SRC="foo" ALT="bar">
<P CLASS="foo">Hello world</P>
<img src=foo alt=bar>
<p class=foo>Hello world</p>
原則二：平穩退化
瀏覽器在遇到不識別的type值時，會將type的值解釋為text
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"
原則三：
正確的標簽嵌套我們在寫HTML時總是需要標簽的層級嵌套來幫我們完成HTML的書寫，但這些HTML的嵌套是有一定的規則的，如果要細說的話，我們可能要用幾個章節來描述，那么我今天這里要說的是，我們在寫HTML時不應該犯以下這樣的超級錯誤：
上圖的結構我們是常見的，比如說首頁的標題，那么我們就應該注意了，不能把“<h1>”放在“<a>”標簽中，換句話說，就是不能么塊元素和在行內元素中。上面只是一個例子，只是希望大家在平時的制作中不應該犯這樣的超級錯誤。
原則四：. 在使用javascript改變頁面元互的顯示效果時，盡量用className屬性更改。應該盡量避免用element.style.color="#ff0000"之類的語句，尤其是在一次更改多次屬性的時候。這樣做有兩個理由：方便維護和節約客戶端資源。使用className改更的時候，頁面只需要重新渲染一次，而且style屬性更改時，每次都要重新渲染，這比開銷是很大的。
原則五：
使用更好的命名這里所說的命名就是給你的頁面中相關元素定義類名或者是ID名，很多同學都有這栗的習慣，比如說有一個元素字體是紅色的，給他加上“red”,甚至布局都寫“left-sidebar”等，但是你有沒有想過，如果這個元素定義了“red”后，過幾天客戶要求使用“藍色”呢？或者又說，那時的“left-sidebar”邊欄此時不想放在左邊了，而是想放在右邊，那么這樣一來我們前面的命名可以說是一點意義都沒有了，正如下面的一個圖所示：
那么定義一個好的名就很得要了，不但自己能看懂你的代碼，而且別人也能輕松讀懂你的代碼，比如說一個好的類名和ID名“mainNav”、“subNav”、“footer”等，他能描述所包含的事情。不好的呢，比如前面所說的。
原則六：
：避免不必要的復雜性
html4
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html5
<!DOCTYPE html>
html4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
html5
<meta charset="utf-8">
頁布局分為：網頁頭部、網頁主題、網頁底部。
初學html時制作出來的頁面非常丑陋，是因為沒有添加CSS樣式和布局排版，完全按照元素自身的特性來排列元素。事實上，對于這些標簽還有一個專門的屬性來控制元素的顯示方式，是像div那樣快元素顯示，還是像span那樣行內顯示，這個屬性就是display屬性。
block快元素的默認值，inline行內元素的默認值，inline-block行內塊元素，none設置元素不會被顯示。
下面我們來做個一個頁面用float屬性來實現網頁的布局。
樣張圖片：
下面我們就用浮動來進行編輯代碼如下：
看一下css樣式表：
下面來看一下我們設計出來的效果：
布局差不多沒什么大的區別，小編現在也是初學者，希望提出建議
作者：潤邦網絡科技
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
