label 标签

for 与表单元素的 id 绑定
form 规定 label 字段所属的一个或多个表单

<label>Click me <input type="text"></label>
<label for="username">Click me</label>
<input type="text" id="username">

行内元素

大多数文本、替换元素以及生成的内容都是行级的

button, input, label, select, textarea

格式上，默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
内容上，默认情况下，行内元素只能包含文本和其他行内元素。而块级元素可以包含行内元素和其他块级元素。
盒模型：行内元素设置 width 无效，height 无效（可以设置 line-height）
设置 margin 和 padding 的上下不会对其他元素产生影响。

空元素

area、base、br、col、embed、hr、img、input、link、meta、param、source、track、wbr

自动完成功能

autocomplete 属性规定输入字段是否应该启用自动完成功能

<form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, atepickers, range 以及 color

img

HTML <map> 属性与 <area> 属性一起使用来定义一个图像映射 (一个可点击的链接区域)

usemap 对应
- <map>
- <area> 链接嵌套
如果 <img> 元素是 <a> 或 <button> 元素的后代元素则不能使用这个属性

<map name="infographic">
  <area
    shape="poly"
    coords="130,147,200,107,254,219,130,228"
    href="https://developer.mozilla.org/docs/Web/HTML"
    target="_blank"
    alt="HTML"
  />
  <area
    shape="poly"
    coords="130,147,130,228,6,219,59,107"
    href="https://developer.mozilla.org/docs/Web/CSS"
    target="_blank"
    alt="CSS"
  />
  <area
    shape="poly"
    coords="130,147,200,107,130,4,59,107"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    target="_blank"
    alt="JavaScript"
  />
</map>
<img
  usemap="#infographic"
  src="/media/examples/mdn-info2.png"
  alt="MDN infographic"
/>

datalist

其它表单控件可选值，配合 list 属性使用

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

output

计算或用户操作的结果

for

其他影响计算结果的标签的 ID，可以多个。
form

与当前标签有关联的 form（从属的表单）。该属性的值必须是当前文档内的表单元素的 ID。如果未指明该属性，output 标签必须是一个 form 的后代标签。该属性的用处在于可以让 output 标签脱离 form 标签，存在于一个网页文档的任意位置。
name

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result"></output>
</form>

disbled 和 readonly

共同点

通过 javascript 可以修改

不同点

disabled

不能接收焦点
使用 tab 键时将被跳过
表单元素的值不会被传递出去
对于所有的表单元素都有效，包括 select, radio, checkbox, button 等

readonly

可以接收焦点
可以使用 tab 键进行导航
表单元素的值会被传递出去
针对 input(text / password) 和 textarea 有效

使用

表单申请需要使用相关参数 readonly
详情页面查看 disabled
用户按点击提交按钮后需要把按钮设成 disabled

可点击区域

使用 css 模拟

<div id="circle">可点击区域</div>
#circle {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    background: red;
    cursor: pointer;
    text-align: center;
    color: white;
}

使用 map 元素

<img
  src="./circle.png"
  width="100"
  height="100"
  alt="可点击区域"
  usemap="#Map"
/>
<map name="Map" id="Map">
  <area shape="circle" coords="50,50,50" />
</map>

使用 canvas

<canvas id="canvas" width="100" height="100"></canvas>
#canvas {
    background-color: #ffffff;
}
<script type="text/javascript">
  window.onload = function () {
    var circle = document.getElementById("circle");
    circle.onclick = function () {};

    // 假设圆心为（100，100），半径r = 50
    document.onclick = function (event) {
      var event = event || window.event;
      var x0 = 100;
      var y0 = 100;
      var r = 50;
      var x1 = event.clientX;
      var y1 = event.clientY;
      var dis = Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0));
      if (dis <= r) {
      }
    };

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(50, 50, 50, 0, 2 * Math.PI);
    ctx.fillStyle = "red";
    ctx.fill();
  };
</script>

微信网页登录

浏览器生成一个二维码
- 包含uuid
使用uuid进行轮询
- 判断用户状态
- 30秒未扫描返回windows.code=408
微信手机扫描
- 使用uuid发送请求
微信服务器接收到uuid和用户信息
- 返回给浏览器
浏览器展示用户信息
- 返回window.code=201
用户确认登录
- 服务器uuid和token相关信息绑定返回给浏览器

HTML 语义元素 - 注意事项