HTML&javaSkcript&CSS&jQuery&ajax（十）
HTML
1、SVG直接嵌入HTML網頁 ,SVG 是使用XML描述2D圖像的語言，Canvas通過JavaScript來繪制2D
<svg xmlns="http://www.w3.org/200/svg" version="1.1" height="190">
<polygon point="100,10,40,190,60,10,190,190" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/></svg>
2、MathML <math xmlns="http://ww.w3org/1998/Math/MathMl">
<mrow> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>a</mi><mn>2</mn></msup> <mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup> </mrow> </math>
3、圖片拖放 先定義內聯 <style type="text/css">
#div1{ width:"350px;height:"70px;padding:10px; border:1px;solid #aaaaaa;}</style>
<script> function allowDrop（ev）{
ev.preventDefault();}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransefaer.getData("Tesxt");
ev.target.appendChild(document.getElementById(data);)}</script>
<div id="div1" ondrop="drop(event)" ondragover="allowdrop（event）"></div>
<br> <img id="drag1" src="/image/logo.png" draggable="true" ondragstart="drag(event)" width="100" height="100">
</body>
4、獲取地址位置經緯度 <script> var x=doucment.getElementById("demo");
function getLocation(){
if (navigation.geolocation){
navigation.geolocation.getCurrentPosition(showPostion);
}else{
x.innerHTML="該瀏覽器不支持活動的地理位置"}}
function showPosition(position){
x.innerHTML="緯度” +position.coords.lattitude+“經度”+position.coords.longtitude;}</script>
5、Video視屏處理標簽 <div style="text-align:center">
<button onclick="playPause()">暫停/播放</button>
<button onlick="makeBog()">放大</button>
<button onlick="makeSmall()>縮小</button>
<button onlick="makeNormal()">普通</button><br>
<video id="video1" width="420"> <source="mov_bbb.mp4" type="video/mp4">
<souce src="mov_bbb.ogg" type="video/ogg"></video></div>
<script> var myVideo=document.getElementById("video1");
function playPause(){
if(myVideo.paused)
myVideo.play();
else myVideo.pause();
}
function makeBig(){ myVideo.width=560;}
function makeSmall(){myVideo.width=320;}</script>
6、audio標簽 <audio controls><source src="horse.ogg": type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg"></audio>
7、輸入顏色 <form action="demo-form.php"> 選擇你喜歡的顏色<input type="color" name="favcolor"></br>
<input type="submit":></form>
8、輸入日期 標簽 <form action="demo-form.php"> 你的生日<input type="date" name="SueKay">
<input type="submit":></form> <!-- 其他的郵件地址 等等都是一個類型>
9、 輸入限制的數字 <form action=" demo-form.php">
<input type="number" name="quantity" min="1" max="5">
<input type=“submit”></form>
滑動欄的形式限制 <form action=" demo-form.phjp"> Points" <input type="range" name="points" min=1" max="5">
<input type="submit“> </form>
10、HTML表單元素
datalist 元素 <input l;ist="browsers"> <datalist id="browsers"> <option value="Internet Explorer">
<option value="Firefox"> <option value="Chrome"> </datalist>
HTML&javaSkcript&CSS&jQuery&ajax（十）