HTML5 乱记

时间 2019-12-08

标签 html5 html 乱记栏目 HTML5 繁體版

原文原文链接

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