HTML基礎(chǔ)

TML的作用

HTML是用來開發(fā)網(wǎng)頁的，它是開發(fā)網(wǎng)頁的語言

HTML的定義

全稱HyperText Mark-up Language，超文本標(biāo)記語言

標(biāo)記就是標(biāo)簽

<標(biāo)簽名稱></標(biāo)簽名稱> 比如 <html></html> <h1></h1>等，標(biāo)簽大多數(shù)都是成對出現(xiàn)的。

超文本兩層含義：

因為網(wǎng)頁中還可以有圖片、視頻、音頻等內(nèi)容（超越文本限制）
它還可以在網(wǎng)頁中跳轉(zhuǎn)到另一個網(wǎng)頁，與世界各地主機(jī)的網(wǎng)頁鏈接（超鏈接文本）

HTML的基本結(jié)構(gòu)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>網(wǎng)頁標(biāo)題</title>
    </head>
    <body>
        網(wǎng)頁顯示內(nèi)容
    </body>
</html>

第一行<!DOCTYPE html>是文檔聲明
用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔
<html>...</html>標(biāo)簽是開發(fā)人員在告訴瀏覽器
整個網(wǎng)頁是從<html>這里開始的，到</html>結(jié)束
也就是html文檔的開始和結(jié)束標(biāo)簽
<head>...</head>標(biāo)簽用于定義文檔的頭部
是負(fù)責(zé)對網(wǎng)頁進(jìn)行設(shè)置標(biāo)題、編碼格式以及引入css和js文件的
<body>...</body>標(biāo)簽是編寫網(wǎng)頁上顯示的內(nèi)容

網(wǎng)頁文件的后綴是.html, 一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁

VS Code 安裝

VS Code全拼是 Visual Studio Code 是由微軟研發(fā)的一款免費、開源的跨平臺代碼編輯器
目前是前端(網(wǎng)頁)開發(fā)使用最多的一款軟件開發(fā)工具

下載網(wǎng)址: https://code.visualstudio.com/Download

選擇對應(yīng)的安裝包進(jìn)行下載:

安裝一切默認(rèn)

VS Code 的插件安裝

Chinese(Simplified) Language Pack for VS Code 中文漢化包
open in browser 右擊在瀏覽器打開html

常用的HTML標(biāo)簽

1 標(biāo)簽不區(qū)分大小寫，但是推薦使用小寫
2 根據(jù)標(biāo)簽的書寫形式，標(biāo)簽分為雙標(biāo)簽(閉合標(biāo)簽)和單標(biāo)簽(空標(biāo)簽) 2.1 雙標(biāo)簽是指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的一對標(biāo)簽，這種標(biāo)簽允許嵌套和承載內(nèi)容，比如: div標(biāo)簽 2.2 單標(biāo)簽是一個標(biāo)簽組成，沒有標(biāo)簽內(nèi)容，比如: img標(biāo)簽

標(biāo)簽的使用形式

成對出現(xiàn)的標(biāo)簽
標(biāo)簽的嵌套
單個出現(xiàn)的標(biāo)簽
帶屬性的標(biāo)簽

列表標(biāo)簽

無序列表標(biāo)簽(ul標(biāo)簽)
有序列表標(biāo)簽(ol標(biāo)簽)

網(wǎng)頁效果

表格標(biāo)簽

<table>標(biāo)簽：表示一個表格
<tr>標(biāo)簽：表示表格中的一行
<td>標(biāo)簽：表示表格中的列
<th>標(biāo)簽：表示表格中的表頭

屬性設(shè)置
border: 1px solid black:設(shè)置邊框和顏色
border-collapse: collapse:設(shè)置邊框合并

網(wǎng)頁效果

表單標(biāo)簽

表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

<form>標(biāo)簽表示表單標(biāo)簽，定義整體的表單區(qū)域

一個表單中有很多信息組成,比如姓名,愛好,地址等,這些內(nèi)容有很多其他標(biāo)簽來承載

這些標(biāo)簽稱為表單元素標(biāo)簽

網(wǎng)頁效果

表單提交

表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

action屬性設(shè)置表單數(shù)據(jù)提交地址
method屬性設(shè)置表單提交的方式，一般有“GET”方式和“POST”方式, 不區(qū)分大小寫

兩種方式的區(qū)別:

“GET”方式 : 沒有請求體
“POST”方式 : 有請求體

表單元素屬性設(shè)置

name: 表單元素的名稱，用于作為提交表單數(shù)據(jù)時的參數(shù)名
value: 表單元素的值，用于作為提交表單數(shù)據(jù)時參數(shù)名所對應(yīng)的值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛好:</label>
<input type="checkbox" name="like" value="睡覺">睡覺
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>

點擊提交：

可以看到服務(wù)器收到了請求報文。

頁就是一個HTML文件。

1、HTML結(jié)構(gòu)

<!doctype html>

<HTML>

<head>

</head>

<body>

</body>

</HTML>

說明：

文檔類型<!DOCTYPE>

<!DOCTYPE html>

標(biāo)簽位于文檔的最前面，用于向瀏覽器說明當(dāng)前文檔使用哪種 HTML 或 XHTML 標(biāo)準(zhǔn)規(guī)范.

HTML標(biāo)簽
標(biāo)識HTML文檔，是所有HTML中標(biāo)簽的一個根節(jié)點。
head標(biāo)簽
標(biāo)識頭部區(qū)域，用于存放：title,meta,base,style,script,link
title標(biāo)題
在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽，讓頁面擁有一個屬于自己的標(biāo)題。
body標(biāo)簽
標(biāo)識頁面的主體部分，用于存放所有的HTML標(biāo)簽，如p,h,a,b,u,i,s,em,del,ins,strong,img

2、HTML標(biāo)簽和屬性

寫HTML文檔時，必須遵循HTML語法規(guī)范。HTML文檔實際上就是一個文本文件，它由標(biāo)簽和信息組合而成，當(dāng)然標(biāo)簽和信息也不是隨便組合的，需要遵循一定規(guī)則，否則無法正常顯示。

標(biāo)簽分類
在HTML頁面中，帶有“< >”符號的元素被稱為HTML標(biāo)簽，如上面提到的 <html>、<head>、<body>都是HTML標(biāo)簽。根據(jù)出現(xiàn)個數(shù)不同，分為雙標(biāo)簽和單標(biāo)簽
雙標(biāo)簽
該語法中“<標(biāo)簽名>”表示該標(biāo)簽的作用開始，一般稱為“開始標(biāo)簽（start tag）”，“</標(biāo)簽名>” 表示該標(biāo)簽的作用結(jié)束，一般稱為“結(jié)束標(biāo)簽（end tag）”。和開始標(biāo)簽相比，結(jié)束標(biāo)簽只是在前面加了一個關(guān)閉符“/”。
<標(biāo)簽名屬性名1="屬性值" 屬性名2="屬性值" 屬性名3="屬性值" ……> 內(nèi)容 </標(biāo)簽名>
單標(biāo)簽
單標(biāo)簽也稱空標(biāo)簽，是指用一個標(biāo)簽符號即可完整地描述某個功能的標(biāo)簽。
<標(biāo)簽名屬性名1="屬性值" 屬性名2="屬性值" 屬性名3="屬性值" …… />

標(biāo)簽關(guān)系
嵌套關(guān)系
<head> <title> </title> </head>
并列關(guān)系
<head></head> <body></body>
標(biāo)簽語義化
所謂標(biāo)簽語義化，就是指標(biāo)簽的含義
作用：

方便代碼閱讀和維護(hù)
具有更好地搜索引擎優(yōu)化
更容易讓瀏覽器或是網(wǎng)絡(luò)爬蟲解析，從而更好地分析網(wǎng)頁的內(nèi)容

遵循原則：
合適的地方放一個最為合理的標(biāo)簽。當(dāng)我們?nèi)サ鬋SS之后，網(wǎng)頁結(jié)構(gòu)依然組織有序，并且有良好的可讀性

有一起學(xué)習(xí)的嗎？請點贊收藏+關(guān)注哦！

HTML（HyperText Markup Language，中文：超文本標(biāo)記語言）是一種用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的標(biāo)記語言。它由一系列標(biāo)簽組成，這些標(biāo)簽描述了網(wǎng)頁中的各個元素和其它相關(guān)信息。通過使用HTML標(biāo)簽和屬性，開發(fā)人員可以定義文本、圖像、鏈接、表格、表單等元素，并控制它們的外觀和行為。本文主要介紹HTML的基本概念、歷史背景和用途。

參考文檔：https://www.cjavapy.com/article/3297/

HTML實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CJAVAPY編程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一個標(biāo)題</h1>
 
<p>我的第一個段落。</p>
 
</body>
</html>

HTML文檔的后綴名可以是.html或.htm，都可以使用，沒有區(qū)別。

注意：對于中文網(wǎng)頁需要使用<meta charset="utf-8"> 聲明編碼，否則會出現(xiàn)亂碼。有些瀏覽器(如 360 瀏覽器)會設(shè)置 GBK 為默認(rèn)編碼，則你需要設(shè)置為<meta charset="gbk"> 。

1、HTML的基本概念

1）標(biāo)簽（Tag）

HTML使用標(biāo)簽來定義網(wǎng)頁中的各個元素。標(biāo)簽通常以尖括號< >的形式出現(xiàn)，如<p>表示段落，<img>表示圖像等。標(biāo)簽可以包含屬性，用于提供額外的信息或控制元素的行為。

2）元素（Element）

一個完整的HTML元素由開始標(biāo)簽、內(nèi)容和結(jié)束標(biāo)簽組成。例如，<p>這是一個段落</p>就是一個完整的段落元素。

3）屬性（Attribute）

HTML標(biāo)簽可以具有屬性，用于提供元素的額外信息或控制元素的行為。屬性以鍵值對的形式出現(xiàn)，例如<img src="image.jpg">中的src屬性指定了圖像的源文件。

4）文檔結(jié)構(gòu)

一個HTML文檔由<html>、<head>和<body>等標(biāo)簽組成。其中，<html>標(biāo)簽用于定義整個HTML文檔的根元素，<head>標(biāo)簽用于定義文檔的頭部信息，如標(biāo)題和樣式表鏈接，<body>標(biāo)簽用于定義文檔的主體內(nèi)容。

5）塊級元素和內(nèi)聯(lián)元素

HTML元素可以被分類為塊級元素和內(nèi)聯(lián)元素。塊級元素以塊的形式顯示，獨占一行或一塊空間，如<p>、<div>等。內(nèi)聯(lián)元素以行內(nèi)的方式顯示，不會獨占一行，如<span>、<a>等。

6）嵌套

HTML元素可以嵌套在其他元素內(nèi)部，形成一個層次結(jié)構(gòu)。例如，<div>元素可以包含<p>元素，<p>元素可以包含<span>元素。

7）<!DOCTYPE> 聲明

HTML文檔的開頭通常會包含一個DOCTYPE聲明，用于指定文檔的HTML版本。

例如：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

2、HTML與Web 瀏覽器

HTML（HyperText Markup Language）是一種用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的標(biāo)記語言，而Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用于顯示和解釋HTML文檔的應(yīng)用程序。Web瀏覽器通過解析HTML文檔，將其轉(zhuǎn)換為可視化的網(wǎng)頁。瀏覽器會讀取HTML文檔中的標(biāo)簽和內(nèi)容，并根據(jù)這些標(biāo)簽和內(nèi)容的定義，渲染出網(wǎng)頁的結(jié)構(gòu)和樣式。HTML提供了各種標(biāo)簽和屬性，用于定義文本、圖像、鏈接、表格、表單等在網(wǎng)頁中的展示和交互方式。瀏覽器在解析HTML時，會根據(jù)標(biāo)簽和屬性的定義，將文本顯示為段落、標(biāo)題或其他格式，顯示圖像、鏈接，并響應(yīng)用戶的交互操作。

通過HTML和Web瀏覽器的結(jié)合，用戶可以在瀏覽器中訪問和瀏覽各種網(wǎng)頁內(nèi)容，包括網(wǎng)頁文本、圖像、視頻、音頻等多媒體元素，并與網(wǎng)頁進(jìn)行交互，如點擊鏈接、填寫表單、提交數(shù)據(jù)等。

大部分瀏覽器中，直接輸出中文會出現(xiàn)中文亂碼的情況，需要在頭部將字符聲明為 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
頁面標(biāo)題</title>
</head>
<body>
 
<h1>我的第一個標(biāo)題</h1>
 
<p>我的第一個段落。</p>
 
</body>
</html>

3、HTML版本及歷史背景

HTML有多個版本，每個版本都有不同的特性和改進(jìn)。

版本	發(fā)布時間
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2014

1）HTML 1.0

HTML 1.0是最早的HTML版本，于1993年發(fā)布。它只包含一些基本的標(biāo)簽和屬性，用于創(chuàng)建簡單的文本和鏈接。HTML 1.0的目標(biāo)是定義一種通用的超文本標(biāo)記語言。

2）HTML 2.0

HTML 2.0于1995年發(fā)布，是對HTML 1.0的改進(jìn)和擴(kuò)展。它引入了一些新的標(biāo)簽和屬性，如圖像標(biāo)簽和表格標(biāo)簽，以支持更豐富的內(nèi)容展示。

3）HTML 3.2

HTML 3.2于1997年發(fā)布，是對HTML 2.0的進(jìn)一步改進(jìn)。它引入了一些新的標(biāo)簽和屬性，如表單標(biāo)簽和框架標(biāo)簽，以支持交互性和頁面布局。

4）HTML 4.01

HTML 4.01于1999年發(fā)布，是對HTML 3.2的修訂和擴(kuò)展。它引入了更多的標(biāo)簽和屬性，如層標(biāo)簽和樣式表，以支持更靈活的頁面設(shè)計和樣式控制。

5）XHTML 1.0

XHTML（eXtensible HyperText Markup Language）是基于XML的HTML版本。XHTML 1.0于2000年發(fā)布，它嚴(yán)格遵循XML的語法規(guī)則，要求所有標(biāo)簽和屬性都要正確嵌套和閉合。

6）HTML5

HTML5是HTML的最新版本，于2014年正式發(fā)布。HTML5引入了許多新的特性和API，如語義化標(biāo)簽、多媒體支持、Canvas繪圖、本地存儲等。HTML5還支持響應(yīng)式設(shè)計，以適應(yīng)不同設(shè)備和屏幕尺寸。

4、HTML用途

HTML是構(gòu)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的基礎(chǔ)語言，它提供了豐富的標(biāo)簽和屬性，使得開發(fā)者可以創(chuàng)建各種類型的網(wǎng)頁，并實現(xiàn)不同的功能和效果。HTML用于定義網(wǎng)頁的整體結(jié)構(gòu)，包括標(biāo)題、段落、列表、標(biāo)題、導(dǎo)航菜單等元素。通過使用不同的HTML標(biāo)簽和屬性，可以將文本、圖像、音頻、視頻等內(nèi)容組織起來，并構(gòu)建頁面的層次結(jié)構(gòu)。HTML可以用于展示文本內(nèi)容和多媒體元素，如圖像、音頻和視頻。通過使用適當(dāng)?shù)腍TML標(biāo)簽和屬性，可以插入和顯示各種類型的媒體內(nèi)容，從而使網(wǎng)頁更加豐富和吸引人。HTML提供了創(chuàng)建表單的標(biāo)簽和元素，可以用于收集用戶的輸入數(shù)據(jù)。通過使用表單元素如文本框、復(fù)選框、單選按鈕和下拉列表等，用戶可以輸入數(shù)據(jù)并提交給服務(wù)器進(jìn)行處理。

參考文檔：https://www.cjavapy.com/article/3297/

在線咨詢

上一篇：ThinkPHP之去掉文章中的所有HTML標(biāo)簽并截取部分內(nèi)容作為簡介
下一篇：網(wǎng)站都變成灰色，幾行代碼就搞定了