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(十)的更多相关文章

  1. HTML&javaSkcript&CSS&jQuery&ajax(二)

    一.HTML 1.标签<a href="http:www.baidu.com">This is a link </a>         <img sr ...

  2. java-HTML&javaSkcript&CSS&jQuery&ajax( 八)

    一.JavaScript教程笔记 1.在web页面中一般使用JavaScript脚本语言,支持跨平台,跨浏览器,驱动网页,与用户交互.另外Node.js把JavaScript引入到了服务器端. Jav ...

  3. java-HTML&javaSkcript&CSS&jQuery&ajax

    CSS  伪装 1.<style>a;link{color:#000000} a:visited{color:#000000; a.:hover{color:#FF00FF} a:acti ...

  4. XSS-HTML&javaSkcript&CSS&jQuery&ajax

    1.设置不同的样式列表 <style> ul.a{list-style-tyrp:circle;}    ul.b{list-style-type:square;}   ul.c{list ...

  5. HTML&javaSkcript&CSS&jQuery&ajax(八)

    一. <!DOCTYPE html><html><head><meta charset="utf-8"><tiitle> ...

  6. HTML&javaSkcript&CSS&jQuery&ajax(七)

    ’一.HTML5 实例  <video width="430" controls>   <source src="mov_nnn.mp4" t ...

  7. HTML&javaSkcript&CSS&jQuery&ajax(五)

    一.Framset标签定义了每个框架中的HTML文档, 1. <framset cols="25%,75%"> <frame src="frame_a. ...

  8. HTML&javaSkcript&CSS&jQuery&ajax(四)

    一.HTML创建响应设计 Responsive Web Design 可以改变尺寸传递网页,对于平板和移动设备是必须的 1.<!DOCTYPE html><html lang=&qu ...

  9. HTML&javaSkcript&CSS&jQuery&ajax(三)

    一.HTML块元素 1.块级元素 Block level element ,内联元素 inline element , HTML<div>元素属于块级元素,他是组合其他HTML元素的容器, ...

随机推荐

  1. animation属性

    文章中转站,因为涉及到动画效果,还是看文笔比较好的博主吧~ CSS3(三)Animation 入门详解 css3中变形与动画(三) CSS3 Animation 是由三部分组成. 关键帧(keyfra ...

  2. Axure8破解码

    升级了 8.0.0.3321 版本后,原来的 license 失效了,解决方法就是使用下面的这组注册码 License:米 业成 (STUDENT)Key:nFmqBBvEqdvbiUjy8NZiyW ...

  3. 使用RocketMQ实现分布式事务

    .. todo ref https://blog.csdn.net/zhejingyuan/article/details/79480128

  4. DeepLearning.ai-Week3-Autonomous driving-Car detection

    1 - Import Packages import argparse import os import matplotlib.pyplot as plt from matplotlib.pyplot ...

  5. ASP.NET MVC - 安全、身份认证、角色授权和ASP.NET Identity

    ASP.NET MVC - 安全.身份认证.角色授权和ASP.NET Identity ASP.NET MVC内置的认证特性 AuthorizeAttribute特性(System.Web.Mvc)( ...

  6. Navicat for Mysql连接mysql数据库时出现 2003-Can't connect to MySql server on 'localhost'(10061)

    一.环境:linux服务器下 二.问题:在windows7下使用Navicat for Mysql连接mysql数据库时出现 2003-Can't connect to MySql server on ...

  7. TextView 文字拼接

    //引用文字 String testStr = (getResources().getString(R.string.test_str,"<font color='#ff0000'&g ...

  8. 椭圆曲线密码学ECC

      椭圆曲线密码学(Elliptic curve cryptography),简称ECC,是一种建立公开密钥加密的算法,也就是非对称加密.类似的还有RSA,ElGamal算法等.ECC被公认为在给定密 ...

  9. 应急响应-GHO提取注册表快照

    前言 备份文件.gho中找到机器的注册表 文件夹位置 在 C:\WINDOWS\SYSTEM32\CONFIG 下就是系统的注册表,一般情况下,这里面会有以下几个文件: default 默认注册表文件 ...

  10. Wireshark技巧-过滤规则和显示规则【转】

    转自:https://www.cnblogs.com/icez/p/3973873.html Wireshark是一个强大的网络协议分析软件,最重要的它是免费软件. 过滤规则 只抓取符合条件的包,在W ...