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日
网友评论