html

HTML基础

框架

1
2
3
4
5
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

HTML元素

属性：class，id，name…

CSS样式

行内>内部(style)>外部样式优先级(link)

图片

1
<img src="图片位置" alt="无图片时的替代文字">

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
<tr>
    <th colspan="2">Head</th>
</tr>
<tr>
    <th>Head1</th>
    <th>Head2</th>
</tr>
<tr>
    <td>row1,cell1></td>
    <td>row1,cell2></td>
</tr>
<tr>
    <td>row2,cell1></td>
    <td>row2,cell2></td>
</tr>
</table>

列表

有序：<ol type='A/a/I/i/'>
无序：<ul style='list-style-type:disc/circle/square/'>
自定义:<dl><dt><dd>

块级元素与行内元素

块级元素

  • 霸占一行，不能与其他任何元素并列
  • 接受宽高，不设置则为父级元素的100%
  • div,p,h1,table

行内元素

  • 与其他行内元素并列
  • 不设置宽高，默认宽度为文字的宽度
  • 在垂直方向的padding和margin会失效
  • img,b,a,td,span

HTML表单和输入

HTML框架

1
2
<iframe src="" width="" height="" frameborder="0" name="framename"></iframe>
<p><a href="www.baidu.com" target="">Baidu</a></p>

在浏览器窗口内显示嵌套窗口；

HTML脚本

1
2
3
4
<script>定义客户端脚本；
document.write可以直接在html输出，但是必须在html输出流中，以防覆盖整个文本；
定义函数可触发事件响应，可处理HTML样式；
<noscript>定义不支持脚本浏览器输出的文本；

HTML实体

&entity_name 或 &#entity_number
&lt 或 &#60
&nbsp

HTML URL

因特网服务类型：//域主机.因特网域名:port/服务器路径/资源名称
字符编码后通过因特网发送：ASCll字符集编码，非ASCll字符使用%后跟2位十六进制数；+表示空格；

XHTML 正确标记，格式良好

结构： DOCTYPE强制；html xmlns属性规定命名空间；必须有<html><head><title><body>;
元素语法： 元素名小写，元素闭合，嵌套，一定有个根元素；
属性语法： 属性名小写，属性值引号，不允许属性简写；

HTML5

Canvas画布

<canvas>
使用JS绘制图像：
c=document.getElementById(“myCanvas”);
创建context对象：ctx=c.getContext(“2d”);
绘制红色矩形：ctx.fillStyle=”#FF0000”;
ctx.fillRect(0,0,150,75);
画线： ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
画圆：ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
文本：ctx.font=”30px Arial”;
ctx.fillText(“Hello World”,10,50);
/ctx.strokeText(“Hello World”,10,50);//空心
渐变： // 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);/
var grd=ctx.createRadialGradient(75,50,5,90,60,100);//圆渐变
grd.addColorStop(0,”red”);
grd.addColorStop(1,”white”);

    // 填充渐变
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);

图像：drawImage(image,x,y)；

拖放

拖放物：draggable=”true”,ondragstart(setData存放拖放物id)；
拖放目的地：ondragover(允许防止preventDefault)ondrop(getData获取拖放物id，加入到当前DOM中)

地理位置

navigator.geolocation.getCurrentPosition(showPosition,showError);

视频

1
2
3
4
5
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

方法：paused(),play()；
属性：width

新的Input类型

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

新的表单元素

datalist:与input元素配合，定义选项列表；
keygen：用于表单密钥对生成器字段；
output：特殊输出计算name相同的值；

新的表单属性

form 新属性：
autocomplete
novalidate
input 新属性：
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 与 width
list
min 与 max
multiple
pattern (regexp)
placeholder
required
step

添加语义元素

1
2
3
4
5
6
7
8
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

web存储

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
setItem(key,value);
getItem(key);
removeItem(key);
clear();
key(index);
length;

WebSocket

TCP协议；
两次握手：客户端发送包含建立websocket的HTTP请求头，服务端解析请求头，往回发送应答信息，则建立websocket连接；
双方可通过该连接通道自由传递信息；
直到一方主动关闭；
websocket属性：readyState,bufferedAmount;
webSocket事件：onopen,onmessage,onerror,onclose;
webSocket方法：send(),close();