、系統(tǒng)結(jié)構(gòu)：

① B/S架構(gòu)：Browser/Server（瀏覽器/服務(wù)器的交互形式。）

• Browser支持的語言：HTML、CSS、JavaScript；S是服務(wù)器端Server支持的語言有：C、C++、Java等
• B/S架構(gòu)系統(tǒng)有什么優(yōu)點(diǎn)和缺點(diǎn)？ 優(yōu)點(diǎn)：升級(jí)方便，只升級(jí)服務(wù)器代碼即可，維護(hù)成本低。缺點(diǎn)：速度慢、體驗(yàn)不好、界面不炫酷
• 企業(yè)大部分使用B/S架構(gòu)
• B/S架構(gòu)的系統(tǒng)代表有：京東、百度、天貓等

② C/S架構(gòu)：Client/Server（客戶端/服務(wù)器的交互形式。）

• C/S架構(gòu)的優(yōu)點(diǎn)和缺點(diǎn)？
• 優(yōu)點(diǎn)：速度快、體驗(yàn)好、界面炫酷（娛樂性多數(shù)是C/S架構(gòu)）
• 缺點(diǎn)：升級(jí)麻煩、維護(hù)成本較高。
• C/S架構(gòu)的系統(tǒng)代表有：QQ、微信、支付寶等

2、 HTML概述

① 什么是HTML？② 怎么開發(fā)HTML？③ 怎么運(yùn)行HTML?

• ① HTML：Hyper Text Markup Language（超文本標(biāo)記語言）

?由大量的標(biāo)簽組成，每一個(gè)標(biāo)簽都有開始標(biāo)簽和結(jié)束標(biāo)簽。

?超文本：圖片、聲音、視頻等

• ② HTML開發(fā)使用普通的文本編輯器就行，創(chuàng)建擴(kuò)展名是.html或.htm

?編輯器有：HBuilder、vscode等

③ 直接采用瀏覽器打開HTML文件就能運(yùn)行

④ HTML是誰制定的？

• ④ W3C：世界萬維網(wǎng)聯(lián)盟

?W3C制定了HTML的規(guī)范：每個(gè)瀏覽器生產(chǎn)廠家都會(huì)遵守規(guī)范。HTML也會(huì)按照規(guī)范去寫代碼

?HTML規(guī)范目前最高的版本是：HTML5.0，簡(jiǎn)稱H5

?我們現(xiàn)在主要學(xué)的HTML4.0（基本用法）

• 為了方便中國(guó)Web前端程序員開發(fā)，提供了大量幫助文檔。為開發(fā)提供方便。

?w3school：先出現(xiàn)的，和W3C無關(guān)

?w3cschool：后出現(xiàn)的，和W3C無關(guān)

?W3C制定了很多規(guī)范：HTML/XML/http協(xié)議/https協(xié)議……

3、 第一個(gè)HTML

4、基本標(biāo)簽

• p：段落標(biāo)記
• h1~h6：標(biāo)題字，與word的標(biāo)題字相同
• br：換行標(biāo)記（獨(dú)目標(biāo)記）
• hr：橫線（獨(dú)目標(biāo)記）
• color：橫線顏色
• width：橫線寬度（可以px和%）
• pre：預(yù)留格式
• del：刪除字
• ins：插入字（有下劃線）
• b：粗體字
• i：斜體字
• sup：上標(biāo)
• sub：下標(biāo)
• font：字體標(biāo)簽
• color：字體顏色
• size：字體大小（1~7）

頁面效果圖：

5、實(shí)體符號(hào)：為了避免和標(biāo)簽沖突，所以需要使用實(shí)體符號(hào)

• <：<
• >：>
• 空格：
• 注：html中按多個(gè)空格鍵，在網(wǎng)頁中只顯示一個(gè)空格。

6、HTML表格

• table：表格
• tr：行
• td：列
• th：列（比td加粗居中）
• 合并行：rowspan（一個(gè)格占兩個(gè)位置）
• 注：row合并的時(shí)候，刪除下面的單元格
• 合并列：colspan（一個(gè)格占兩個(gè)位置）
• 注：col合并的時(shí)候，刪除哪個(gè)沒有要求

7、thead、tbody、tfoot標(biāo)簽

• thead、tbody、tfoot不是必須的，便于后期JS編寫。

8、body的背景顏色和背景圖片

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

9、img標(biāo)簽

• src：圖片的路徑
• 只設(shè)置width，height會(huì)等比例縮放
• 只設(shè)置height，不起作用
• title：鼠標(biāo)懸停時(shí)顯示的信息
• alt：設(shè)置圖片加載失敗時(shí)顯示的提示信息

10、 超鏈接或熱鏈接

• href：hot references 熱引用；
• 后面一定是一個(gè)資源的地址。
• 后面的路徑可以是絕對(duì)路徑也可以是相對(duì)路徑，可以是網(wǎng)絡(luò)某個(gè)資源的路徑。
• target：
• _blank：新窗口
• _self：當(dāng)前窗口（默認(rèn)）
• _top：頂級(jí)窗口
• _parent：父級(jí)窗口

超鏈接的作用：

通過超鏈接可以從瀏覽器向服務(wù)器發(fā)送請(qǐng)求。

11、request與response的概念

• request：瀏覽器向服務(wù)器發(fā)送數(shù)據(jù)（請(qǐng)求）
• B --》S
• response：服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)（響應(yīng)）
• S--》B

12、列表

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

13、表單（重點(diǎn)）

• action：寫提交的URL地址
• method：默認(rèn)get；還有post
• 表單有什么用？
• 答：收集用戶的信息。表單展現(xiàn)之后，用戶填寫表單，點(diǎn)擊提交。 （submit）
• 怎么畫一個(gè)表單？
• 答：用form標(biāo)簽
• 一個(gè)網(wǎng)頁可以有多個(gè)表單form
• 表單最終是需要提交數(shù)據(jù)給服務(wù)器的，form標(biāo)簽有一個(gè)action屬性，這個(gè)屬性用來指定服務(wù)器地址。
• action屬性用來指定數(shù)據(jù)提交給哪個(gè)服務(wù)器
• action屬性和超鏈接中的href屬性一樣。都可以向服務(wù)器發(fā)送請(qǐng)求（request）
• http://192.168.111.3:8080/oa/save 這是請(qǐng)求路徑，
• 表單提交數(shù)據(jù)最終提交給192.168.111.3機(jī)器上的8080端口對(duì)應(yīng)的軟件。
• input中的type取值:
• radio：?jiǎn)芜x控件
• checkbox：多選控件
• submit：提交控件
• reset：重置控件
• button：普通控件
• text：文本控件
• password：密碼控
• file：文件控件
• 上傳文件專用
• hidden：隱藏域
• 網(wǎng)頁上看不到，但是表單提交的時(shí)候數(shù)據(jù)會(huì)自動(dòng)提交給服務(wù)器。
• input中的value屬性用來指定按鈕上顯示的文本信息。
• 超鏈接a與表單form的區(qū)別？
• 答：表達(dá)form可以收集信息，而超鏈接a無法收集信息。
• 表單提交里面的按鈕input中屬性必須定義name，不然提交不了。
• 表單是以什么格式提交數(shù)據(jù)給服務(wù)器的？
• 格式：action?name=value&name=value&name=value..
• HTTP協(xié)議規(guī)定的，必須以這種格式提交給服務(wù)器
• java中String split('&');
• 重點(diǎn)強(qiáng)調(diào)：表單項(xiàng)寫了name屬性的，一律會(huì)提交給服務(wù)器。不想提交就不要寫name屬性。
• 文本框和密碼框的value不需要程序員指定，用戶輸入什么value就是什么。
• 當(dāng)name沒有寫的時(shí)候，該項(xiàng)不會(huì)提交給服務(wù)器
• 但是當(dāng)value沒有寫的時(shí)候，value的默認(rèn)值是空字符串"",將空字符串提交給服務(wù)器。java代碼得到的是：String s = "";

效果圖：

地址欄提交的信息：

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

14、表單的說明：

• ① 用戶手動(dòng)輸入的文本框，都不需要給value賦值
• ② textarea沒有value屬性
• ③ radio、checkbox默認(rèn)選項(xiàng)需要使用，checked="checked"（簡(jiǎn)寫：checked）
• ④ select中的option屬性：? selected="selected" 為默認(rèn)選中 ?size：顯示條目數(shù)量
• multiple="multiple" 支持多選(select的屬性)
• ⑤ input的屬性
• readonly和disabled：
• 都是只讀不能修改
• 數(shù)據(jù)不會(huì)提交
• maxlength：設(shè)置文本框中輸入的字符數(shù)量。

15、HTML中的結(jié)點(diǎn)

• 在HTML文檔中，任何元素（結(jié)點(diǎn)）都有id屬性，id屬性是該節(jié)點(diǎn)的唯一標(biāo)識(shí)。所以在同一個(gè)HTML文檔中id值不能重復(fù)。
• 注意：表單提交數(shù)據(jù)的時(shí)候，只和name有關(guān)系，和id無關(guān)
• id有什么作用？
• javascript語言：可以對(duì)HTML文檔中的任何節(jié)點(diǎn)進(jìn)行增刪改操作。
• 獲取節(jié)點(diǎn)時(shí)，通常通過id來獲取節(jié)點(diǎn)
• HTML文檔是一棵樹，樹上有很多節(jié)點(diǎn)，每一個(gè)節(jié)點(diǎn)都有唯一的id（DOM樹）

16、div和span

• div和span有什么用？
• div和span都可以稱為圖層。
• 有什么用？
• 圖層的作用為了保證頁面可以靈活的布局。
• div和span是可以定位的，只要定下div的左上角的x軸和y軸坐標(biāo)即可。
• div和span的區(qū)別？
• di獨(dú)占一行
• span不會(huì)獨(dú)占一行

TML標(biāo)簽：

基本標(biāo)簽：

<html></html>雙標(biāo)簽 開頭結(jié)尾 HTML標(biāo)簽為最大的標(biāo)簽 稱為根標(biāo)簽

<head></head> 文檔頭部標(biāo)簽 且必須設(shè)置title

<title></title> 頁面標(biāo)題

<body></body> 文檔的主體 包含頁面的內(nèi)容

<h1>-<h6> HTML提供6個(gè)等級(jí)的頁面標(biāo)題 有大到小

<p></p> p標(biāo)簽用于定義段落 可以將頁面分為若干個(gè)段落 根據(jù)窗口大小自動(dòng)換行

<br/>單標(biāo)簽 換行標(biāo)簽 （break打斷）

格式化標(biāo)簽：

加粗 <strong></strong>or<b></b>

斜線 <em></em>or<i></i>

刪除線 <del></del>or<s></s>

下劃線 <ins></ins>or<u></u>

div和span標(biāo)簽：

沒有語義 屬于一種盒子 來裝內(nèi)容

<div></div> 表示分割分區(qū) 用來布局 一行一個(gè) 大盒子

<span></span>意為跨度，跨距 一行可以哦有多個(gè) 小盒子

圖像標(biāo)簽：

<img src="圖像路徑(url)"/> 定義頁面中的圖像

圖像標(biāo)簽包含多個(gè)屬性

src 圖片路徑 必須屬性

alt 文本 替換文本 圖像不能顯示的文字

title 文本 鼠標(biāo)放到圖像上顯示文字

width 像素 寬度

height 高度

border 邊框

相對(duì)路徑和絕對(duì)路徑

相對(duì)路徑：以引用文件所在位置為參考基礎(chǔ)，而建立出的目錄路徑

分類：下級(jí)路徑/ 上級(jí)路徑../

絕對(duì)路徑：是指目錄下的絕對(duì)位置，如硬盤中的路徑或網(wǎng)路地址

超鏈接標(biāo)簽：

<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>

href用于指定鏈接目標(biāo)的url地址(必須屬性)

target用于指定鏈接打卡方式 _self為默認(rèn)值 _blank為在新窗口打開方式

錨點(diǎn)鏈接：可以快速到頁面某個(gè)位置

在鏈接文本中的href屬性中，設(shè)置屬性值為#名字的形式，如<a href="#two">目標(biāo)</a>

找到目標(biāo)位置標(biāo)簽，里面添加一個(gè)id屬性 = 名字，如：<h3 id="two">目標(biāo)</h3>

注釋：

<!-- 注釋語句 --> 快捷鍵CTRL + /

特殊字符：

表格標(biāo)簽：

<table></table> 是用于定義表格的標(biāo)簽

<tr></tr> 標(biāo)簽用于定義表格中的行，必須嵌套在<table></table>標(biāo)簽中

<tb></tb> 用于定義表格的單元格，必須嵌套在<tr></tr>標(biāo)簽中

<td> 元素中的文本通常是普通的左對(duì)齊文本。字母td指表格數(shù)據(jù)(table data)，即數(shù)據(jù)單元格的內(nèi)容

表頭單元格標(biāo)簽：

<th>標(biāo)簽表示HTML表格的表頭部分 <th> 元素中的文本通常呈現(xiàn)為粗體并且居中。

表格屬性：

align left center right 規(guī)定表格相對(duì)于周圍元素的對(duì)齊方式
border 1or"" 規(guī)定表格單元是否擁有邊框默認(rèn)為"",表示沒有邊框

cellpadding 像素值 規(guī)定單元邊沿與其內(nèi)容的空白，默認(rèn)1像素

cellspacing 像素值 規(guī)定單元格直接的空白 默認(rèn)2像素

with 像素值or百分比 規(guī)定表格的寬度

合并單元表格方式：

跨行合并：rowspan="合并單元格的個(gè)數(shù)"

跨列合并：colspan="合并單元格的個(gè)數(shù)"

列表標(biāo)簽：

<ul>標(biāo)簽表示無序列表 里面只能包含li

<ol>有序標(biāo)簽 里面只能包含li

<li>相當(dāng)于一個(gè)容器定義列表項(xiàng) 與<ui>or<li>嵌套使用 li里面可以包含任何標(biāo)簽

<dl>標(biāo)簽用于定義描述列表(或自定義列表),該標(biāo)簽會(huì)與<dt>(定義項(xiàng)目和名字)和<dd>(描述每一個(gè)項(xiàng)目名字)一起使用

表單標(biāo)簽：

<input>標(biāo)簽用于收集用戶信息 包含一個(gè)type屬性 可以有多種樣式

<input type="value">

<input type="屬性值" />

屬性值：

<label>標(biāo)簽

<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。 label是標(biāo)注的意思

label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。

<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同

詳情可參考

https://www.runoob.com/ 菜鳥教程

https://www.w3school.com.cn/ w3c

.標(biāo)題標(biāo)簽：<h1> </h1>

2.段落標(biāo)簽：<p> </p>

3.水平線標(biāo)簽：<hr/>

4.換行標(biāo)簽：<br/>

5.div span標(biāo)簽：兩者無語義，相當(dāng)于一個(gè)盒子，用來布局。兩者區(qū)別：<div></div>會(huì)自動(dòng)換行。

6.文本格式化標(biāo)簽：<b> </b> <strong> </strong> 粗體

<i> </i> <em> </em> 斜體

<s> </s> <del> </del> 加刪除線

<u> </u> <ins> </ins> 加下劃線

7.標(biāo)簽屬性：<標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2">內(nèi)容</標(biāo)簽名>

8.圖像標(biāo)簽：<img />

屬性 屬性值

src 路徑

alt 文本（圖片不顯示時(shí)顯示的文本）

title 鼠標(biāo)經(jīng)過時(shí)的懸浮文本

width 寬度

height 高度

border 邊框?qū)挾?/p>

9.鏈接標(biāo)簽：<a href="目標(biāo)" target="窗口彈出方式"> </a>

瞄點(diǎn)定位：<a herf="#id名"> </a> <h3 id="文本"> </h3>

target="-self"本窗口彈出

target="-blank"打開新窗口彈出

class與id區(qū)別：class不唯一，id唯一

10.base標(biāo)簽：<base target="-blank">

此標(biāo)簽必須放在<head> </head>里

11.常見特殊字符：&nbsp 空格

&lt 小于號(hào)

&gt 大于號(hào)

&copy 版權(quán)

12.注釋標(biāo)簽：<!--注釋的文本 -->

13.路徑：

相對(duì)路徑：同一級(jí) <img src="文件名" />

下一級(jí)<img src="下一級(jí)文件名/文件名">

上一級(jí)<img src="../文件名"/>(上兩級(jí)../../，依次類推)

絕對(duì)路徑："D:wen\word"或"http://www.baidu.com"

14.列表

無序列表：<ul>

<li>列表項(xiàng)1</li>

<li>列表項(xiàng)2</li>

......

</ul>（ul里不可放其他標(biāo)簽，li里可以放其他標(biāo)簽，后者同理）

有序列表：<ol>

<li> </li>

<li> </li>

......

</ol>

自定義列表：術(shù)語，名詞的解釋描述

<dl>

<dt>名詞1</dt>

<dd>解釋1</dd>

<dt>名詞2</dt>

<dd>解釋2</dd>

......

</dl>