%%markdown
## demo for html content
**jupyter notebook** support:
* markdown 
* html
* css
* javascript

see [doc](http://jupyter-notebook.readthedocs.io/en/stable/index.html) for more info

%%html 
<h2> baidu iframe </h2>
<iframe src="https://www.baidu.com" width="100%"></iframe>

%%html
<img src="http://wx2.sinaimg.cn/large/0069pyKMgy1fo9clvtm03j31jk111475.jpg" width="90%" alt="fancam"/>

%%html
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
</video>

%%markdown 
More on markdown
------
You can include code fence in md, and it even support mathematica!!
```mathematica
ll=Table[i^2,{i,1,10,2}]
ll[[3;;]]
NIntegrate[Sin[x],{x,0,Pi}]
```
or
```python
for i in array:
    i = 3*i
def demo():
    return 1
```
>Table is also supported

|t|e|s|t|
|---|---|---|---|
|1|2|3|4|

inline formular $$x^2=1$$

%%latex
You can use latex directly in the notebook, too
\begin{equation}
\sin(x)=\frac{1}{y^2\pi}
\tag{*}
\label{theeq}
\end{equation}
then we can cite the equation as eq.\eqref{theeq}

%%html
<p>You can even include css to change the style of the whole notebook</p>
<style>
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>

%%html
<h1>This is green title</h1>
<p> This cell shows the effect of the above css</p>
<p class="ex">This is paragraph with class "ex"</p>

%%markdown
# title
See? The css effect is global of the whole page. And it also controls markdown cell(as they are rendered as html first).

%%markdown
test on
* html in markdown cell
* a link of external css
<h1> watch the car! </h1>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
<p> show me the money <i class="fa fa-credit-card"></i></p>

%%js
alert('hello')

%%html
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("h5").click(function(){
    $(this).hide();
  });
});
</script>
<h3> Oh, jQuery also works here! </h3>
<h5>click to vanish</h5>
<h5>click again</h5>

%%markdown
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<form>
<input type="checkbox" name="comments" value="a">Jupyter is amazing
<input type="checkbox" name="comments" value="f">Jupyter is fantastic 
</form>
<canvas id="myCanvas" width="220" height="100" style="border:1px solid #d3d3d3;">
</canvas>

<script>

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

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,200,80);

</script>

In a word, basically you can do **everything** the webpage can do in those cells!