One 、HTML

1、 Radio button <form action="><inpput type="radio" name="sex" value="male" >Male</br>  <input type="radio" name="sex" value="female">Female</form>

2、 Check box <form action="><inpute type="checkbox" name="vehicle" value="Car">I have a Car</form>

3、 The drop-down list   <form action=""><select name="car"><option value="volo">Volo</option><option value="fita">Fita</option></select></form>

If you set an item, select direct <option value="fem" selected>fem</option>

4、 Set text field <textarea rows="12" cols="33"></textarea>      Create button   <input type="button"  value=Helloworld">

5、<iframe src="demo_iframe.html" name="iframe_a"></iframe>

<p><a href="http://www.runoob.com" target="iframe_a">Runnob.com</a></p> because a Labeled target The attribute name is inframe_a Of iframe frame , After clicking the link, the page will be in iframe It appears that .

6、 Script JavaScript    <p id="demo">JavaScriptkeyi Can trigger time </p>

<script> function myfunction(){

document.getElementId("demo").innerHTML="Hello JavaScript";}</script>

<button type="button" onclick="myfunction()"> Click on </button>

Change the style ,<script> function myFunction(){

x=document.getElementById("demo")

x.style.color="3ff0000";}</script>    <button  type="button onclick="myfunction()"></button>

7、 Place holder &nbsp,   HTML Uniform resource locator , uniform Resource locators

HTML5 For multimedia settings in , <video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"></video>

8、<srcipt>document.createElement("myHero")</script>   <style> myHero{

dispaly:block;

background-color:#ddd;

padding:50px;

font-size:30px;}</style>      <myHero> My cause element </myHero>

9、canvas Label definition canvas , <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

use JavaScript mapping <canvas id ="myCanvas" width="200" height="100"  style="brorder:1px; solid #3c3c3;"></canvas >

<.script> var c=document.getElement.ById("myCanvas");   var ctx=c.getContext("2d");

ctx.filStyle="#FF0000";   ctx.fillRect(0,0,150,75);</script>

10、 Use canvas Draw a line on the canvas <canvas id="myCanvas" width="100" height="100"  style="border:1px solid #d3dd3d3;"></canvas>

<script> var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(500,400);

ctx.stroke();</script>

11、 Use canvas Draw a circle    <canvas id-""myCanvas" width="200" height="100" style="border: 1px solid 3d3d3d3;"></canvas>

<script>    var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();</script>

12、 Use canvas Draw a solid font    <canvas id="myCanvas" width="200" height="100" style="broder:1px solid #d3d3d3";></canvas>

<script>   var c=document.getElementById("myCanvas");

var ctx.c.getContext("2d");

ctx.font="30px Arial";   ctx.fillText("Hello World” ,10,50);</script>   If it's a painted hollow garden Modified into ctx.strokeText("Hello world " 10,50);

13、 cavans Color gradient   Two ways to create key gradients createlinearGradient(x,y.x1,y1) Create key line gradient

createRadialGradient(x,y,r,x1,y1,r1) Create a radial circular gradient

The canvases are all the same. I won't repeat them here , Draw directly on the canvas as follows :

<scrippt>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorDtorp(0,"red");

grd.addColorStop(1,"black");

ctx.filStyle=grd;   ctx.fillRect(10,10,150,80);</script>《!-- Here, if it's a radial gradient Just modify the function ctx.createRadialGradientI(0,0,200,1)》

14、 Put the image on the canvas   <img id="scream" src="img_the_scream.jpg" alt="The Scream" width="200" height="100">

<canvas id="myCanvas" width="100" height="100" style="border: 1px solid 3d3d3d3;"></canvas>

<script>  var c=document.getElementById("muCanvas");

var ctx=c.getContext("2d");

var img=docment.getElementById("scream");

img.onload=function(){

ctx.drawImage(img,10,10);}</script>

HTML&javaSkcript&CSS&jQuery&ajax( Nine ) More articles about

  1. java-HTML&amp;javaSkcript&amp;CSS&amp;jQuery&amp;ajax

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

  2. XSS-HTML&amp;javaSkcript&amp;CSS&amp;jQuery&amp;ajax

    1. Set up different style lists <style> ul.a{list-style-tyrp:circle;}    ul.b{list-style-type:square;}   ul.c{list ...

  3. HTML&amp;javaSkcript&amp;CSS&amp;jQuery&amp;ajax( Ten )

    HTML 1.SVG Direct embedding HTML Webpage ,SVG It's using XML describe 2D The language of images ,Canvas adopt JavaScript To draw 2D <svg xmlns="http://www.w3. ...

  4. HTML&amp;javaSkcript&amp;CSS&amp;jQuery&amp;ajax( 8、 ... and )

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

  5. HTML&amp;javaSkcript&amp;CSS&amp;jQuery&amp;ajax( 7、 ... and )

    ’ One .HTML5 example   <video width="430" controls>   <source src="mov_nnn.mp4" t ...

  6. HTML&amp;javaSkcript&amp;CSS&amp;jQuery&amp;ajax( 5、 ... and )

    One .Framset Tags define... In each frame HTML file , 1. <framset cols="25%,75%"> <frame src="frame_a. ...

  7. HTML&amp;javaSkcript&amp;CSS&amp;jQuery&amp;ajax( Four )

    One .HTML Create response design Responsive Web Design You can change the size of the delivery page , It's a must for tablets and mobile devices 1.<!DOCTYPE html><html lang=&qu ...

  8. HTML&amp;javaSkcript&amp;CSS&amp;jQuery&amp;ajax( 3、 ... and )

    One .HTML A block element 1. Block-level elements Block level element , Inline elements inline element , HTML<div> Elements belong to block level elements , He's a combination of other people HTML The container of elements , ...

  9. HTML&amp;javaSkcript&amp;CSS&amp;jQuery&amp;ajax( Two )

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

Random recommendation

  1. uploadify Use the tutorial

    <div> <input type="file" id="uploadify" name="uploadify" /> ...

  2. AndroidStudio Authoritative course AS Add a third-party library of 6 Ways of planting (Jar module so etc. )

    Click the item settings button Choose in turn App > Dependencies 1. Direct search Choose in turn + > Library dependency The search here must be full name , Otherwise I can't find it As shown in the figure below ...

  3. hdu 5183 Negative and Positive (NP)

    Topic linking http://acm.hdu.edu.cn/showproblem.php?pid=5183 Negative and Positive (NP) Description When give ...

  4. shell Process queries related commands

    Deploy multiple... In the same process , How to know which one to delete : ll /proc/ It shows the location see pid What's next socket link ll /proc//fd

  5. BlockingQueue- Thread blocking queue

    BlockingQueue As a thread container , It can provide powerful guarantee for thread synchronization , The main methods used include : add(E o); // Add the specified element to this queue ( If it's immediate ), Return on success  true, In other cases ...

  6. Oracle error ——ORA-03113: At the end of the communication channel file Solution

    origin Today, as usual , land PL/SQL, The login failed , There was a mistake "ORA-01034" and "ORA-27101" Pictured : Then log in through the command prompt Oracle, ...

  7. Talk about Ext JS The components of —— Containers and layouts

    summary In the page , The trickier part is the layout . And to achieve layout , You have to have a container that can maintain the layout . so to speak , Where I've tried and used Javascript In the frame ,Ext JS The layout is the best one , And that's because of its powerful container classes and rich ...

  8. js Baby at the bottom of the box

    The framework really works , But they also hide JavaScript Ugly details and DOM The operating mechanism of . If your goal is to dare to call yourself " I understand. JavaScript", So taking the time to learn the framework is the opposite . below ...

  9. typescript The concept of interface And the property type interface

    /* 1.vscode Configure automatic compilation 1. First step tsc --inti Generate tsconfig.json Change "outDir": "./js", 2. The second step Mission ...

  10. 4.Servlet filter

    1.Servlet  Write filters Servlet Filters are available for Servlet programming Java class , For the following purposes : Before client requests access back-end resources , Block these requests . Before the server's response is sent back to the client , Handle ...