HTML超文本标记语言，描述网页的一种语言
结构
<html>
<head></head>
<body></body>
</html>
头部 - <head>：关于网页的信息
主体 - <body>：网页的具体内容
HTML元素
HTML文档是由HTML元素定义的，HTML元素指的是开始标签和结束标签的所有代码
HTML标签对大小写不敏感，建议使用小写
HTML属性
标签可拥有属性，提供有关标签的更多信息
属性是以键值对的形式存在，属性值在引号内
常见属性：
class - 规定元素的类名
id - 元素的唯一id
style - 元素的行内样式
title - 元素的额外信息
HTML标题
通过<h1> - <h6>来定义，标题字体从大到小，字体加粗，前后自动添加空行
HTML水平线
<hr/> - 在页面中创建水平线，占一行
HTML段落
<p> - 块级元素。前后自动添加空行
HTML拆行
<br/> - 换行
HTML文本格式化标签（双标签，行级元素）
<b> 定义粗体文本
<em> 着重文字
<i> 斜体字
<strong>加强语气
<sub> 定义下标
<sup> 定义上标
<ins> 下划线
<del> 删除线
HTML计算机输出标签：（双标签，行级元素）
<code> 计算机代码
<kbd> 键盘码
<samp> 计算机代码样式
<var> 变量
<pre> 预格式化文本(标签内内容排版页面就怎样显示)
HTML引用
<abbr> 缩写
<bdo> 定义文字方向，属性dir="ltr/rtl"左到右/右到左
HTML链接
<a href="" target=""></a>
href属性规定链接目标，url；href="mailto:xxx@xxx.com"触发邮件客户端
name属性规定锚点
title属性添加文字提示
target属性规定在何处打开链接文档,
_blank - 打开新窗口
_self - 默认值，当前页面跳转
_parent - 在父窗口中打开链接
_top - 在当前窗体打开链接，并替换当前的整个窗体(框架页)
标签中的内容默认为蓝色字体，且带下划线
HTML样式
三种方式使用样式：
1.外部样式表，引入外部样式表到当前文档中
<link rel="stylesheet" href="xx.css" type="text/css" />
该标签位于<head>标签中
2.内部样式表，样式写在<style>标签内
<style type="text/javascript"> ... </style>
该标签可位于<head>标签或<body>标签中
3.内联样式，在元素上style属性的属性值内定义样式
优先级说明：内联样式 > 内部样式 > 外部样式
HTML表格
<table>
<caption></caption>
<tr><th></th></tr>
<tr><td></td></tr>
</table>
<table> 定义表格，border属性定义表格边框，默认无边框
<caption> 定义表格标题
<tr> 定义表格行
<th> 定义表格表头
<td> 定义表格列
跨行或跨列：
1.colspan属性用于定义横向跨越的列
2.rowspan属性用于定义纵向跨越的行
HTML列表
无序列表：默认每行前有小黑圆点
<ul>
<li></li>
</ul>
有序列表：默认每行前有序数字
<ol>
<li></li>
</ol>
定义列表：
<dl>
<dt></dt>
<dd></dd>
</dl>
HTML图像标签
<img src="" alt=""> src属性指定图像的地址，alt属性定义图片无法加载时的提示文字
<map> 定义客户端图像映射，图像映射指代有可点击区域的一幅图像
<area> 定义图像映射中的区域，即可点击区域图像，嵌套在<map>中
HTML块元素
块级元素在浏览器显示通常会以新行来开始或者结束
例如：<h1>、<p>、<ul>、<table>
HTML内联元素
内联元素显示是通常不会以新行开始
例如：<b>、<td>、<a>、<img>
HTML div元素
<div>是块级元素，没有特殊含义，一般用于页面布局
HTML span元素
<span>是内联元素，可用作文本容器，没有特定含义
HTML表单
表单是一个包含表单元素的区域（如：文本域、下拉列表、单选框、复选框等）
<form action="url" method="get/post" enctype="text/plain">
...
</form>
action属性，当用户点击表单中的提交按钮，表单内容会被传送到action属性值定义的地址
enctype属性，规定在向服务器发送表单数据之前如何对其进行编码（适用于 method="post" 的情况)，常用值：
- application/x-www-form-urlencoded：默认，发送前对所有字符进行编码
- multipart/form-data：不对字符编码，文件上传时控件表单必须值
- text/plain：将空格转换为 "+" 符号，但不编码特殊字符
输入：<input type=""> type属性的属性值决定输入类型
1.文本域：<input type="text" name="" placeholder=""/>
2.单选按钮：<input type="radio" name="" value/>
3.密码框：<input type="password" name="">
4.复选框：<input type="checkbox" name=""/>
5.按钮：<input type="button"/>
6.重置按钮：<input type="reset"/>
7.提交按钮：<input type="submit"/>
8.文件上传：<input type="file"/>
表单标签：
<textarea> 多行输入的文本域
<label> 控制的标签
<select> 下拉列表
<option> 下拉列表中的选项
<button> 定义一个按钮
<fieldset> 定义域
<legend> 域标题
HTML框架 frameset
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用
<frameset cols="25%,75%"| rows="25%,75%" noresize = "noresize"> //垂直|水平
<frame src="">
<frame src="">
<noframes> <body>您的浏览器无法处理框架！</body> </noframes>
</frameset>
noresize = "noresize"属性定义框架间的边框不可拖动
<frame> 标签定义了放置在每个框架中的 HTML 文档。
<noframes>不支持框架标签中嵌套<body>
以上标签在HTML5中被移除
内联框架：
<iframe src="" ></iframe>
<!DOCTYPE>声明文档类型。HTML有多个版本，只有明确版本，才能正确显示页面
HTML5文档声明<!DOCTYPE html>
<head>标签是所有头部元素的容器，包含脚本、元信息、文档标题等
<title>标签定义文档的标题，显示在浏览器工具栏上
<meta name="" content=""/>描述文档
<!-- 重定向 -->
<meta http-equiv="refresh" content="5;url=xxx"/>
<base>标签为页面上的所有链接规定默认地址或默认目标（target）
<link>标签定义文档与外部资源之间的关系。常用的为外部样式表的引入
<!-- 定义html文档图标 -->
<link rel="shortcut icon" href="xxx.ico" type="image/x-icon">
<style>内部样式定义在该标签内
<sctipt>外部脚本的引入(src属性指向资源地址)，直接标签内部脚本定义在内
<noscript>浏览器不支持脚本时显示该标签文本
字符实体
HTML中有些字符不能使用
常用的字符实体：
< <
> >
& &
" "
' '
© ©
x ×
➗ ÷
统一资源定位符URL，也称为网址
scheme://host.domain:port/path/filename
scheme - 协议，常见的类型是 http
host - 主机名，http 的默认主机是 www
domain - 域名
:port - 端口号，http 的默认端口号是 80
path - 定义在服务器上的路径
filename - 定义的文档/资源名称
HTML插件
音频、视频通过<object>标签来加载
<object>该标签用于插入对象
<object width="" height="" data="" ></object>
data属性指向插入的对象，可为音频、视频、html页面、图片
<embed width="" heigth="" src="" />单标签
HTML audio
<audio controls height="100" width="100">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
HTML video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
HTML5
Viewport:
用户网页的可视区域
设置viewport：
<meta name="viewport" content="width=devie-width, initial-sacle=1.0" user-scalable=yes|no/>
- width - 控制viewport大小，device-width为设备宽
- initial-scale - 初始缩放比例，即页面第一次加载时的缩放比例
- user-scalable - 是否允许用户手动缩放
大多数浏览器新版本都支持，IE9以下版本浏览器兼容HTML5的方法：
<!-- [if lt IE 9]>
<script src= "xxx/xx/html5shiv.min.js"></script>
<![endif] -->
html5shiv.js 引用代码必须放在<head>元素中
HTML5 Canvas
用于图形的绘制，通过脚本来完成
<canvas>定义图形容器,默认width=300px，height=150px;
<canvas id="myCanvas" width="200" height="100">
</canvas>
浏览器不支持时，使用替换文本，在标签中
1.通过JavaScript脚本获取容器对象(js放在body)
var c = document.getElementById('myCanvas');
2.创建context对象,getContext('2d')是HTML5的内置对象，可绘制线路、矩形、图形、字符、添加图像等
var ctx = c.getContext('2d');
3.对象属性和方法的设置
ctx.fillStyle="#ff0000";
ctx.fillRect(0,0,150,75);
fillStyle = color|gradient|pattern 填充绘图颜色|渐变|模式
fillRect(x,y,width,height) 定义矩形当前填充的方式
画线：
beginPath() 新建路径
moveTo(x,y) 定义线的开始的坐标
lineTo(x,y) 定义线条结束的坐标
closePath() 闭合路径
arc(x,y,r,start,stop) 绘制圆形
rect(x,y,width,heigth) 绘制矩形
stroke() 绘制线条
fill() 填充绘图，没有设置fillStyle时默认黑色填充
文本：
font="" 定义字体属性
fillText(text,x,y) 绘制实心文本
strokeText(text,x,y) 绘制空心文本
渐变：
var grd = ctx.createLinearGradient(x,y,x1,y1) 创建线条渐变
var grd = ctx.createRadialGradient(x,y,r,x1,y1,r1) 创建径向/圆渐变
grd.addColorStop(n, color); 指定颜色停止,n是0——1
ctx.fillStyle = grd;
图像：
drawImage(image, x, y) 画布上绘制图像、画布、视频
HTML5 内联SVG
SVG 指可伸缩矢量图形
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points=""/>
</svg>
相比图像格式优势：可通过文本编辑，可被搜索、索引、脚本化、压缩，图像质量高
svg不依赖分辨率，canvas依赖分辨率
HTML5拖放（drag和drop）
1.设置元素为可拖放，添加属性draggable="true"
2.ondragstart事件调用一个函数，规定被拖放的数据
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id)
}
3.ondragover事件规定何处放置被拖放的数据,并阻止默认处理方式
function allowDrop(ev){
ev.preventDefault();
}
4.进行放置ondrop
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");//获取被拖放的数据
ev.target.appendChild(document.getElementById(data))
}
HTML5 Geolocation(地理定位)
navigator.geolocation.getCurrentPosition()获取用户位置
navigator.geolocation.watchPosition()获取实时位置
HTML5 video
<video width="" height="" controls>
<source src="" type="">
浏览器不支持
</video>
<video>标签包含视频的标准方法,定义一个视频
<source />定义多媒体资源,type="video/mp4|ogg|webm"
video标签属性：
autoplay="true" 自动播放
controls="true" 显示控件
loop="true" 循环播放
muted="true" 静音
src="url" 播放视频的url
video对象属性：
currentTime 设置或返回当前播放位置(秒)
duration 返回当前视频长度(秒)
paused 设置或返回是否暂停
playbackRate 设置或返回播放速度
volume 设置或返回音量
video对象方法：
play() 播放视频
pause() 暂停播放
load() 重新加载视频
video事件：
durationchange 视频时长更改时触发
pause 视频暂停时触发
play 视频播放时触发
seeking 移动指定位置过程中触发
seeked 移动视频到新位置触发
timeupdate 当播放位置改变时触发
HTML5 audio
<audio>在网页上嵌入音频元素，controls属性显示控件
<source />定义多媒体资源,type="audio/mpeg|ogg|wav"
<audio width="" height="" >
<source src="" type="">
浏览器不支持
</audio>
HTML5 Input类型
color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
HTML5 表单元素
<datalist>、<keygen>、<output>
<datalist>规定输入域的选项列表，规定form或input域应该拥有自动完成功能
<keygen>提供验证用户的可靠方法，提交表单时，会生成两个键，一个私钥一个公钥，前者存储在客户端，后者发送到服务器验证
<output>
HTML5 表单属性
<form> : autocomplete、novalidate
<input>: placeholder|required、...
HTML5 语义元素
有意义的元素，清楚元素的功能作用定义的内容
<header>、<nav>、<article>、<aside>、<section>、<figcaption>、<figure>、<footer>
<header>元素描述文档的头部区域，页面中可使用多个<header>元素
<nav>元素定义导航链接的部分
<aside>标签定义页面主区域内容之外的内容，如侧边栏
<article>标签定义独立的内容
<section>标签定义文档中的节，如章节、页眉、页脚、或文档其他部分
<footer>描述了文档底部区域
<figure>规定独立的流内容(图像、图表、照片、代码等)
<figcaption>定义<figure>标签的标题
HTML5 web存储
是一个比cookie更好的本地存储方式
数据以键/值对存在，web网页的数据只允许该网页访问使用
localStorage、sessionStorage为客户端存储数据的两个对象
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期限制
sessionStorage - 用于临时保存同一窗口的数据，在关闭窗口或标签页之后将会删除数据
使用web存储前，检查浏览器是否支持localStorage和sessionStorage
if(typeof(Storage) != "undefined")
{
//支持
}else{
//不支持
}
localStorage.key = value;
localStorage.setItem(key, value); - 保存数据
localStorage.getItem(key); - 读取数据
localStorage.removeItem(key); - 删除单个数据
localStorage.clear(); - 删除所有数据
localStorage.key(index); - 得到某个索引的key
1105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
