Html5 自学笔记

html的全称

Hyper Text Markup Language

HTML的意义

使用标记标签( Markup Tag)来描述网页

HTML标签一定成对吗

是

它们之间的文本用来描述网页

它们之间的文本描述网页上的可见内容

html标题标签

h1 到 h5

html段落

用<p>来定义的

html链接

html链接是用<a> 来定义的

比如 <a href="www.17zuoye.com">This is a link</a>

html图像

用<img>来定义的

比如 <img src="avatar.jpg" width="100" height="80">

元素属性举例

1.超链接 <a href="www.17zuoye.com">link</a>
2.对齐 <h1 align="center">
3.背景颜色 <body bgcolor="yellow"></body>
4.表格边框粗度 <table border="1">

html元素常用属性

class 规定元素的类名
id 元素的唯一id
style 元素的行内样式 inline style
title 元素的额外信息

h标签的注意事项

请仅使用于标题

html水平线

<hr/>

html注释

如果在不产生一个新段落的前提下换行

使用<br/>

所有连续的空格或空行

都会被认为是一个空格

文本格式化

粗体 b
壮体 strong
大体 big
强调体 em
斜体 i
小体 small
上注 sup
下注 sub

预格式文本标签

用于显示计算机代码的标签举例

描述地址

tooltips

用属性title

覆盖现有的文字方向

html元素

从开始标签到结束续签的所有代码

元素内容

开始和结束标签中间的部分

标签名一定要用小写

大多数html标签是有属性的

长引用或短引用

长引用和短引用的区别

长引用会插入换行 + 外边距

删除字效果和下划线效果

定义缩写词

<abbr>

定义首字母缩写词

改变文本的外观有两类

基于内容的物理样式

设定特定标签的样式

没有下划线的链接

<a href="http://www.baidu.com" style="text-decoration: none">go to baidu</a>

样式的分类

外部样式表内部样式表内联样式

外部样式表的引用方法

内联样式的写法

<p style="color: #00cc00;margin-left: 20px">这是我的第一个段落</p>

定义文档中的节或区域

<div>

超链接有两种

1. 相对路径的 href="/index.html"

2. 网站 href="http://www.baidu.com"

将图片作为链接

span

定义一个小的块

<a>有两种类型

把提供热点和超链接地址的锚看作“链接”，而用于标记文档的目标部分的锚称为“锚”.

“链接文本”

"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

如何定义链接的文档在何处显示

<a>标签里的 target属性 . 比如 _blank 表示会在新的标签页显示
_top会刷新本页面(或者叫做跳出框架)

命名锚的用法

<a name="tips">我是目标锚</a>
<a href="url#tips">点击我会跳转</a>

在链接里请始终将正斜杠添加到子文件夹原因

因为当服务器发现末尾没有/时，会自动再加一次，即会发生两次请求

邮件链接

<a href="mailto:jianjun.xiao@foxmail.com?cc=jason@foxmaill.com&bcc=jeff@foxmaill.com&subject=Hello%20Message&body=hello!"> 点击这里发邮件</a>

<img>标签，如果显示图片失败，可显示文字来做为提示

给html页面添加背景图

<body background="img.jpeg"/>
如果图片过小，则图片则会重复显示

在文字中排列图片

<img src="test.jpeg" align="bottom"/> bottom是默认的，还有top middle

图片浮动到文字的左右侧

<img src="test.jpeg" align="left"/> 图片会浮到在文字的最左侧，上缘对齐文字的上缘

调整图像尺寸

<img width height

创建图像映射

这个较复杂，代码见: http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

在WebStrorm中命名包

vom/jason/view

Html中的图片的相对路径

../ 表示向上一级

把图像转换为图像映射
显示图像坐标

http://www.w3school.com.cn/tiy/t.asp?f=html_ismap

表格表格行表格数据

表格边框

空格占位符

表头格

<th>

表格的标题

跨行或跨列的表格单元格

在td里嵌套table或list

表格内的文字在上下左右方向离边界线的距离

单元格间距

给表格添加背景颜色或背景图片

格子里文本的对齐

<td align="left"/> 可选 left right 默认就是居中

table最外边缘的五种类型

<table frame="box"/>
above below hsides vsides

区分table的页眉行主体页脚行

thead tbody tfoot

在table中，通过col来设置宽度

<table> <col align="left"/>
colgroup

无序列表

有序列表

有序列表的type可有的值

ol type = A a I i

无序列表的type可有的值

ul type= circle disc square

元素可分两类

块元素 <h1>, <p>, <ul>, <table> 这些在显示上都会先换行
内联元素 <b>, <td>, <a>, <img>

input
password

文本域的缺省宽度

20个字符

Radio Buttons

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

复选框（Checkboxes）

表单的动作属性（Action）

<form name="input" action="MapHref.html" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
</body>

input的类型有哪些

text password submit radio checkbox

radio标签默认选中一个

下拉选项

<select name="nation_select">
<option value="1">China</option>
<option value="2">Japan</option>
<option value="2" selected="selected">USA</option>

</select>

按钮

在数据周末围一个带文字的边框

点击标签，触发相关控件

<form>
<label for="china" >China</label>
<input type="radio" name="nation" value="china" id="china">
<br/>
<label for="japan">Japan</label>
<input id="japan" name="nation" type="radio" value="japan">
</form>

radio checkbox用什么来控制组

name

选项组用什么标签

optgroup

垂直框架

frameset cols=“25%,25%,50%” frameset不能在body里面

水平框架

frameset rows=“25%,25%,50%”

noframes的使用方法

<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>

禁止手动拖动改变frame的宽度

ifame标签内联框架

跳转至框架内的一个指定的节锚点

Iframe - 删除边框

在iframe中打开链接

图像文件不应该超过

10k

Definition list

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Entities

< is the same as <
> is the same as >
© is the same as ©

如何使用 base 标签使页面中的所有标签在新窗口中打开。

用meta来记录文档信息

5 秒内被重定向到新的地址

<base>的作用

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

外联样式表的方法

noscript的使用

<p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p>

如何应付老式的浏览器

如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。

HTML 实体

如需显示小于号，我们必须这样写：< 或 <
http://www.w3school.com.cn/html/html_entities.asp

不间断空格

non-breaking space

嵌入flash

嵌入mp3

html5中的audio标签

最好的音频播放方式

使用雅虎的媒体播放器向网页添加音频

video

最好的html解决方案

HTML 5 + <object> + <embed>

优酷解决方案

使用超链接

“辅助应用程序

<a href="movie.swf">Play a video file</a>

XHTML

是以xml格式编写的html

xhtml检查器

https://validator.w3.org/nu/

xhtml文件的文档声明

文本区标签

HTML5是什么的新标准

html xhtml dom

html5的video支持三种视频文件

ogg mpeg4 webM

video

<video src="/i/movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

video的属性

controls 显示播放控制
autoplay="autoplay"自动播放
loop="loop"循环播放
preload="preload"预备加载

video的方法属性事件请见：

http://www.w3school.com.cn/html5/html_5_video_dom.asp

方法	属性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

audio可以播放的音频格式有哪些

mp3 ogg wav

ogg文件适用的浏览器

使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器

MPEG4文件适用的浏览器

Safari

我发现Ogg 文件

在chrome里好像播放不了

设置元素为可拖放

HTML5 定了 8 个新的 HTML 语义（semantic）元素

header, section, footer, aside, nav, main, article, figure

为 HTML 添加新的元素

document.createElement("myHero")

样式里的 display:block;

表示是块级元素，即会占领一整行到边缘

如果ie6到ie8并不支持html5

可以在<head>里加上

html5包括的新多媒体元素

audio video source embed track

新表单元素

datalist keyken output

新的语义和结构元素

article 独立的内容区域
aside 定义页面的侧边栏内容
bdi 文本方向
command 定义命令按钮
details 描述细节
dialog 定义对话框
summary 标签包括details元素的标题
figure 规定独立的流内容
figcaption figure元素的标题
footer 定义section 或 document的页脚
header 定义文档的头部区域
mark 定义带有标记的文档
meter 定义度量衡
nav 定义运行中的进度
progress 定义任务进度
ruby 定义ruby注释
rt 定义字符的解释或发音
rp 定义不支持ruby注释

section

定义文档中的节

time

定义日期或时间

wbr

规定在文本中的何处适合添加换行符

canvas

绘图
以下代码得放到<canvas>标签之后

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

canvas画直线

var canvas =document.getElementById("myCanvas");
var context = canvas.getContext("2d") ;
context.moveTo( 0, 10 ) ;
context.lineTo( 50, 50 ) ;
context.stroke() ;

canvas画圆圈

canvas画实心文本

context.font = "50px Arial" ;
context.fillText( "我是测试员", 10,50 ) ;

canvas画空心文本

context.font = "50px Arial" ;
context.strokeText( "我是测试员", 10,50 ) ;

canvas画渐变色

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d") ;

var gradient = context.createLinearGradient(0,0,200,100) ;
gradient.addColorStop( 0, "red" );
gradient.addColorStop( 1, "white" ) ;

context.fillStyle = gradient ;
context.fillRect( 10,10,200,90 ) ;

canvas 径向圆渐变

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d") ;

var gradient = context.createRadialGradient(100,50,50,100,50,100);
gradient.addColorStop( 0, "#ff0000" ) ;
gradient.addColorStop( 1, "#ffffff" ) ;
context.fillStyle = gradient ;
context.fillRect( 0, 0, 200, 100 ) ;

把一幅图放置在画布上

var canvas0 = document.getElementById("myCanvas") ;
var context0 = canvas0.getContext("2d") ;

var imgGirl = document.getElementById("img_girl") ;

context0.drawImage( imgGirl, -100, 0 ) ;

为毛刷新一下页面，才能看到效果!!

什么是svg

是 scalable vector graphics
定义网络的基于矢量的图形
使用xml来定义图形
在放在或缩小情形小图片质量不会发生变化
它是W3C标准

canvas和svg

Canvas	SVG
依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用

拖拽功能

http://www.runoob.com/try/try.php?filename=tryhtml5_draganddrop

显示用户经纬度

http://www.runoob.com/html/html5-geolocation.html

html5视频

http://www.runoob.com/html/html5-video.html

html5音频

http://www.runoob.com/html/html5-audio.html

html5 input类型

color time　等等

html5 表单元素

http://www.runoob.com/html/html5-form-elements.html

其中包括 output这一表单元素

html5表单新属性

http://www.runoob.com/html/html5-form-attributes.html

html5语义元素

http://www.runoob.com/html/html5-semantic-elements.html

header nav section article aside figcaption figure footer

html5 web存储

localStorage

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

html5 应用程序缓存

http://www.runoob.com/html/html5-app-cache.html

应用程序缓存为应用带来三个优势

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

web worker

web worker 是运行在后台的 JavaScript，不会影响页面的性能。

web worker 无法访问到 windows document parent

http://www.runoob.com/html/html5-webworkers.html

HTML5 服务器发送事件（server-sent event）

EventSource 对象用于接收服务器发送事件通知