【前端之旅】HTML 大總結-有解無憂

在這里插入圖片描述

一名軟體工程專業學生的前端之旅，記錄自己對三件套（HTML、CSS、JavaScript）、Node.js、Vue、小程式開發（uniapp）以及各種UI組件庫、前端框架的學習，

【前端之旅】Web基礎與開發工具
【前端之旅】HTML 大總結

HTML 大總結

- - 一、HTML基礎結構標簽 🔥
  - - HTML骨架格式
    - HTML元素標簽分類
    - 檔案型別宣告
    - 頁面語言 lang
    - 字符集
    - 注釋
  - 二、HTML常用標簽 🔥
  - - 1.標題標簽
    - 2.段落標簽
    - 3.換行標簽與水平線標簽
    - 4.盒子標簽
    - 5.文本格式化標簽
    - 6.影像標簽
    - 7.路徑問題
    - 8.超鏈接標簽與錨點鏈接
    - 9.特殊字符
    - 10.表格標簽
    - - 表格屬性
      - 合并單元格
    - 11.串列標簽
    - 12.表單標簽
    - - 表單域
      - 表單控制元件（表單元素）
      - input輸入表單元素
      - 1、文本框與密碼框
        2、單選框和復選框
        3、name和value屬性
        4、checked和maxlength
        5、submit和reset
        6、button和檔案域
        7、label
      - select下拉表單元素
      - textarea文本域元素

一、HTML基礎結構標簽 🔥

HTML（Hyper Text Markup Language）超文本標記語言

之所以叫做超文本標記語言，一是因為它可以加入各類圖片、音頻、視頻等多媒體，二是它可以實作從一個文本檔案跳轉到另一個文本檔案，而且借助互聯網，它可以與世界各個主機的檔案鏈接，

HTML骨架格式

<!-- 頁面中最大的標簽 根標簽 -->
<html>
    <!-- 頭部標簽 -->
    <head>     
        <!-- 標題標簽 -->
        <title></title> 
    </head>
    <!-- 檔案的主體 -->
    <body>
    </body>
</html>

HTML元素標簽分類

HTML標簽是由尖括號包圍的關鍵字，例如: <html>

常規標簽（雙標簽）：標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽,例如<html> </html>
空元素（單標簽）:例如：<br>

檔案型別宣告

檔案型別宣告<!DOCTYPE html>會告訴瀏覽器按照HTML5標準決議頁面，

<!DOCTYPE> 宣告位于檔案中的最前面的位置，處于 <html> 標簽之前，
<!DOCTYPE> 不是一個 HTML 標簽，它就是檔案型別宣告標簽

頁面語言 lang

<html lang="en"> 中 lang 指定該html標簽內容所用的語言

en 定義語言為英語
zh-CN 定義語言為中文

lang的作用

根據根據lang屬性來設定不同語言的css樣式，或者字體
告訴搜索引擎做精確的識別
讓語法檢查程式做語言識別
幫助翻譯工具做識別
幫助網頁閱讀程式做識別

字符集

在<head>標簽內，可以通過<meta> 標簽的 charset 屬性來規定 HTML 檔案應該使用哪種字符編碼，

<meta charset = "UTF-8" />
charset 常用的值有：：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被稱為萬國碼，基本包含了全世界所有國家需要用到的字符

注釋

注釋快捷鍵為 ctrl + /
注釋以  結束

<!--  注釋陳述句	-->

二、HTML常用標簽 🔥

排版標簽： 主要和CSS 搭配使用，顯示網頁結構的標簽，是網頁布局最常用的標簽，

標題標簽 <h>
段落標簽 <p>
水平線標簽 <hr/>
換行標簽<br/>
div 與span標簽：沒有語意，是我們用于網頁布局的2個常用的盒子，

標簽屬性(行內式)：我們使用HTML制作網頁時，如果想讓HTML標簽提供更多的資訊，可以使用HTML標簽的屬性加以設定，

<標簽名 屬性1="屬性值1" 屬性2="屬性值2" > 內容 </標簽名>

1.標題標簽

<body>
    <h1> 一級標題</h1>
    <h2> 二級標題</h2>
    <h3> 三級標題</h3>
    <h4> 四級標題</h4>
    <h5> 五級標題</h5>
    <h6> 六級標題</h6>
</body>

標題標簽下的文字會變的加粗，字號也會根據標簽等級依次變大，并且一個標題獨占一行，

2.段落標簽

<p>
   這是一個段落，
</p>

寫在一個段落標簽里的文字，會根據瀏覽器視窗的大小進行自動換行，并且段落和段落之間保有空隙，

3.換行標簽與水平線標簽

<br/>
<hr/>

<br/>是個單標簽，作用是進行換行，不會產生垂直的間距，
<hr/>自動生成一條100%寬的水平線，

4.盒子標簽

<div></div> :一行只能放一個大盒子
<span></span> : 一行可以放多個小盒子

<div>這是一個div</div>
<span>這是一個span</span>

5.文本格式化標簽

為文字設定粗體、斜體、下劃線等效果
b和strong 文字以粗體顯示
i和em 文字以斜體顯示
s和del 文字以加洗掉線顯示
u和ins 文字以加下劃線顯示

6.影像標簽

<body>
   	<img src="" alt="" title="" />
</body>

src是<img>標簽的必須屬性，用來指定影像檔案的路徑與檔案，

屬性屬性值說明
src 圖片路徑必須屬性
alt 文本替換文本（當圖片不能顯示時候顯示的文字）
title 文本提示文本（滑鼠放到影像上，顯示的文字）

屬性	屬性值	說明
src	圖片路徑	必須屬性
alt	文本	替換文本（當圖片不能顯示時候顯示的文字）
title	文本	提示文本（滑鼠放到影像上，顯示的文字）

7.路徑問題

在引入靜態資源時（比如圖片、音頻等）需要通過檔案路徑進行引入，這里主要涉及到絕對路徑與相對路徑，

絕對路徑：是指目錄下的絕對位置，直接到達目標位置，通常是從盤符開始的路徑，
相對路徑：

相對路徑分類	符號	說明
同一級路徑		圖形檔案位于 HTML 檔案同一級如`<img src="demo.png">`
下一級路徑	/	圖形檔案位于 HTML 檔案下一級如 `<img src="images/demo.png">`
上一級路徑	…/	圖形檔案位于 HTML 檔案上一級如 `<img src="../demo.png">`

8.超鏈接標簽與錨點鏈接

超鏈接標簽：點擊觸發后可以跳轉對應鏈接或者下載相應資源，

<a href="跳轉目標" target="目標視窗的彈出方式">文本或影像</a>

屬性	作用
href	（此項必填）用于填寫指定鏈接目標的url地址，注意：如果 href 里面地址是一個檔案或者壓縮包，會下載這個檔案，
target	用于填寫指定連接頁面的打開方式：`_self`為默認值，`_blank`為在新視窗中打開

錨點鏈接標簽：點擊鏈接，可以實作快速定位到頁面中的某個位置，

在鏈接文本的href屬性中，設定屬性值為 #名字
找到目標位置標簽，里面添加一個 id屬性=剛才的名字

<a href = "#demo">點擊一下，進入自我介紹</a>
<h3 id = "demo">自我介紹</h3>

9.特殊字符

HTML 原代碼	顯示結果	描述
`<`	<	小于號或顯示標記
`>`	>	大于號或顯示標記
`&`	&	可用于顯示其它特殊字符
`"`	“	引號
`®`	?	已注冊
`©`	?	著作權
`™`	?	商標
`&ensp;`		半個空白位
`&emsp;`		一個空白位
` `		不斷行的空白

重點記住：空格、大于號、小于號這三個，其余的使用的很少，如果需要使用回頭查閱即可

10.表格標簽

表格標簽現在還是較為常用的一種標簽，但不是用來布局，常見顯示、展示表格式資料，因為它可以讓資料顯示的非常的規整，可讀性非常好，特別是后臺展示資料的時候表格運用是否熟練就顯得很重要，一個清爽簡約的表格能夠把繁雜的資料表現得很有條理，

table 用來定義表格的標簽
tr 用來定義表格中的行，必須嵌套在<table></table> 標簽中
td 用來定義表格中的單元格，必須嵌套在<tr></tr> 標簽中
th 用來定義表格中的表頭，表頭單元格里面的內容加粗居中顯示

<body>
    <table>
        <tr>  <th>姓名</th>     <th>性別</th>    <th>年齡</th>        </tr>
        <tr>  <td>孫銘</td>     <td>男</td>     <td>18</td>          </tr>  
        <tr>  <td>孫不堅</td>     <td>男</td>     <td>18</td>          </tr>       
        <tr>  <td>sunming</td>     <td>男</td>     <td>18</td>          </tr>     
    </table>
</body>

代碼效果：

表格屬性

表格標簽的屬性實際開發并不常用，后面樣式基本都是通過CSS來設定的，

屬性名	屬性值	描述
align	left center right	規定表格相對周圍元素的對齊方式，
border	1或者’’ ‘’	規定表格單元是否擁有邊框，默認為" "，表示沒有邊框，1則表示有，
cellpadding	像素值	規定單元邊沿與其內容之間的空白，默認1像素，
cellspacing	像素值	規定單元格之間的空白，默認2像素，
width	像素值或百分比	規定表格的寬度，

<table align=center border="1" cellpadding="20" cellspacing="0" width="500">

合并單元格

跨行合并：rowspan=“合并單元格的個數”
跨列合并：colspan="合并單元格的個數"

確定目標單元格（合并寫代碼）

跨行：最上面側單元格為目標單元格，寫合并代碼
跨列：最左面側單元格為目標單元格，寫合并代碼

 <table align=center border="1" cellpadding="20" cellspacing="0" width="700">
        <tr>
            <th colspan="5">個人簡歷</th>

        </tr>
        <tr>
            <th>姓名:</th>
            <th></th>
            <th>性別：</th>
            <th></th>
            <th rowspan="4">照片</th>
        </tr>
        <tr>
            <th>婚姻狀況：</th>
            <th></th>
            <th>出生年月：</th>
            <th></th>
        </tr>
        <tr>
            <th>民族：</th>
            <th></th>
            <th>政治面貌：</th>
            <th></th>
        </tr>
        <tr>
            <th>身高：</th>
            <th></th>
            <th>學歷：</th>
            <th></th>
        </tr>
    </table>

代碼效果：

11.串列標簽

串列容器里面裝載著結構，樣式一致的文字或圖表的一種形式叫串列，串列最大的特點就是整齊、整潔、有序，跟表格類似，但是它可組合自由度會更高，一般網站的底部鏈接部分就是用串列標簽制作，

無序串列：<ul>
有序串列：<ol>
自定義串列：<dl>

標簽名	定義	說明
`<ul></ul>`	無序串列	里面只能包含li，沒有順序，li里面可以包含任何標簽，
`<ol></ol>`	有序串列	里面只能包含li，有順序，
`<dl></dl>`	自定義串列	里面只能包含dt和dd，dt和dd里面可以放任何標簽，

 <ul>
        <ul>hahaha</ul>
        <ul>hahaha</ul>
    </ul>
    <ol>
        <ul>xixixi</ul>
        <ul>xixixi</ul>
    </ol>
    <dl>
        <dt>關注我們</dt>
        <dd>新浪微博</dd>
        <dd>聯系我們</dd>
    </dl>

代碼效果：

12.表單標簽

一個完整的表單通常由表單域，表單控制元件（表單元素）和提示資訊這3部分組成，表單目的是為了收集用戶資訊，

如圖世紀佳緣網站中注冊界面中就存在表單，該表單目的是為了收集用戶資訊，

表單域

表單域是一個包含表單元素的區域
<form></from>標簽用于定義表單域，會把它范圍內的表單元素資訊提交給服務器

屬性	屬性值	作用
action	url地址	用于指定接收并處理表單資料的服務器程式的url地址
method	get/post	用于設定表單資料的提交方式，其取值為get或post
name	名稱	用于指定表單的名稱，以區分同一個頁面中的多個表單域

<form action="url地址" method="提交方式" name="表單域的名稱">    
</form>

GET 和 POST 的區別（后面學 ajax 后臺互動的時候用得到）

GET在瀏覽器回退時是無害的，而POST會再次提交請求，
GET請求會被瀏覽器主動cache，而POST不會，除非手動設定，
GET請求只能進行url編碼，而POST支持多種編碼方式，
GET請求引數會被完整保留在瀏覽器歷史記錄里，而POST中的引數不會被保留，
GET請求大小一般是(1024位元組)，http協議并沒有限制，而與服務器，作業系統有關，POST理論上來說沒有大小限制，http協議規范也沒有進行大小限制，但實際上post所能傳遞的資料量根據取決于服務器的設定和記憶體大小，
對引數的資料型別，GET只接受ASCII字符，而POST沒有限制，
GET比POST更不安全，因為引數直接暴露在URL上，所以不能用來傳遞敏感資訊，

表單控制元件（表單元素）

表單元素三大組:input 輸入表單元素、select 下拉表單元素、textarea 文本域表單元素

input輸入表單元素

input是個單標簽，type 屬性設定不同的屬性用來指定不同的控制元件型別(文本欄位、復選框、單選按鈕、按鈕等),type屬性的屬性值及描述如下：

屬性值	描述
button	定義可點擊按鈕(多數情況下，用于通過JavaScript啟動腳本)
checkbox	定義復選框
file	定義輸入欄位和"瀏覽"按鈕，供檔案上傳，
hidden	定義隱藏的輸入欄位
image	定義影像形式的提交按鈕
password	定義密碼欄位，該欄位中的字符被掩碼
radio	定義單選按鈕
reset	定義重置按鈕，重置按鈕會清楚表單中的所有資料，
submit	定義提交按鈕，提交按鈕會把表單資料發送到服務器，
text	定義單行的輸入欄位，用戶可在其中輸入文本，默認寬度為 20 個字符，

除 type 屬性外，<input> 標簽還有很多其他很多屬性，其常用屬性如下：

屬性	屬性值	描述
name	由用戶自定義	定義 input 元素的名稱
value	由用戶自定義	規定 input 元素的值
checked	checked	規定此 input 元素首次加載時應當被選中
maxlength	正整數	規定輸入欄位中字符的最大長度

name 和 value 是每個表單元素都有的屬性值，主要給后端人員使用，
name 是表單元素的名字，要求單選框和復選框要有相同的name值，
checked 屬性主要針對于單選框和復選框，主要作用是一打開頁面，就可以默認選中某個表單元素，

1、文本框與密碼框

type 屬性設定為 text 是文本框
type 屬性設定為 password 是密碼框

<body>
    <form>
        用戶名：<input type="text"> <br/> 
        密碼：<input type="password">
    </form>
</body>

2、單選框和復選框

type 屬性設定為 radio 是單選框
type 屬性設定為 checkbox 是復選框
name 是表單元素的名字，要求單選框和復選框要有相同的name值

<form>
        用戶名：<input type="text"> <br> 
        密碼：<input type="password"> <br> 
        <!-- radio是單選框，可以多選一 -->
        性別：男<input type="radio"> 女 <input type="radio">
        <!-- checkbox是多選框，可以多選 -->
        愛好：吃飯<input type="checkbox">  睡覺<input type="checkbox">   打游戲<input type="checkbox"> 
</form>

3、name和value屬性

name屬性：當前input表單的名字，后臺可以通過這個name屬性找到這個表單，name的主要作用就是用于區別不同的表單，

<form>
        用戶名：<input type="text" value="請輸入用戶名"> <br> 
        密碼：<input type="password"> <br> 
        <!-- radio是單選框，可以多選一 -->
        <!-- name是表單元素的名字，這里的性別單選按鈕必須有相同的名字name，才能實作多選一 -->
        性別：男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女">
        <!-- checkbox是多選框，可以多選 -->
        愛好：吃飯<input type="checkbox" name="habby" value="吃飯">  睡覺<input type="checkbox" name="habby" value="睡覺">   打游戲<input type="checkbox" name="habby" value="打游戲"> 
</form>

4、checked和maxlength

單選按鈕和復選框可以設定checked 屬性
當頁面打開時候就可以默認選中這個按鈕
單選框只能給其中一個加checked，復選框可以多加

性別:男<input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">

5、submit和reset

type 屬性設定為submit：提交按鈕會把表單資料發送到服務器
``type` 屬性設定為reset：重置按鈕會清除表單中的所有資料

6、button和檔案域

type 屬性設定為button：是一個按鈕
type 屬性設定為file：是一個檔案域，可以上傳檔案

<input type="button" value="獲取短信驗證碼"> <br>
    <!-- 檔案域：上傳檔案使用的 -->
    上傳頭像：<input type="file">

7、label

label標簽用于系結一個表單元素，當點擊標簽內的文本時，瀏覽器就會自動將焦點(游標)轉到表單元素上，用來增加用戶體驗

label標簽的 for屬性應當與相關元素的id 屬性相同

<label for="sex"> 男 </lable>
<input type="radio" name="sex" id="sex" />

select下拉表單元素

下拉表單元素
<select>中至少包含一對<option>
在<option>中定義 selected=“selected” 時，當前項即為默認選中項，

<select>
       <option selected="selected">選項1</option>
       <option>選項2</option>
       <option>選項3</option>
       ...
</select>

textarea文本域元素

用于定義多行文本輸入的控制元件

<textarea>
    文本內容
</textarea>

cols = “每行中的字符數”， rows = “顯示的函式”，我們在實際開發中不會使用，都是用CSS來改變大小

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/328263.html

標籤：其他

上一篇：為GoogleCloudAppEngine靈活指定Node.js版本

下一篇：@vue/cli(vue腳手架)超詳細教程