html5--day2-3

2019-04-28 本文已影响0人这是木子吖

1.SVG

将SVG嵌入HTML页面

<!DOCTYPE html>
<html>
<body>
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
 
</body>
</html>

效果图

2.MathML

MathML是一种数学标记语言，对应标签为<math>...</math>
------------------暂时还没看懂哈哈哈----------------

3.拖放

3.1 设置元素为可拖放

<img draggable="true">

3.1拖放什么

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

注：
dataTransfer.setData（）-设置被拖数据的数据类型和值
Text-数据类型
id-可拖动元素

3.2 放到何处

ondragover
调用方法-event.preventDefault()

3.3 进行放置

ondrop

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

注：
1.调用preventDefault（）来避免浏览器对数据的默认处理（drop event的默认行为是以链接形式打开）；
2.通过dataTransfer.getData（“Text”）方法获得被拖的数据。该方法将返回在setData（）方法中设置为相同类型的任何数据；
3.被拖数据是被拖元素的id（“drag1”）；
4.把被拖元素追加到放置元素（目标元素）中。

4.地理定位

用于定位用户的位置

4.1 使用地理位置

var x=document.getElementById("demo");
function getLocation()
{
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
    {
        x.innerHTML="该浏览器不支持获取地理位置。";
    }
}
 
function showPosition(position)
{
    x.innerHTML="纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude;    
}

注：
1.检测是否支持地理定位；
2.如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息；
3.如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象；
4.showPosition() 函数获得并显示经度和纬度。

4.2 处理错误和拒绝

Permission denied-用户不允许地理定位
Position unavailable-无法获取当前位置
Timeout-操作超时

5 视频

<video>-提供播放，暂停和音量控件开控制视频，支持MP4，WebM，Ogg。

6 音频

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

7 input

7.1 color（颜色）

<input type ="color " name="favcolor">

7.2 date（日期）

<input type="data" name="bday">

7.3 datetime(本地时间)

<input type="datetime" name="bdaytime">

7.4 datetime-local(无时区)

<input type = "datatime-local" name="bdaytime">

7.5 email(邮箱)

Email:<input type = "email" name="email">

7.6 month(月份)

<input type = "month" name="bdaymonth">

7.7number(数值)

数量 ( 1 到 5 之间 ):
<input type="number" name="quantity" min="1" max="5">
数字类型的限定：
disable-禁用
max/min-最大/最小
maxlength-最大字符长度
pattern-输入字段模式
readonly-输入值无法修改
require-规定字段的值是必需的
size-规定输入字段中的可见字符数
step-间隔
value-默认值

7.8 range 滑动条

<input type ="range" name="pnints" min="1" max="10">

7.9 其他

search-搜索域
tel-电话
time-时间
url-网址
week-周和年
注：用法同7.1-7.8

2019年4月28日