(一)HTML HTML5新增标簽整理
HTML5增加了主要增加了一些結構标簽,媒體标簽,表單标簽以及一些功能性标簽
1,結構标簽
-
section
定義文檔中的節,如章節,頁眉頁腳等,可與和,h2等标簽結合使用,表示文章結構
-
article
定義頁面獨立的内容區域,如一篇文章
-
aside
定義文檔的頭部區域
-
header
定義文檔的頭部區域
-
hgroup
對頁面中一個内容區塊的标題進行整合;标題組
-
footer
定義也叫,如作者姓名,位址等
-
nav
定義導航部分,他是有意義的标簽,并不是在某處加上這個标簽就有了當行的樣式了,這隻是有意義的div而已,在頭部header中加入菜單标簽<nav>,nav标簽可以和<ul><li>标簽何用
-
figure
定義獨立的劉内容,如圖像,圖檔,照片,代碼等
這個标簽可以和他的配套标簽聯合使用<figcaption>,不過<figcaption></figcaption>中間寫标題,p标簽寫内容
還可以和<dt><dd>聯合使用,其中<dt></dt>是寫标題,而<dd>是寫内容的,
2,表單标簽
需要注意相容性問題,使用時需嚴格測試,大部分标簽隻有高版本浏覽器支援
-
email
輸入郵箱位址,送出表單時會自動驗證是否合法;如<input type=“email”>
-
url
輸入yrl位址,送出表單時會自動驗證是否合法,如<input type=“url”>
-
number
輸入域為數值,如
max:設定最大值
min:設定最小值
pattern:驗證輸入字段的模式
reqired:不可為空
step:規定合法的間隔
-
range 包含一定範圍内數字值的數字域
<input type=“range” min=“1” max=“10”>
特有屬性介紹:
max:設定最大值
min:設定最小值
step:規定合法的間隔
-
date
從日期選擇器中選擇一個日期,如 <input type=“date”>
-
datetime-local
從日期選擇器中選擇一個日期和事件,如<input type=“datetime-local”>
-
month
選擇一個月份如<input type=“mouth”>
-
week
選擇一個周 如<input type=“week”>
-
search
搜尋 如 <input type=“search”>
-
clolr
顔色選取,可擷取顔色響應的十六進制顔色值, 如 <input type=“color” value="#FFFFFF">
3,媒體标簽
-
video 定義視訊,IE9+,目前隻支援MP4,Ogg,WebM格式,如
<video src=“movie.mp4” controls>您的浏覽器不支援video标簽</video>
或者
<video width=“320” height=“240” controls>
<source src=“movie.mp4” type=“video/mp4”>
<source src=“movie.ogg” type=“video/ogg”>
</video>
| 屬性 | 介紹 |
|---|---|
| src | 視訊url |
| autoplay | 視訊就緒後馬上播放 |
| controls | 向使用者展示控件,如播放按鈕 |
| height | 定義播放器高度 |
| width | 定義播放器寬度 |
| loop | 是否循環播放 |
| muted | 靜音 |
| poster | 值為YRL,規定點選播放按鈕前展示的圖像 |
| proload | 視訊在頁面加載時就進行加載,并預備播放,如使用autoplay屬性,則忽略該屬性 |
-
audio 定義音頻,IE9,目前隻支援MP3,Ogg,Wav格式,如
<audio src=“misic.mp4” contorls>您的浏覽器不支援audio标簽</audio>
或者:
<video width=“320” height=“240” controls>
<source src=“misic.mp3” type=“audio/mp3”>
<source src=“misic.ogg” type=“audio/ogg”>
</video>
屬性|介紹
------------|----------------------
src|音頻URL
autoplay|視訊就緒後馬上播放
controls|向使用者展示控件,如播放按鈕
loop|是否循環播放
muted|靜音
preload:視訊在頁面加載時就進行加載,并預備播放,如使用autoplay屬性,則忽略該屬性
-
embed
定義嵌入的内容,可以是各種類型的内容,如插件,視訊,音頻等等
<embed src="demo.swf />
| 屬性 | 介紹 |
|---|---|
| src | 内容YRL |
| height | 嵌入内容的高度 |
| width | 潛入内容的寬度 |
| type | 嵌入内容的MIME類型,如 application/x-shockwave-flash |
還有一些其他屬性可以根據引入的内容類型來選擇使用,如當引用内容為音頻或視訊時,可使用autoplay,loop,lolume[音量調節]等屬性.
4,新增其他功能标簽
-
mark
标記文本,IE9,如,<mark>被标記文本
-
propress
進度條,IE9+ <progress value = “10” max=“100”>
-
time 标記時間,友善搜尋引擎搜尋,IE9+ 如
<time datetime=“2016-02-14”>情人節
還可以設定pudate屬性,來表示該事件為文檔的建立時間,注意相容性問題
- ruby 注釋,rt内為注釋的内容,rp内為浏覽器不支援時展示的内容
- cnavas 标簽定義圖形,比如圖示和其他圖像.改标簽基于Javascript的繪圖API
-
command
定義指令按鈕,如單選按鈕,複選框或者按鈕,相容性極差,IE9支援
-
details
用于描述文檔或文檔的某個部分的細節,類似于下拉清單,相容性極差chrome與Safari支援,如
<details>
<summary>指定的标題,使用者點選标題時暫時下面的所有内容,内容可以是任何形式的内容
<div>
<p>内容描述</p>
</div>
</details>
當增設open屬性時,描述内容預設展示.
<details open>
<summary>指定的标題,使用者點選标題時暫時下面的所有内容,内容可以是任何形式的内容
<div>
<p>内容描述</p>
</div>
</details>
-
dialog 定義對話框,如提示框,相容性極差,chrome與safari支援,如
<dialog>内容</dialog>
當增設open屬性時,對話框顯示
<dialog open>内容</dialog>
-
keygen
加密,新的web标準中已經廢棄
-
output
計算結果輸出展示,IE不支援,如:
屬性介紹:
name:定義唯一名稱,送出表單時使用
for:計算中使用的元素
<from οninput=“x.value = parseInt(a.value)+parseInt(b.value)”>
<input type=“range” id=“a” value=“50”>
100+
<input type=“number” id=“b” value=“50”>
=
<output name=“x” for=“a b” >
</form>
-
menu
這個标簽可以和<li>标簽合用
可以給郵件單機中添加自己的内容
(二)HTML5 新增屬性
-
sizes
sizes定義連結屬性的大小,支隊rel="ircon"其作用,寬度高度之間用x或者X分隔,如:
-
base
base為頁面上所有的相對連結規定預設URL會預設目标,如
<base href=“http://wwww.junru.com/images/” taget="_blank">
<body>
<img src=“demo.png”>
<a href=“www.baidu.com”>将在新視窗打開,因為base的target屬性為_blank
- input标簽新增屬性
| 新增屬性 | 意義 |
|---|---|
| autocomplete | 是否啟動自動完成功能 |
| autofocus | 頁面加載時自動花去焦點 |
| height | 設定type=image的高度 |
| width | 設定type=image寬度 |
| required | 必填 |
| placeholder | 提示文字 |
| pattern | 指定輸入格式,如pattern="[0-9]" //正規表達式 |
| max | 規定輸入字段的最大值 |
| maxlenght | 規定輸入字段中的字元的最大長度 |
| min | 最小值 |
| form | input元素所屬的一個或多個表單,值必須是form_id |
| formaction | 可以覆寫form的action屬性 |
| formenctype | 覆寫表單的enctype屬性 |
| formmethod | 覆寫表單的method屬性 |
| formnovalidate | 覆寫表單的novlidate屬性,如果使用該屬性,則送出表單時不進行驗證 |
| formtarget | 覆寫表單的target屬性 |
-
a 超連結,注意:如果沒有href屬性,則hreflanh,media,rel,target,type不可用.
新增屬性:
download:指定下載下傳連結
media;指定媒介類型
type:指定MINE類型
-
ol有序清單 如:
<ol start=“20” reversed>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
-
style内嵌樣式,如;
<div>
<style>
h1{color:red;}
p{font-szie:20px}
<style>
<h1>标簽</h1>
<p>内容</p>
</div>
- iframe
新增屬性|介紹
------------|-----------------
沒有async與defer參數是,浏覽器會立即加載并執行JS腳本,按照文檔的順序依次執行
defer:文檔的加載與JS腳本的加載同時執行,等文檔所有元素解析完成後,domContentLoaded事件觸發事件才執行
async:文檔與js腳本的華仔與執行是并行進行的,即異步執行
新增全局屬性詳解
-
data-*
自定義資料屬性,屬性名中不要包含大寫字母,如<p data-type="content>内容
-
hidden
隐藏
-
spellcheck
拼寫檢查[錯誤劃紅線]<textarea spellcheck=“teue”></texttarea>
-
contentteditable
指定元素可編輯,如
<p contenteditable=“true”>内容<p>
-
draggable
指定元素可拖動具體需結合ondragstart等屬性來使用,如:
<p draggable=“true">内容</p>
簡單的拖動效果實作：
<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p draggable=“true" id="drag" ondragstart="drag(event)">拖動的内容</p>
代碼說明：
1. 拖動資料：ondragstart指定了被拖動的資料
function drag(event){
event.dataTransfer.setData("Text",ev.target.id);
//資料類型text，可拖動元素ID為drag
}
2. 放到何處： ondragover指定了在何處放置被拖動的資料
function allowDrop(event){
event. preventDefault( );
}
3. 放置： ondrop 放置時調用drop函數
function drop(event){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
![怎樣使用SpringMVC控制頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)