位运算符将其操作数当做32位的比特序列（由0和1组成），而不是十进制、十六进制或八进制数值。

我们主要了解的有七种，分别是：&、|、^、~、<<、>>、>>>。

按位与运算符

按位与 & 运算符，对两个 32 位表达式的每一位执行按位与运算。如果a 和 b 都为1 则结果为1，否则结果为0。

示例：

下面演示如何使用& 运算符：

console.log(1 & 3);  // 1

1 & 3 的结果为1，1的二进制表示为00000001，3的二进制表示为00000011，根据 & 的规则，相同得1，不同得0，可以得出结果为 00000001，即1。

按位或运算符

按位或 | 运算符，只要a 和 b有一个为1，则结果为1，否则结果为0。

示例：

| 运算符和 & 运算符的区别在于，只要有一个操作数为1，结果就为1。同样是1 | 3 ，结果输出为3。

console.log(1 | 3);  // 3

1的二进制表示为00000001，3的二进制表示为00000011，根据 | 的规则，得到00000011，转为十进制，结果为3。

按位异或运算符

按位异或 ^ 运算符，当 a 和 b 不相同时，结果为1，否则结果为0：

示例：

^ 运算符和 | 运算符有点类似，不同在于，如果操作位都为1，则结果为0。

console.log(1 ^ 3);  // 2

1的二进制表示为00000001，3的二进制表示为00000011，根据 ^ 的规则，得到00000010，转为十进制，结果为2。

按位非运算符

按位非 ~ 运算符，对位求反，将1变0，将0变1，也就是求二进制的反码。

示例：

例如 1的二进制表示为00000001，取反得到11111110，转为十进制，得到-2：

console.log(~1);  // -2
console.log(~0);  // -1
console.log(~3);  // -4

右移运算符

右移 >> 运算符 ，使指定值的二进制所有位都右移规定的次数，对于其移动规则只需记住符号位不变，左边补上符号位即按二进制形式把所有的数字向右移动对应的位数，低位移出(舍弃)，高位的空位补符号位，即正数补零，负数补1。

示例：

例如1的二进制为00000001，所以1>>1的结果为1：

console.log(1 >> 1);     // 0
console.log(8 >> 2);     // 2
console.log(64 >> 2);    // 16
console.log(128 >> 1);   // 64

左移运算符

左移 << 运算符，使指定值的二进制所有位都左移规定的次数，对于其移动规则只需记住丢弃最高位，0补最低位即按二进制形式把所有的数字向左移动对应的位数，高位移出(舍弃)，低位的空位补零。

示例：

console.log(1 << 1);     // 2
console.log(8 << 2);     // 32
console.log(64 << 2);    // 256

无符号右移

无符号右移 >>>，该操作符会将第一个操作数向右移动指定的位数。向右被移出的位被丢弃，左侧用0填充。因为符号位变成了 0，所以结果总是非负的。

示例：

console.log(-5 >>> 1);    // 2147483645
console.log(-8 >>> -2);   // 8
console.log(-24 >>> 2);   // 1073741818

动手小练习

1.分别用七种按位运算符输出一些自定义的内容，然后有一个更进一步的认识与了解。

2.请说出下列代码的输出结果：

过昨天的学习算是对HTML有了一点点了解，知道了什么是前端，什么是HTML、前端三大标准、主流浏览器和html的基本结构及常用标签。那么今天继续看看html还有什么新的知识吧。

特殊字符（了解即可）

有常见性就有特殊性，我们使用电脑时经常会用到空格键，在html文档上有时也会使用到空格键等等，那怎么在html上又是以什么形式展示给浏览器解析呢？

表格标签

作用：在浏览器上清晰美观地显示、展示数据。

表格标签的语法

<table>

<tr>

<td></td>

</tr>

</table>

表格标签：<table></table>，一个table标签中可嵌套多个tr标签。

行标签：<tr></tr>，一个tr标签代表一行。一个行标签中可以嵌套多个单元格标签。

单元格标签：<td></td>，一个td标签代表一个单元格。在单元格中可以填充文本、图片、超链接等等内容。

在html中表格不是由横线划分行和列，而是大大小小的矩形盒子来划分。Table是一个最大的矩形盒子，里面包含tr标签，这个是一个和table长度差不多的矩形盒子，table一行仅容纳一个tr盒子。在tr盒子中还包含有N个td盒子，td盒子就是单元格。

表格示例：

在html文档中编辑表格标签结构时，除了一个标签一个标签地敲之外，可以使用快捷方式快速操作：如五行三列的表格，可以在table标签中输入：“tr*5>td*3”然后敲回车，就将其表格结构迅速展现出来。

<h1>表格示例：</h1>
<table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
</table>

运行界面示例：默认状态下表格是没有线条分界，表格对齐方式左对齐。

表头单元格标签

<th></th>：位于表格的第一行或第一列，可以使其内容加粗居中显示。

语法：

<table>

<th>

<td></td>

</th>

</table>

表头表格代码示例：

<h1>表头表格示例：</h1>
   <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

运行界面示例：

表格结构标签

表格结构标签分为表格头部标签和表格主体标签。类似于head标签和body标签对于html标签之间的关系。

表格头部标签：<thead></thead>。定义表格头部，嵌套在<table></table>中，一般位于第一行。

表格主体标签：<tbody></tbody>。定义表格主体，嵌套在<table></table>中，主要用于显示数据。

代码示例：

<h1>表格结构标签</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三丰</td>
                <td>男</td>
                <td>36</td>
            </tr>
            <tr>
                <td>李四喜</td>
                <td>女</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>

运行界面：

表格属性

虽然表格属性在实际开发过程中不常使用，一般都是通过CSS样式设置，但是还是需要记住这些属性关键词，在css中属性关键词也会用到。

注：这些属性都要写在table标签的开始标签中，多个属性之间需要使用空格分隔。

align：表格的对其方式。

align=“left”：在浏览器中居左显示。也是默认显示。

align=“center”：在浏览器中居中显示。

align=“right”：在浏览器中居右显示。

border：表格是否具有边框。

border=”1”：表格添加边框。

cellpadding：单元格内的元素和td边框的距离。

举个例子，如果表格是一件教室的话，桌子就是单元格，桌子上放的书本就是单元格内的元素，书本边缘和桌子边缘之间产生的空白区域就是cellpadding的值。

cellspacing：单元格和单元格之间的距离。默认是有空隙的，可设置为零，使其空隙清零，成为一条直线。

还是以教室为表格，桌子为单元格。桌子和桌子之间的距离就是cellspacing的值。

width：表格的宽度，属性值可以是像素值也可以是百分比。

height：表格的高度，属性值可以是像素值也可以是百分比。

代码示例：

<h1>表头表格示例：</h1>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="200px" height="300px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>                   
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

运行界面：

合并单元格

合并单元格是指将两个或两个以上的单元格合并成一个单元格。合并属性一般写在单元格标签的开始标签上。合并代码属性设置后，要将没有写合并的单元格代码的其他合并单元格标签删除掉。

目标单元格：（合并代码存在位置）

跨行合并：最上侧单元格为目标单元格，写合并代码。

跨列合并：最左侧单元格为目标单元格，写合并代码。

合并单元格的方式：

跨行合并：将处于不同行的单元格进行合并

语法：rowspan=“合并单元格个数”

代码示例：

<h1>跨行合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

运行界面：

跨列合并：将处于不同列的单元格进行合并

语法：colspan=“合并单元格个数”

代码示例：

<h1>跨列合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

运行示例：

今天学习的表格内容就到这里了，明天开始学习列表。

这个适合初学者的指南中，你将学习如何创建一个响应式电子邮件模板。你将跟随逐步说明以及代码片段设计一个在任何设备上都看起来很棒的电子邮件模板。

这个项目非常适合渴望掌握电子邮件设计基础的新手！

（本文视频讲解：java567.com）