家好，我是新媒之聲廣告工作室的大白，今天給大家帶來的是HTML5簡單教學第一章（第二節）。

今天給大家帶來的東西比較多；

br 換行標簽實屬單標簽，br換行標簽就如同我們編輯文本是點擊的回車鍵，讓它換到下一行。

HTML5 <br/>標簽用來對文檔中的文本進行換行的處理，請參考下面的這個例子：

以下代碼標記一個換行：

<p> 使用 br 元素<br>在文本中<br>換行。 </p>

所有主流瀏覽器都支持 <br> 標簽。

標簽定義及使用說明

<br> 標簽插入一個簡單的換行符。

<br> 標簽是一個空標簽，意味著它沒有結束標簽。

提示：由于<br>標簽是空標簽，因此，不允許有“<br>...</br>”這樣的寫法！

提示和注釋

提示：在寫地址信息或者寫詩詞時 <br> 標簽非常有用。

注釋： 請使用 <br> 標簽來輸入空行，而不是分割段落。

HTML 4.01 與 HTML5之間的差異無。

HTML 與 XHTML 之間的差異

在 HTML 中，<br> 標簽沒有結束標簽。

在 XHTML 中，<br> 標簽必須被正確地關閉，比如這樣：<br /> 。

nobr 不換行是屬于雙標簽，nobr就是強制不換到下一行，在做編輯時文字或是塊遇到瀏覽器的邊會自動換到下一行使用不換行標簽就強制它不讓換行，這是瀏覽器底部就會出現航向滾動條。

p 段落標簽也是屬于雙標簽，p標簽是文字標簽，故名思議就是用于寫文字段落的標簽，p標簽是屬于塊標簽，就是獨自占據一行，在下節課會介紹到塊標簽與行標簽。

HTML5 <p>標簽用于定義一個段落。

目前大多數瀏覽器支持 <p>標簽。

標簽定義及使用說明

<p> 標簽定義段落。

<p>元素會自動在其前后創建一些空白。瀏覽器會自動添加這些空間，您也可以在樣式表中規定。

提示：在本站的HTML5編程實戰中，你可以練習使用<p>標簽！

在HTML 4.01 與 HTML5中的差異

HTML 4.01中標簽的 align 屬性已經廢棄，HTML5不支持該屬性。

p 段落,align屬性:left|center|right，是標簽屬性，屬性有事css樣式，css樣式又可以通俗的理解為房子的裝修，html通俗可以理解為房子的框架，div又可以通俗的理解為房子的填充磚塊之類的。

所有主流瀏覽器都支持 align 屬性。

定義和用法

HTML5 不支持 <p> align 屬性。請使用 CSS 代替。

在 HTML 4.01 中，<p> 的 align 屬性已廢棄。

align 屬性規定段落中文本的對齊方式。

兼容性注釋

在 HTML 4.01 中，<p> 的 align 屬性已廢棄，請使用 CSS 代替。

CSS 語法：<p style="text-align:right">

CSS 實例：在段落中右對齊文本

在我們的 CSS 教程中，您可以找到更多有關 text-align 屬性 的細節。

語法

<p align="left|right|center|justify">

屬性值

center 居中是屬于雙標簽，雙標簽就是成對出現的標簽，center居中標簽的意思就是讓它位于瀏覽器的中心位置，就好比是wps的文字居中一個道理，不過居中標簽是可以讓它體內所有的標簽都可以居中。

HTML <center> 標簽 - HTML 5 不支持

<center> 標簽控制文本的居中顯示，不能在 HTML5 中使用。

所有主流瀏覽器都支持 <center> 標簽。

標簽定義及使用說明

HTML5 不支持 <center> 標簽。請用 CSS 代替。

在 HTML 4.01 中，<center> 元素已廢棄。

<center> 對其所包括的文本進行水平居中。

提示和注釋

提示：請使用 CSS 樣式來居中文本！在 CSS 教程中您能了解到更多關于居中文本的細節。

HTML 4.01 與 HTML5之間的差異

HTML5 不支持 <center> 標簽。請用 CSS 代替。

pre 按源代碼顯示是屬于雙標簽不是很常用的標簽，它的意思就是讓標簽直接不解析讓瀏覽器表現出來，一般用于展示源代碼。

HTML <pre> 標簽

<pre> 標簽可以保留您需要的文本格式，比如不會取消換行和空格，并且所示文本是等寬的。

目前大多數瀏覽器支持 <pre> 標簽。

標簽定義及使用說明

<pre> 標簽可定義預格式化的文本。

被包圍在 <pre> 標簽 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。

注意：<pre> 元素是塊級元素，但是只能包含文本或行內元素，任何塊級元素（常見為可以導致段落斷開的標簽：例如<title>、<p> 和<address> 標簽）都不能位于 <pre> 元素中。

提示和注釋

提示: <pre> 標簽的一個常見應用就是用來表示計算機的源代碼。

提示：<pre> 標簽與 <code> 標簽結合起來使用，可以獲得更加精確的語義。

在HTML 4.01 與 HTML5中的差異

在 HTML 4.01 中，"width" 屬性已廢棄，不可使用。 HTML5 不支持"width"屬性。

屬性

全局屬性

<pre> 標簽支持全局屬性，查看完整屬性表 HTML全局屬性。

ul 無序列表屬于雙標簽，一般配合li標簽使用，無序列表屬和wps中表現是一樣的不過無序列表中不只可以寫文字和數字也可以寫div之類的標簽有的網頁導航就是用ul無序列表標簽寫出來的。

HTML <ul> 標簽

<ul> 標簽表示HTML頁面中項目的無序列表，一般會以項目符號列表呈現

所有主流瀏覽器都支持 <ul> 標簽。

標簽定義及使用說明

<ul> 標簽定義無序列表。

將 <ul> 標簽與 <li> 標簽一起使用，創建無序列表。

提示和注釋

提示：使用 CSS 為列表定義樣式。

提示：使用 <ol> 標簽創建有序列表。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中，"compact" 和 "type" 屬性已廢棄。HTML5 則不支持著兩個屬性。

屬性

ol 有序列表標簽和ul無序列表標簽是一個道理，也是配合li標簽使用唯一區別就是一個前面帶點一個前面帶阿拉伯數字。

HTML <ol> 標簽

<ol> 標簽在 HTML 中表示有序列表，是 ordered lists 的縮寫。您可以自定義有序列表的初始序號

目前大多數瀏覽器支持 <ol> 標簽。

標簽定義及使用說明

<ol> 標簽定義了一個有序列表. 列表排序以數字來顯示。

使用<li> 標簽來定義列表選項。

提示和注釋

提示： 如果需要無序列表，請使用 <ul> 標簽。

提示：使用 CSS 來定義列表樣式。

HTML 4.01 與 HTML5中的差異

在 HTML 4.01 中"start" 和 "type" 屬性已經廢棄，HTML5不支持該屬性。

"reversed" 屬性是 HTML5 中的新屬性。

在HTML 4.01中"compact" 屬性已經廢棄,在 HTML5中不支持該屬性。

屬性

New：HTML5 新屬性。

dl 自定義列表 dt 自定義標題 dd 自定義列表內容這三個標簽我放在一起講因為這三個標簽是配合在一起的用法和ul標簽ol標簽差不多，就不再過多的敘述了，一般用到的不是很多。

所有主流瀏覽器都支持 <dl> 標簽。

標簽定義及使用說明

<dl> 標簽定義一個描述列表。

<dl> 標簽與 <dt> （定義項目/名字）和 <dd> （描述每一個項目/名字）一起使用。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中，<dl> 標簽定義一個定義列表。

在 HTML5 中，<dl> 標簽定義一個描述列表。

HTML <dt> 標簽

<dt> 標簽只能夠作為 <dl> 標簽的一個子元素出現，常常后跟一個 <dd> 標簽。

所有主流瀏覽器都支持 <dt> 標簽。

標簽定義及使用說明

• <dt> 標簽定義一個描述列表的項目/名字。

  <dt> 標簽與 <dl> （定義一個描述列表）和 <dd> （描述每一個項目/名字）一起使用。

  一行中的多個 <dt> 標簽表示由緊鄰的下一個 <dd> 元素定義的多個術語。

• ---

• HTML 4.01 與 HTML5之間的差異

  在 HTML 4.01 中，<dt> 標簽定義一個定義列表的條目。

  在 HTML5 中，<dt> 標簽定義一個描述列表的項目/名字。

  
  

  hr 導航線這節課最后一個標簽是單標簽，所謂的導航線不過就是一條橫線用來分割。

  HTML <hr> 標簽

  <hr> 標簽表示段落級元素之間的主題劃分。

  所有主流瀏覽器都支持<hr> 標簽。

  ---

  標簽定義及使用說明

  <hr>標簽定義HTML頁面中的主題變化（比如話題的轉移），并顯示為一條水平線。 元素被用來分隔HTML頁面中的內容（或者定義一個變化）。

  ---

  HTML 4.01與HTML5之間的差異

  在HTML5中，<hr> 定義內容中的主題變化，并顯示為一條水平線。

  在HTML 4.01中，<hr> 標簽僅僅顯示為一條水平線。

  在HTML 4.01中，的所有布局屬性都已廢棄。在HTML5中不再支持這些屬性。請使用CSS來為<HR> 元素定義樣式。

  ---

  HTML與XHTML之間的差異

  在HTML中，<hr> 標簽沒有結束標簽。

  在XHTML中，<hr> 標簽必須被正確地關閉，比如<hr /> 。

  ---

  屬性

  屬性	值	描述
  align	left center right	HTML5 不支持。HTML 4.01 已廢棄。 規定 <hr> 元素的對齊方式
  noshade	noshade	HTML5 不支持。HTML 4.01 已廢棄。 規定 <hr> 元素的顏色呈現為純色。
  size	pixels	HTML5 不支持。HTML 4.01 已廢棄。 規定 <hr> 元素的高度。
  width	pixels %	HTML5 不支持。HTML 4.01 已廢棄。 規定 <hr> 元素的寬度。

  謝謝大家的觀看，如果需要今天課程的源代碼和ppt可以私信給我，我會免費發給你，最好使能夠關注小編一下。

們都知道，想要成為一名合格的前端開發人員，掌握好HTML5是一個重要的先決條件，相比較于HTML，HTML5中新增了許多功能標簽，那么這么標簽都有哪些呢？

格式：

<bdi>定義文本的文本方向，使其脫離其周圍文本的方向設置。

<mark>定義有記號的文本。

<meter>定義預定義范圍內的度量。

<progress>定義任何類型的任務的進度。

<rp>定義若瀏覽器不支持 ruby 元素顯示的內容。

<rt>定義 ruby 注釋的解釋。

<ruby>定義 ruby 注釋。

<time>定義日期/時間。

<wbr>定義可能的換行符。

表單：

<datalist>定義下拉列表。

<keygen>定義生成密鑰。

<output>定義輸出的一些類型。

圖像：

<canvas>定義圖形。

<figcaption>定義 figure 元素的標題。

<figure>定義媒介內容的分組，以及它們的標題。

音頻和視頻：

<audio>定義聲音內容。

<source>定義媒介源。

<track>定義用在媒體播放器中的文本軌道。

<video>定義視頻。

鏈接：

nav>定義導航鏈接。

列表：

<command>定義命令按鈕。

樣式：

<header>定義section或page的頁眉。

<footer>定義section或page的頁腳。

<section>定義section。

<article>定義文章。

<aside>定義頁面內容之外的內容。

<details>定義元素的細節。

<dialog定義對話框或窗口。

<summary>為 <details> 元素定義可見的標題。

編程：

<embed>為外部應用程序（非HTML）定義容器。

HTML5的優勢：

1、做出更多好看的動畫效果，讓前端開發人員實現更好的頁面交互

HTML5實現的網頁更加的精美，這些動畫是基于HTML5標簽和CSS3樣式共同實現的效果。

2、解決了跨瀏覽器問題

跨瀏覽器問題在HTML5出現之前，對于前端開發人員來說，絕對是一個噩夢級的問題。明明在一個瀏覽器中完全正常運行的HTML、CSS和JavaScript頁面，但換一個瀏覽器之后，就會出現很多問題，比如：JavaScript運行出錯、頁面布局混亂等。改變了這種局面的正是HTML5編程語言，目前主流瀏覽器如Internet Explorer、Chorme、Firefox、Safari都表現出對HTML5的極大熱情。

3、跨平臺、離線使用

HTML5 可以做到跨平臺，多數核心代碼不用重寫，JavaScript的代碼用得好的話，在許多地方都可以用到，包括移動應用、移動網站、PC網站、各種瀏覽器插件，甚至可以用WebKit封裝作為跨平臺的應用程序。雖然這種方式在嚴格意義上來講并非是完全跨平臺，但這樣也在后期的維護上可以節省出量的時間和精力。

用戶可以離線使用、訪問應用，這對于無法隨時保持聯網狀態的移動終端用戶來說是很重要的，且用戶訪問本地的緩存文件，通常意味著更快的訪問速度，從這個角度來說，可謂是大大提高了用戶的體驗度。