html5內容快速學習

時間 2019-11-11

標籤 html5 html 內容快速學習欄目 HTML5 简体版

原文原文鏈接

accessKey 快捷鍵javascript

<input type="text" accessType="m"/>
<!-- chrome按下快捷鍵alt+m,firefox按下shift+alt+m-->

contenteditable 內容可編輯css

<p contenteditable="true">
</p>

data-*自定義屬性html

使用dataset可能引發瀏覽器兼容問題，可使用獲取attribute的方式html5

<!DOCTYPE HTML>
<html>
<body>
<input id="te" type="text" accesskey="j" data-age="1"/>
<script >
var a=document.getElementById("te");
alert(a.dataset.age);
</script>
</body>
</html>

contextmenu,尚無支持的瀏覽器java

<p contextmenu="supermenu">本段落擁有一個名爲 "supermenu" 的上下文菜單。這個菜單會在用戶右鍵單擊該段落時出現。</p>  

<menu id="supermenu">
  <command label="Step 1: Write Tutorial" onclick="doSomething()">
  <command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
</menu>

dir規定文本方向ltr:從左到右 rtl從右到左node

<p dir="ltr">
</p>

spellcheck拼寫檢查chrome

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>text</title> 
</head>
<body>
<textarea spellcheck="true">
</textarea>
</body>
</html>下圖爲chrome下效果

tabindex瀏覽器

<a href="/" tabindex="2">2</a>
<a href="" tabindex="1">1</a>
<a href="" tabindex="3">3</a>

citeruby

<cite> 標籤一般表示它所包含的文本對某個參考文獻的引用，好比書籍或者雜誌的標題。
按照慣例，引用的文本將以斜體顯示。

base標籤_設置url相對尋址的基址異步

<head>
<base href="http://www.a.com.cn/i/" />
<base target="_blank" />
</head>

noscript_js禁用時顯示的內容

  <noscript>Your browser does not support JavaScript!</noscript>

abbr_縮寫

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

del_刪除線

a dozen is <del>20</del> 12 pieces

mark_突出顯示

<p>Do not forget to buy <mark>milk</mark> today.</p>

ruby_註音

<ruby>
 漢 <rt> ㄏㄢˋ </rt>
</ruby>

track_字幕

<video width="320" height="240" controls="controls">
  <source src="forrest_gump.mp4" type="video/mp4" />
  <source src="forrest_gump.ogg" type="video/ogg" />
  <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
  <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>

equiv_週期刷新

<meta http-equiv="refresh" content="4">

async_異步執行腳本

<script type="text/javascript" src="demo_async.js" async="async"></script>

prefetch_預加載

<link rel='prefetch' href='secondary.js'>

defer_推遲腳本加載,等頁面加載完才直接js內容，能夠優化頁面速度

<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>

wbr_瀏覽器換行位置建議

<p>
若是想學習 AJAX，那麼您必須熟悉 XML<wbr>Http<wbr>Request 對象。
</p>

nav_導航菜單

<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

autocomplete_input自動完成

<input type="email" name="email" autocomplete="off" />

fieldset

<fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    體重：<input type="text" />
 </fieldset>

novalidate屬性_提交表單不驗證有效性

<form action="demo_form.asp" novalidate="novalidate">
  E-mail: <input type="email" name="user_email" />
  <input type="submit" />
</form>

datalist_爲input提供可能的輸入(輸入提示)

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

optgroup_對option進行分組

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

output_計算結果

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form>

progress_進度

下載進度：
<progress id="p" value="22" max="100">
</progress>

oninput事件_嘗試修改input值時觸發

<!DOCTYPE html>
<html>
<body>

下載進度：
<progress id="p" value="22" max="100">
</progress>
<input id="r" type="range" value=0 max=100 min=0 oninput="c()"/>
<p><b>註釋：</b>Internet Explorer 9 以及更早的版本不支持 <progress> 標籤。</p>
<script>
function c()
{
 var value=document.getElementById("r");
var p=document.getElementById("p");
p.value=value.value;
}
</script>
</body>
</html>

meter_與progress相似,用來顯示具體指的範圍

<p>顯示度量值：</p>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>

css選擇器

[href]:{
color:red;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。