TML基本標簽，即超文本標記語言（HyperText Markup Language）。

標簽是由小于號(<)+中間字符+大于號(>)組成的代碼（英文字符）組成的，主要是用來標記內容模塊的，也可以用來標明元素內容的意義。標簽一般使用尖括號包圍，例如：、,這兩個標簽都是表示一個HTML文件。

作用是給用戶展示特定內容或是告訴瀏覽器與搜索引擎關于網頁的部分信息。

單標簽<只有開始標簽；雙標簽開始標簽和結束標簽成雙出現；"/”：網頁上如果某個標簽的小于號后面有此符號的即為結束標簽，沒有此符號的則為雙標簽 的專業術語稱為注釋標簽。

我們可以將一行代碼的作用、含義、意圖等信息寫在這四個減號中間，讓自己后期能夠看懂之前寫的什么。

標簽的使用有兩種形式，一種是成對出現的標簽，另一種是段度出現的標簽。無論是哪種標簽，都不能含有空格。

1、成對式標簽成對式標簽也是包含開始標簽和結束標簽的形式。比如，前端布局中常用的網頁內容，這是一個標準的成對出現的標簽。起始標記標志代表內容段的開始，而結束標記則代表內容段的結束。

2、雖然不是所有的開始標簽都要有對應的結束標簽，但是最好都有，這樣網站頁面更容易閱讀，也更容易需要更改。如果開始標記和結束標記之間沒有內容，可以寫成。
3、標簽屬性的定義

和元素相關的特性就是屬性，可以為屬性賦值。正常情況下，可以不使用引號來包含屬性值，這時候屬性值應該包含數字、字母、符號。使用引號可以更好的表現，因為這符合W3C的標準，并且可以順利的鏈接未來的標準。

4、大小寫規范

項目名稱及屬性均不分大小寫，但仍建議使用者標簽以大寫字母為主，屬性以小寫字母為主，以便于瀏覽及了解。

5、基本標簽：

（1）段落標簽

在html中如果你輸入兩段話，那么他顯示的還是顯示在一行上，這個時候就需要我們在分段的地方加上 段落標簽 才能正常換行

（2）標題字

標題字就像我們的word文章標題一樣，需要明確那些文字是標題

（3）換行符

輸入一段話我們想要在某一段在下一行顯示，那么就需要進行換行。

（4）水平線

我們常常用一條線來分割上下文，那么就會用到 水平線 這個標簽

（5）預留格式

當我們在html頁面中寫如一些東西的時候他往往不會按照你輸入的格式來，那么就需要用到 預留格式 這個標簽

（6）粗體字 斜體字 插入字 刪除字

粗體字 粗體字

斜體字 斜體字

插入字 插入字

刪除字 刪除字 就是刪除字中間有一條橫線

（7）右上角加字 右下角加字

右上角加字： 102

右下角加字： CO2

（8）字體標簽

有些時候我們想在一些文字加上一些修飾，那么就需要用到字體標簽有些時候我們想在一些文字重點強調加上修飾。效果如下：有些時候我們想在一些文字重點強調，加上修飾。

如果想學習更多前端知識，歡迎移步我們官網，上面有很多免費在線課程，各個方向的都有。

、系統結構：

① 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：字體大?。?~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不會獨占一行