HTML5簡單教學(xué)第一章（第二節(jié)）

家好，我是新媒之聲廣告工作室的大白，今天給大家?guī)淼氖荋TML5簡單教學(xué)第一章（第二節(jié)）。

今天給大家?guī)淼臇|西比較多；

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

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

以下代碼標記一個換行：

使用 br 元素 在文本中 換行。

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

標簽定義及使用說明

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

標簽是一個空標簽，意味著它沒有結(jié)束標簽。

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

提示和注釋

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

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

HTML 4.01 與 HTML5之間的差異無。

HTML 與 XHTML 之間的差異

在 HTML 中， 標簽沒有結(jié)束標簽。

在 XHTML 中， 標簽必須被正確地關(guān)閉，比如這樣： 。

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

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

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

目前大多數(shù)瀏覽器支持 標簽。

標簽定義及使用說明

標簽定義段落。

元素會自動在其前后創(chuàng)建一些空白。瀏覽器會自動添加這些空間，您也可以在樣式表中規(guī)定。

提示：在本站的HTML5編程實戰(zhàn)中，你可以練習(xí)使用標簽！

在HTML 4.01 與 HTML5中的差異

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

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

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

定義和用法

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

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

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

兼容性注釋

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

CSS 語法：

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

在我們的 CSS 教程中，您可以找到更多有關(guān) text-align 屬性的細節(jié)。

語法

屬性值

值	描述
left	左對齊文本。
right	右對齊文本。
center	居中對齊文本。
justify	對行進行伸展，這樣每行都可以有相等的寬度（就像在報紙和雜志中）。

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

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

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

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

標簽定義及使用說明

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

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

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

提示和注釋

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

HTML 4.01 與 HTML5之間的差異

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

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

HTML <pre> 標簽

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

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

標簽定義及使用說明

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

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

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

提示和注釋

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

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

在HTML 4.01 與 HTML5中的差異

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

屬性

屬性	值	描述
width	number	HTML5 不支持該屬性。HTML 4.01 已廢棄該屬性。定義每行的最大字符數(shù)（通常是 40、80 或 132）。

全局屬性

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

ul 無序列表屬于雙標簽，一般配合li標簽使用，無序列表屬和wps中表現(xiàn)是一樣的不過無序列表中不只可以寫文字和數(shù)字也可以寫div之類的標簽有的網(wǎng)頁導(dǎo)航就是用ul無序列表標簽寫出來的。

HTML <ul> 標簽

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

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

標簽定義及使用說明

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

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

提示和注釋

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

提示：使用 <ol> 標簽創(chuàng)建有序列表。

HTML 4.01 與 HTML5之間的差異

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

屬性

屬性	值	描述
compact	compact	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定列表呈現(xiàn)的效果比正常情況更小巧。
type	disc square circle	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定列表的項目符號的類型。

值

描述

compact

HTML5 不支持。HTML 4.01 已廢棄。規(guī)定列表呈現(xiàn)的效果比正常情況更小巧。

type

disc

square

circle

HTML5 不支持。HTML 4.01 已廢棄。規(guī)定列表的項目符號的類型。

ol 有序列表標簽和ul無序列表標簽是一個道理，也是配合li標簽使用唯一區(qū)別就是一個前面帶點一個前面帶阿拉伯?dāng)?shù)字。

HTML <ol> 標簽

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

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

標簽定義及使用說明

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

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

提示和注釋

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

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

HTML 4.01 與 HTML5中的差異

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

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

在HTML 4.01中"compact" 屬性已經(jīng)廢棄,在 HTML5中不支持該屬性。

屬性

New：HTML5 新屬性。

屬性	值	描述
compact	compact	HTML5中不支持，不贊成使用。請使用樣式取代它。規(guī)定列表呈現(xiàn)的效果比正常情況更小巧。
reversedNew	reversed	指定列表倒序(9,8,7...)
start	number	HTML5不支持，不贊成使用。請使用樣式取代它。規(guī)定列表中的起始點。
type	1 A a I i	規(guī)定列表的類型。不贊成使用。請使用樣式代替。

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

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

標簽定義及使用說明

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

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

HTML 4.01 與 HTML5之間的差異

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

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

HTML <dt> 標簽

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

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

標簽定義及使用說明

<dt> 標簽定義一個描述列表的項目/名字。
<dt> 標簽與 <dl> （定義一個描述列表）和 <dd> （描述每一個項目/名字）一起使用。
一行中的多個 <dt> 標簽表示由緊鄰的下一個 <dd> 元素定義的多個術(shù)語。

HTML 4.01 與 HTML5之間的差異

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

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

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

HTML <hr> 標簽

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

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

標簽定義及使用說明

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

HTML 4.01與HTML5之間的差異

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

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

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

HTML與XHTML之間的差異

在HTML中，<hr> 標簽沒有結(jié)束標簽。

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

屬性

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

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

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

青島HTML5

格式：

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

定義有記號的文本。

<meter>定義預(yù)定義范圍內(nèi)的度量。

<progress>定義任何類型的任務(wù)的進度。

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

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

<ruby>定義 ruby 注釋。

<time>定義日期/時間。

定義可能的換行符。

表單：

<datalist>定義下拉列表。

<keygen>定義生成密鑰。

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

圖像：

<canvas>定義圖形。

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

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

音頻和視頻：

<audio>定義聲音內(nèi)容。

<source>定義媒介源。

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

<video>定義視頻。

鏈接：

nav>定義導(dǎo)航鏈接。

列表：

<command>定義命令按鈕。

樣式：

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

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

<section>定義section。

<article>定義文章。

<aside>定義頁面內(nèi)容之外的內(nèi)容。

<details>定義元素的細節(jié)。

<dialog定義對話框或窗口。

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

編程：

HTML5的優(yōu)勢：

1、做出更多好看的動畫效果，讓前端開發(fā)人員實現(xiàn)更好的頁面交互

HTML5實現(xiàn)的網(wǎng)頁更加的精美，這些動畫是基于HTML5標簽和CSS3樣式共同實現(xiàn)的效果。

2、解決了跨瀏覽器問題

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

3、跨平臺、離線使用

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

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

隨著5G網(wǎng)絡(luò)逐漸普及，手機已經(jīng)成為了我們的一部分，從前出門要還要想著帶個什么樣子的包，現(xiàn)在的出門只要記得帶好手機就足矣！以前手機要實現(xiàn)一個功能就需要安裝相應(yīng)的APP，而現(xiàn)在微信小程序等帶給我們不一樣的體驗，我們不再需要安裝各種各樣的APP，很多都可以在微信小程序上完成。微信小程序的開發(fā)門檻雖然低了很多，但我們還是需要掌握一定的基礎(chǔ)知識，而作為基礎(chǔ)中的基礎(chǔ)，HTML5是我們必須學(xué)習(xí)的。

一、HTML代碼基礎(chǔ)

1、HTML5的語法要求非常寬松，屬性值可以用單引號、雙引號包含起來，甚至可以不加引號。如：

id="wl" id='wl' id=wl 這三個是一樣的效果。

但需要注意的是如果屬性值中含有空格、單引號、大于小于號、反引號等字符時，則必須加引號，而當(dāng)屬性值中含有單引號時，可以加雙引號，而值中有雙引號時就可以加單引號。為了養(yǎng)成一個好的習(xí)慣，建議好始終給屬性值加雙引號。

2、內(nèi)容標簽是標簽中包含一段內(nèi)容，如p和strong這樣的元素；非內(nèi)容標簽（空元素）是指標簽不包含內(nèi)容，比如換行等，它只有起始標簽，不需要結(jié)束標簽，以HTML5以前為了強調(diào)結(jié)束，經(jīng)常把非內(nèi)容標簽寫成 樣子，而在HTML5中規(guī)定，非內(nèi)容標簽不需要關(guān)閉。常見的非內(nèi)容標簽有：<meta>、<img>、 、<input>、<link>、<hr>、<embed>等。

3、注釋：不論單選還是多行，只需要把注釋放在。

4、HTML頁面根元素，在整個頁面中html是根元素，在這個元素中一般有兩個屬性，一個是lang，另一個是manifest。

<html lang="zh-cmn-Hans">：聲明頁面的語言為簡體中文。（非標準寫法為lang="zh-CN"）；manifest屬性用于設(shè)定頁面緩存，它一旦設(shè)置后，瀏覽器便會將需要緩存的文件保存在本地，主要適用于不依賴網(wǎng)絡(luò)，且下載后不需要再次更新的HTML5游戲、應(yīng)用等，如果頁面內(nèi)容需要頻繁更新的應(yīng)該少用該屬性，具體用法可以查詢HTML5手冊，這里不詳細說明。

5、Head元素包含五個主要部分，分別是title、link、style、base和meta元素。title元素即網(wǎng)頁的標題；link元素定義了文檔與外部資源的關(guān)系，除了CSS外，還有許多的外部資源也通過這一元素引入頁面；style元素用于在頁面中定義樣式；base元素用于標記文檔的基礎(chǔ)URL地址，還可被用于設(shè)置全局的瀏覽器打開方式，如：<base target="_blank">設(shè)置頁面中所有的鏈接均在新窗口中打開

;meta元素是head中各類最豐富的一個元素，雖然它包含了多種多樣的元數(shù)據(jù)，但它被規(guī)定了必須包含name（元數(shù)據(jù)名稱），http-equiv（編譯指令）和charset（字符編碼）三種屬性的其中一種。如不希望頁面被抓取并公開時，我們可以在頁面中添加名為robots的meta標記，如：<meta name="robots" content="none">，反之則所有都被檢索到<meta name="robots" content="all">

。meta元素還能完成諸如刷新、重定向、緩存時間等功能。

6、HTML5新增了header元素，專門用來表述這樣的頭部區(qū)域，section元素對應(yīng)不用的內(nèi)容版塊，文章可以用article元素來表示，頁面的側(cè)邊欄可以用aside元素來表示，而且不僅可以放在整個頁面的代表側(cè)邊欄區(qū)域，還能放入section或article中，來容納一些與版塊和文章相關(guān)的內(nèi)容。

7、footer元素和header元素并非區(qū)塊內(nèi)容，在這兩種元素之內(nèi)不能再嵌套放入類似section之類的元素。

8、不是所有的文字段落都適用p元素，如一段文字為聯(lián)系信息時，則應(yīng)使用address元素。

9、定義列表的除了有ul和ol外，還有一種更加自定義的形式，它由三種元素的組合而成，分別是dl、dt和dd。

10、內(nèi)容分組元素figure元素，它主要用于展示插圖、圖表、照片、代碼列表等。

11、HTML5加入了一種新的內(nèi)容分組元素，用來指定頁面的主要內(nèi)容，main元素，每一個頁面中最多只能有一個main元素，另外還有像水平分隔線的hr,表示源代碼的pre，代表引用的blockquote等都同樣屬于內(nèi)容分組元素。

12、在過去HTML版本中，a還可以當(dāng)成錨點，如<a name="a1"></a>，但在HTML5中把這一特性去掉了，當(dāng)href屬性缺失時，它被視作一個占位符，而不會顯示為一個超鏈接。

13、span元素是一種常見的文本元素，但如果不對span設(shè)置樣式，則spqn中的文本和其他的文本看上去不會有任何差異。

14、在HTML5中有兩種表示強調(diào)的文本元素，分別為em和strong，em元素更多代表語義、語氣的加強，而strong則更加強調(diào)頁面文本的重要性、緊急程度等，瀏覽器中em默認的顯示為斜體，而strong則顯示為粗體。

15、big標記的文本顯示大于普通的段落文本，而small標記的文本則小于普通的段落文本；當(dāng)需要插入某句被引用的話，或者某段文字摘錄時，可以使用q元素，而當(dāng)需要插入文獻的標題、作者、鏈接時使用cite元素，q元素默認在頭和尾加上雙引號，而cite元素默認顯示為斜體。

16、表單在制作時需要設(shè)置method和action屬性，分別用來指定表單提交數(shù)據(jù)的方式和目的頁面；數(shù)據(jù)提交的方式有兩種，get和post，get是把數(shù)據(jù)放在URL中，以明文的方式發(fā)送給后臺，它不能傳輸過大的數(shù)據(jù)，也不能傳輸文件類數(shù)據(jù)，而post是把數(shù)據(jù)放在數(shù)據(jù)體內(nèi)再發(fā)給后臺，數(shù)據(jù)不能直接被看到，可傳輸?shù)臄?shù)據(jù)量較大，所以一般都選擇使用post方式。

17、在文本輸入框可以加入placeholder（占位符）屬性，值為框內(nèi)顯示的文本，也可以為input元素添加required屬性使該表單項必填，也可以添加autofocus屬性使其自動獲得焦點，一般設(shè)置第一個字段。

18、HTML5為input元素增加了很多新的類型，如電話的tel，電子郵件的email，日期的date等。

19、radio表示單選按鈕，同一組的單選按鈕具有相同的name屬性，它的值由value屬性決定，checked屬性表示該按鈕默認選中。如：

<p>
<label for="sex">性別：</label>
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
</p>

還可以使用分區(qū)度更高的fieldset元素，它可以對表單內(nèi)容的一部分進行打包，生成一組相關(guān)的表單字段，它使用legend元素指定標題。

checkbox的input元素為復(fù)選框，checked屬性為選中狀態(tài)；select元素生成下拉菜單，元素使用option元素標記。

在線咨詢

上一篇：你不可不知的HTML優(yōu)化技巧，還不抓緊時間收藏
下一篇：SFC游戲模擬器：Snes9X EX+手機版

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5簡單教學(xué)第一章（第二節(jié)）

您的項目需求