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(十)的更多相关文章
- HTML&javaSkcript&CSS&jQuery&ajax(二)
一.HTML 1.标签<a href="http:www.baidu.com">This is a link </a> <img sr ...
- java-HTML&javaSkcript&CSS&jQuery&ajax( 八)
一.JavaScript教程笔记 1.在web页面中一般使用JavaScript脚本语言,支持跨平台,跨浏览器,驱动网页,与用户交互.另外Node.js把JavaScript引入到了服务器端. Jav ...
- java-HTML&javaSkcript&CSS&jQuery&ajax
CSS 伪装 1.<style>a;link{color:#000000} a:visited{color:#000000; a.:hover{color:#FF00FF} a:acti ...
- XSS-HTML&javaSkcript&CSS&jQuery&ajax
1.设置不同的样式列表 <style> ul.a{list-style-tyrp:circle;} ul.b{list-style-type:square;} ul.c{list ...
- HTML&javaSkcript&CSS&jQuery&ajax(八)
一. <!DOCTYPE html><html><head><meta charset="utf-8"><tiitle> ...
- HTML&javaSkcript&CSS&jQuery&ajax(七)
’一.HTML5 实例 <video width="430" controls> <source src="mov_nnn.mp4" t ...
- HTML&javaSkcript&CSS&jQuery&ajax(五)
一.Framset标签定义了每个框架中的HTML文档, 1. <framset cols="25%,75%"> <frame src="frame_a. ...
- HTML&javaSkcript&CSS&jQuery&ajax(四)
一.HTML创建响应设计 Responsive Web Design 可以改变尺寸传递网页,对于平板和移动设备是必须的 1.<!DOCTYPE html><html lang=&qu ...
- HTML&javaSkcript&CSS&jQuery&ajax(三)
一.HTML块元素 1.块级元素 Block level element ,内联元素 inline element , HTML<div>元素属于块级元素,他是组合其他HTML元素的容器, ...
随机推荐
- spring4 注入参数
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- Object的wait/notify/notifyAll&&Thread的sleep/yield/join/holdsLock
一.wait/notify/notifyAll都是Object类的实例方法 1.wait方法:阻塞当前线程等待notify/notifyAll方法的唤醒,或等待超时后自动唤醒. wait等待其实是对象 ...
- shell编程 之 输入输出重定向
1 输入输出重定向 标准输入:从终端得到命令,对于计算机来说,是从终端获得了命令,执行完了以后,结果和执行状态或者错误提示又会发回终端,这叫标准输出. 输入输出重定向就是从终端以外的别的地方得到输入, ...
- mysql数据库可以远程连接或者说用IP地址可以访问
mysql数据库可以远程连接或者说用IP地址可以访问 一般情况不建议直接修改root的权限, 先看下,自己mysql数据库的用户级权限 mysql -u root -p----->用root登陆 ...
- Android 5.0以上Material Design 沉浸式状态栏
偶然在知乎上看到这个问题,Android 5.0 如何实现将布局的内容延伸到状态栏,之前也见过多个应用的这个功能,但是知乎上的答案却没有一个真正实现此功能的一类是把标题栏设置App主题颜色,一类是提取 ...
- P3168 [CQOI2015]任务查询系统
题目地址:P3168 [CQOI2015]任务查询系统 主席树的模板题 更模板的在这儿:P3834 [模板]可持久化线段树 1(主席树) 形象的说,P3834是"单点修改,区间查询" ...
- FAT32文件格式示例解析
1.前言 本文主要以一个示例来分析FAT32文件系统的格式,对FAT32文件系统的各个区域详细分析. 2.FAT32文件系统典型分区 3.FAT32文件系统示例 按如下步骤在ubuntu下创建FAT3 ...
- 检索每个字符串的子串(python散列表实现)
import re def get_str(i,num): str_list = re.findall(r'.{{{str_length}}}'.format(str_length=i), num) ...
- mongodb3.4.6配置主从
.rpm包安装mongodb3.4.6 下载地址:https://repo.mongodb.org/yum/redhat/7/mongodb-org/3.4/x86_64/RPMS/ rpm -ivh ...
- python pip下载速度慢的解决方法
pip是python内置的非常好用的下载工具,基本可以下载全部的python库.它还有一个非常好的特点,当你安装一个库的时候,它会自动帮你安装所有这个库的依赖库.完全一键式操作.非常方便.但是由于pi ...