- HTML5 的文档类型声明可以触发所有具备标准模式的浏览器的标准模式,包括那些对 HTML5 一无所知的浏览器,也就是说,可以在任何网页中都使用 HTML5 文档类型声明 <!DOCTYPE html> 如果没有文档类型声明,大多数浏览器将转换到混杂模式。
- 为文档添加字符编码 <meta charset="utf-8"> 。
- 指定网页中使用的自然语言 <html lang="en"> en 表示英语。
- 添加样式表 <link rel="stylesheet" href="xxx.css"> 。
- 添加 JS 文件 <script src="xxx.js"></script>>。
- 在 HTML 中,应保持良好的代码风格。
- 包含 <html>,<body> 和 <head> 标签。
- 标签全部小写。
- 属性值加引号
- 省略关闭空元素的斜杠。
- HTML5 验证器。
- 浏览器装机情况统计。
- 检测功能。
- 使用腻子脚本填补功能缺陷。
- HTML5 语义元素。
- <time>:用于在网页中标注一个有效的日期,时间。
- <header>:用来标注网页的页眉或标注内容的标题。
- <footer>:页脚,可以放一些网站版权信息,作品来源,法律限制及链接之类的信息,不能放太多链接,重要的或无关的内容,如广告,社交媒体,按钮等。
- <article>:包含所有相关的内容,包括标题,作者署名以及正文。
- <figure>:添加插图,与图片的概念不太一样,HTML5 规范建议我们把插图想像成一本书的附图,图题可以放在 <figure> 中的 <figcaption> 元素里。
- <aside>:添加附注,表示与它周围文本没有密切关系的内容,也可以用来盛放广告,相关内容的链接,和醒目引文。
- 浏览器(IE8 及更早版本除外)在遇到不认识的元素时,会把它们当成内联(inline)元素,大多数 HTML5 语义元素(<time> 除外)都是块级元素,所以要在老的浏览器中兼容它们,需要显式的设置 display:block。
- 对于 IE8 及更早版本的浏览器,它们会拒绝给无法识别的元素应用样式,好在可以通过 JS 创建新元素,就可以骗过 IE ,让它识别外来元素,
document.createElement('header')
。简单的方法是直接使用别人做好的“垫片”脚本<script src = "http://html5shim.googlecode.com/svn/trunk/html5.js"><script>
当然,这应该只在使用旧版本 IE 的情况下执行,为了避免不必要的加载 JS 文件,可以将这段代码放在 IE 的条件注释中 <!--[if lt IE 9]> 脚本 <[!endif--]> 这样,其他浏览器(IE9 及更高版本)就会忽略这个脚本。(使用第 9 条的检查工具也可以解决这个问题,此工具内置了 HTML5 垫片脚本,因此会自动解决这些问题。) - 如果你在 IE 中要花大量时间检测包含 JS 的页面,还应该在 <head> 区块中包含一条特殊的注释,叫做 web 标志。这行注释要放在指定字符编码的标签后面,
<!-- saved from url=(0014)about:internet -->
这行注释告诉 IE 将页面视为从远程网站上下载来的。否则,IE 会切换到一种特殊的锁定模式,弹出一条安全警告,在你点了“允许阻止的内容”按钮之后才会执行 JS 代码。其它所有浏览器都会忽略这个 web 标志注释,对远程站点和本地文件使用相同的安全设置。 - 语义元素续。
- <nav>:用来包装一组链接。
- <section>:区块元素。如果有一个带有标题的内容块,而其它语义元素都不合适,那么选择 <section> 通常比选择 <div> 更好一些。
- <main>:用于标识网页的主要内容,不能把 <main> 嵌套在 <article> 或其他任何语义元素里面。这是因为 <main> 元素的使命是包裹页面中的主要内容,而非标识文档中某个重要的部分。换句话说,一个页面中只能有一个 <main> 元素。在复杂些的页面中,比如包含多个 <article> 元素时,<main> 就应该包含所有 <article>。
- 查看纲要:
使用 <time> 元素标注日期和时间
对于浏览网页的人,你可以随便采用任何格式来显示日期时间,只要你在 datetime 属性中提供计算机能够看懂的通用格式的日期时间就行了。另外,<time> 还有一个 pubdate 属性。如果当前内容(例如 <time> 元素所在的 <article>)对应一个发表时期,可以使用这个属性。- 语义元素续。
- <output>:标注 JS 返回值。实际上,这个元素就是一个占位符,用于展示一小段计算后的信息。比如,通过某些计算后,JS 返回值显示在页面中。以前一般是利用一个 <span> 来用做占位符,而唯一的问题就是该元素不提供任何语义
<p>返回值:<span id="result"></span></p>
。 - <mark>:用于标注一段文本,这段文本会突出显示。在需要引用他人的内容,而你想吸引人注意时,就可以使用 <mark> 元素。
- <output>:标注 JS 返回值。实际上,这个元素就是一个占位符,用于展示一小段计算后的信息。比如,通过某些计算后,JS 返回值显示在页面中。以前一般是利用一个 <span> 来用做占位符,而唯一的问题就是该元素不提供任何语义
- 关于其他未由 HTML5 规定的语义元素,诸如名字,地址,企业名录,产品说明,个人简介等等。可以由其他语义标准(微格式,微数据等等)来实现。
- 可以且只能给 <input> 或 <textarea> 元素添加一个 autofocus 属性,使得浏览器能够在用户未操作之前,自动把焦点给予正确的控件。
- 在 <form> 元素中添加 novalidate 属性可以禁用验证功能。
- 表单伪类。
- required(必填)和optional(选填):根据字段是否使用了 required 属性来应用不同的样式。
- valid(有效)和 invalid(无效):根据控件中是否包含错误来应用不同的样式。注意,除非访客提交表单,否则大多数浏览器并不会发现哪些值有效,哪些值无效。换句话说,访客不会实时看到表示输入无效的样式变化。
- in-range(在范围内)和 out-of-range(超出范围):根据控件的 min 和 max 属性判断输入值是否超出范围,从而为控件应用样式。
- 在 <input> 元素中可以使用 pattern 属性使用正则表达式来进行验证(不推荐)。
- 也可以使用 setCustomvalidy() 方法自定义验证(推荐)。
- 下面是借特殊的表单输入属性,这不是用于验证的属性,而是用于在编辑表单时控制浏览器的行为。
- spellcheck:拼写检查。true,开启。false,关闭。
- autocomplete:是(on)否(off)提供最近输入的值进行选择。
- autocorrect 和 autocapitalize:这两个属性可以用来在移动设备(即 iPad 和 iPhone 中的 Safari)上控制自动纠错和自动大小写功能。
- multiple:很久以来,web 开发人员一直通过为 <select> 元素添加 multiple 属性,达到让用户能选择多个列表项的目的,现在也可以为某些类型的 <input> 元素添加这个属性,包括用于上传文件的 file 类型和 email 类型。在支持的浏览器中,用户可以选择多个文件一块上传,或者可以在一个输入框中贴上多个邮件地址。
- <input> 元素遇见不认识的 type 类型,会将其当作普通文本框来处理,但支持 HTML5 表单的浏览器会更聪明一些,比如会提供便于编辑的辅助,限制可能出现的错误和执行验证。下面是 HTML5 表单的新类型。
- email:电子邮件。
- url:网址。
- search:搜索框。
- tel:电话号码。
- number:常规数值,可使用 min 和 max 属性限制大小,step 属性控制数值间隔。
- range:滑动条形状的数值。与 number 属性一样。
- date 和 time:日期和时间。
- color:颜色。
- 表单新元素。
- <datalist>:可以让你在普通文本框中添加一个建议列表。
- <progress> 和 <meter>:进度条和计量条。
- 网页中的HTML编译器。
- contenteditable:把这个属性添加到任何元素中并且设置它的值为 true ,那么该元素的内容便可以编辑了。
- designMode:使用户编辑整个页面。最常用的形式是将这个属性添加到 <iframe> 元素中,从而使它充当了一个超级的编译框。
- <audio>:音频。
- src 属性指定文件。
- preload属性告诉浏览器如何加载一个媒体文件,当值为 auto 时,浏览器在后台下载整个文件,为 metadata 时,告诉浏览器先获取音频文件的数据块,从而足以确定一些基本信息(比如音频的总时长),为 none 时,告诉浏览器不必预先下载预先下载。
- autoplay 属性告诉浏览器在加载完音频文件后立即播放。
- loop 属性告诉浏览器在播放结束时,再从头开始播放。
- controls 属性显示播放控件。
- <video>:视频。与 <audio> 元素很像,也有 src ,controls ,preload ,autoplay ,loop 属性。<video> 元素还有另外三个属性。
- height 和 width 属性用于设置视频窗口的大小(像素),在设置这个尺寸时,应该注意按照视频的原始比例设置。而明确设置视频窗口大小,可以在视频未加载完成时(或者在视频加载失败时),不影响页面的布局。
- poster 属性用于设置替换视频的图片。浏览器会在三种情况下使用这个图片。视频第一帧为加载完毕。把 preload 属性设置为 none 。没有找到指定的视频文件
- 现在主流且最新版的浏览器都支持 mp3 与 mp4 格式,对于老式浏览器,我们有两种替代的后辈措施。
- 使用 <video> 和 <audio> 元素内置的格式后辈系统,要使用它,就要从 <video> 和 <audio> 元素中删除 src 属性,然后嵌套一组 <source> 元素。
- 添加 flash。
- -prefix-free库,使用它可以自动添加开发商前缀(CSS3)。
- 实现透明效果的方法有两种。
- 使用 rgba() 函数,它接受 4 个数值作为参数,前三个值分别代表红,绿,蓝分量,取值范围为 0 到 255 ,最后一个值是 alpha(不透明度)值,取值范围为 0 到 1 。
- opacity 属性,这个属性跟 alpha 值一样,取值范围为 0 到 1 ,0 表示完全透明,1 表示完全不透明。
- rem 设定的文字大小始终相对于 <html> 元素(而不是包含元素)的文字大小计算。而 em 的大小则是根据包含元素的文字大小计算。
- 要让网页能够在移动设备中不要自动执行缩放,那就得修改视口的设置 <meta content="initial-scale=1.0" name="viewport"> 。
- web 存储分为二种,分为对应两个 JS 对象。
- 本地存储,对应 localStorage 对象,用于长期保存网站的数据,并且站内任何页面都可访问该数据。
- 会话存储,对应 sessionStorage 对象,用于临时保存针对一个窗口的数据。
- 要把一段信息保存到本地存储或会话存储中,首先要为该信息想一个名字,这个名字叫做键,将来要通过它取回数据。
- 要保存数据,需要使用 setItem() 方法。localStorage.setItem("键", "值") 。
- 要读取数据,需要使用 getItem() 方法。 localStorage.getItem("键") 。
- 也可以使用属性名或索引方式进行读写。 localStorage.键 ,localStorage["键"] 。
- 删除数据项,需要调用 removeItem() 方法。localStorage.removeItem("键") 。
- 也可以调用 clear() 方法,清空网站在本地保存的会话数据。 sessionStorage.clear()。
- 要查找所有数据项,可以使用 key() 方法。
- 通过本地或会话存储保存数据时,该数据会自动被转换为文本字符串。
- 在本地或会话存储发生变化时,同一站点中其它页面的窗口就会触发 window.onstorage 事件。
......
转载于:https://www.cnblogs.com/fxycm/p/4939709.html