使用工具：VSCode

?

目錄

一、快速生成HTML模板

二、在瀏覽器觀察頁面的基本結構

三、添加注釋

四、標題標簽

?五、段落標簽

?六、標簽，換行~

七、幾種格式化標簽

八、img圖片標簽

?九、超鏈接標簽

十、表格標簽

?十一、列表標簽

十二、表單標簽

十三、無語義標簽

關于HTML的更多內容，參考以下文檔：MDN HTML文檔：HTML（超文本標記語言） | MD

---

一、快速生成HTML模板

輸入！，并且按Tab，就可以生成一組默認的頁面模板

二、在瀏覽器觀察頁面的基本結構

按F12，打開開發者工具~

通過修改title標簽修改網頁標題，boby標簽內部為瀏覽器內容，此處文章內容為hello world~，頁面標題為Test。

三、添加注釋

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

可以直接通過ctrl + / 來切換注釋~~

?可以看出，類似于IDEA，注釋并不起到什么實質性的作業，網頁中并不顯示注釋的內容~~~

注意：注釋不能嵌套~

四、標題標簽

h1-h6

數字越大，里面的內容，就越粗越大

數字越小，里面的內容，就越細細越小

輸入標簽名，按Tab就可以快速生成一對標簽

?五、段落標簽

?

?附加操作：每個段落首行縮進兩個漢字：

HTML無法實現，需要搭配CSS來實現

?六、標簽，換行~

在HTML中，換行會被直接忽略，要想內容中換行，需要使用<br>標簽。

<br>標簽是一個單標簽，只有開始標簽，沒有結束標簽。

?在此處同時存在一個問題，HTML也會忽而略空格。會把多個相鄰的空格，合并成一個空格。

如果想要使用多個空格，就需要使用轉義字符。

除了空格之外，像<>&等這些特殊符號，就需要使用轉義字符~

常見的幾個轉義字符：

?

?幾個空格，就幾個轉義字符~

七、幾種格式化標簽

頁面效果如下：?

?

這幾個格式化標簽，不是獨占一行的，如果想要換行，就需要使用<br>標簽~

八、img圖片標簽

?下面對這些標簽內的屬性進行描述：

src：通過這個屬性來指定一個具體的圖片資源，寫法格式參考文件操作時的文件路徑選擇~

alt：如果這個圖片發生錯誤，則要描述一個內容，表示這個圖片曾經存在過~

titile：光標放到圖片之后，有一個小小的提示框~

width：表示寬度~

height：表示高度~

border：給圖片加上邊框~

下面來看頁面效果：

?九、超鏈接標簽

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

?href屬性：雙引號內部是是一個網頁的網址。

標簽內容：可以在頁面中點擊標簽的內容進行頁面跳轉，從初始頁面轉到雙引號內部的頁面

?頁面如下：

?此時可以點擊這個超鏈接跳轉至百度頁面~

我們點擊之后可以發現，跳轉的頁面覆蓋了原有畫面，而有時候我們實際上并不想讓跳轉頁面覆蓋原有界面，而是想讓它重新創建一個新頁面，此時我們可以對上述標簽做如下操作：

?在原有標簽的基礎上添加一個屬性，target=“_blank”，表示想新開一個標簽頁~

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

1.直接寫一個完整的URL（外面的網站）

2.也可以寫一個相對路徑（本地的內容）

?此時我們點擊超鏈接，就可以跳轉至本地網頁test2.html中~

3.寫作“#”，表示不跳轉

十、表格標簽

表格標簽可以用于在網頁中繪制一個表格，主要有一下幾種分類：

1.table標簽：表示整個表格

2.tr標簽：表示表格中的一行

3.td標簽：表示一行中的一個單元格

4.th標簽：表示表頭單元格

5.thead標簽：表格的頭部區域

6.tbody標簽：表格的主體區域~

其中table、th、td、tr關系如圖所示：

?此時我們利用上述幾個標簽以及一些擴展知識來構造一個表格：

?我們接下來分析上面的標簽的使用規則：

table標簽嵌套在外部表示這是一個表格；

tr標簽表示為一行；

th標簽表示每一列的屬性（表頭單元格）；

td標簽表示一行中某個單元格的內容。

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

另外，我們加上了一個align屬性，設置了對齊方式：align屬性是控制table標簽來到頁面的居中位置，如果要控制單元格內的內容文字的居中對齊，需要另外使用CSS~

?十一、列表標簽

列表標簽總體分為三類：

1.無序列表標簽。ul（整個無序列表）和li（列表項，一個列表中包含多個表項）

2.有序列表標簽。ol（整個有序列表）和li（列表項，一個列表中包含多個表項）

3.自定義列表標簽。dl（整個列表）dt（小標題）dd（標題里的內容）

?

十二、表單標簽

表單就相當于是讓用戶“填表”，此處的填表并不一定是我們日常中使用WPS填表那樣在表格中填寫。但同樣的也是讓用戶輸入一些信息~

通過表單，就能夠讓用戶和服務器之間進行一些基本的交互~

表單標簽并且一種，而是由多種標簽組合使用而成，統稱為表單~

基本有以下幾種：

form標簽：表示整個表單；

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

textarea標簽：表示一個多行文本框；

select標簽：下拉框\下拉菜單；

label標簽：label標簽主要搭配input使用。

通過一個例子進行描述以上這些標簽的具體使用規則：

?

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

1.單行文本框

?只能保存一行內容，不能換行~

2.密碼框

?密碼框內輸入的內容會自動變成小圓點~

表示密碼時，一般使用密碼框。

小技巧：如果一個網頁默認保存了密碼，此時又忘記了密碼，可以通過開發者工具，把input的type改了，就能夠看到里面的內容。

3.單選框

?往往需要把多個input type=“radio”關聯起來，起到“N選一”的效果。

使用name屬性把多個單選框通過name來關聯起來，此時倘若多個單選框的name相同，那么就只能取其中之一~

使用checked屬性來表示默認被選中的值。

4.復選框

可以選擇多個選項

5.普通按鈕

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

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

6.提交按鈕

?提交按鈕就是把當前表單里用戶輸入的數據，包裝成一個http請求發送給服務器~

form標簽內的action位置表示服務器的url

7.清空按鈕

把當前表單中用戶輸入的內容全部清除~

8.選擇文件

一般在上傳文件的時候會用到

?9.label標簽

上面我們說到了label標簽要搭配input來使用，那么它的具體作用是什么呢？

我們使用新的例子來看：

?

在前面例子中，我們必須點擊按鈕的小圓圈才能夠進行選擇，實際生活中，用戶往往希望能夠也通過點擊標簽的內容進行勾選~因此，換句話說，label標簽就是為了方便用戶使用而存在的一種標簽~?

此時我們可以點擊“男”字就可以勾選男這個選項，而并非只能通過點擊“男”字前面的小圓圈才能夠勾選~

?

通過這個for屬性就表示當前label要和哪個input標簽關聯起來，這個時候就需要給對應的input標簽起一個唯一的身份標識~

10.select標簽

下拉框/下拉菜單

select是標識下拉框本身，里面的選項是一個個的option標簽。option標簽表示的是一個個選項內容~

?可以通過selected屬性來指定默認選中哪個選項，如果沒有指定，則默認選中第一項~

11.textarea多行編輯框

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

如果超出限制，則會出現滾動條進行上下滑動或者左右滑動，同時也可以通過右下角的拉伸使編輯框變大縮小~

十三、無語義標簽

上面的標簽，都是帶有語義的標簽（語義是指這個標簽是用來干什么）

加下來介紹無語義標簽

div和span就是無語義標簽——這個標簽沒有沒有專門的用途

div和span往往是用來針對頁面結構進行布局的：div可以視為是一個獨占一行的“大盒子”；

span可以視為是一個不獨占一行的“小盒子”。盒子里面又可以裝其他的標簽，或者盒子里面也可以再裝盒子。

如果要表示的某個內容，在html中沒有合適的標簽來表示，就可以使用div和span~極端情況下，整個頁面都是div和span~

?

?可以通過div來指定一行，同時使用span可以指定每一列~

關于HTML的更多內容，參考以下文檔：MDN HTML文檔：HTML（超文本標記語言） | MDN

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。