使用工具：VSCode

?

目錄

一、快速生成HTML模板

二、在瀏覽器觀察頁(yè)面的基本結(jié)構(gòu)

三、添加注釋

四、標(biāo)題標(biāo)簽

?五、段落標(biāo)簽

?六、標(biāo)簽，換行~

七、幾種格式化標(biāo)簽

八、img圖片標(biāo)簽

?九、超鏈接標(biāo)簽

十、表格標(biāo)簽

?十一、列表標(biāo)簽

十二、表單標(biāo)簽

十三、無(wú)語(yǔ)義標(biāo)簽

關(guān)于HTML的更多內(nèi)容，參考以下文檔：MDN HTML文檔：HTML（超文本標(biāo)記語(yǔ)言） | MD

---

一、快速生成HTML模板

輸入！，并且按Tab，就可以生成一組默認(rèn)的頁(yè)面模板

二、在瀏覽器觀察頁(yè)面的基本結(jié)構(gòu)

按F12，打開開發(fā)者工具~

通過(guò)修改title標(biāo)簽修改網(wǎng)頁(yè)標(biāo)題，boby標(biāo)簽內(nèi)部為瀏覽器內(nèi)容，此處文章內(nèi)容為hello world~，頁(yè)面標(biāo)題為Test。

三、添加注釋

注釋是：<!--? ? ?-->

可以直接通過(guò)ctrl + / 來(lái)切換注釋~~

?可以看出，類似于IDEA，注釋并不起到什么實(shí)質(zhì)性的作業(yè)，網(wǎng)頁(yè)中并不顯示注釋的內(nèi)容~~~

注意：注釋不能嵌套~

四、標(biāo)題標(biāo)簽

h1-h6

數(shù)字越大，里面的內(nèi)容，就越粗越大

數(shù)字越小，里面的內(nèi)容，就越細(xì)細(xì)越小

輸入標(biāo)簽名，按Tab就可以快速生成一對(duì)標(biāo)簽

?五、段落標(biāo)簽

?

?附加操作：每個(gè)段落首行縮進(jìn)兩個(gè)漢字：

HTML無(wú)法實(shí)現(xiàn)，需要搭配CSS來(lái)實(shí)現(xiàn)

?六、標(biāo)簽，換行~

在HTML中，換行會(huì)被直接忽略，要想內(nèi)容中換行，需要使用<br>標(biāo)簽。

<br>標(biāo)簽是一個(gè)單標(biāo)簽，只有開始標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽。

?在此處同時(shí)存在一個(gè)問(wèn)題，HTML也會(huì)忽而略空格。會(huì)把多個(gè)相鄰的空格，合并成一個(gè)空格。

如果想要使用多個(gè)空格，就需要使用轉(zhuǎn)義字符。

除了空格之外，像<>&等這些特殊符號(hào)，就需要使用轉(zhuǎn)義字符~

常見的幾個(gè)轉(zhuǎn)義字符：

?

?幾個(gè)空格，就幾個(gè)轉(zhuǎn)義字符~

七、幾種格式化標(biāo)簽

頁(yè)面效果如下：?

?

這幾個(gè)格式化標(biāo)簽，不是獨(dú)占一行的，如果想要換行，就需要使用<br>標(biāo)簽~

八、img圖片標(biāo)簽

?下面對(duì)這些標(biāo)簽內(nèi)的屬性進(jìn)行描述：

src：通過(guò)這個(gè)屬性來(lái)指定一個(gè)具體的圖片資源，寫法格式參考文件操作時(shí)的文件路徑選擇~

alt：如果這個(gè)圖片發(fā)生錯(cuò)誤，則要描述一個(gè)內(nèi)容，表示這個(gè)圖片曾經(jīng)存在過(guò)~

titile：光標(biāo)放到圖片之后，有一個(gè)小小的提示框~

width：表示寬度~

height：表示高度~

border：給圖片加上邊框~

下面來(lái)看頁(yè)面效果：

?九、超鏈接標(biāo)簽

? ? <a href=""></a>

?href屬性：雙引號(hào)內(nèi)部是是一個(gè)網(wǎng)頁(yè)的網(wǎng)址。

標(biāo)簽內(nèi)容：可以在頁(yè)面中點(diǎn)擊標(biāo)簽的內(nèi)容進(jìn)行頁(yè)面跳轉(zhuǎn)，從初始頁(yè)面轉(zhuǎn)到雙引號(hào)內(nèi)部的頁(yè)面

?頁(yè)面如下：

?此時(shí)可以點(diǎn)擊這個(gè)超鏈接跳轉(zhuǎn)至百度頁(yè)面~

我們點(diǎn)擊之后可以發(fā)現(xiàn)，跳轉(zhuǎn)的頁(yè)面覆蓋了原有畫面，而有時(shí)候我們實(shí)際上并不想讓跳轉(zhuǎn)頁(yè)面覆蓋原有界面，而是想讓它重新創(chuàng)建一個(gè)新頁(yè)面，此時(shí)我們可以對(duì)上述標(biāo)簽做如下操作：

?在原有標(biāo)簽的基礎(chǔ)上添加一個(gè)屬性，target=“_blank”，表示想新開一個(gè)標(biāo)簽頁(yè)~

注意：a標(biāo)簽這里的鏈接地址，可以有多種不同的寫法：

1.直接寫一個(gè)完整的URL（外面的網(wǎng)站）

2.也可以寫一個(gè)相對(duì)路徑（本地的內(nèi)容）

?此時(shí)我們點(diǎn)擊超鏈接，就可以跳轉(zhuǎn)至本地網(wǎng)頁(yè)test2.html中~

3.寫作“#”，表示不跳轉(zhuǎn)

十、表格標(biāo)簽

表格標(biāo)簽可以用于在網(wǎng)頁(yè)中繪制一個(gè)表格，主要有一下幾種分類：

1.table標(biāo)簽：表示整個(gè)表格

2.tr標(biāo)簽：表示表格中的一行

3.td標(biāo)簽：表示一行中的一個(gè)單元格

4.th標(biāo)簽：表示表頭單元格

5.thead標(biāo)簽：表格的頭部區(qū)域

6.tbody標(biāo)簽：表格的主體區(qū)域~

其中table、th、td、tr關(guān)系如圖所示：

?此時(shí)我們利用上述幾個(gè)標(biāo)簽以及一些擴(kuò)展知識(shí)來(lái)構(gòu)造一個(gè)表格：

?我們接下來(lái)分析上面的標(biāo)簽的使用規(guī)則：

table標(biāo)簽嵌套在外部表示這是一個(gè)表格；

tr標(biāo)簽表示為一行；

th標(biāo)簽表示每一列的屬性（表頭單元格）；

td標(biāo)簽表示一行中某個(gè)單元格的內(nèi)容。

table標(biāo)簽內(nèi)含有四個(gè)字段：分別代表，表格寬度，表格高度，表格邊框，兩個(gè)單元格之間的空隙大小，此處為0。

另外，我們加上了一個(gè)align屬性，設(shè)置了對(duì)齊方式：align屬性是控制table標(biāo)簽來(lái)到頁(yè)面的居中位置，如果要控制單元格內(nèi)的內(nèi)容文字的居中對(duì)齊，需要另外使用CSS~

?十一、列表標(biāo)簽

列表標(biāo)簽總體分為三類：

1.無(wú)序列表標(biāo)簽。ul（整個(gè)無(wú)序列表）和li（列表項(xiàng)，一個(gè)列表中包含多個(gè)表項(xiàng)）

2.有序列表標(biāo)簽。ol（整個(gè)有序列表）和li（列表項(xiàng)，一個(gè)列表中包含多個(gè)表項(xiàng)）

3.自定義列表標(biāo)簽。dl（整個(gè)列表）dt（小標(biāo)題）dd（標(biāo)題里的內(nèi)容）

?

十二、表單標(biāo)簽

表單就相當(dāng)于是讓用戶“填表”，此處的填表并不一定是我們?nèi)粘Ｖ惺褂肳PS填表那樣在表格中填寫。但同樣的也是讓用戶輸入一些信息~

通過(guò)表單，就能夠讓用戶和服務(wù)器之間進(jìn)行一些基本的交互~

表單標(biāo)簽并且一種，而是由多種標(biāo)簽組合使用而成，統(tǒng)稱為表單~

基本有以下幾種：

form標(biāo)簽：表示整個(gè)表單；

input標(biāo)簽，能夠表示一些具體的輸入控件，例如輸入框、提交按鈕、上傳文件按鈕...

textarea標(biāo)簽：表示一個(gè)多行文本框；

select標(biāo)簽：下拉框\下拉菜單；

label標(biāo)簽：label標(biāo)簽主要搭配input使用。

通過(guò)一個(gè)例子進(jìn)行描述以上這些標(biāo)簽的具體使用規(guī)則：

?

input最核心的屬性，叫做type。type不同的取值就能表示不同的控件類型~

1.單行文本框

?只能保存一行內(nèi)容，不能換行~

2.密碼框

?密碼框內(nèi)輸入的內(nèi)容會(huì)自動(dòng)變成小圓點(diǎn)~

表示密碼時(shí)，一般使用密碼框。

小技巧：如果一個(gè)網(wǎng)頁(yè)默認(rèn)保存了密碼，此時(shí)又忘記了密碼，可以通過(guò)開發(fā)者工具，把input的type改了，就能夠看到里面的內(nèi)容。

3.單選框

?往往需要把多個(gè)input type=“radio”關(guān)聯(lián)起來(lái)，起到“N選一”的效果。

使用name屬性把多個(gè)單選框通過(guò)name來(lái)關(guān)聯(lián)起來(lái)，此時(shí)倘若多個(gè)單選框的name相同，那么就只能取其中之一~

使用checked屬性來(lái)表示默認(rèn)被選中的值。

4.復(fù)選框

可以選擇多個(gè)選項(xiàng)

5.普通按鈕

?value屬性表示此按鈕鍵所表達(dá)的意思。

此處先不介紹onclick屬性的含義~

6.提交按鈕

?提交按鈕就是把當(dāng)前表單里用戶輸入的數(shù)據(jù)，包裝成一個(gè)http請(qǐng)求發(fā)送給服務(wù)器~

form標(biāo)簽內(nèi)的action位置表示服務(wù)器的url

7.清空按鈕

把當(dāng)前表單中用戶輸入的內(nèi)容全部清除~

8.選擇文件

一般在上傳文件的時(shí)候會(huì)用到

?9.label標(biāo)簽

上面我們說(shuō)到了label標(biāo)簽要搭配input來(lái)使用，那么它的具體作用是什么呢？

我們使用新的例子來(lái)看：

?

在前面例子中，我們必須點(diǎn)擊按鈕的小圓圈才能夠進(jìn)行選擇，實(shí)際生活中，用戶往往希望能夠也通過(guò)點(diǎn)擊標(biāo)簽的內(nèi)容進(jìn)行勾選~因此，換句話說(shuō)，label標(biāo)簽就是為了方便用戶使用而存在的一種標(biāo)簽~?

此時(shí)我們可以點(diǎn)擊“男”字就可以勾選男這個(gè)選項(xiàng)，而并非只能通過(guò)點(diǎn)擊“男”字前面的小圓圈才能夠勾選~

?

通過(guò)這個(gè)for屬性就表示當(dāng)前l(fā)abel要和哪個(gè)input標(biāo)簽關(guān)聯(lián)起來(lái)，這個(gè)時(shí)候就需要給對(duì)應(yīng)的input標(biāo)簽起一個(gè)唯一的身份標(biāo)識(shí)~

10.select標(biāo)簽

下拉框/下拉菜單

select是標(biāo)識(shí)下拉框本身，里面的選項(xiàng)是一個(gè)個(gè)的option標(biāo)簽。option標(biāo)簽表示的是一個(gè)個(gè)選項(xiàng)內(nèi)容~

?可以通過(guò)selected屬性來(lái)指定默認(rèn)選中哪個(gè)選項(xiàng)，如果沒(méi)有指定，則默認(rèn)選中第一項(xiàng)~

11.textarea多行編輯框

?cols屬性表示一行顯示的最大列數(shù)，rows屬性表示一列顯示的最大行數(shù)~

如果超出限制，則會(huì)出現(xiàn)滾動(dòng)條進(jìn)行上下滑動(dòng)或者左右滑動(dòng)，同時(shí)也可以通過(guò)右下角的拉伸使編輯框變大縮小~

十三、無(wú)語(yǔ)義標(biāo)簽

上面的標(biāo)簽，都是帶有語(yǔ)義的標(biāo)簽（語(yǔ)義是指這個(gè)標(biāo)簽是用來(lái)干什么）

加下來(lái)介紹無(wú)語(yǔ)義標(biāo)簽

div和span就是無(wú)語(yǔ)義標(biāo)簽——這個(gè)標(biāo)簽沒(méi)有沒(méi)有專門的用途

div和span往往是用來(lái)針對(duì)頁(yè)面結(jié)構(gòu)進(jìn)行布局的：div可以視為是一個(gè)獨(dú)占一行的“大盒子”；

span可以視為是一個(gè)不獨(dú)占一行的“小盒子”。盒子里面又可以裝其他的標(biāo)簽，或者盒子里面也可以再裝盒子。

如果要表示的某個(gè)內(nèi)容，在html中沒(méi)有合適的標(biāo)簽來(lái)表示，就可以使用div和span~極端情況下，整個(gè)頁(yè)面都是div和span~

?

?可以通過(guò)div來(lái)指定一行，同時(shí)使用span可以指定每一列~

關(guān)于HTML的更多內(nèi)容，參考以下文檔：MDN HTML文檔：HTML（超文本標(biāo)記語(yǔ)言） | MDN

總結(jié)

以上是生活随笔為你收集整理的【HTML操作指南】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。