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日