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

2018-01-13

HTML5新增的通用属性

1. contentEditable属性

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

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

<!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属性。例如：

<!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，就意味着通知浏览器不显示该组件，浏览器也不会保留该组件所占用的空间

<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" /> //设置该页面的内容类型和所用的字符集