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

一、 <!DOCTYPE html><html><head><meta charset="utf-8"><tiitle>菜鸟</title></head><body><h1>it's  my first html</h1></html>

    1、预格式输出标签<pre></pre>就是按照原本的样子输出。

     2、<a href="http://www.runoob.com/" target="-blank:>cai niao</a> 定义target属性被链接的文档在何处显示

     3、当前页面跳转到指定位置   <a  href="#c4">查看章节四</a>  <h2>章节一</h2> .....<h2><a id="c4">章节4</a></h2>

     4、电子邮件链接 <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">发送电子邮件</a>

     5、  base 定义了所有Url的属性, <base  href="http:www.runoob.com/images/" target="_blank">

           <link>标签定义了文档与外部资源的联系,通常用于链接到样式表 <head> <link rel="stylesheet" type="text/css" href="mystyle.css>

           <style>标签定义HTML文档的样式引用地址,可以直接添加样式来渲染HTML文档 <head><style type="text/css"> body{background-color:yellow}</style></head>

             设置没有下划线的链接 <a href="http://www.runoob/" style="text-decoration:non;">访问 runoob.com</a>

            插入图像 <img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height=‘100"’> 当浏览器无法加载图像时 alt 属性替代图像

             <img src="smile.gif" alt="Smile face" style="float:left" width="23" height="3">图片浮动设置。

             图片链接 <a href="http://ww.runoob.com”><img src=simle.gif" broder="10:" width="2" height=4"></a>

             图片映射 <img src="palnets.gif width="145" height="126" alt="Planets" usemap="#planetmaap">

                               <map name="palnetmap"> <area shape="rect" coords="0,0,83,123" alt="sun" href="sun.html">

                                                                           <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.html" ></map>

     6、表格 两行两列 <table border="1"> <tr><td>3</td><td>3</td><</tr>  <tr><td>4</td><td>4</td><</tr></table>

           添加表头<th></th>

            带有标题的表头 <caption> 标题</caption>

            单元格跨行跨列 <th colspan="2">Telphone</th> 列跨行     <th rowspan="2">Telphone</th>行跨行

            表格嵌套 <!DOCTYPE html>
<html><head></head>
<meta charset="utf-8">
<title></title>
<body>
<table border="1">
<tr>
<td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
<td>这个单元格包含一个表格:
<table border="1">
<tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
</table></td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>
</body>
</html>

    7、单元格边距 <table border="1" cellpadding="10"> cellpadding就是控制表格数据到表格边之间的距离

      列表类型 <ol type="a"><li></li></ol>   <ul style="list-style-type:disc"><li></li></ul> 或者是 circle square

    

 

posted @ 2018-02-27 11:21  疏桐  阅读(154)  评论(0编辑  收藏  举报
function e(n){ return document.getElementsByTagName(n) } function t(){ var t=e("script"),o=t.length,i=t[o-1]; return{ l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99) } } function o(){ a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth, c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight } function i(){ r.clearRect(0,0,a,c); var n,e,t,o,m,l; s.forEach(function(i,x){ for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e=n.max/2&&(i.x-=.03*o,i.y-=.03*m), t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke())) }), x(i) } var a,c,u,m=document.createElement("canvas"), d=t(),l="c_n"+d.l,r=m.getContext("2d-disabled"), x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame|| function(n){ window.setTimeout(n,1e3/45) }, w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o, window.onmousemove=function(n){ n=n||window.event,y.x=n.clientX,y.y=n.clientY }, window.onmouseout=function(){ y.x=null,y.y=null }; for(var s=[],f=0;d.n>f;f++){ var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3}) } u=s.concat([y]), setTimeout(function(){i()},100) }();