HTML语义化

HTML 语义化是指仅仅从 HTML 元素上就能看出页面的大致结构，比如需要强调的内容可以放在 <strong> 标签中，而不是通过样式设置 <span> 标签去做。不同浏览器对 HTML 元素的解析可能有差异，HTML 语义化便是在抛开样式之后，页面能有一个友好的展示效果。我们力求让页面有良好的结构，让页面的元素有含义，同时利于被搜索引擎解析，利于 SEO。HTML 语义化的建议：

  • 少使用无意义的 <div>、<span> 标签；
  • 在 <label> 标签中设置 for 属性和对应的 <input> 关联起来；
  • 设置 <img> 标签的 alt 属性，给 <a> 标签设置 title 属性，利于 SEO；
  • 在页面的标题部分使用 <h1>~<h6> 标签，不需要给它们加多余的样式；
  • 与表单、有序列表、无序列表相关的标签不要单独使用。
    HTML5 也新增了一些语义化的元素，我们通过标签名就能判断标签内容。使用语义元素的页面大致结构如下
    语义元素的名称其实也很好理解，下面是它们的作用和用法：
  • <header> 标签通常放在页面或页面某个区域的顶部，用来设置页眉；
  • <nav>标签可以用来定义导航链接的集合，点击链接可以跳转到其他页面；
  • <article> 标签中的内容比较独立，可以是一篇新闻报道，一篇博客，它可以独立于页面的其他内容进行阅读；
  • <section> 标签表示页面中的一个区域，通常对页面进行分块或对内容进行分段，<section> 标签和 <article> 标签可以互相嵌套；
  • <aside> 标签用来表示除页面主要内容之外的内容，比如侧边栏；
  • <footer> 标签位于页面或页面某个区域的底部，用来设置页脚，通常包含版权信息，联系方式等。
    还有其他的新增标签：
  • <details> 用于描述文档或文档某个部分的细节。
  • <summary> 标签包含 details 元素的标题。
  • <figure> 规定独立的流内容（图像、图表、照片、代码等等）。
  • <figcaption> 定义 <figure> 元素的标题。
  • <dialog> 定义对话框，比如提示框。
  • <bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
  • <command> 定义命令按钮，比如单选按钮、复选框或按钮。
  • <mark> 定义带有记号的文本。
  • <meter> 定义度量衡。仅用于已知最大和最小值的度量。
  • <progress> 定义任何类型的任务的进度。
  • <time> 定义日期或时间。
  • <wbr> 规定在文本中的何处适合添加换行符。
  • <rt> 定义字符（中文注音或字符）的解释或发音。

    HTML5 Input类型

    color,date,datetime,datetime-local,email,month,number,range,search,tel,time,url,week

    HTML5 表单元素

    HTML5 有以下新的表单元素:<datalist>,<keygen>,<output>
  • HTML5 <datalist> 元素*
    <datalist> 元素规定输入域的选项列表。
    <datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
    使用 <input> 元素的列表属性与 <datalist>元素绑定。示例
  • HTML5<keygen>元素*
    <keygen> 元素的作用是提供一种验证用户的可靠方法。
    <keygen>标签规定用于表单的密钥对生成器字段。
    当提交表单时，会生成两个键，一个是私钥，一个公钥。
    私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。示例
  • HTML5 <output> 元素*
    <output> 元素用于不同类型的输出，比如计算或脚本输出。示例

    HTML5事件

  1. contextmenu
    contextmenu 属性规定了元素的上下文菜单。当用户右击元素时将显示上下文菜单。contextmenu 属性的值是需要打开的 <menu> 元素的 id。示例
  2. DOMContentLoaded
    当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。
    load 仅用于检测一个完全加载的页面，页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件。
  3. readystatechange
    可用来判断动态载入的 script、link 标签是否加载完成。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    const script = document.createElement('script')
    script.addEventListener('readystatechange', function eventListener(event) {
      if (event.readyState === 'loaded' || event.readyState === 'complete') { // hack 的手段，浏览器自身的问题
        script.removeEventListener('readystatechange', eventListener)
      }
    })

    script.src = 'example.js'
    document.body.appendChild(script)
  4. hashchange
    用来监听浏览器链接的hash值变化。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function getUUID () {
      return Math.floor(Math.random() * 1000000)
    }
    window.onload = function () {
      const el = document.getElementById('toggle')
      el.onclick = (e) => {
        e.preventDefault()
        const uuid = getUUID()
        location.hash = '#' + uuid
      }
      window.onhashchange = (e) => {
        console.log('oldURL:', e.oldURL)
        console.log('newURL:', e.newURL)
      }
    }

    HTML5 表单属性

    <form>新属性：autocomplete，novalidate
    <input>新属性：autocomplete,autofocus,form,formaction,formenctype,formmethod,formnovalidate,formtarget,
    height 与 width,list,min 与 max,multiple,pattern (regexp),placeholder,required,step

    HTML5 存储

  5. sessionStorage: 大小上限为 2.5Mb(不同浏览器会有差异), 页面关闭时便清空;
  6. localStorage: 大小上限为 2.5Mb(不同浏览器会有差异), 页面关闭时不会清空;
    它们的 api 也是一致的, 有如下几个:
  • setItem(key, value)
  • getItem(key)
  • removeItem(key)
  • clear()

    在 HTML5 范围之外与存储相关的技术还有 cookie(存放在客户端，可以由客户端也可以由服务端生成, 大小上限为 4 kb)、IndexedDB(大小上限为 5 Mb)、cacheStorage(ServiceWorker)。

    HTML5 JavaScript API

  1. requestAnimationFrame(callback): 表示在重绘前执行指定的回调函数，下面通过一个简单的 demo 来认识它。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    let frame
    function callback(timeStamp) {
      console.log(timeStamp) // 开始执行回调的时间戳
      // 如果想要产生循环动画的效果, 需在回调函数中再次调用 requestAnimationFrame()
      requestAnimationFrame(callback)
    }
    frame = requestAnimationFrame(callback) // 在下次重绘之前调用回调
    // 可以在销毁期的生命周期函数中执行以下函数
    componentWillUnMount() {
      cancelAnimationFrame(frame)
    }
    一帧的时间大致为 16ms。
  2. Web Worker
    当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
    web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

检测浏览器是否支持Web Worker

1
2
3
4
5
6
7
8
9
if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 一些代码.....
}
else
{
    //抱歉! Web Worker 不支持
}

创建 Web Worker 对象

1
2
3
4
if(typeof(w)=="undefined")
{
    w=new Worker("demo_workers.js");
}

终止 Web Worker

1
w.terminate();

Worker.onmessage 当MessageEvent类型的事件冒泡到 worker 时，事件监听函数 EventListener 被调用.
Worker.onmessageerror 当messageerror 类型的事件发生时，对应的EventHandler 代码被调用。
Worker.postMessage() 发送一条消息到最近的外层对象，消息可由任何 JavaScript 对象组成。
Worker.terminate() 立即终止 worker。该方法不会给 worker 留下任何完成操作的机会；就是简单的立即停止。

例子：

1
2
3
4
5
<body>
	<p>计数： <output id="result"></output></p>
	<button onclick="startWorker()">开始工作</button> 
	<button onclick="stopWorker()">停止工作</button>
</body>
1
2
3
4
5
6
7
8
9
//这是demo_workers.js里面的内容
var i=0;
function timedCount()
{
    i=i+1;
    postMessage(i); //用于向 HTML 页面传回一段消息
    setTimeout("timedCount()",500);
}
timedCount();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
	var w;
	function startWorker() {
		if(typeof(Worker) !== "undefined") {
			if(typeof(w) == "undefined") {
				w = new Worker("demo_workers.js");
			}
			w.onmessage = function(event) { //接收postMessage的数据
				document.getElementById("result").innerHTML = event.data;
			};
		} else {
			document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
		}
	}
	 
	function stopWorker() 
	{ 
		w.terminate();
		w = undefined;
	}
</script>