您的位置：首页 > Web前端 > HTML5

HTML5笔记

2015-11-15 11:29 197 查看

1、浏览器选择

IE9+，FireFox 3.5+，Chrome 3.0+，Safari 3.0+，Opera
10.5+。

2、html的好处

1、向下兼容

对于XHTML2.0要求遵循规则，否则不予显示的方式，HTML5却实行“不破坏Web”的原则。也就是说，以往已存在的Web页面，还可以保持正确的显示。

当然，面对开发者，HTML5规范要求屏蔽过去那些编码坏习惯和废气的标签元素；而面对浏览器厂商，要求它们兼容HTML遗留的一切，以做到向下兼容。

2、用户至上

HTML5遵循“用户至上”的原则，在出现具体问题时，会把用户放在第一位，其次是开发者，然后是浏览器厂商，最后才是规范制定者。比如。开发者在编码时不严谨导致本该出现警告或错误时，却正常显示页面。

3、化简为繁

HTML5对比之前的XHTML，做了大量的简化工作。具体如下：

（1）已浏览器的原生能力代替复杂的JavaScript；

（2）DOCTYPE被简化到了极致；

（3）字符集声明被简化；

（4）简单强大的API。

4、无插件规范

在HTML5出现之前，很多功能只能通过插件或hack（比如绘图API）来实现，但HTML5原生提供了这些支持。使用插件有很多问题，具体如下：

（1）插件安装容易失败；

（2）插件被浏览器或软件禁用屏蔽（如flash插件）；

（3）插件经常被爆出漏洞被利用攻击；

（4）插件不容易与HTML文档其他部分集成（比如整体透明化）。

5、访问通用性

这个原则分为三个概念

（1）可访问性：比如更加利用残障人士的阅读方案；

（2）媒体中立：比如HTML5的媒体播放在不同设备或平台均能正常运行；

（3）支持所有语种：比如新元素<ruby>。

6、引入语义

HTML5引入了一些用来区分不同含义和内容的标记元素。这种方式极大的提供的编码人员的可读性和代码区域的便利性。

7、引入原生媒体支持

HTML5的一次大改进救生衣支持在浏览器中直接播放视频和音频文件，以前都需要借助插件才能实现此类功能。

8、引入可编程内容

HTML5最大的变化就是引入需要通过JavaScript编程才能完全的各种效果，而这些很过都是HTML5原生的。那么现在HTML5可以理解为HTML+css+JavaScript的总称。

3、HTML5的文档结构

<!DOCTYPE html>

<html >

<head lang="zh-cn">

<meta charset="utf-8" />

<title></title>

</head>

<body>

</body>

</html>

lang="zh-cn"是用来像谷歌翻译之类的功能。

4、元素的使用

（1）锚点：

<a href="#point"></a> <a name="point"></a>

解释：这个锚点是第一个a的链接将调到name为point的a标签位置。

（2）完整写表格：

<table>

<thead>

<tr>

<th></th>

</tr>

</thead>

<tbody>

<tr>

<td></td>

</tr>

</tbody>

<tfoot>

<tr>

<th></th>

</tr>

</tfoot>

</table>

（3）<embed src=""></embed>

使用来嵌入插件或是flash，比如嵌入土豆网的视频。

（4）视频（video标签）和音频（audio标签），具体查看API。

（5）datalist的使用

<input type="text" list="list" />

<datalist id="list">

<option value="apple">apple</option>

<option value="orange">orange</option>

</datalist>

（6）figure标签的使用

函数	说明	示例
rgb(r,g,b)	用RGB表示颜色	rgb(0,128,128)
rgba(r,g,b,a)	同上，a表示透明度0~1之间	rgb(0,128,128,0.5)
hsl(h,s,l)	用HSL模型（色相、饱和度和透明度）来表示颜色	hsl(120,100%,30%)
hsla(h,s,l,a)	同上，a表示透明度0~1之间	hsl(120,100%,30%,0.5)

（7）!imporment的使用

!imporment:是强调样式级别高用的，也就是说下面的样式覆盖不了这个样式。

#a{

width:200 !important;

width:200;

}

下面的样式覆盖不了上面的，执行上面的样式。

（8）属性选择器

[type="password"]{

border:1px solid red;

}

（9）伪元素选择器

1、::first-line块级首行选择器

::first-line{

color:red;

}

块级元素比如<p><div>等的首行文本被选定。如果想限定某种元素，可以加上前置p::first-line

2、::first-letter块级首字母

::first-letter{

color:red;

}

3、::before文本前插入

a::before{

content:"点击";

}

4、3、::after文本后插入

a::after{

content:"点击";

}

另外，其他伪类选择器，具体查看API

（10）使用用户字体

@font-face {

font-family: "abc";

src: url("BrushScriptStd.otf");

}

（11）header设计（基于下面的大纲算法）

<header>

<h1></h1>

<nav></nav>

</header>

（12）图文排版

<figue>

<img src="" alt="">

<figcaption>

<strong></strong>

</figcaption>

</figue>

（13）多标题

<hgroup>

<h2>马尔代夫6日自助游</h2>

<h3>双鱼岛Olhuveli4晚</h3>

</hgroup>

（14）侧边栏

侧边栏用<aside>标签

<div class="container">

<aside></aside>

<div></div>

</div>

（15）强制继承

inherit：样式强制继承，可以达到复写代码的效果，但是不常用。

（16）绝对定位和相对定位

绝对定位：

#a{

position:absolute;

top:100px;

left:100px;

}

这个脱离文档流，以“当前窗口文档（即整个文档）”为基准。

以窗口参考定位

#a{

position:absolute;

top:100px;

left:100px;

}

这个脱离文档流，以“当前窗口文档（即可见区域）”为基准。

相对定位：

#a{

position:relative;

top:100px;

left:100px;

}

不脱离文档流，以自己为基准点，占位偏移，但是不会将其他元素挤开，其实就像脱离文档流一样。

字父元素绝对定位：常用的父元素position:relative;子元素position:absolute;

resize属性，即是否设置元素可以改变大小，本身允许的textarea当设置这个属性（resize:none;）后就不能任意拖动大小了。但是当一个div（本身不允许）设置属性（overflow:auto;resize:both;）后就可以拖动大小了。

（17）visibility属性

使用visibility属性可以实现元素的可见性。

取值：visible：默认值，元素在页面上可见。hidden：元素不可见，但会占据空间。collapse：元素不可见，隐藏表格的行与列，如果不是表格，则和hidden一样。

（18）<article>标签

<article> 标签定义外部的内容。

外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

（19）图片边框

css3提供了一个新的属性集合，用这几个属性可以嵌入图片形式的边框。

1、border-image-source 引入背景图片地址

2、border-image-slice 切割引入背景图片

3、border-image-width 边框图片的宽度

4、border-image-repeat 边框背景图片的排列方式

5、border-image-outset 边框背景向外扩张

6、border-image 上面五个属性的简写方式

具体使用参见具体API

5、乱七八糟知识点

（1）解决IE9以下不支持html5的解决方案

html5shiv：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。

<!--[if lt IE 9]>
<scriptsrc="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]—>
（2）样式是否可用 http://caniuse.com/这个网站可以查看样式在浏览器中是否可用。 （3）重置css网站
百度搜索：CSS Tools: Reset CSS
或网址：http://meyerweb.com/eric/tools/css/reset/
（4）大纲算法
在html5中有一个很重要的概念，叫做html5的大纲算法，用途是为用户提供一份页面的信息结构目录。
查询可在：http://gsnedders.html5.org/outliner/section和nav元素大纲要求有h1~h6。但section必须有才能规范，而nav如果没有标题也是合理的。

6、HTML5新标签

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

HTML5:<article></article>

HTML4:<div></div>

<aside>标签定义 article以外的内容。aside
的内容应该与 article的内容相关。

HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>

HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。</div>

<audio>标签定义声音，比如音乐或其他音频流。

HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio标签。</audio>

HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

<canvas>标签定义图形，比如图表和其他图像。这个 HTML
元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API
展现给客户端 JavaScript以使脚本能够把想绘制的东西都绘制到一块画布上。

HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>

HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

<command>标签定义命令按钮，比如单选按钮、复选框或按钮。

HTML5: <command onclick=cut()" label="cut">

HTML4: none

<datalist>标签定义可选数据的列表。与 input
元素配合使用，就可以制作出输入值的下拉列表。

HTML5: <datalist></datalist>

HTML4: see combobox.

<details>标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend>
一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。

HTML5: <details></details>

HTML4: <dl style="display:hidden"></dl>

<embed>标签定义嵌入的内容，比如插件。

HTML5: <embed src="horse.wav" />

HTML4: <object data="flash.swf" type="application/x-shockwave-flash"></object>

<figcaption>标签定义 figure
元素的标题。”figcaption”元素应该被置于“figure”元素的第一个或最后一个子元素的位置。

HTML5: <figure><figcaption>PRC</figcaption></figure>

HTML4: none

<figure>标签用于对元素进行组合。使用 <figcaption>元素为元素组添加标题。

HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>

HTML4: <dl><h1>PRC</h1><p>The People's Republic of China was born in 1949...</p></dl>

<footer>标签定义 section
或 document的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。

HTML5: <footer></footer>

HTML4: <div></div>

<header>标签定义 section
或 document的页眉。

HTML5: <header></header>

HTML4: <div></div>

<hgroup>标签用于对网页或区段（section）的标题进行组合。

HTML5: <hgroup></hgroup>

HTML4: <div></div>

<keygen>标签定义生成密钥。

HTML5: <keygen>

HTML4: none

<mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

HTML5: <mark></mark>

HTML4: <span></span>

<meter>标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max属性中定义。

HTML5: <meter></meter>

HTML4: none

<nav>标签定义导航链接的部分。

HTML5: <nav></nav>

HTML4:<ul></ul>

<output>标签定义不同类型的输出，比如脚本的输出。

HTML5: <output></output>

HTML4: <span></span>

<progress>标签运行中的进程。可以使用 <progress>
标签来显示 JavaScript中耗费时间的函数的进程。

HTML5: <progress></progress>

HTML4: none

<rp>标签在 ruby
注释中使用，以定义不支持 ruby元素的浏览器所显示的内容。

HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>

HTML4: none

<rt>标签定义字符（中文注音或字符）的解释或发音。

HTML5: <ruby>漢 <rt>ㄏㄢˋ </rt></ruby>

HTML4: none

<ruby>标签定义 ruby
注释（中文注音或字符）。

HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>

HTML4: none

<section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

HTML5: <section></section>

HTML4: <div></div>

<source>标签为媒介元素（比如 <video>
和 <audio>）定义媒介资源。

HTML5: <source>

HTML4: <param>

<summary>标签包含 details
元素的标题，”details”元素用于描述有关文档或文档片段的详细信息。”summary”元素应该是“details”元素的第一个子元素。

HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>

HTML4: none

<time>标签定义日期或时间，或者两者。

HTML5: <time></time>

HTML4: <span></span>

<video>标签定义视频，比如电影片段或其他视频流。

HTML5: <video src="movie.ogg" controls="controls">您的浏览器不支持 video标签。</video>

HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航