正文

Html5 自学笔记

IP云
IP云V管理员/4 阅读
09/07
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
 
1
html的全称
Hyper Text Markup Language
2
HTML的意义
使用标记标签( Markup Tag)来描述网页
3
HTML标签一定成对吗
是
4
<html> </html>
它们之间的文本用来描述网页
5
<body></body>
它们之间的文本描述网页上的可见内容
6
html标题标签
h1 到 h5
7html段落
用<p>来定义的
8html链接
 html链接是用<a> 来定义的
   比如 <a href="www.17zuoye.com">This is a link</a>
9
html图像
用<img>来定义的
   比如 <img src="avatar.jpg" width="100" height="80">
10元素属性举例1.超链接 <a href="www.17zuoye.com">link</a>
2.对齐 <h1 align="center">
3.背景颜色 <body bgcolor="yellow"></body>
4.表格边框粗度 <table border="1">
11html元素常用属性class   规定元素的类名
id  元素的唯一id
style 元素的行内样式 inline style
title 元素的额外信息
12h标签的注意事项请仅使用于 标题  
13html水平线<hr/>
14html注释<!-- 我是注释 -->
15如果在不产生一个新段落的前提下换行使用<br/>
16所有连续的空格或空行都会被认为是一个空格
17文本格式化粗体 b
壮体 strong
大体  big
强调体 em
斜体 i
小体 small
上注 sup
下注 sub
18预格式文本标签<pre></pre>
19用于显示计算机代码的标签举例<code>
<kbd>
<tt>
<samp>
<var>
20描述地址<address> 
21tooltips用属性title
22覆盖现有的文字方向<bdo dir="rtl"> this is a text </bdo>
23
html元素
从开始标签 到 结束续签 的所有代码
24
元素内容
 开始和结束标签中间的部分
25
标签名一定要用小写
 
26
大多数html标签 是有 属性的
 
27长引用 或 短引用<blockquote> <q>
28长引用 和 短引用 的区别长引用会插入换行 + 外边距 
29删除字效果 和 下划线效果<del> <ins>
30定义缩写词<abbr>
31定义首字母缩写词<acronym>
32改变文本的外观有两类基于内容的 物理样式
33设定特定标签的样式
<style type="text/css">
h1{color: #ff2241}
p{color: #00ccff}
</style>
34没有下划线的链接
<a href="http://www.baidu.com" style="text-decoration: none">go to baidu</a>
35样式的分类外部样式表 内部样式表 内联样式
36外部样式表的引用方法 
<link rel="stylesheet" type="text/css" href="testStyle.css">
37内联样式的写法
<p style="color: #00cc00;margin-left: 20px">这是我的第一个段落</p>
38定义文档中的节或区域<div>
39
超链接有两种
1. 相对路径的  href="/index.html"
2. 网站 href="http://www.baidu.com"
40将图片作为链接 <a href="url"> <img src="/test.jpeg"></img></a>
41span定义一个小的块
42<a>有两种类型把提供热点和超链接地址的锚看作“链接”，而用于标记文档的目标部分的锚称为“锚”. 
43“链接文本”"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
44如何定义链接的文档在何处显示<a>标签里的 target属性 .   比如 _blank 表示会在新的标签页显示
_top会刷新本页面(或者叫做跳出框架)
45命名锚的用法<a name="tips">我是目标锚</a>
<a href="url#tips">点击我会跳转</a>
46在链接里  请始终将正斜杠添加到子文件夹 原因因为当服务器发现 末尾没有/时，会自动再加一次，即会发生两次请求
47邮件链接<a href="mailto:jianjun.xiao@foxmail.com?cc=jason@foxmaill.com&bcc=jeff@foxmaill.com&subject=Hello%20Message&body=hello!"> 点击这里发邮件</a>
48<img>标签，如果显示图片失败，可显示文字来做为提示<img alt="这是一张小女孩的图片"/>
49给html页面添加背景图<body background="img.jpeg"/> 
如果图片过小，则图片则会重复显示
50在文字中排列图片<img src="test.jpeg" align="bottom"/>  bottom是默认的，还有top middle
51图片浮动到文字的左右侧<img src="test.jpeg" align="left"/> 图片会浮到在文字的最左侧，上缘对齐文字的上缘
52调整图像尺寸<img width height 
53创建图像映射这个较复杂，代码见: http://www.w3school.com.cn/tiy/t.asp?f=html_areamap
 在WebStrorm中命名包vom/jason/view
 Html中的图片的相对路径../ 表示向上一级
 把图像转换为图像映射
显示图像坐标
<a href="">
<img src="../../../raw/eg_planets.jpg" ismap/>
</a>
http://www.w3school.com.cn/tiy/t.asp?f=html_ismap
 表格 表格行 表格数据<table> <tr> <td>
 表格边框<table border="10"/>
 空格占位符&nbsp;
 表头格<th>
 表格的标题<table> <caption></caption></table>
 跨行或跨列的表格单元格<th colspan="2"/>
<td rowspan="3"/>
 在td里嵌套table或list<td> <table/> </td>
<td> <ul><li/></ur> </td>
 表格内的文字在上下左右方向离边界线的距离<table cellpadding="10"/>
 单元格间距<table cellspacing="10"/>
 给表格添加背景颜色或背景图片<table bgcolor="red"/>
<table background="test.jpeg"/>
 格子里文本的对齐<td align="left"/> 可选 left right 默认就是居中
 table最外边缘的五种类型<table frame="box"/>
above below hsides vsides
 区分table的页眉行 主体 页脚行thead tbody tfoot
 在table中，通过col来设置宽度<table> <col align="left"/>
colgroup
 无序列表<ul>
<li/>
 有序列表<ol start=“10”>
<li/>
 有序列表的type可有的值ol type = A a I i
 无序列表的type可有的值ul type= circle disc square 
 元素可分两类块元素  <h1>, <p>, <ul>, <table> 这些在显示上都会先换行
内联元素  <b>, <td>, <a>, <img>
 input
password
<form>
用户名: <input name="username" type="text">
<br/>
密码: <input name="password" type="password">
</form>
 文本域的缺省宽度20个字符
 

Radio Buttons

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

复选框（Checkboxes）

<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>
 

表单的动作属性（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标签默认选中一个<input type="radio" name="sex" checked="checked"/>
 下拉选项
<select name="nation_select">
<option value="1">China</option>
<option value="2">Japan</option>
<option value="2" selected="selected">USA</option>
</select>
 按钮 <input type="button"/>
 
在数据周末围一个带文字的边框
<form>
  <fieldset>
     <lengend>我是标题</legend>
  </fieldset>
</form>
 点击标签，触发相关控件
<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的宽度<frame noresize="noresize"/>
 ifame标签 内联框架<iframe src="/i/eg_landscape.jpg"></iframe>
可以在body里面使用
 跳转至框架内的一个指定的节 锚点 <frame src="/example/html/link.html#C10">
 

Iframe - 删除边框

<frame frameborder="0"/>
 在iframe中打开链接 
 图像文件不应该超过10k
 

Definition list

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

Entities

&lt; is the same as <
&gt; is the same as >
© is the same as ©
 如何使用 base 标签使页面中的所有标签在新窗口中打开。<head>
<base target="_blank" />
</head>
 用meta来记录文档信息<meta name="revised"
content="David Yang,8/1/07">
 5 秒内被重定向到新的地址
<meta http-equiv="Refresh" content="3;url=http://www.baidu.com">
 <base>的作用
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
 外联样式表的方法
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
 noscript的使用<noscript>Sorry, your browser does not support JavaScript!</noscript>

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

 

如何应付老式的浏览器

如何应付老式的浏览器

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

HTML 实体

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

不间断空格

non-breaking space
&nbsp;
 嵌入flash
<embed src="bookmark.swf" width="400" height="40"></embed>
 嵌入mp3
<embed height="100" width="400" src="/i/horse.mp3"></embed>
<object height="100" width="100" data="song.mp3"></object>
 html5中的audio标签<audio controls="controls">
  <source src="/i/song.mp3" type="audio/mpeg">
</audio>
 最好的音频播放方式<audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="/i/song.mp3" type="audio/mpeg">
<embed height="100" width="100" src="/i/song.mp3" />
</audio>
 使用  雅虎的媒体播放器 向网页添加音频<p><a href="/i/song.mp3">播放 mp3</a></p>
<p><a href="/i/bird.wav">播放 wav</a></p>

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js" target="iframe_name"></script>

 video

最好的html解决方案

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240" />
</object>
</video>
 

优酷解决方案

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
width="480" height="400"
type="application/x-shockwave-flash">
</embed>
 

使用超链接

“辅助应用程序
<a href="movie.swf">Play a video file</a>
 XHTML 是以xml格式编写的html
 xhtml检查器https://validator.w3.org/nu/
 xhtml文件的文档声明
<html xmlns="http://www.w3.org/1999/xhtml"/>
 

文本区标签

<textarea/>
 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()currentSrcplay
pause()currentTimepause
load()videoWidthprogress
canPlayTypevideoHeighterror
 durationtimeupdate
 endedended
 errorabort
 pausedempty
 mutedemptied
 seekingwaiting
 volumeloadedmetadata
 height 
 width 
在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。
 audio可以播放的音频格式有哪些mp3 ogg wav
 ogg文件适用的浏览器
使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器
 
 MPEG4文件适用的浏览器
Safari 
  我发现Ogg 文件在chrome里好像播放不了
 

设置元素为可拖放

<img dragable="true"/>
 
HTML5 定了 8 个新的 HTML 语义（semantic） 元素
header, section, footer, aside, nav, main, article, figure 
 
为 HTML 添加新的元素
document.createElement("myHero")
 样式里的  display:block;表示是块级元素，即会占领一整行到边缘
 如果ie6到ie8并不支持html5可以在<head>里加上
<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js">
  </script>
  <![endif]-->
 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
 
CanvasSVG
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .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
 
应用程序缓存为应用带来三个优势
  1. 离线浏览 - 用户可在应用离线时使用它们
  2. 速度 - 已缓存资源加载得更快
  3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
 
web worker
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
web worker 无法访问到 windows document parent 
http://www.runoob.com/html/html5-webworkers.html
 
HTML5 服务器发送事件（server-sent event）
EventSource 对象用于接收服务器发送事件通知