大家天天開心！
文章目錄
- 前言
- 一、HTML的簡介
- 二、HTML運行方式
- 三、html 的標簽/元素-說明
- 四、表單注意事項
- 總結
前言
? ? ? 首先我們在把Java基礎學習完之后，我們就要進行網站方面的開發了，我們要了解網頁的組成，而網頁的組成有HTML,CSS,JavaScript 所以我們就要從HTML開始了，下面我們開始進行學習。
一、HTML的簡介：
? ? ? ??首先我們要知道HTML 是什么：
1. HTML（HyperText Mark-up Language）即超文本標簽語言(可以展示的內容類型很多)
2. HTML 文本是由HTML標簽組成的文本，可以包括文字、圖形、動畫、聲音、表格、鏈 接等
3. HTML 的結構包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的 韓順平Java 工程師 信息，而主體則包含所要說明的具體內容
注意：HTML 文件本質上是一種標記語言（markup language），它本身并不“運行”，而是由瀏覽器解析并呈現。
瀏覽器內部的工作過程如下：
-
加載文件：當你在瀏覽器中輸入網址時，瀏覽器向服務器發送請求以獲取 HTML 文件。當文件被傳送到瀏覽器后，瀏覽器會開始解析這個 HTML 文件。
-
解析 HTML：瀏覽器首先解析 HTML 文件的內容，瀏覽器內置的 HTML 解析器將 HTML 標簽及其內容轉換成 DOM（文檔對象模型）樹。DOM 樹表示頁面的結構和內容，類似于樹狀結構，每個標簽都變成了一個 DOM 節點。
-
解析 CSS：瀏覽器還會解析頁面中引用的 CSS（層疊樣式表）文件，CSS 用于定義 HTML 元素的外觀樣式。瀏覽器將 CSS 規則應用于 DOM 樹中的相應元素，形成渲染樹。
-
執行 JavaScript：如果 HTML 文件中包含 JavaScript 代碼，瀏覽器的 JavaScript 引擎（如 Chrome 的 V8 引擎）會執行它們。JavaScript 可以操作 DOM 和 CSSOM（CSS 對象模型），也可以更新頁面的內容或交互行為。
-
渲染頁面：瀏覽器結合 DOM 和 CSSOM 構建渲染樹。渲染樹是頁面視覺內容的表示，瀏覽器根據渲染樹來確定如何在屏幕上繪制頁面。接下來，瀏覽器會進行布局和繪制，將頁面呈現給用戶。
-
事件監聽和交互：當用戶與頁面交互時（例如點擊按鈕、輸入文本等），瀏覽器會根據 JavaScript 的事件監聽機制觸發相應的事件，可能會引發頁面的更新或動畫效果等。
總結來說，HTML 文件通過瀏覽器的渲染過程被解析、樣式化、執行腳本，最終在屏幕上呈現頁面，并能響應用戶的交互。
二、HTML運行方式：
1.本地運行：
2.遠程運行：
注意事項：
1.HTML文件不需要編譯，直接由瀏覽器進行解析執行
2.可以選擇的瀏覽器，是你電腦安裝有的瀏覽器,如果沒有安裝這個瀏覽器，會報錯
三、html 的標簽/元素-說明：
1. HTML 標簽用兩個尖括號”<>”括起來
2. HTML 標簽一般是雙標簽，如和 前一個標簽是起始標簽, 后一個標簽為結束標簽
3. 兩個標簽之間的文本是html元素的內容
4. 某些標簽稱為"單標簽",因為它只需單獨使用就能完整地表達意思,如<br/>和<hr/>
5. HTML 元素指的是從開始標簽到結束標簽的所有代碼。
標簽使用細節：
? ?1.標簽不能交叉嵌套
? ?2.標簽必須正確關閉
? ?3.注釋不能嵌套
? ?4. html 語法不嚴謹。有時候標簽不閉合，屬性值不帶””也不報錯
font字體標簽：
例：在網頁上顯示北京，并修改字體為微軟雅黑，顏色為藍色
font標簽是字體標簽,它可以用來修改文本的字體,顏色,大小(尺寸)
(1)color屬性修改顏色 (2)face屬性修改字體
標題標簽：
超鏈接標簽：
? ? 超鏈接是指從一個網頁指向一個目標的鏈接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一 個應用程序。
無序列表：
?
有序列表：
圖像標簽：
.img標簽可以在html頁面上顯示圖片
表格標簽：
基本語法：
實例：
表格標簽-跨行跨列表格：
細節：
實例：
<table border="1px" bordercolor="#E87EFA" cellspacing="0"width="400px"><tr><td align=center colspan="3">星期一菜譜</td></tr><tr><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒扁豆</td></tr><tr><td>小蔥豆腐</td><td>炒白菜</td></tr><tr><td rowspan=2>葷菜</td><td>油悶大蝦</td><td>海參魚翅</td></tr><tr><td>紅燒肉<img width="100px" src="../2.png"/></td><td>烤全羊</td>
</tr></table>
form表單介紹：
??
模擬登錄演示：
?
細節：
<h1>登錄系統</h1><formaction="ok.html"method="get">
用戶名:<input type="text"name="username"><br/>
密碼:<input type="password"name="username"><br/>
<input type="submit" value="登錄"> <input type="reset"value="重新填寫"></form>------ok.html----
<!DOCTYPEhtml><html lang="en"><head><metacharset="UTF-8"><title>登錄成功</title></head><body><h1>恭喜你，登錄OK</h1></body></html>input標簽/元素：
select/option/textarea 標簽：
div標簽：
1.標簽可以把文檔分割為獨立的、不同的部分
2.是一個塊級元素。它的內容自動地開始一個新行。
P標簽：
1.標簽定義段落
2.p元素會自動在其前后創建一些空白。
Span標簽：
1. span 標簽是內聯元素，不像塊級元素（如：div標簽、p標簽等）有換行的效果。
2. 如果不對span應用樣式，span標簽沒有任何的顯示效果
3. 語法：<span>內容</span>
四、表單注意事項：
GET和POST的區別：
總結
這就是以上對HTML的總結，反正前端的路任重而道遠，這些基礎部件都是很基礎的，希望大家都可以掌握，我也會持續更新的，謝謝大家。
)
