HTML5新增的客户端效验

在HTML5规范以前，客户端效验只能通过JavaScript来完成，HTML5改变了这种现状，HTML5为表单控件额外增加了一些输入效验属性。HTML5页面只要简单地设置这些效验属性即可完成客户端效验

使用效验属性执行效验

HTML5为表单控件新增了如下几个效验属性。

  • required：该属性指定该表单控件必须填写。该属性的值必须是required或完全省略属性值
  • pattern：该属性指定该表单控件的值必须符合指定的正则表达式。该属性的值必须是一个合法的正则表达式
  • min、max、step：这3个属性只对数值类型、日期类型的<input.../>元素有效，这3个属性控制该表单控件的值必须在min~max之间，并符合step步长
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用效验属性执行效验</title>
</head>
<body>
  <form action="add">
    图书名：  <input type="text" required name="name" /><br>
    图书ISBN：<input type="text" name="isbn" required pattern="d{3}-\d-d{3}-d{5}" /><br>
    图书价格：<input type="number" name="price" min="20" max="150" step="1"><br>
  <input type="submit" value="提交">
  </form>
</body>
</html>

调用checkValidity方法进行效验

  • 如果表单对象调用checkVaildity()方法返回true，则表明该表单内的所有表单控件都有效。只要任意一个表单控件不能通过输入效验，表单对象的checkVaildity()方法就会返回false。
  • 如果表单对象调用checkVaildity()方法返回true，则表明该表单控件可以通过输入效验；否则返回false。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form action="add1">
    生日：<input type="date" name="birth" id="birth" /><br>
    邮件地址： <input type="email" id="email" name="email" /><br>
    <input type="submit" value="提交" onclick="return check();"/>
</form>
<script>
    let check = function(){
      return commonCheck("birth","生日","字段必须是有效的日期！")
        && commonCheck("email","邮件地址","字段必须符合电子邮件的格式！");
    }
    let commonCheck = function(field , fieldName , tip){
      let targetEle = document.getElementById(field);
      if (targetEle.value.trim() == "") {
        alert(fieldName + "字段必须填写！");
        return false;
      }else if(!targetEle.checkValidity()){
        alert(fieldName + tip);
        return false;
      }
      return true;
    }
</script>

自定义错误提示

有些情况下，我们希望定制自己的错误信息，HTML5为表单控件新增的setCustromValidity()方法来实现，该方法接受一个字符串参数，该字符串将会作为用户“自定义”的错误提示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用效验属性执行效验</title>
</head>
<body>
  <form action="add">
    图书名：  <input type="text" required name="name" /><br>
    图书ISBN：<input type="text" name="isbn" required pattern="d{3}-\d-d{3}-d{5}" /><br>
    图书价格：<input type="number" name="price" min="20" max="150" step="1"><br>
  <input type="submit" value="提交">
  </form>
   <script>
    let check = function(){
     if (!document.getElementById("name").checkValidity()){
      document.getElementById("name").setCustomValidity("图书名是必须的填的！");
     } 
     if (!document.getElementById("isbn").checkValidity()){
      document.getElementById("isbn").setCustomValidity("图书ISBN是必须的填的！");
     } 
     if (!document.getElementById("price").checkValidity()){
      document.getElementById("price").setCustomValidity("图书价格是必须的填的！");
     }
    };
  </script>
</body>
</html>

关闭效验

在某些时候，如果希望暂时关闭HTML5对表单提供的输入效验，则可以通过如下两种方式来实现

  • <form.../>元素增加novalidate属性，该属性的值要么是novalidate，要么省略属性值
  • 为type=“submit”的<input.../>或<button.../>元素设置formnovalidate属性，该属性的值要么是novalidate，要么省略属性值

第一种方式将会直接关闭表单的输入效验功能，无论通过哪个按钮提交表单，该表单都不会执行输入效验；第二种方式则由指定的提交按钮来 关闭表单的 输入效验，只有当用户通过指定了formnovalidate属性的按钮提交表单时才会关闭 表单的输入效验

展开全文 >>

HTML5增强的文件上传域

在HTML5以前，HTML的文件上传域的功能具有很大的局限性，这种局限性主要体现为：1.每次只能选择一个文件进行上传。2.客户端代码只能获取被上传文件的路径，无法访问实际的文件内容

HTML5允许同时选择多文件上传，而且HTML5允许客户端JavaScript访问实际的文件内容

FileList对象与File对象

HTML5为type=“file“的<input.../>元素增加了如下两个属性。

  • accept：该属性控制允许上传的文件类型。该属性值为一个或多个MIME类型字符串，多个MIME类型字符串之间应以逗号分隔
  • multiple：该属性设置是否允许选择多个文件

JavaScript可以通过files属性访问type=“file”的<input.../>元素生成的文件上传域内的所有文件，该属性返回一个FileList对象，FileList对象相当于一个数组，开发者可以使用类似于数组的方法来访问该数组内的每个File对象

File对象是一个JavaScript对象，JavaScript可以通过该对象获取用户浏览的所有文件的信息。File对象包含如下常用属性：

  • name：返回该File对象对应的文件名，不包括文件路径部分
  • type：返回该File对象对应的文件的MIME类型字符串
  • size：返回该File对象对应的文件的大小
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>file</title>
</head>
<body>
  浏览图片：<input type="file" name="images" id="images" multiple accept="" />
  <input type="button" value="显示文件" onclick="showDetails();" />
  <script>
    var showDetails = function(){
    var imageEle = document.getElementById("images");
    var fileList = imageEle.files;
    for (var i = 0; i < fileList.length; i++) {
        let file = fileList[i];
        div = document.createElement("div");
        div.innerHTML = "第" + (i+1) + "个文件的文件名是：" + file.name +",该文件类型是：" + file.type + ",该文件大小为：" + file.size;
        document.body.appendChild(div);
      }
    }
  </script>
</body>
</html>

不要单靠accept属性来过滤文件类型，因为这只是客户端的文件类型过滤，这种文件类型过滤是很脆弱的，如果开发者需要进行文件上传，则必须在服务器端对文件类型进行过滤

使用FileReader读取文件内容

FileReader同样是一个JavaScript对象，开发者可以通过该对象在客户端读取文件上传域所选择的文件内容。FileReader提供了如下方法：

  • readAsText(file,encoding): 以文本文件来读取该文件，其中encoding参数指定读取该文件时所用的字符集，该参数的默认值是UTF-8.
  • readAsBinaryString(file): 以二进制方式来读取该文件。通过这种方式可以读取文件内容的二进制数据，这样就可以通过Ajax把数据上传到服务器
  • readAsDataURL(file): 以DataURL方式来读取文件。这种方式也可以用于读取二进制文件，只是这种方式将会采用base64方式把文件内容编码成DataURL格式的字符串
  • abort() : 停止读取

需要指出的是，FileReader的所有readXXX()方法都是异步方法，这些方法都不会直接返回读取的文件内容，程序必须以事件监听的方式来获取读取的结果。

FileReader提供了如下事件来监听读取过程

  • onloadstart：FileReader开始读取数据时触发该事件指定的函数
  • onprogress：FileReader正在读取数据时触发该事件指定的函数
  • onload：FileReader成功读取数据后触发该事件指定的函数
  • onloadend：FileReader读取数据完成后触发该事件指定的函数，无论读取成功还是读取失败都将触发该事件指定的函数
  • onerror：FileReader读取失败时触发该事件指定的函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
浏览文件：<input id="file1" type="file" /><br/>
  <div id="result"></div>
    <input type="button" value="读取文本文件" onclick="readText();" /><br>
    <input type="button" value="读取二进制文件" onclick="readBinary();" /><br>
    <input type="button" value="以DataURL方式读取" onclick="readURL();" /><br>
  
  <script>
    var reader = null;
    if (FileReader) {
      reader = new FileReader();
    }else{
      alert("浏览器暂不支持FileReader");
    }
    let readText = function(){
      if (/text\/\w+/.test(document.getElementById("file1").files[0].type)) {
        reader.readAsText(document.getElementById("file1").files[0],"gbk");
        reader.onload = function(){
          document.getElementById("result").innerHTML = reader.result;
        };
      }else{
        alert("你选择的文件不是文本文件！");
      }
    }
    let readBinary = function(){
      reader.readAsBinaryString(document.getElementById("file1").files[0]);
      reader.onload = function(){
        document.getElementById("result").innerHTML = reader.result;
      };
    }
    let readURL = function(){
      reader.readAsDataURL(document.getElementById("file1").files[0]);
      reader.onload = function(){
        document.getElementById("result").innerHTML = reader.result;
      };
    }
  </script>

FileReader在读取文件的过程中可能多次触发onprogress事件，通过该事件绑定监听器即可实时监控文件的读取进度。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>filereader prigress</title>
</head>
<body>
  浏览文件：<input type="file" id="file1" /><br>
  上传进度：<progress value="0" id="pro"></progress>
  <div id="result"></div>
  <input type="button" value="读取文本文件" onclick="readBinary();" /><br>
  <script>
    var reader =null;
    if (FileReader) {
      reader = new FileReader();
    }
    else{
      alert("浏览器暂不支持FileReader");
    }
    let readBinary = function()
    {
      reader.readAsBinaryString(document.getElementById("file1").files[0]);
      var pro = document.getElementById("pro");
      pro.max = document.getElementById("file1").files[0].size;
      reader.onprogress = function(evt){
        pro.value = evt.loaded;
      };
    }
  </script>
</body>
</html>

FileReader只是客户端的JavaScript对象，使用FileReader所进行的上传只是把磁盘上的文件读到浏览器内存中，并未真正上传到服务器。如果需要真正把客户端文件上传到远程服务器，则可把文件数据以POST方式请求提交到远程服务器，远程服务器负责接收并解析文件数据，并把数据内容保存到服务器。

展开全文 >>

HTML5新增的属性与元素02

功能丰富的input元素

HTML5进一步丰富了type属性的类型，从而允许通过<input.../>元素来生成各种不同的表单控件。HTML5为<input.../>元素的type属性新增了如下几种可能的类型：

  • color：让<input.../>元素生成一个颜色选择器。当用户在颜色选择器中选中指定颜色后，该文本框内自动显示用户选中的颜色，该文本框的value为该颜色的值，形如#xxxxxx的颜色值
  • data：让<input.../>元素生成一个日期选择器
  • time：让<input.../>元素生成一个时间选择器
  • datetime：让<input.../>元素生成一个UTC日期、时间选择器
  • datetime-local：让<input.../>元素生成一个本地日期、时间选择器
  • week：让<input.../>元素生成一个供用户选择第几周的文本框
  • month：让<input.../>元素生成一个月份选择器
  • email：让<input.../>元素生成一个E-mail输入框。浏览器将会自动检查该文本框的value，如果用户在该文本框内输入的内容不符合E-mail格式，浏览器将会不允许提交表单，并自动生成提示。当指定type=“email”时，<input.../>元素可以指定如下属性
    • multiple：该属性的值可以是multiple或省略属性值。如果指定了该属性值，则表明该文本框内允许输入多个E-mail地址
  • tel：让<input.../>元素生成一个只能输入电话号码的文本框。但这种类型的文本框并没有提供额外的要求，也就是并不会执行太多额外的检查
  • url：让<input.../>元素生成一个URL输入框。浏览器将会自动检查该文本框的value，如果用户在该文本框内输入的内容不符合URL格式，浏览器将会不允许提交表单，并自动生成提示
  • number：让<input.../>元素生成一个只能输入数字的文本框
  • range：让<input.../>元素生成一个拖动条，通过拖动条使得用户只能输入指定范围、知道的步长的值。当指定文本框的type=“range”时，该文本框还可以指定如下3个属性。
    • min：指定该拖动条的最小值。
    • max：指定该拖动条的最大值
    • step：指定该拖动条的步长
  • search： 让<input.../>元素生成一个专门用于输入搜索关键字的文本框。这种类型的文本框与type=“text”的文本框没有太大的区别
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>功能丰富的input元素</title>
</head>
<body>
  <form action="login">
  <input type="color" name="color" /><br>
  <input type="date" name="date" /><br>
  <input type="time" name="time" /><br>
  <input type="datetime" name="datetime" /><br>
  <input type="datetime-local" name="datetime-local" /><br>
  <input type="month" type="month" /><br>
  <input type="time" name="time" /><br>
  <input type="week" name="week" /><br>
  <input type="email" name="email" /><br>
  <input type="tel" name="tel" /><br>
  <input type="url" name="url" /><br>
  <input type="number" name="number" /><br>
  <input type="range" name="range" /><br>
  <input type="search" type="search" /><br>
  <input type="submit" value="提交" />
  </form>
</body>
</html>

HTML5新增的表单控件

HTML5新增了一个<output.../>表单控件，该元素用于显示输出，比如计算结果或脚本的输出。<output.../>元素必须属于某个表单，也就是说，该元素要么定义在表单内部，要么为它指定form属性

<output.../>元素除了可以指定id、style、class、form等属性之外，还可以指定如下属性：

  • for：该属性指定该元素将会显示哪个元素的值。该属性值应该是其它元素的id

与其它表单控件不同的是，<output.../>所生产的表单控件并不会生成请求参数，它只是用于显示输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>output</title>
</head>
<body>
  <form action="#" oninput="a.value=color1.value;b.value=range1.value">
    <input id="color1" name="color1" type="color"  />
    <output name="a" for="color1" ></output><p>
    <input id="range1" name="range1" type="range" min="0" max="100" step="1" />
    <output name="b" for="range1"></output><p>
    <input type="submit" value="提交">
  </form><!-- 此为笔者个人案例 -->
  <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100+
    <input type="number" id="b" value="50">=
    <output name="x" for="a b"></output>
  </form> <!-- 此为大多数教程案例 -->
</body>
</html>

展开全文 >>

HTML5新增的属性与元素

HTML5为表单控件新增的属性

1.form属性

在HTML5以前，所有的表单控件都必须放在<form.../>元内部，表明该表单控件属于该表单；但HTML5为表单新增了form属性，用于定义该表单控件所属的表单，该属性的值应该是它所属表单的id，如下：

1
2
3
4
5
<form id="addForm" action="add">
  昵称：<input type="text" name="name" />
  密码：<input type="password" name="password" />
</form>
<textarea name="desc" form="addForm"></textarea>

2.formaction属性

这是一个十分实用的属性，相信大部分开发者以前都会遇到一个场景：页面中有一个表单，该表单包含了两个以上的提交按钮，但程序需要不同的按钮提交到不同的action。

HTML5的formaction属性专门用于处理上面场景：对于<input type="submit".../>、<input type="image".../>等元素，都可以指定formaction，该属性即可动态地让表单提交到不同的url。例如：

1
2
3
4
5
6
<form method="post">
  昵称：<input type="text" name="name" />
  密码：<input type="password" name="password" />
  <input type="submit" value="注册" formaction="regist" />
  <input type="submit" value="提交" formaction="login" />
</form>

3.formxxx属性

formxxx属性是一些与formaction极为相似的 属性，对于<input type="submit".../>、<input type="image".../>等元素，都可以指定formenctype、formmethod、formtarget等属性，其中：

  • formenctype：通过该属性可以让按钮动地改变表单的enctype属性
  • formmethod：通过该属性可以让按钮动地设置表单以POST或GET方式提交
  • formarget：通过该属性可以让按钮动地改变表单的target属性
1
2
3
4
5
6
<form method="post">
  昵称：<input type="text" name="name" />
  密码：<input type="password" name="password" />
  <input type="submit" value="GET提交" formmethod="get" />
  <input type="submit" value="POST提交" formmethod="post" />
</form>

4.autofocus属性

当为某个表单控件增加该属性后，浏览器打开该页面时该组件就会自动获得焦点

由于打开页面时只能有一个控件获得焦点，因此整个页面上最多只能有一个表单控件可以设置该属性

5.placeholder属性

在一些用户界面足够人性化的页面里，当用户还未在单行文本框、多行文本域中输入内容时，单行文本框、多行文本域内就会显示了对用户的提示信息。一旦用户开始输入，单行文本框、多行文本域内的提示信息就会自动消失。

1
2
3
4
5
6
<form method="post">
  昵称：<input type="text" name="name" placeholder="请输入昵称" />
  密码：<input type="password" name="password" placeholder="请输入密码" />
  <input type="submit" value="注册"/>
  <input type="submit" value="登录"/>
</form>

6.list属性

在HTML5规范以前，HTML表单控件没有类似于combobox的组件。HTML5的list属性弥补了这个不足，list属性的值应该是一个<datalist.../>组件的id。也就是说，list属性必须与<datalist.../>元素结合使用

  • <datalist.../>: 该元素相当于一个“看不见”的<select.../>元素，用于生成一个隐藏的下拉菜单。<datalist.../>所包含的子元素与<select.../>元素完全相同
1
2
3
4
5
6
7
8
9
<form id="addForm" action="add">
  昵称：<input type="text" name="name" list="books"/>
  密码：<input type="password" name="password" />
</form>
<datalist id="books">
	<option value="html5">HTML5</option>
    <option value="css3">CSS3</option>
    <option value="javascript2017">javascript2017</option>
</datalist>

7.autocomplete属性

该属性主要与list属性结合使用，当文本框指定了有效的list属性后，该文本框下面总会显示一个下拉菜单供用户选择。但在有些时候可能出于安全考虑，开发者不想让某些用户看到这个下拉菜单，则可以通过autocomplete属性来实现。该属性支持如下两个值：

  • on：打开autocomplete，文本框下方会显示下拉菜单
  • off：关闭autocomplete，文本框下方不会显示下拉菜单

展开全文 >>

HTML原有的表单及表单控件02

使用label定义标签

​ <label.../>元素用于在表单元素中定义标签，可以指定id，style，class等核心属性，也可以指定onclick等事件属性，还可以指定一个for属性，该属性指定该标签与哪个表单控件关联。

​ 当用户单击<label.../>所生产的标签时，浏览器会自动将焦点转移到和标签相关的表单控件元素上

​ 让标签和表单控件关联有两种方式。

  • 隐式使用for属性: 指定<label.../>元素的for属性值为所关联表单的id属性值
  • 显示关联: 将普通文本、表单控件一起放在<label.../>元素内部即可
1
2
3
4
5
6
7
<form action="#" method="get">
  <label for="username">用户名</label>  //隐式使用for属性
  <input id="username" name="username" type="text" /><br/>
  <label>密码： <input id="password" name="password" type="password" />
  </label><br/>
  <input id="OK" type="submit" value="登录" />
</form>

尽量使用隐式关联，因为IE没有很好的支持显示关联

使用button定义按钮

<button.../>元素用于定义一个按钮，在<button.../>元素的内部可以包含普通文本、文本格式化标签、图像等内容，这也是<button.../>按钮和<input.../>按钮的不同

<button.../>按钮之间不要放置图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为

<button.../>元素可以指定id、style、class等核心属性还可以指定onclick等事件响应属性。除此之外，还可以指定如下几个属性：

  • disabled: 指定是否禁用此按钮，该属性值只能是disabled，或者省略属性值
  • name: 指定该按钮的唯一名称。该属性值应该与id属性值保持一致
  • type: 指定该按钮属于那种按钮，该属性只能是button、reset或submit其中之一
  • value: 指定该按钮的初始值，该值可通过脚本进行修改
1
2
3
4
5
6
<button type="button">
  提交
</button>
<button type="submit">
  <img src="../img/images.jpg" />
</button>

列表框和下拉菜单

<select.../>元素用于创建列表或下拉框，该元素必须和<opation.../>元素结合使用，每个<opation.../>元素代表一个列表项或菜单项。

<select.../>元素可以指定id、style、class等核心属性，该元素仅可以指定onchange事件属性——当该列表或下拉列表内的选中项发生改变时，触发onchange事件。除此之外，还可以指定如下属性：

  • disable：设置禁用该列表框和下拉菜单，该属性的 值只能是disable或省略属性值
  • multiple：设置该列表框和下拉菜单是否允许多选，该属性只能是multiple，即表示允许多选，一旦设置允许多选，该属性的值就会自动生成列表框
  • size：指定该列表框内可同时显示多少个列表项。一旦指定该属性，<select.../>元素就会自动生成类表框

在<select.../>元素里，只能包含如下两种子元素

  • <option>: 用于 定义列表框选项或菜单项。该元素里只能包含文本内容作为该选项的文本
  • <optgroup.../>: 用于定义列表项或菜单项组。该元素只能包含<option.../>子元素，处于<optgroup.../>里的<option.../>就属于该组

<opation.../>元素可以指定id、style、class等核心属性，还可以指定onclick等事件响应属性。除此之外，还可以指定如下几个属性：

  • disable：指定禁用该选项，该属性的值只能是disabled
  • selected：指定该列表项初始状态是否处于被选中状态。该属性的值只能是selected
  • value: 指定该选项对应的请求参数值

<optgroup.../>元素可以指定id、style、class等核心属性，还可以指定onclick等事件响应属性。除此之外，还可以指定如下两个属性：

  • label：指定该选项组的标签。这个属性必填
  • disabled：设置禁用该选项里的所有选项。该属性只能是disabled或省略属性值

下面代码是使用<select.../>元素定义了一个下拉菜单和两个列表框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<select name="skills" id="skills">
     <option value="html5" selected>HTML5</option>
     <option value="css3">CSS3</option>
     <option value="javascript">javascript</option>
</select>
<select name="books" id="books" multiple="multiple" size="3">
     <option value="hyrz" selected>火影忍者</option>
     <option value="hzw">海贼王</option>
     <option value="ss">死神</option>
</select>
<select name="books" id="books" multiple="multiple" size="6">
     <optgroup label="动漫">
     <option value="hyrz" selected>火影忍者</option>
     <option value="hzw">海贼王</option>
     <option value="ss">死神</option>
</optgroup>
	<optgroup label="游戏">
      <option value="hyrz" selected>王者荣耀</option>
      <option value="hzw">穿越火线</option>
      <option value="ss">阴阳师</option>
     </optgroup>
</select>

使用textarea定义文本域

<textarea.../>素用于生成多行文本域，<textarea.../>元素可以指定id、styel、class等核心属性，还可以指定onclick等事件属性。由于textarea的特殊性，它可以接收用户输入，用户可以选中文本域内的文本，所以还可以指定onselect、onchange两个属性，分别用于响应文本被选中、文本被修改事件。除此之外，该元素也可以指定如下几个属性。

  • cols: 指定文本域的宽度，该属性必须
  • rows：指定文本域的高度，该属性必填
  • disabled：指定禁用该文本域。该属性只能是disabled，当此文本域首次加载时禁用此文本域
  • readonly：指定该文本域只读，该属性值只能是readonly

与单行文本框相同的是，<texarea.../>元素也指定name属性，该属性将作为textarea对应请求参数的参数名；与单行文本框不同的是，<textarea.../>元素不能指定value属性，<textarea>和</textarea>标签之间的内容将作为<textarea.../>对应请求参数的参数值

1
2
3
4
5
<textarea cols="20" rows="2"></textarea><br>
<textarea cols="20" rows="2" readonly="readonly">
        火影忍者
        王者荣耀
</textarea>

展开全文 >>

HTML原有的表单及表单控件

表单元素

​ <form.../>元素用于生产输入表单，该元素不会生成可视化部分。在HTML5规范以前，其它表单控件，如单行文本框、多行文本域、单选按钮、复选框等都必须放在<form.../>元素之内。

​ <form.../>元素可以指定id、style、class等核心属性，还可以指定onclick等事件属性。除此之外还可以指定action,method,enctype,name,target

​ <form.../>元素method属性非常重要，它指定可该表单提交请求的方式，表单默认以GET方式提交请求。

​ 表单的enctype属性用于指定表单数据的编码方式，有如下3个值：

  • application/x-www-form-urlencoded: 这是默认的编码方式，它只处理表单控件里的value属性值，采用这种编码方式的表单会将表单控件的值处理成URL编码方式
  • multipart/form-data: 这种编码方式会以二进制的方式来处理表单数据，这种编码方式会把文件域指定文件的内容也封装到请求参数里。当需要通过表单上传文件时使用该属性值
  • text/plain: 当表单的action属性值为mailto:URL的形式时使用这种编码方式比较方便，这种编码方式主要适应于直接通过表单发送邮件的方式

当在<form.../>元素里定义一个或多个表单空间时，一旦提交该表单，该表单里的表单控件将会转换成请求参数。规则如下：

  • 每个有name属性的表单控件对应一个请求参数，没有name属性的表单控件不会生成请求参数
  • 如果多个表单控件有相同的name属性，则多个表单控件只生成一个请求参数，只是该参数有多个值
  • 表单控件的name属性指定请求参数名，value属性指定请求参数
  • 如果某个表单控件设置了disabled或disabled=“disabled”属性，则该表单控件不再生成请求参数

使用input元素

  • 单行文本框： <input type="text" />
  • 密码输入框：<input type="password" />
  • 隐藏域： <input type="hidden" />
  • 单选框： <input type="radio" />
  • 复选框： <input type="checkbox" />
  • 图像域： <input type="image" /> ，此时，可以为<input.../>元素指定width和height两个属性
  • 文本上传域：<input type="file" />
  • 提交： <input type="submit" />
  • 重设： <input type="reset" />

  • 无动作按钮：<input type="button" />

    ​在是上面这些表单控件中，单行文本框、密码输入框、都用于接收用户输入，而隐藏域不能接收用户输入，也不能生产可视化部分，它用于提交额外的请求参数，请求参数的值就是该赢藏域的value属性值，因此定义赢藏域的同时应指定value属性值

    ​单选框、复选框不能接收用户输入，因此定义它们时同时也会指定value属性值，用于设置它们所对应的请求参数值。对于单选框、复选框而言，当它们被勾选后，它们才会生成对应的请求参数值

    ​文件上传域会生成一个单行文本框和一个“浏览“按钮，该文件上传域允许用户浏览本地磁盘文件，并将该文件上传到服务器

    ​图像域和提交按钮的作用基本一样，单击它们都会导致表单被提交，区别是图像域是一个图像按钮

    ​重设按钮的作用是清空表单内用户的输入，将表单内所有表单控件的值恢复到初始状态

    ​无动作按钮，只是一个按钮，在默认情况下，单击该按钮对表单不会有任何作用。通常为该按钮编写javascript脚本来响应它的单击、双击等事件

    ​<input.../>元素可以指定id、style、class等核心属性，也可以指定onclick等事件属性，还可以指定onfocus、onblur等焦点事件属性。除此之外，还可以指定：

  • checked：设置单选框、复选框初始状态是否处于选择状态，该属性值只能是checked，表示初始即被选中。只有当type属性值为checkbox或radio时才可指定该属性

  • disabled：设置首次加载时禁用此元素。该属性值只能是disabled，表示该属性被禁用，则该元素无法获得输入焦点、无法选中、无法在其中输入文本，无法响应鼠标单击、双击事件。当type=“hidden”时不能指定该属性
  • maxlength：该属性值是一个数字，指定文本框中所允许输入的最大字符数
  • readonly：指定该文本框内的值不允许用户修改（可以使用javascript）脚本修改
  • size：该属性值是一个数字，指定该元素的宽度。当type=“hidden”时不能指定
  • src：指定图像域所显示图像的URL，只有当type=“image”时才可指定该属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单控件</title>
</head>
<body>
  <div>
    <form action="#" method="get">
      单行文本框：       <input type="text" id="username" name="username"><br>
      不能编辑的文本框:  <input type="text" readonly="readonly"><br>
      密码框：          <input type="password" id="password" name="password"><br>
      隐藏域：          <input type="hidden" id="hidden" name="hidden"><br>
      第一组单选框：<br>
      <input type="radio" value="red" name="color">
      <input type="radio" value="green" name="color">
      <input type="radio" value="blue" name="color"><br>
      第二组单选框：<br>
      <input type="radio" name="colo" value="yes">
      <input type="radio" name="colo" value="no"><br>
      两个复选框：<br>
      <input type="checkbox" value="wenlai1010" name="web">
      <input type="checkbox" value="wenlai1010.com" name="web"><br>
      文本上传域：   <input type="file" name="file" id="file"><br>
      图像域：<br>  <input type="image" src="../img/" alt="嘟嘟嘟"><br>
      按钮：<br>
      <input type="submit" name="OK" value="提交">
      <input type="submit" name="NO" value="提交" disabled="disabled">
      <input type="reset" name="clean" value="重置">
      <input type="button" name="wu" value="无动作">
    </form>
  </div>
</body>
</html>

展开全文 >>

DataTransfer 对象

DataTransfer 对象

​ 拖放触发的拖放事件有一个dataTransfer属性，该属性值是一个Data

Transfer对象，该对象包含如下属性和方法：

  • dataTransfer.dropEffect: 设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不在effectAllowed属性设置的多种拖放行为内，拖放操作将会失败。该属性值只允许为“none”、“copy”、“link”、“move”四个值之一
  • dataTransfer.effectAllowed: 设置或返回拖动元素允许发生的拖动行为。该属性值可设置为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”
  • dataTransfer.items: 该属性返回DataTransferitems对象，该对象代表了拖动数据
  • dataTransfer.setDragimage(element,x,y): 设置拖放操作的自定义图标。其中element设置自定义图表，x设置图标与鼠标水平方向的距离；y设置图标与鼠标在垂直方向的距离
  • dataTransfer.addElement(element): 添加自定义图标
  • dataTransfer.types: 该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型
  • dataTransfer.getData(format): 获取DataTransfer对象中format格式的数据
  • dataTransfer.setData(format, data): 向DataTransfer对象中设置format格式的数据。其中format代表数据格式，data代表数据
  • dataTransfer.clearData([format]): 清除DataTransfer对象中format格式的数据，如果省略format格式，则意味着清除DataTransfer对象中的全部数据

一个允许通过拖放来添加、删除“收藏项的功能”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>通过拖放来添加、删除“收藏项的功能”</title>
  <style>
    .suo{
      width: 49%;
      height: 200px;
      border: 1px solid red;
      float: left;
    }
    #shou{
      width: 50%;
      height: 200px;
      border: 1px solid red;
      border-left: 0px;
      float: left;
    }
    h3{
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="suo">
    <h3>所有项目</h3>
    <div draggable="true" ondragstart="dsHandler(event);">项目1:法国红酒</div>
    <div draggable="true" ondragstart="dsHandler(event);">项目2：三天打鱼复古红包</div>
    <div draggable="true" ondragstart="dsHandler(event);">项目3：电饭锅愉快</div>
    <div draggable="true" ondragstart="dsHandler(event);">项目4：体育局农科教你</div>
  </div>
  <div id="shou">
    <h3>收藏项目</h3>
  </div>
  <img src="../img/images.jpg" alt="" id="chi">
  <script>
    const shou = document.getElementById("shou");
    //从所有项目中开始拖动
    let dsHandler = function(evt){
      evt.dataTransfer.setData("text/plain","<item>" + evt.target.innerHTML);
    }
    shou.ondrop=function(evt){
      let text = evt.dataTransfer.getData("text/plain");
      if (text.indexOf("<item>") == 0) {
        let newEle = document.createElement("div");
        newEle.id = new Date().getUTCMilliseconds();
        newEle.innerHTML = text.substring(6);
        newEle.draggable = "true";
        newEle.ondragstart = function(evt){
          evt.dataTransfer.setData("text/plain","<remove>" + newEle.id);
        }
        shou.appendChild(newEle);
      }
    }
    //当被拖到id“chi”时触发
    document.getElementById("chi").ondrop = function(evt){
      let id = evt.dataTransfer.getData("text/plain");
      if (id.indexOf("<remove>") == 0) {
        let target = document.getElementById(id.substring(8));
        shou.removeChild(target);
      }
    }
    document.ondragover = function(evt){
      return false;
    }
    document.ondrop = function(evt){
      return false;
    }
  </script>
</body>
</html>

拖放行为

通过设置DataTransfer对象的effectAllowed、dropEffect两个属性控制拖放行为。effectAllowed用于控制被拖动元素的拖动行为，因此通常建议在ondragstart事件监听中设置DataTransfer对象的effectAllowed属性；而dropEffect则控制被“放”入的目标组件的行为，因此通常建议在ondragover事件监听器中设置DataTransfer对象的dropEffect属性

  • 如果effectAllowed设为none，则不允许拖动该元素
  • 如果dropEffect设置为none，则被拖动的元素不能“放”到本元素中
  • 如果effectAllowed设置为all或者不设置，则dropEffect可设置为任何属性
  • 如果effectAllowed指定了特定的施放行为，例如move、copy等，那么dropEffect指定的属性值必须是effectAllowed指定的多个属性值的子集。

改变拖放的图标

通过DataTransfer对象的setDragImage还可以改变施放图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>改变拖放图标</title>
<style>
    #one {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="one" draggable="true">
    看世间，万物皆虚妄。
  </div>
  <script>
    let one = document.getElementById("one");
    let two = document.getElementById("two");
    let myIcon = document.createElement("img"); //创建图片标签
    myIcon.src = "../img/download.jpg";         //引入图片路径
    document.ondragstart = function(evt){
      let dt = evt.dataTransfer;
      dt.effectAllowed = "copy";
      dt.setDragImage(myIcon, 0, 0);
      dt.setData("text/plain","wenlai1010.github.io");
    }
    document.ondragover = function(e){
      return false;
    }
  </script>
</body>
</html>

展开全文 >>

《疯狂HTML CSS3 JavaScript讲义》 读书笔记 第二章 HTML5的拖放API day04

HTML5新增的 拖放API

拖放API可以让HTML页面的任意元素都变成可拖动的，通过使用拖放机制可以开发出更友好的人机交互界面

拖放操作可以分成两个动作：在某个元素上按下鼠标并移动鼠标（没有松开鼠标），此时开始拖动；在拖动过程中，只要没有松开鼠标，将会不断产生拖动事件——这个过程被称为“拖”；把被拖动的元素拖到另外一个元素上并松开鼠标——这个动作被称为“放”。拖放操作由“拖”和“放”两个动作组成。

1. 启动拖动

​ 在HTML5中，<img.../>元素默认就是可以拖动的；而<a.../>元素只要设置了href属性，它默认也是可拖动的

​ 对于普通元素而言，如果希望把它变成可拖动的，只要把该元素的draggable属性设为true即可。此时因为设置了draggable=“true”，表示该元素可拖动，但拖动是并未携带数据，因此用户看不到拖动效果。

​ 为了让拖动操作能携带数据，应该为被拖动元素的ondragstart事件指定监听器，在该监听器中让拖动操作可以携带数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>html5的拖放API</title>
  <style>
    #one {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="one" draggable="true">
    看世间，万物皆虚妄。
  </div>
  <script>
    const one = document.getElementById("one");
    one.ondragstart = function(evt){
      evt.dataTransfer.setData("text/plain" , "wenlai1010.github.io");  //让拖动操作携带数据
    }
  </script>
</body>
</html>

2.接受“放”

​ 由上可以看到不管拖动到哪里，都显示一个禁止的标志，这是因为当被拖动元素“拖过”document对象时，document对象默认阻止了拖动事件，因此他们不能接受“放”。

​ 为了让document可以接受“放”，应该为document的ondragover事件指定监视器，在监视器中取消document对拖动事件的默认行为。例如，在上面的JavaScript代码后面增加如下代码：

1
2
3
document.ondragover = function(evt){
  return false;
}

​ 因为不同浏览器对于拖放操作的默认动作不相同，如果希望取消拖放操作的默认动作，则可以为document的ondrop事件绑定监听器。增加如下代码：

1
2
3
document.ondrop = function(evt){
  return false;
}

用户拖放HTML元素的过程中可能触发的事件如下：

事件 事件源 描述
ondragstart 被拖动的HTML元素 开始拖动时触发该事件
ondrag 被拖到的HTML元素 拖动过程中不断触发该事件
ondragend 被脱动的HTML元素 拖动结束时触发该事件
ondragenter 拖动时鼠标经过的元素 拖动的元素进入本元素的范围时触发该事件
ondragover 拖动时鼠标经过的元素 被拖动的元素进入本元素的范围内拖动时会不断地触动该事件
ondragleaver 拖动时鼠标进过的元素 被拖动的元素离开本元素时触发该事件
ondrop 拖动时鼠标经过的元素 其它元素被放到了本元素中时触发该事件

如果要实现一个可自由拖动的<div.../>如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>html5的拖放API</title>
  <style>
    #one {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="one" draggable="true">
    看世间，万物皆虚妄。
  </div>
  <script>
    var one = document.getElementById("one");
    one.ondragstart = function(evt){
      evt.dataTransfer.setData("text/plain" , "wenlai1010.github.io");
    };
    document.ondragover = function(evt){
      return false;
    };
    document.ondrop = function(evt){
      one.style.position = "absolute";
      one.style.left = evt.pageX + "px";
      one.style.top = evt.pageY +"px";
      return false;  //取消事件的默认行为
    }
  </script>
</body>
</html>

拖动时默认左上角为拖动点

展开全文 >>

《疯狂HTML CSS3 JavaScript讲义》 读书笔记 第二章 HTML5的常用元素与属性 day03

HTML5新增的通用属性

1. contentEditable属性

HTML5为大部分HTML元素都增加了contentEditable属性，如果该属性设为true，那么浏览器将会允许开发者直接编辑该HTML元素里的内容。

此处的HTML元素并不是指那些原本就允许用户输入的表单元素，如文本框、文本域之类的，而是可以把<table.../>、<div.../>等元素变成可编辑状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>contentEditables</title>
</head>
<body>
  <div >
    <table style="width: 420px;border-collapse: collapse;" border="1" ondblclick="this.contentEditable=true">  //双击这个表格可以进入编辑状态
      <tr>
        <td>大天使</td>
        <td>大魔王</td>
      </tr>
      <tr>
        <td>大葫芦</td>
        <td>小勺子</td>
      </tr>
    </table>
  </div>
</body>
</html>

HTML5为允许设置contentEditable属性的元素提供了iscontentEditable属性，当该元素处于可编辑状态时，该属性返回true；否则返回false。

当用户编辑完成后，用户编辑的内容会直接显示在该页面中（一旦刷新页面就会重新加载，编辑的内容会丢失），可以通过该元素的innerHTML属性来获取编辑后的内容

2. designMode属性

designMode属性相当于一个全局的contentEditable属性，如果把整个页面的designMode属性设置为on时，该页面上所有可支持contentEditable属性的元素都变成可编辑状态，designMode属性默认为off。

在JavaScript代码中只能修改整个HTML页面的designMode属性。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div>
    <p>
      <span>123</span>456
    </p>
  </div>
</body>
<script>
	ondblclick="dodcument.designMode='on';"  
</script>
</html>

3. hidden属性

HTML5为所有元素提供了一个hidden属性，这个hidden属性支持true、false两个属性值，一旦把某个HTML元素的hidden设为true，就意味着通知浏览器不显示该组件，浏览器也不会保留该组件所占用的空间

1
2
3
4
5
6
7
8
9
10
11
<div>
    <div id="haha" hidden="false">哈哈</div>
    <button id="btn">显示/隐藏</button>
</div>
<script>
   let btn=document.getElementById("btn")
   let haha=document.getElementById("haha")
   btn.onclick=function(){
     haha.hidden=!haha.hidden;
   }
</script>

4. spellcheck属性

HTML为<input.../>、<textarea.../>等元素增加了spellcheack属性。该属性可支持true、false两个属性值，如果设置spellcheck="true",浏览器将会负责对用户输入 的文本内容执行输入检查，如果检查不通过，浏览器会对拼接的单词进行提示。

HTML5新增的常用元素

详情点击跳转

HTML5头部和元信息

  • <script>: 该元素用于包含JavaScript脚本

  • <style> : 该元素用于定义内部CSS样式

  • <link>: 该元素用于链接外CSS样式等资源

  • <title>: 该元素用于定义文档标题

  • <base>: 该元素用于定义文档标题

  • <meta>: 该元素用于定义HTML页面的元数据

  • href: 指定所有链接的基准链接

  • target: 指定超链接默认在哪个窗口打开链接。该属性只能是_blank、_parent、_self和_top其中之一

  • name: 指定元信息的名称，该名称值可以随意指定

  • content: 指定元信息的值(对浏览器检索有帮助)

  • http-equiv:指定元信息的名称，属性值浏览器可以识别

    • 1
      <meta http-equiv="Expires" content="Sat Jan 13 15:53:55 CST 2018" />    //Expire:指定网页的过期时间，网页一旦过期必须重新从服务器下载
    • 1
      <meta http-equiv="Pragma" content="no-cache" />   //指该网页无法脱机访问
    • 1
      2
      <meta http-equiv="Refresh" content="2" /> //设置2秒后自动刷新网页
      <meta http-equiv="Refresh" content="2;URL=https://wenlai1010.github.io"  />  //设置2秒后自动跳转到"wenlai1010.github.io"
    • 1
      <meta http-equiv="Set-Cookie" content="name-value expires= Sat Jan 13 15:53:55 CST 2018, path=/" />  //设置Cookie。如果网页过期，那么客户上的Cookie也将被删除
    • 1
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    //设置该页面的内容类型和所用的字符集

      ​

展开全文 >>

《疯狂HTML CSS3 JavaScript讲义》 读书笔记 第二章 HTML5的常用元素与属性 day02

HTML5保留的常用元素

1.基本元素

HTML5保留的基本元素有：

  • <!--...-->: 定义HTML注释。位于<!--...-->之间的内容会被当成注释处理
  • <html>: HTML5文档的根元素。但HTML5允许完全省略这个元素
  • <head>: 定义HTML5文档的页面部分。但HTML5允许完全省略这个元素
  • <title>: 定义HTML5文档的页面标题
  • <body>: 定义HTML5文档的页面主体部分，该标签可以指定id、class、style等核心属性。
  • <style>: 用于引入样式定义。
  • <h1>到<h6>: 定义标题一到标题六
  • <p>: 定义段落
  • <br>: 插入一个换行
  • <hr>: 定义水平线
  • <div>: 定义文档中的节
  • <span>: 与<div>基本相似，区别是span定义的的节默认不会换行

2.文本格式化元素

下面的元素让文本内容在浏览器中呈现出特定效果：

  • <b>: 定义粗体文本
  • <i>: 定义斜体文本
  • <em>: 定义强调文本
  • <strong>: 定义粗体文本
  • <small>: 定义小号字体文本
  • <sup>: 定义上标文本
  • <sub>: 定义下标文本
  • <bdo>: 定义文本显示方向(dir='ltr' 从左向右；dir='rtl' 从右向左）

3.语义相关元素

  • <abbr>: 用于表示一个缩写。使用该元素时可指定title属性（title用于指定该缩写的全称）
  • <address>: 通常，<address>元素可以放在当前section的<footer>元素中，如果存在的话
  • <blockquote>: 用于定义一段长的引用文本
  • <q>: 用于定义一段长的引用文本，浏览器会为其添加添加引号
  • <code>: 用于表示一段计算机代码
  • <dfn>: 用于定义一个专业术语
  • <del>: 用于定义文档中被删除的文本
  • <ins>: 用于定义文档中插入的文本，通常会和<del>一起使用
  • <pre>: 用于表示该元素所包含的文本已经进行了”预格式化”。
  • <samp>:用于定义示范文本内容
  • <kbd>: 用于定义键盘文本
  • <var>: 用于表示一个变量

4.超链接和锚点

  • <a>: 可以指定3个重要属性
    • href：指定超链接所关联的另一个资源
    • target：指定使用框架集中那个框架来装载另一个资源。该属性的属性值可以是_self、_blank、_top、_parent四个值，分别代表自身、性窗口、顶层框架、父框架来装载新资源
    • media：指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才有效。（这是一个新的属性）
  • 一个完整的网址，遵守语法规则：scheme://host.domain:port/path/filename
    • scheme: 指定英特网服务的类型
    • domain: 指定英特网域名
    • host: 指定此域中的主机
    • port: 指定主机的端口号
    • path: 指定远程服务器上的路径
    • filename:指定远程文档的名称
  • 锚点：
1
2
3
4
<span name="test">1</span>
<span>2</span>
<span>3</span>
<a href="#test">定位到test锚点</a>

5.列表相关元素

HTML5还保留了如下几个列表相关元素:

  • <ul>: 定义无序列表
  • <ol>: 定义有序列表
  • <li>: 定义列表项目
  • <dl>: 定义列表，该元素只能包含<dt.../>和<dd.../>两种子元素
  • <dt>: 定义标题列表项
  • <dd>:定义普通列表项

6.图像相关元素

  • <img.../>: 包含的属性
    • src：指定图片的位置，既可以是相对路径，也可以是绝对路径
    • alt：该属性指定的一段文本，该文本作为图片的提示信息
    • height：指定图片的高度，该属性可以是百分百，也可以是像素值
    • width： 指定图片的宽度，该属性可以是百分百，也可以是像素值

7.表格相关元素

  • <table>: 用于定义表格
    • cellpadding：定义单元格内容和单元格边框之间的间距。
    • cellspacing： 定义单元格之间的间距。
    • width：指定表格的宽度
  • <caption>: 定义表格标题
  • <tr>: 定义表格行
  • <td>: 定义单元格
  • <th>: 定义表格页眉的单元格
  • <tbody>: 定义表格的主体
  • <thead>: 定义表格头
  • <tfoot>: 定义表格脚

8.框架相关元素

  • <iframe.../> :直接在页面中生成一个内联框架，可以直接放在HTML页面的任意位置
1
2
3
<iframe src="img.html" width="200" heigth="200">
  
</iframe>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

热爱计算机<br><br>迷恋计算机<br><br>学习计算机