、系统结构：

① B/S架构：Browser/Server（浏览器/服务器的交互形式。）

• Browser支持的语言：HTML、CSS、JavaScript；S是服务器端Server支持的语言有：C、C++、Java等
• B/S架构系统有什么优点和缺点？ 优点：升级方便，只升级服务器代码即可，维护成本低。缺点：速度慢、体验不好、界面不炫酷
• 企业大部分使用B/S架构
• B/S架构的系统代表有：京东、百度、天猫等

② C/S架构：Client/Server（客户端/服务器的交互形式。）

• C/S架构的优点和缺点？
• 优点：速度快、体验好、界面炫酷（娱乐性多数是C/S架构）
• 缺点：升级麻烦、维护成本较高。
• C/S架构的系统代表有：QQ、微信、支付宝等

2、 HTML概述

① 什么是HTML？② 怎么开发HTML？③ 怎么运行HTML?

• ① HTML：Hyper Text Markup Language（超文本标记语言）

•由大量的标签组成，每一个标签都有开始标签和结束标签。

•超文本：图片、声音、视频等

• ② HTML开发使用普通的文本编辑器就行，创建扩展名是.html或.htm

•编辑器有：HBuilder、vscode等

③ 直接采用浏览器打开HTML文件就能运行

④ HTML是谁制定的？

• ④ W3C：世界万维网联盟

•W3C制定了HTML的规范：每个浏览器生产厂家都会遵守规范。HTML也会按照规范去写代码

•HTML规范目前最高的版本是：HTML5.0，简称H5

•我们现在主要学的HTML4.0（基本用法）

• 为了方便中国Web前端程序员开发，提供了大量帮助文档。为开发提供方便。

•w3school：先出现的，和W3C无关

•w3cschool：后出现的，和W3C无关

•W3C制定了很多规范：HTML/XML/http协议/https协议……

3、 第一个HTML

4、基本标签

• p：段落标记
• h1~h6：标题字，与word的标题字相同
• br：换行标记（独目标记）
• hr：横线（独目标记）
• color：横线颜色
• width：横线宽度（可以px和%）
• pre：预留格式
• del：删除字
• ins：插入字（有下划线）
• b：粗体字
• i：斜体字
• sup：上标
• sub：下标
• font：字体标签
• color：字体颜色
• size：字体大小（1~7）

页面效果图：

5、实体符号：为了避免和标签冲突，所以需要使用实体符号

• <：<
• >：>
• 空格：
• 注：html中按多个空格键，在网页中只显示一个空格。

6、HTML表格

• table：表格
• tr：行
• td：列
• th：列（比td加粗居中）
• 合并行：rowspan（一个格占两个位置）
• 注：row合并的时候，删除下面的单元格
• 合并列：colspan（一个格占两个位置）
• 注：col合并的时候，删除哪个没有要求

7、thead、tbody、tfoot标签

• thead、tbody、tfoot不是必须的，便于后期JS编写。

8、body的背景颜色和背景图片

• bgcolor：背景色
• background：背景图片
• 背景图片在背景色的上面

9、img标签

• src：图片的路径
• 只设置width，height会等比例缩放
• 只设置height，不起作用
• title：鼠标悬停时显示的信息
• alt：设置图片加载失败时显示的提示信息

10、 超链接或热链接

• href：hot references 热引用；
• 后面一定是一个资源的地址。
• 后面的路径可以是绝对路径也可以是相对路径，可以是网络某个资源的路径。
• target：
• _blank：新窗口
• _self：当前窗口（默认）
• _top：顶级窗口
• _parent：父级窗口

超链接的作用：

通过超链接可以从浏览器向服务器发送请求。

11、request与response的概念

• request：浏览器向服务器发送数据（请求）
• B --》S
• response：服务器向浏览器发送数据（响应）
• S--》B

12、列表

• 有序列表：ol
• type：1、A、a、I、i
• 无序列表：ul
• type：circle（○）、square（□）、disc（●）

13、表单（重点）

• action：写提交的URL地址
• method：默认get；还有post
• 表单有什么用？
• 答：收集用户的信息。表单展现之后，用户填写表单，点击提交。 （submit）
• 怎么画一个表单？
• 答：用form标签
• 一个网页可以有多个表单form
• 表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址。
• action属性用来指定数据提交给哪个服务器
• action属性和超链接中的href属性一样。都可以向服务器发送请求（request）
• http://192.168.111.3:8080/oa/save 这是请求路径，
• 表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件。
• input中的type取值:
• radio：单选控件
• checkbox：多选控件
• submit：提交控件
• reset：重置控件
• button：普通控件
• text：文本控件
• password：密码控
• file：文件控件
• 上传文件专用
• hidden：隐藏域
• 网页上看不到，但是表单提交的时候数据会自动提交给服务器。
• input中的value属性用来指定按钮上显示的文本信息。
• 超链接a与表单form的区别？
• 答：表达form可以收集信息，而超链接a无法收集信息。
• 表单提交里面的按钮input中属性必须定义name，不然提交不了。
• 表单是以什么格式提交数据给服务器的？
• 格式：action?name=value&name=value&name=value..
• HTTP协议规定的，必须以这种格式提交给服务器
• java中String split('&');
• 重点强调：表单项写了name属性的，一律会提交给服务器。不想提交就不要写name属性。
• 文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。
• 当name没有写的时候，该项不会提交给服务器
• 但是当value没有写的时候，value的默认值是空字符串"",将空字符串提交给服务器。java代码得到的是：String s = "";

效果图：

地址栏提交的信息：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我没有value属性；&position=ln&myFile=&myHidden=

14、表单的说明：

• ① 用户手动输入的文本框，都不需要给value赋值
• ② textarea没有value属性
• ③ radio、checkbox默认选项需要使用，checked="checked"（简写：checked）
• ④ select中的option属性：• selected="selected" 为默认选中 •size：显示条目数量
• multiple="multiple" 支持多选(select的属性)
• ⑤ input的属性
• readonly和disabled：
• 都是只读不能修改
• 数据不会提交
• maxlength：设置文本框中输入的字符数量。

15、HTML中的结点

• 在HTML文档中，任何元素（结点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档中id值不能重复。
• 注意：表单提交数据的时候，只和name有关系，和id无关
• id有什么作用？
• javascript语言：可以对HTML文档中的任何节点进行增删改操作。
• 获取节点时，通常通过id来获取节点
• HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id（DOM树）

16、div和span

• div和span有什么用？
• div和span都可以称为图层。
• 有什么用？
• 图层的作用为了保证页面可以灵活的布局。
• div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
• div和span的区别？
• di独占一行
• span不会独占一行

内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

为了方便构建表格，HTML DOM为表格专门创建了HTMLTableElement 接口；其继承自HTMLElement接口；

该接口提供了专门的属性和方法来处理表格的布局与呈现；

HTMLTableElement接口属性：

• caption：返回HTMLTableCaptionElement类型的<caption>元素；
• tHead：指向一个HTMLTableSectionElement类型的<thead>；
• tBodies：是一个保存着<tbody>元素的HTMLCollection对象，该对象的length属性返回了<tbody>元素的数量；
• tFoot：指向一个HTMLTableSectionElement类型的<tfoot>元素；
• rows：返回一个表格中所有行的HTMLCollection，也就是所有的<tr>，包含在<thead>、<tbody>和<tfoot>三者之中，该属性是只读的；

var table = document.getElementsByTagName("table")[0];
console.log(table.caption);
console.log(table.tHead);
console.log(table.tBodies);
console.log(table.tFoot);
console.log(table.rows);
console.log(table.rows[0]);
console.log(table.rows[table.rows.length-1]);

另外，HTMLTableElement对象还拥有一些表现性的属性，但这些属性已建议不被使用，因为可以使用CSS来指定样式，如；

• width：表格宽度，值可以是像素也可以是百分比；注意，此宽不会返回CSS指定的宽，它只映射<table>标签中的width特性；
• border：边框宽度，其以像素为单位；
• align：表格的对齐方式，可能的值为”left”、”center”和”right”；
• bgColor：背景颜色，该属性也可以应用在tbody、row和cell对象上；
• cellPadding：单元格内边距；
• cellSpacing：单元格间距；
• summary：表描述；
• frame：表格外边框位置，可能的值为：void无边、above顶部、below底部、hsides顶部和底部、vsides右侧和左侧、lhs左侧、rhs右侧、box四个边、border四个边；
• rules：表中如何呈现单元格边框，可能的值为：none没有、groups组之间的线、rows行之间的线、cols列之间的线、all所有单元格之间的线；

以上属性除了summary，都可以使用CSS进行定义，所以尽量不要再使用；

HTMLTableElement接口方法：

createCaption()：返回表格元素的标题，如该表没有标题，这个方法创建并返回标题，随后可以使用其他方法对其添加内容；

deleteCaption()：移除表格元素的<caption>；

var table = document.getElementsByTagName("table")[0];
// 也可以创建一个，并添加到DOM树中
var table = document.createElement("table");
document.body.appendChild(table);
var caption = table.createCaption();
caption.innerHTML = "Web前端开发课程";
table.deleteCaption();

createTHead()：返回表元素的tHead对象，如果表元素中没有<thead>，则创建并返回；注意：如果不存在<thead>，该方法创建<thead>并直接插入表中；

deleteTHead()：移除表元素中的<thead>；

var thead = table.createTHead();  // 如果不存在，则创建
console.log(thead);
var row = thead.insertRow(0);
row.insertCell(0);
row.insertCell(1);
row.insertCell(2);
table.deleteTHead();

createTFoot()：返回表元素的tHead对象，如果表元素中没有<thead>，则创建并返回；

deleteTFoot()：移除表元素中的<tfoot>；

var tfoot = table.createTFoot();
console.log(tfoot);
var row = tfoot.insertRow(0);
row.insertCell(0);
row.insertCell(1);
row.insertCell(2);
table.deleteTFoot();

createTBody()方法：创建并返回表元素的<tbody>；

注意：与createTHead()、createTFoot()方法的不同的是，createTBody()可以创建多个<tbody>元素，新创建的<tbody>在最后位置；

新创建的<tbody>元素会被保存到tBodies集合中；

var tbody = table.createTBody();
console.log(tbody);
var row = tbody.insertRow(0);
row.insertCell(0);
row.insertCell(1);
row.insertCell(2);
console.log(table.tBodies);

insertRow(index)：向rows集合中在指定位置插入行；即在表元素中index位置插入新行<tr>，并返回对该新行的类型为HTMLTableRowElement对象；

table及tbody都可以调用该方法；

如果一个表有多个<tbody>元素，默认情况下，新行将插入到最后的<tbody>；

var row = table.insertRow(0);  // 第一行
console.log(row);
table.insertRow();  // 最后一行
table.insertRow(-1);  // 最后一行
table.insertRow(table.rows.length);  // 最后一行
// 如果存在第二个<body>，并且指定的index=4位于该<body>中，则在此处添加
table.insertRow(4);  
console.log(table.rows);

要将行插入特定的<tbody>，先取得该<tbody>对象，再使用该对象执行insertRow()方法；但index不能超过此<tbody>的索引下界；

var tbody = table.tBodies[0];
tbody.insertRow();  // 在第一个<body>的最后添加新行
tbody.insertRow(table.rows.length); // 异常 
deleteRow(index)：删除指定位置的行；如果 index 值为 -1，最后一行会被移除；
table.deleteRow(1);
var tbody = table.tBodies[1];
tbody.deleteRow(1);

HTMLTableRowElement接口对象：

该类型表示表格中的一行（<tr>），它定义了若干操作当前行的属性和方法；

rowIndex属性：返回该行在整个表中的逻辑位置，即索引，如果该行不属于表，则返回-1；

var row = table.rows[1];
console.log(row.rowIndex);  // 1
var tbody = table.tBodies[1];
var row = tbody.rows[1];
console.log(row.rowIndex);  // 4

sectionRowIndex属性：返回该行在所属部分（如<thead>、<tbody>和<tfoot>部分）中的逻辑位置，如果该行不属于某部分，则返回-1；

var row = table.rows[1];
console.log(row.sectionRowIndex);  // 1
var tbody = table.tBodies[1];
var row = tbody.rows[1];
console.log(row.sectionRowIndex);  // 1

cells：返回某个行中的所有单元格的HTMLCollection集合；该集合中保存着类型为HTMLTableCellElement的cell对象；

var row = table.rows[1];
console.log(row.cells);  // HTMLCollection
console.log(row.cells[0]);

insertCell(index)：向cells集合中的指定位置插入一个单元格，即在<tr>的index位置插入<td>，返回对新插入单元格的引用；如果index值为空或者为-1或者等于当前行中单元格的数目，则新的单元格将被追加到当前行的最后；

插入的新Cell对象，可以使用其他DOM方法添加子元素或内容；

var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.appendChild(document.createTextNode("4"));
var cell2 = row.insertCell(1);
cell2.innerHTML = "Web开发";

该方法不能创建<th>元素，如果需要创建<th>，必须使用document.createElement()方法及Node.insertBefore()或相关的方法来创建和插入<th>元素；

deleteCell(index)：删除行中给定位置的单元格；

row.deleteCell(0);

HTMLTableCellElement接口：

表示表元素中的单元格，包括<th>及<td>元素；其继承自HTMLElement接口；

• cellIndex属性：只读，返回该单元格在cells集合中的位置；
• colSpan属性：单元格跨越的列数；
• rowSpan属性：单元格跨越的行数；

var row = table.insertRow();
var cell = row.insertCell();
cell.innerHTML = "Web前端开发";
console.log(cell.cellIndex); // 0
cell.colSpan = "3";  // 跨3列
var cell = table.rows[1].cells[1];
cell.rowSpan = 2;  // 跨行
table.rows[2].deleteCell(2);

使用这些属性和方法，可以极大地减少创建表格所需的代码量，如：

var table = document.createElement("table");
table.border = "1";
table.width = "600px";
var caption = table.createCaption();
caption.innerHTML = "Web前端开发课程";
var thead = table.createTHead();
var row = thead.insertRow();
var th1 = document.createElement("th");
th1.appendChild(document.createTextNode("序号"));
row.appendChild(th1);
var th2 = document.createElement("th");
th2.appendChild(document.createTextNode("课程"));
row.appendChild(th2);
var tbody = table.createTBody();
tbody.insertRow();
tbody.rows[0].insertCell();
tbody.rows[0].cells[0].appendChild(document.createTextNode("1"));
tbody.rows[0].insertCell();
tbody.rows[0].cells[1].appendChild(document.createTextNode("HTML"));
tbody.insertRow();
tbody.rows[1].insertCell();
tbody.rows[1].cells[0].appendChild(document.createTextNode("2"));
tbody.rows[1].insertCell();
tbody.rows[1].cells[1].appendChild(document.createTextNode("CSS"));
var tfoot = table.createTFoot();
tfoot.insertRow();
var cell = tfoot.rows[0].insertCell();
cell.colSpan = 2;
cell.align = "right";
cell.innerHTML = "由大师哥王唯主讲";
document.body.appendChild(table);

生成简单的空表格：

<style>
#mytable{width: 400px; border: 1px solid lightgreen;}
#mytable td{padding: .5em; border: 1px solid lightgreen;}
</style>
<script>
function MyTable(id, caption, rows, cols){
    this.id = id ? id : "table";
    this.caption = caption ? caption : undefined;
    this.rows = rows ? rows : 2;
    this.cols = cols ? cols : 2;
    var table = document.createElement("table");
    table.id = this.id;
    if(this.caption){
        var _caption = table.createCaption();
        _caption.innerText = this.caption;
    }
    for(var i=0; i<this.rows; i++){
        var _rows = table.insertRow();
        for(var j = 0; j < this.cols; j++){
            var _cell = _rows.insertCell();
            _cell.appendChild(document.createTextNode(""));
        }
    }
    return table;
}
var t = new MyTable("mytable","我的表格",4,3);
document.body.appendChild(t);
</script>

控制台表格：

console.table(data [, columns])方法：

将数据以表格的形式显示；这个方法需要一个必须参数data，data必须是一个数组或者是一个对象；

它会把数据data以表格的形式打印出来，数组中的每一个元素（或对象中可枚举的属性）将会以行的形式显示在表格中；

// 打印一个由字符串组成的数组
console.table(["HTML","CSS","Javascript"]);

表格的第一列是index，如果数据data是一个数组，那么这一列的单元格的值就是数组的索引，如果数据是一个对象，那么它们的值就是各对象的属性名称；；

// 打印一个属性值是字符串的对象
function Person(firstName, lastName){
    this.firstName = firstName;
    this.lastName = lastName;
}
var p = new Person("王","唯");
console.table(p);

打印复合的参数类型：

如果需要打印的元素在一个数组中，或者需要打印的属性在一个对象，并且他们本身就是一个数组或者对象，则将会把这个元素显示在同一行，每个元素的成员占一列；

// 二元数组的打印
var people = [["wang","wei"],["jing","jing"],["juan","zi"]];
console.table(people);
// 打印一个包含对象的数组
var wang = new Person("王","唯");
var jing = new Person("静","静");
var juan = new Person("娟","子");
// 如果数组中包含该对象，打印出来的列标签将是该对象的属性名
console.table([wang, jing, juan]);
// 打印属性名是对象的对象
var family = {};
family.mother = jing;
family.father = wang;
family.daughter = juan;
console.table(family);

选择要隐藏的列：

console.table()会把所有元素罗列在每一列，可以使用columns参数选择要显示的列的子集；其是一个包含列的名称的数组；

// 一个对象数组，只打印 firstName
console.table([wang, jing, juan],"firstName");

按列重新排序：

可以点击每列的顶部标签来重排输出的表格；