HTML基礎篇筆記

、系統結構：

① 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");

按列重新排序：

可以點擊每列的頂部標簽來重排輸出的表格；

Web前端開發之Javascript-零點程序員-王唯

例

一個 HTML 文本區域：

我是一個文本框。

</textarea>

瀏覽器支持

所有主流瀏覽器都支持 <textarea> 標簽。

標簽定義及使用說明

<textarea> 標簽定義一個多行的文本輸入控件。

文本區域中可容納無限數量的文本，其中的文本的默認字體是等寬字體（通常是 Courier）。

可以通過 cols 和 rows 屬性來規定 textarea 的尺寸大小，不過更好的辦法是使用 CSS 的 height 和 width 屬性。

HTML 4.01 與 HTML5之間的差異

HTML5 增加了一些新的屬性。

屬性

New：HTML5 中的新屬性。

屬性	值	描述
autofocusNew	autofocus	規定當頁面加載時，文本區域自動獲得焦點。
cols	number	規定文本區域內可見的列數。
disabled	disabled	規定禁用文本區域。
formNew	form_id	定義文本區域所屬的一個或多個表單。
maxlengthNew	number	規定文本區域允許的最大字符數。
name	text	規定文本區域的名稱。
placeholderNew	text	規定一個簡短的提示，描述文本區域期望的輸入值。
readonly	readonly	規定文本區域為只讀。
requiredNew	required	規定文本區域是必需的/必填的。
rows	number	規定文本區域內可見的行數。
wrapNew	hardsoft	規定當提交表單時，文本區域中的文本應該怎樣換行。

全局屬性

<textarea> 標簽支持 HTML 的全局屬性。

事件屬性

<textarea> 標簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：從業余項目到全世界最受歡迎的編程語言之一，Rust 是如何做到的？
下一篇：使用 Electron 打造跨平臺桌面應用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商