HTML語言section 和 div的區別

HTML語言中，section和div都是用來對網頁進行結構化布局的標簽，但是它們的作用略有不同。

section標簽用于定義文檔中的節或區段，它通常會包含一個主題，比如文章中的章節、側邊欄、頁腳等。它的語義化更加強，用于分隔頁面，標記出頁面的不同部分。

div標簽則是用來將頁面中的不同區域劃分出來，它通常被用于進行樣式控制，例如定義CSS樣式表，使得網頁的樣式更加美觀。

下面是一個簡單的例子，用于說明section和div的區別：

```html

<!DOCTYPE html>

<html>

<head>

<title>Section vs Div</title>

<style>

section {

border: 1px solid black;

padding: 10px;

margin-bottom: 10px;

}

div {

border: 1px solid red;

padding: 10px;

margin-bottom: 10px;

}

</style>

</head>

<body>

<h2>Section 1</h2>

<p>This is the first section.</p>

</section>

<div>

<p>This is the first div.</p>

</div>

<h2>Section 2</h2>

<p>This is the second section.</p>

</section>

<div>

<p>This is the second div.</p>

</div>

</body>

</html>

```

上面的代碼中，我們創建了兩個section和兩個div標簽，并為它們設置了樣式，然后在頁面中展示出來。可以看到，section標簽中包含的內容更具有一致性和相關性，而div標簽中包含的內容更加松散，沒有強烈的聯系。

在做前端，如果說自己不會h5，你很有可能被你的客戶嘲笑，說什么最新技術都不會！h5其實沒什么，只不過是html技術的進一步發展，主要是增加了一些新的元素而已。

HTML5 <!DOCTYPE>

<!doctype> 聲明必須位于 HTML5 文檔中的第一行,使用非常簡單,寫法：<!DOCTYPE html>

新特性

HTML5 中的一些有趣的新特性：

用于繪畫的 canvas 元素

用于媒介回放的 video 和 audio 元素

對本地離線存儲的更好的支持

新的特殊內容元素，比如 article、footer、header、nav、section

新的表單控件，比如 calendar、date、time、email、url、search

HTML5 添加了很多語義元素如下所示：

標簽	描述
<article>	定義頁面獨立的內容區域。
<aside>	定義頁面的側邊欄內容。
<bdi>	允許您設置一段文本，使其脫離其父元素的文本方向設置。
<command>	定義命令按鈕，比如單選按鈕、復選框或按鈕
<details>	用于描述文檔或文檔某個部分的細節
<dialog>	定義對話框，比如提示框
<summary>	標簽包含 details 元素的標題
<figure>	規定獨立的流內容（圖像、圖表、照片、代碼等等）。
<figcaption>	定義 <figure> 元素的標題
<footer>	定義 section 或 document 的頁腳。
<header>	定義了文檔的頭部區域
<mark>	定義帶有記號的文本。
<meter>	定義度量衡。僅用于已知最大和最小值的度量。
<nav>	定義導航鏈接的部分。
<progress>	定義任何類型的任務的進度。
<ruby>	定義 ruby 注釋（中文注音或字符）。
<rt>	定義字符（中文注音或字符）的解釋或發音。
<rp>	在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內容。
<section>	定義文檔中的節（section、區段）。
<time>	定義日期或時間。
<wbr>	規定在文本中的何處適合添加換行符。

HTML5 表單

新表單元素, 新屬性，新輸入類型，自動驗證。

已移除元素

以下的 HTML 4.01 元素在HTML5中已經被刪除:

<acronym> 標記一個首字母縮寫，h5用abbr代替

<applet> 用object代替

<basefont>規定頁面上的默認字體顏色和字號：

<big>呈現大號字體效果。

<center> 這個...這么常用為什么去掉？？

<dir> 簽定義目錄列表。類似于ul

<font> //這個也是比較常用的，但是取消了

<frame> 標簽定義 frameset 中的一個特定的窗口（框架）

<frameset>定義一個框架集

<noframes> 元素可為那些不支持框架的瀏覽器顯示文本。noframes 元素位于 frameset 元素內部。

<strike>標簽可定義加刪除線文本定義。

HTML5 瀏覽器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。

IE9 以下版本瀏覽器兼容HTML5的方法，使用的靜態資源的html5shiv包：（菜鳥教程）

載入后，初始化新標簽的CSS：

/*html5*/article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

HTML 5 視頻

寫法：<video src="movie.ogg" controls="controls" width="320" height="240">文字</video>

control 屬性供添加播放、暫停和音量控件。

<video> 與 </video> 之間插入的內容是供不支持 video 元素的瀏覽器顯示的：

注意：要確保適用于 Safari 瀏覽器，視頻文件必須是 MPEG4 類型。所以video 元素允許多個 source 元素

所以寫成：

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<video> 標簽的屬性

autoplay：值為：autoplay，如果出現該屬性，則視頻在就緒后馬上播放。

controls：值為：controls如果出現該屬性，則向用戶顯示控件，比如播放按鈕。height：pixels設置視頻播放器的高度。

loop：值為：loop，如果出現該屬性，則當媒介文件完成播放后再次開始播放。

preload：值為：preload，如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。

src：值為：url，要播放的視頻的 URL。

width：值為：pixels，設置視頻播放器的寬度。

同時還可以支持dom事件支持：play()，pause()，load()，canPlayType();

HTML 5 音頻

寫法：<audio src="song.ogg" controls="controls">Your browser does not support the audio tag.</audio>

control 屬性供添加播放、暫停和音量控件。

<audio> 與 </audio> 之間插入的內容是供不支持 audio 元素的瀏覽器顯示

當前，audio 元素支持三種音頻格式：mp3，mav和ogg，Safari 瀏覽器，音頻文件必須是 MP3 或 Wav 類型。多個 source 元素支持。

<audio> 標簽的屬性

屬性	值	描述
autoplay	autoplay	如果出現該屬性，則音頻在就緒后馬上播放。
controls	controls	如果出現該屬性，則向用戶顯示控件，比如播放按鈕。
loop	loop	如果出現該屬性，則每當音頻結束時重新開始播放。
preload	preload	如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。
src	url	要播放的音頻的 URL。

HTML 5 拖放

拖放（Drag 和 drop）是 HTML5 標準的組成部分。

draggable="true" 設置元素為可拖放 <img draggable="true" />

ondragstart 和 setData()規定當元素被拖動時，會發生什么

ondragoverondragover 事件規定在何處放置被拖動的數據。

Ondrop：當放置被拖數據時，會發生 drop 事件。

(說實話真心不好理解，看一下w3c給的案例吧：)

<script type="text/javascript">
function allowDrop(ev)
{ev.preventDefault();}
function drag(ev)
{ev.dataTransfer.setData("Text",ev.target.id);//方法設置被拖數據的數據類型和值：
}
function drop(ev)
{
ev.preventDefault();//阻止對元素的默認處理方式,默認不接受拖拽元素的
var data=ev.dataTransfer.getData("Text");//獲得被拖的數據
ev.target.appendChild(document.getElementById(data));//放置進去
}
</script>
<div id="div1" ondrop="drop(event)"ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"ondragstart="drag(event)" width="336" height="69" />

這個拖拽看起來比較費勁，一般我們也用不到，大家可以先收藏起來，如果需要用到的時候，再返回來直接套用案例！

未完待續.....

看不懂沒關系，多用幾次，平時寫網頁的時候，可以慢慢的增加使用h5標簽，因為除了ie8一下，大部分瀏覽器還是可以支持的！本教程是結合了w3c，菜鳥教程，慕課網的內容總結的，如果不妥多多指教！

H5 誕生以來，在 html4.0 中有些元素已被 H5 廢棄，但是在 H5 中添加了很多新元素以及功能，今天我們學習 H5 中新增的元素和屬性都有哪些？

新增語義結構標簽

標簽	描述
<article>	定義頁面獨立的內容區域。
<aside>	定義頁面的側邊欄內容。
<bdi>	允許您設置一段文本，使其脫離其父元素的文本方向設置。
<command>	定義命令按鈕，比如單選按鈕、復選框或按鈕
<details>	用于描述文檔或文檔某個部分的細節
<dialog>	定義對話框，比如提示框
<summary>	標簽包含 details 元素的標題
<figure>	規定獨立的流內容（圖像、圖表、照片、代碼等等）。
<figcaption>	定義 <figure> 元素的標題
<footer>	定義 section 或 document 的頁腳。
<header>	定義了文檔的頭部區域
<mark>	定義帶有記號的文本。
<meter>	定義度量衡。僅用于已知最大和最小值的度量。
<nav>	定義導航鏈接的部分。
<progress>	定義任何類型的任務的進度。
<ruby>	定義 ruby 注釋（中文注音或字符）。
<rt>	定義字符（中文注音或字符）的解釋或發音。
<rp>	在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內容。
<section>	定義文檔中的節（section、區段）。
<time>	定義日期或時間。
<wbr>	規定在文本中的何處適合添加換行符。

新增標簽使用時根據描述內容，在適當的地方使用新標簽，應用的時候和其他標簽是一樣的，H5 新增標簽使得網頁結構更清晰明了，建議大家使用新增元素。

新增表單元素

標簽	描述
<datalist>	<input>標簽定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
<keygen>	<keygen> 標簽規定用于表單的密鑰對生成器字段。
<output>	<output> 標簽定義不同類型的輸出，比如腳本的輸出。

<datalist>屬性規定form或input域應該擁有自動完成功能，當input聚焦時，瀏覽器應該在域中顯示填寫的選項。

使用 input 元素與 datalist 元素綁定，使用時如下：

<form action="">
 <input type="text" list="schooltype">
 <datalist id="schooltype">
  <option value="歐亞駕校">歐亞駕校</option>
  <option value="鵬程駕校">鵬程駕校</option>
  <option value="學車網">學車網</option>
 </datalist>    
</form>

<keygen>元素用于提供用戶驗證的方法，表單提交時，keygen生成表單密鑰對，一個是公鑰，一個是私鑰，私鑰存儲在客戶端，公鑰通過帶有keygen字段的表單發送給服務器。目前已被H5廢棄，我們作為了解就好。

使用實例如下：

<form action="">
 用戶名<input type="text" name="user" /><br>
 密碼<input type="password" name="se"> <br>
 加密<keygen name="security"><br>
 <input type="submit" value="提交">
</form>

<output>元素用于不同類型的輸出，對輸出結果的展示，如對兩個數值相加，并展示結果，代碼如下：

<form action="" oninput = "x.value=parseInt(a.value)+parseInt(b.value)">
 <input type="range" id="a" step="1" min="0" max="100"> + 
 <input type="text" id="b" value="50">=
 <output name="x" ></output> 
</form>

上述form處添加oninput事件，對數值parseInt進行取整運算。

新增表單屬性

H5中新增表單屬性指 form 和 input 元素新增屬性。

form新屬性及意義

autocomplete ：規定form域自動完成功能。
novalidate ：規定提交表單時是否驗證域。

input新增類型和屬性

新的輸入類型	新的輸入屬性
color date datetime datetime-local email month number range search tel time url week	autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height 和 width list min 和 max multiple pattern (regexp) placeholder required step

input 和 form 的 autocomplete屬性

屬性規定 form 或 input 在當前域下擁有自動完成功能，通俗地講就是元素聚焦時，會自動展示之前輸入過的內容，內容是根據當前域名下之前使用過的數據。示例如下：

<form action="demo_form.asp" method="get" autocomplete="on">
 First name: <input type="text" name="fname" /><br />
 Last name: <input type="text" name="lname" /><br />
 E-mail: <input type="email" name="email" autocomplete="on" /><br />
 <input type="submit" />
</form>

頁面上顯示如圖：

表單重寫屬性：

formaction - 重寫表單的 action 屬性
formenctype - 重寫表單 enctype 屬性
formmethod - 重寫表單 method 屬性
formnovalidate - 重寫表單 novalidate 屬性
formtarget - 重寫表單的 target 屬性

min、max、step屬性

三者用于對數字、日期類型輸入框的限制和約束。

min - 規定允許設置的最小值。
max - 規定允許設置的最大值。
step - 規定合法的數字間隔。

使用示例，請參照上output處的實例。

multipel屬性：規定輸入域中可選擇多個值。適用于 email 和 file 兩種類型。

pattern屬性：驗證input域的模式。模式pattern是正則表達式，適用于text、search、url、email、password。

廢除的標簽

以下是一些在H5中已廢棄的元素。

acronym、applet、basefont、big、center、dir、font、frame、frameset、noframes、strike、tt。

在線咨詢

上一篇：如何實現注入html的中文不顯示亂碼？
下一篇：HTML中的塊級元素與內聯元素-零基礎自學網頁制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商