结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<h1>我是第一个标题</h1>
<p>我是第一个段落。</p>
</body>
</html>
常用标签
基本属性
id
style
class
标签 html4
<!-- --> //注释
<h1> - <h6> //标题
<p> //块级元素
<br> //换行
<b> //粗体
<em> //斜体
<i> //斜体
<small> //小号
<strong> //粗体
<sub> //下标
<sup> //上标
<ins> //下划线
<del> //删除线
<pre> //保留空格和换行符
<abbr> //检查拼写错误
<bdo> //文字显示方向
<blockqutoe> //常引用
<q> //短引用
<cite> //作品标题
<a> //链接 href = 'uri' target = _blank _parent _self _top framename
<title> //文档显示标题
<base href="http://www.runoob.com/images/"target="_blank"> //定义 链接标签默认链接
<link rel="stylesheet" type="text/css" href="mystyle.css"> //外部css
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style> //内部css
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="Runoob">
<meta http-equiv="refresh" content="30">
<script> //javascript脚本
<img src="boat.gif" alt="Big Boat"> //图片
<table> //表格
<th> //头
<tr> //行
<td> //单元各
<ul> //无序列表
<li>
<ol> //有序列表
<li>
<dl> //自定义列表
<dt>
<dd>
<div> //块元素
<span> //内联元素
<form>
<input type = '' name = ''>
type:
button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
<textarea> //多行文本
<label>
<fieldset> //分组 显示边框
<select> <option> //定义下拉
<optgroup> //选项组
<button> //按钮
<datalist> //输入和下拉
<iframe src = 'URI'> //内部框架
<script>document.write("Hello World!")</script> //脚本
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript> //不支持脚本显示
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
￠ 分 ¢ ¢
£ 镑 £ £
¥ 人民币/日元 ¥ ¥
€ 欧元 € €
§ 小节 § §
© 版权 © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
速查列表
//HTML 基本文档
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>
//基本标签（Basic Tags）
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->
//文本格式化（Formatting）
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
//链接（Links）
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
图片（Images）
<img src="URL" alt="替换文本" height="42" width="42">
样式/区块（Styles/Sections）
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>
有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
定义列表
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
表格（Tables）
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
框架（Iframe）
<iframe src="demo_iframe.htm"></iframe>
表单（Forms）
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
实体（Entities）
< 等同于 <
> 等同于 >
© 等同于 ©
html5
//最小文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
//新标签
<article> 定义页面独立的内容区域。
<aside> 定义页面的侧边栏内容。
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> //高亮
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<section> 定义文档中的节（section、区段）。
<time> 定义日期或时间。
<canvas> //绘图
<audio>
<video>
<source> //定义多媒体资源 <video> 和 <audio>
<embed> //嵌入外部元素 音频 视频等 类似 <object>
//自定义元素
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
ondragstart //拖放开始
ondragover //拖放进入
ondrop //拖放完成
web存储
// 存储
localStorage.sitename = "菜鸟教程";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
//sql数据库
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
msg = '<p>数据表已创建，且插入了两条数据。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
web worker多线程
定义外部文件 worker.js
例如
var i=0;
function timedCount()
{
i=i+1;
postMessage(i); //发送消息
setTimeout("timedCount()",500);
}
timedCount();
//
let w = new Worker("demo_workers.js");
w.onmessage = function(event){}
w.terminate(); //终止
web socket
var Socket = new WebSocket(url, [protocol] );
// 打开一个 web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("数据已接收...");
};
ws.onclose = function()
{
// 关闭 websocket
alert("连接已关闭...");
};
全局属性
//定义快捷键
<a href="//www.runoob.com/html/html-tutorial.html" accesskey="h">HTML 教程</a><br>
accesskey //设置访问元素的键盘快捷键。
class //规定元素的类名（classname）
contenteditable //规定是否可编辑元素的内容。
data-* //用于存储页面的自定义数据
dir //设置元素中内容的文本方向。
draggable //指定某个元素是否可以拖动
hidden //hidden 属性规定对元素进行隐藏。
id //规定元素的唯一 id
lang //设置元素中内容的语言代码。
spellcheck //检测元素是否拼写错误
style //规定元素的行内样式（inline style）
tabindex //设置元素的 Tab 键控制次序。
title //规定元素的额外信息（可在工具提示中显示）
translate //指定是否一个元素的值在页面载入时是否需要翻译
全局事件
onload script 当文档加载时运行脚本
onunload
onresize script 当调整窗口大小时运行脚本
onblur script 当元素失去焦点时运行脚本
onchange script 当元素改变时运行脚本
onselect script 当选取元素时运行脚本
onsubmit script 当提交表单时运行脚本
onkeydown script 当按下按键时运行脚本
onkeypress script 当按下并松开按键时运行脚本
onkeyup script 当松开按键时运行脚本
onclick script 当单击鼠标时运行脚本
ondblclick script 当双击鼠标时运行脚本
ondrag script 当拖动元素时运行脚本
ondragend script 当拖动操作结束时运行脚本
ondragenter script 当元素被拖动至有效的拖放目标时运行脚本
ondragleave script 当元素离开有效拖放目标时运行脚本
ondragover script 当元素被拖动至有效拖放目标上方时运行脚本
ondragstart script 当拖动操作开始时运行脚本
ondrop script 当被拖动元素正在被拖放时运行脚本
onmousedown script 当按下鼠标按钮时运行脚本
onmousemove script 当鼠标指针移动时运行脚本
onmouseout script 当鼠标指针移出元素时运行脚本
onmouseover script 当鼠标指针移至元素之上时运行脚本
onmouseup script 当松开鼠标按钮时运行脚本
onmousewheel script 当转动鼠标滚轮时运行脚本
onscroll script 当滚动元素的滚动条时运行脚本
css选择器
//标签选择器
p{
color:red;
text-align:center;
}
//id选择器
#para1
{
text-align:center;
color:red;
}
//class选择器
.center {text-align:center;}
p.center {text-align:center;} //所有的 p 元素使用 class="center" 让该元素的文本居中:
h1,h2,p
{
color:green;
}
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
css属性
//背景色
background-color: #FFFFFF
background-image: url('bgdesert.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top
//文本
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
//字体
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。
//链接
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
//列表
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
//宽高
auto 默认。浏览器会计算出实际的高度。
length 使用 px、cm 等单位定义高度。
% 基于包含它的块级对象的百分比高度。
width
height
min-height
max-height
line-height
//显示
visibility: hidden //隐藏但占用空间
display: none //不占用空间
display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
//定位
position 属性的五个值：
static //没有定位
relative //相对当前位置
fixed //相对浏览器窗口
absolute //相对父 控件
sticky //控件不可见 类似 fixed 可见类似 relative
top
bottom
left
right
z-index
overflow overflow-x overflow-y
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
常用 jsavascript
//查找html
var x=document.getElementById("intro");
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
var x=document.getElementsByClassName("intro");
document.write(Date()); //输出
document.getElementById(id).innerHTML=新的 HTML //改变
document.getElementById(id).attribute=新属性值
//CSS
document.getElementById(id).style.property=新样式
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
//事件
document.getElementById("myBtn").onclick=function(){displayDate()};
element.addEventListener("click", function(){ alert("Hello World!"); });
element.removeEventListener("mousemove", myFunction);
//节点
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
para.insertBefore(para, child);
para.replaceChild(para, child);
para.removeChild(child);
//所有节点
var myNodeList = document.querySelectorAll("p");
//Window
alert("你好，我是一个警告框！");
var r=confirm("确认框");
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
//计时器
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。
cookie
javaScript 中，创建 cookie 如下所示：
document.cookie="username=John Doe";
您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
//删除cookie
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
XMLHttpRequest
function post(url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
var sendData = JSON.stringify(data);
xhr.setRequestHeader("Content-Length", sendData.length);
xhr.setRequestHeader("Content-Type", "application/json"); //用POST的时候一定要有这句
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
var data = JSON.parse(xhr.responseText);
if(callback != null) {
callback(data); return;
}
}
}
xhr.send(sendData);
}
function get(url, data, callback) {
var xhr = new XMLHttpRequest();
url += '?'
for(var key in data) {
url += key+'='+data[key] + '&'
}
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
var data = JSON.parse(xhr.responseText);
if(callback != null) {
callback(data); return;
}
}
}
xhr.send();
}
扫一扫
807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
