html容易忽略的基础知识
html总结
- 一、HTML标签
- 二、HTML标题
- 三、HTML段落
- 四、HTML格式化
- 五、HTML链接
- 六、HTML图像
- 七、HTML表格
- 八、HTML块
- 九、什么是响应式web设计
- 十、HTML脚本
- 十一、HTML头部元素
- 十二、XHTML
- 十三、HTML5基础
- 十四、HTML5表单元素
- 十五、Canvas和SVG
- 十六、存储
- 十七、缓存（网页可离线/脱机浏览）
- 十八、web worker(运行在后台的js)
- 十九、Server-Sent Event(允许网页从服务器获得更新)
- 二十、HTML5 webSocket
- 二十一、HTML5 MathML
- 二十一、HTML5拖放
- 二十二、HTML5 Web SQL
一、HTML标签
关闭标签(标签一定要有结束)：
二、HTML标题
标题标签： ~
- 仅用于标题，不可用于文本的粗体或大号设置
- 搜索引擎使用标题为网页的结构和内容编制索引。
- h1最重要 h2其次 h3再次，以此类推
三、HTML段落
<p>我是一个段落</p>
- 块级元素，浏览器自动在段落的前后添加空行
- 不要用
插入空行，用 - 浏览器会移除源代码中多余的空格和空行。
四、HTML格式化
- 上标字：
X2 - 下标字：
X2 - 定义预格式文本，保留所有空格
- 定义缩写
WHO - 定义首字母缩写
- 定义地址， 元素通常以斜体显示
- 定义文字方向
- 定义长的引用，元素被缩进处理
- 定义短的引用语，周围会包围引号
- 定义引用、引证
- 定义一个定义项目
The WHO was founded in 1948.
对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息 - 定义数学变量
<p><var>E</var> = <var>m</var> <var>c</var><sup>2</sup></p>
E = m c2
五、HTML链接
<a href="" target="" name=""></a>
target:_blank 新窗口打开，默认打开新窗口
name:规定锚名称
<a name="tips">基本的注意事项 - 有用的提示</a>
<a href="#tips">有用的提示</a>
注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href=“http://www.w3school.com.cn/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“http://www.w3school.com.cn/html/”。
提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。
提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
六、HTML图像
<img src="" alt="" />
alt:定义可替换文本，当图片不显示时，显示该文本
图片也可以设置对齐方式，align=“bottom” align=“middle” align=“top”，定义图像尺寸，浏览器加载器会预留图像空间，减少闪烁。
图像也可当链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
定义图像地图
定义图像地图中可点击区域
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
七、HTML表格
跨行 colspan
跨列 rowspan
单元格内容与边框间的距离 cellpadding
单元格之间的距离 cellspacing
设置背景色 bgcolor
设置图像 background
控制围绕表格的边框 frame 参数：box above below hsides vsides
八、HTML块
块级元素：以新行开始和结束 不支持脚本或禁用脚本的浏览器，显示noscript 防止老实浏览器直接显示脚本内容，将脚本放入注释标签内，新浏览器会执行 title: base： meta： 针对搜索引擎的关键词：一些搜索引擎会利用meta的name和content属性来索引页面， XHTML是以XML格式编写的HTML 第一行声明： H5中默认字符编码是UTF-8 如何使老版浏览器支持HTML5： 2.添加新元素 submit： keygen元素：用于表单的密钥对生成器，提交表单时会产生两个Key,私钥保存在客户端,公钥发送到服务器 output元素用于不同类型的输出，比如计算或脚本输出： SVG Canvas Canvas 与 SVG 的比较 canvas例子： 绘制路径 绘制圆形 绘制文本 绘制渐变矩形 绘制图像 SVG例子： 1.cookies 1.通过html标签的mainfest属性设置缓存文件 2.配置缓存文件mf.appcache 3.更新缓存 当在html页面中执行脚本时，页面是不可响应的直到脚本执行完成。web worker运行在后台，独立于其他脚本，不影响页面性能。 当 web worker 传送消息时，会执行事件监听器中的代码。来自 web worker 的数据会存储于 event.data 中。使用 terminate() 方法终止 web worker，并释放浏览器/计算机资源 注意：web worker位于外部文件中，无法访问window对象、document对象、parent对象 SSE:服务器向浏览器推送信息，单向通道 优点： 客户端API： 2.生成一个EventSource实例,url可跨域 EventSource实例的readyState属性（表明连接当前状态，只读）： 3.事件 4.服务器实现 field取值：data、event、id、retry、空（以冒号开头表示注释） 注释：服务器为保持连接不中断，每隔一段时间会向浏览器发送一个注释。 发送一个JSON数据的例子： id表示每一条数据的编号，浏览器用lastEventId属性读取这个值。一旦连接断线，浏览器会发送一个 HTTP 头，里面包含一个特殊的Last-Event-ID头信息，将这个值发送回来，用来帮助服务器端重建连接。因此，这个头信息可以被视为一种同步机制。 event字段表示自定义事件类型，默认是message事件，浏览器可以用addEventListener()监听该事件。 上面的代码创造了三条信息。第一条的名字是foo，触发浏览器的foo事件；第二条未取名，表示默认类型，触发浏览器的message事件；第三条是bar，触发浏览器的bar事件。 retry字段指定浏览器重发连接的时间间隔 SSE要求服务器与浏览器保持连接，不同的服务器所消耗的资源不一样，比如apache服务器，每个连接就是一个线程，node则是所有的连接都使用一个线程，消耗的资源会小很多，但是要求每个连接不能包含耗时的操作如磁盘的IO读写。 webSocket：一种在单个TCP连接上进行全双工通讯的协议，基于TCP协议，更好的节省服务器带宽和资源，并能够更实时地通讯。 1.创建socket WebSocket属性： readyState: bufferedAmount:：只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。 WebSocket事件： WebSocket方法： mrow：同行显示 1.设置元素可拖动 2.拖动什么 3.允许放置 4.进行放置 核心方法： 1.打开或创建数据库 2.创建表操作 3.插入数据 4.读取数据 5.删除记录
内联元素：
, , ,
九、什么是响应式web设计
十、HTML脚本
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
十一、HTML头部元素
1.定义浏览器工具栏中的标题
2.提供页面被收藏时显示的标题
3.显示在搜索引擎结果中的页面标题
标签为页面上的所有链接规定默认地址或默认目标（target）
元数据不会显示在页面上，但计算机是可读的。用于规定页面的描述、关键词、文档作者、修改时间等<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />
十二、XHTML
十三、HTML5基础
编码声明（否则乱码）：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
允许4中新的属性语法：
1.允许属性简写
2.允许不加引号
3.允许双引号或单引号
1.把元素定义为块级元素header, section, footer, aside, nav, main, article, figure {
display: block;
}
已添加的 JavaScript 语句 document.createElement(“myHero”)，仅适用于 IE。在ie8及更早版本，不允许对未知元素添加样式，为解决此问题，可添加以下代码：
引用 shiv 代码的链接必须位于 元素中<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!DOCTYPE html>
<html>
<head>
<title>Creating an HTML Element</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>
十四、HTML5表单元素
为input设置预定义选项列表，类似下拉列表带搜索功能<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
定义提交表单数据至表单处理程序的按钮。
表单处理程序在form的action中规定<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
十五、Canvas和SVG
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
可通过文本编辑器来创建和修改，可被搜索、索引、脚本化或压缩
可伸缩且不降低图像质量
绘制矩形1. 创建一个画布
<canvas id="myCanvas" width="200" height="100"></canvas>
2. 绘制图形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000"; //图形背景色
ctx.fillRect(0,0,150,75);
ctx.fillRect(x,y,width,height);//(0,0)从左上角开始
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);//线条开始坐标
ctx.lineTo(200,100);//线条结束坐标
ctx.stroke();
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI); //x,y,r,start,stop
ctx.stroke();
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);//实心文本，text,x,y
ctx.strokeText("Hello World",10,50);//空心文本
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
===============================================
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red"); //必须是两种以上停止颜色，参数使用坐标来描述，可以是0至1
grd.addColorStop(1,"white");
// 填充渐变，设置fillStyle或strokeStyle的值为 渐变,fillStyle和fillRect成对使用
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);//image,x,y
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
十六、存储
2.webStorage
名称
存储大小
数据有效期
作用域
通信
应用场景
API
cookies
<=4k
有服务器生成，可设置失效时间，默认关闭浏览器时失效
在同源窗口中共享
在浏览器和服务器之间传递，保存过多数据会造成性能问题
自动登录，记住密码，保存事件信息
原生API不友好，需自行封装 //创建cookie $.cookie('name', 'value', { expires: 7, path: '/', domain: 'example.com', secure: false}); //读取 $.cookie('name'); $.cookie(); //删除 $.removeCookie('name'); //设置cookie时如果设置了path属性或secure属性，删除的时候要带着这些属性，否则无法成功删除cookie。删除cookie时，必须传递用于设置cookie的完全相同的路径，域和安全选项，除非您依赖于默认选项。
sessionStorage
>=5M
在当前浏览器或当前页面关闭时失效
在同源同一浏览器同一窗口页面中共享，通过同源同一浏览器同一窗口页面中的链接用http协议打开新的窗口时共享
仅在本地保存，不参与和服务器通信
敏感账号一次性登录
//保存数据，数据为string sessionStorage.setItem('key','value'); //获取数据 sessionStorage.getItem('key'); //删除某个数据 sessionStorage.removeItem('key'); //删除所有数据 sessionStorage.clear();
localStorage
>=5M
永久有效，除非手动永久清除，可自行封装设置过期时间的方法
同源同浏览器共享
仅在本地保存，不参与和服务器通信
长期登录
//保存数据，数据为string localStorage.setItem('key','value'); //获取数据 localStorage.getItem('key'); //删除某个数据 localStorage.removeItem('key'); //删除所有数据 localstorage.clear();
十七、缓存（网页可离线/脱机浏览）
<html manifest="mf.appcache"></html>
CACHE MANIFEST #文件声明
CACHE #需要缓存的文件
#缓存theme.css和main.js
/theme.css
/main.js
NETWORK: #不被缓存的文件
#不缓存login.php, *表示全部
login.php
FALLBACK: #设置无法访问某文件时访问的文件
#无法访问index.js时访问main.js
/index.js /main.js
修改manifest文件
通过js清除缓存，window.applicationCache.update();
清除浏览器缓存十八、web worker(运行在后台的js)
if (typeof(Worker) !== "undefined") {
// 是的！支持 Web worker！
// 一些代码.....
} else {
// 抱歉！不支持 Web Worker！
}
创建一个计数器脚本"timer.js"，postMessage()向页面传回一段消息 var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("/example/html5/demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
十九、Server-Sent Event(允许网页从服务器获得更新)
基于http协议，服务器向浏览器发送流信息，即不是一次性发送的数据包，而是不间断的发送数据包，本质就是下载。比如视频播放。IE/Edge不支持。
名称
描述
SSE
使用http协议；轻量级；默认支持断线重连；一般只用来传送文本，二进制数据需要编码后传送；支持自定义发送消息类型
WebSocket
websocket是独立的协议，协议相对复杂；断线重连需要自己实现；默认支持传送二进制数据；
SSE的客户端API部署在EventSource对象上。
1.检测是否支持SSEif('EventSource' in window){
.....
}
var source=new EventSource(url);
//跨域设置,withCredentials属性表示是否一起发送cookie
var source=new EventSource(url,{withCredentials:true});
//1.建立连接触发Open事件
source.onopen = function (event) {
// ...
};
// 另一种写法
source.addEventListener('open', function (event) {
// ...
}, false);
//2.客户端接收到来自服务器的消息，触发message事件
source.onmessage = function (event) {
var data = event.data;
// handle message
};
// 另一种写法
source.addEventListener('message', function (event) {
var data = event.data;
// handle message
}, false);
//3.发生通信错误，如连接中断，触发error事件
source.onerror = function (event) {
// handle error event
};
// 另一种写法
source.addEventListener('error', function (event) {
// handle error event
}, false);
//4.关闭SSE连接
source.close();
1）数据格式
必须是utf-8编码的文本
http头信息：
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
2)发送的信息由若干个message组成，每个message之间用\n\n分隔，一个message内由若干行组成，每行格式如下：
[field]：value\ndata: {\n
data: "foo": "bar",\n
data: "baz", 555\n
data: }\n\n
event: foo\n
data: a foo event\n\n
data: an unnamed event\n\n
event: bar\n
data: a bar event\n\n
两种情况会导致浏览器重新发起连接：一种是时间间隔到期，二是由于网络错误等原因，导致连接出错。
node的SSE服务器实例：var http = require("http");
http.createServer(function (req, res) {
var fileName = "." + req.url;
if (fileName === "./stream") {
res.writeHead(200, {
"Content-Type":"text/event-stream",
"Cache-Control":"no-cache",
"Connection":"keep-alive",
"Access-Control-Allow-Origin": '*',
});
res.write("retry: 10000\n");
res.write("event: connecttime\n");
res.write("data: " + (new Date()) + "\n\n");
res.write("data: " + (new Date()) + "\n\n");
interval = setInterval(function () {
res.write("data: " + (new Date()) + "\n\n");
}, 1000);
req.connection.addListener("close", function () {
clearInterval(interval);
}, false);
}
}).listen(8844, "127.0.0.1");
二十、HTML5 webSocket
建立连接的过程：客户端向服务器发起http请求，在头信息附加“Upgrade:WebSocket”表明这是一个申请协议升级的HTTP请求，服务器端解析附加头信息后产生应答信息返回给客户端，连接就建立起来了。
WS: WebSocket协议
WSS：WebSocket加密版，表示在TLS（安全传输层协议）之上的WS
var Socket=new WebSocket(url,[protocol]);
protocol可选项，指定可接受的子协议。
0:未建立连接
1：已建立连接，可通讯
2：连接正在关闭中
3.：连接已关闭或连接不能打开
open：onopen建立连接时触发
message：onmessage客户端接收服务器数据时触发
error：onerror通信发生错误时触发
close：onclose连接关闭时触发
send()：使用连接发送数据
close()：关闭连接客户端请求：
GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13
服务器回应：
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Location: ws://example.com/
二十一、HTML5 MathML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
</body>
</html>
//2*2矩阵
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>A</mi>
<mo>=</mo>
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd><mi>x</mi></mtd>
<mtd><mi>y</mi></mtd>
</mtr>
<mtr>
<mtd><mi>z</mi></mtd>
<mtd><mi>w</mi></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>
mi：字符
mn：数字
mo：运算符
msup：上标
mfenced：外包含
mtable：矩阵table
mtr：矩阵行
mtd：矩阵单元格二十一、HTML5拖放
<img draggable="true">
ondragestart属性调用了函数drag(event)，该函数规定了被拖放的数据<img draggable="true" ondragstart="drag(event)">
function drag(ev)
{
//设置被拖放数据的数据类型和值，Text是DOMString
ev.dataTransfer.setData("Text",ev.target.id);
}
元素默认是不允许放置到其他元素的，需阻止默认处理方式，调用ondrageover事件的preventDefault()<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
function allowDrop(ev)
{
ev.preventDefault();
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中
二十二、HTML5 Web SQL
var db=openDatabase('mydb','1.0','Test DB',2*1024*1024);//数据库名称、版本号、描述文本、数据库大小
第五个参数：创建回调会在创建数据库后调用db.transaction(function (tx){
tx.executeSql('create table if not exists LOGS(id unique,log)');
});
db.transaction(function (tx){
tx.executeSql('create table if not exists LOGS(id unique,log)');
tx.excuteSql('insert into LOGS values(1,'数据1')');
//动态插入数据
tx.excuteSql('insert into LOGS values(?,?),[e_id,e_log]);
});
<div id="status" name="status">状态信息</div>
db.transaction(function (tx){
tx.executeSql('select * from LOGS',[],function(tx,results){
//等同于var len=**; var i;
var len=results.rows.length,i;
for(i=0;i<len;i++){
msg=results.rows.item(i).log;
document.querySelector('#status').innerHTML+=msg;
}
},null);
});
db.transaction(function(tx){
tx.executeSql('delete from LOGS where id=?',[id]);
})
你可能感兴趣的:(菜鸟成长)