天天看點

HTML5常用标簽

1.文法:

      HTML注釋以<!-- 開頭 ,以-->結尾。

      注釋的部分浏覽器不解析,注釋是為了給程式員看,更好的了解html代碼

      <!--

      這裡編寫HTML注釋,

      可以是一行,也可以是多行

       -->

三:HTML中常用标簽

1.标題标簽: h1--h6,字型逐漸縮小

2.段落标簽:<p></p>

3.換行标簽:<br/>

4.水準線标簽:<hr/>

5.範圍标簽:一般在大段内容中,為了突出部分内容的時候使用的标簽;很少獨立使用,一般嵌套在其他的标簽中使用。<span></span>

HTML5常用标簽

1.基本屬性

HTML5常用标簽

2.設定圖檔的熱點區域--了解

HTML5常用标簽

1.無序清單/有序清單

HTML5常用标簽

1.一般用在圖文混編的場景中。

HTML5常用标簽

1.一般就是做容器,盛放其他标簽的,将其他标簽組合在一起用來布局

1.html标簽可以分為塊狀元素和行級元素兩類。

            塊狀元素:一般都是新起一行,可以容納行内元素和其他塊級元素;

            行級元素:一般都是語義級别的基本元素,一般隻能容納文本或者其他行内元素。

            PS:區分的簡單方法:是否獨占一行。

2.塊狀元素和行内元素的差別:

             塊級元素會獨占一行,其寬度自動填滿其父元素寬度;

             行内元素會排列到同一行裡,其寬度随元素的内容變化而變化。

             塊級元素可以設定寬高;行内元素設定寬高無效。

             塊級元素可以設定margin,padding屬性;行内元素的水準方向的padding會有邊距效果,但是豎直方向的padding沒有效果。(此處的屬性稍後介紹)

3.我們上面已經講過的标簽中歸類一下:

         屬于塊狀元素的:

                    标題标簽 h1-h6,

                    段落标簽 p ,

                    水準線标簽 hr,

                    有序清單标簽 ol--li,

                    無序清單标簽 ul--li,

                    定義描述标簽 dl-dt-dd,

                    容器标簽 div:

         屬于行級元素的:

                  範圍标簽:span

                  圖像标簽:img

1.  超連結标簽一般有兩個作用:1、用來實作頁面間的跳轉 2、實作錨連結功能

2.  頁面間的跳轉

HTML5常用标簽

3.錨連結:當一個頁面長度超過一屏的時候,想迅速跳轉到指定位置,例如大家經常浏覽網頁的時候,滑動超過一屏,右下角經常會出現傳回頂部連接配接,這個就是錨鍊                     接實作的。這個定位可以實作本頁面間的錨連結也可以實作不同頁面間的錨連結。

HTML5常用标簽

4.頁面間的錨連結

HTML5常用标簽

1.規則表格

HTML5常用标簽
HTML5常用标簽

 2.不規則表格:跨行快列

HTML5常用标簽
HTML5常用标簽

3. 表格的進階标簽--标題标簽和邏輯分區标簽

HTML5常用标簽

上訴的标簽都是用在<table></table>中

1.用于采集使用者輸入的資料。用于和伺服器進行互動。

2.表單的元素

HTML5常用标簽

3. 表單項元素中的一些屬性:

HTML5常用标簽

 4.文本框

HTML5常用标簽

 5. 密碼框

HTML5常用标簽

 6.單選按鈕

HTML5常用标簽

 7.複選框

HTML5常用标簽

 8.檔案域

HTML5常用标簽

 9.日期-html5的新特性

HTML5常用标簽

 10.隐藏域

HTML5常用标簽

 11.下拉清單框

HTML5常用标簽

 12.文本域

HTML5常用标簽

 13.按鈕:送出按鈕 / 重置按鈕 / 圖像按鈕 / 普通按鈕

HTML5常用标簽

button标簽可以與input實作的按鈕互相替換

HTML5常用标簽

 14.标簽

HTML5常用标簽

1.通過使用架構,你可以在同一個浏覽器視窗中顯示不止一個頁面。例如大家可以觀察一下自己的京東個人中心頁面,點選左側内容的時候,隻有右邊頁面在變動

2.架構文法

HTML5常用标簽

 3.架構集

HTML5常用标簽
HTML5常用标簽
HTML5常用标簽
HTML5常用标簽

1.div-ul-li/div-ol-li:常用于導航布局

  div-dl-dt-dd:常用于圖文混編布局

  div-form:常用于表單布局

  div-table:常用于局部規則資料展示布局

1.DOCTYPE 不同

2.指定字元編碼文法不同 

3. HTML5中新增的語義标簽-了解

1)article:定義頁面獨立的内容區域。

2)aside:定義頁面的側邊欄内容。

3)bdi:允許您設定一段文本,使其脫離其父元素的文本方向設定。

4)   details:用于描述文檔或文檔某個部分的細節

5)dialog:定義對話框,比如提示框

6)summary:标簽包含 details 元素的标題

7)header:定義了文檔的頭部區域

8)footer:定義 section 或 document 的頁腳。

9)nav:定義導航連結的部分。

10)progress:定義任何類型的任務的進度。

11)section:定義文檔中的節(section、區段)。

12)time:定義日期或時間。

13)wbr:規定在文本中的何處适合添加換行符

1. form新屬性 

       autocomplete 屬性:autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。當使用者在自動完成域中開始輸入時,浏覽器應該在該域中顯示填寫的選項。

                                        提示: autocomplete 屬性有可能在 form元素中是開啟的,而在input元素中是關閉的。

                                        注意: autocomplete 适用于 <input> 标簽,以及以下類型的 <input> 标簽:text, search, url,telephone, email, password, datepickers, range 以                                                      及 color。

HTML5常用标簽

 2. input 新屬性

            list屬性:list 屬性規定輸入域的 datalist。datalist 是輸入域的選項清單。 

  

3.multiple:multiple 屬性是一個 boolean 屬性。multiple 屬性規定 <input> 元素中可選擇多個值。

                   注意: multiple 屬性适用于以下類型的 <input> 标簽:email 和 fifile 

                  傳多個檔案: <input type="file" name="img" multiple>

4.placeholder:placeholder 屬性提供一種提示(hint),描述輸入域所期待的值。簡短的提示在使用者輸入值前會顯示在輸入域上。

                         注意: placeholder 屬性适用于以下類型的 <input> 标簽:text, search, url, telephone, email 以及password。

                        <input type="text" name="userName" placeholder="請輸入使用者名"> 

5.requiredrequired 屬性是一個 boolean 屬性。required 屬性規定必須在送出之前填寫輸入域(不能為空)。

                              注意:required 屬性适用于以下類型的 <input> 标簽:text, search, url, telephone, email, password,date pickers, number, checkbox, radio 以及 fifile。

                              使用者名: <input type="text" name="username" required>

6.HTML5新的表單元素--了解

       1)datalist:input标簽定義選項清單。請與 input 元素配合使用該元素,來定義 input 可能的值。

       2)keygen:規定用于表單的密鑰對生成器字段。

       3)output:标簽定義不同類型的輸出,比如腳本的輸出。

7. HTML5中新的input類型

          1)HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。 

          2)color,date,datetime,datetime-local,email,month,number,range,search,tel,time,url,week

          3)并不是所有的主流浏覽器都支援新的input類型,不過您已經可以在所有主流的浏覽器中使用它們了。即使不被支援,仍然可以顯示為正常的文本域。 

8. HTML5中新增的音頻 

          1)直到現在,仍然不存在一項旨在網頁上播放音頻的标準。大多數音頻是通過插件(比如 Flash)來播放的。然而,并非所有浏覽器都擁有同樣的插件。HTML5                 規定了在網頁上嵌入音頻元素的标準,即使用 <audio> 元素

HTML5常用标簽

          2)目前, <audio> 元素支援三種音頻格式檔案: MP3, Wav, 和 Ogg,音頻格式的MIME類型 

HTML5常用标簽

 9. HTML5中新增的視訊 

HTML5常用标簽
HTML5常用标簽

10. HTML5中已經移除的元素:frame,frameset,noframes 

HTML5常用标簽

繼續閱讀