前端基礎知識html（前端-HTML基礎）

2023-04-13 16:22:39

常見標籤

1.段落標籤

標籤的默認樣式，段前段後都會有空白，如果不喜歡這個空白，可以用css樣式來刪除或改變它。改變CSS樣式刪除段前段後空白處。

p{margin:0px;}

2.斜體標籤

斜體

3.粗體標籤

加粗

4.標籤

被用來組合文檔中的行內元素。使用來組合行內元素，以便通過樣式來格式化它們。

在CSS定義中屬於一個行內元素,在行內定義一個區域，也就是一行內可以被劃分成好幾個區域，從而實現某種特定效果。本身沒有任何屬性。在CSS定義中屬於一個塊級元素可以包含段落、標題、表格甚至其它部分。這使DIV便於建立不同集成的類，如章節、摘要或備註。在頁面效果上，使用會自動換行，使用就會保持同行。

例如：

span{ color:blue; }

這樣，標籤包含的文本就變成了藍色的字體。

5.標籤

作用：段文本引用

例如：

最初知道莊子，是從一首詩莊生曉夢迷蝴蝶。望帝春心託杜鵑。開始的。雖然當時不知道是什麼意思，只是覺得詩句挺特別。後來才明白這個典故出自是莊子的《逍遙遊》，《逍遙遊》代表了莊子思想的最高境界，是對世俗社會的功名利祿及自己的捨棄。在上面的例子中，「莊生曉夢迷蝴蝶。望帝春心託杜鵑。」這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》。因為不是作者自己的文字，所以需要使用實現引用。注意要引用的文本不用加雙引號，瀏覽器會對q標籤自動添加雙引號。這裡用標籤的真正關鍵點不是它的默認樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。補充知識：語義化網頁結構有助於搜尋引擎的收錄。同一個效果可以用很多鍾方式實現，但這隻方便了瀏覽者，而搜尋引擎不知道這裡到底是什麼內容，這裡如果你使用標籤，那麼就告訴瀏覽器這裡是引用的話。而且在手持設備或行動裝置不能很好支持css的基礎上，瀏覽器會使用默認的效果，因而提供較好可讀性。

6.標籤

作用：長文本引用

例如：

明月出天山，蒼茫雲海間。長風幾萬裡，吹度玉門關。漢下白登道，胡窺青海灣。由來徵戰地，不見有人還。戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閒。

注意：瀏覽器對標籤的解析是縮進樣式

7.標籤

怎麼可以讓每一句詩詞後面加入一個折行呢？那就可以用到標籤了，在需要加回車換行的地方加入，標籤作用相當於word文檔中的回車。

語法：

xhtml1.0寫法：

html4.01寫法：

現在一般使用 xhtml1.0 的版本的寫法（其它標籤也是），這種版本比較規範。

與以前我們學過的標籤不一樣，標籤是一個空標籤，沒有HTML內容的標籤就是空標籤，空標籤只需要寫一個開始標籤，這樣的標籤有、和。

講到這裡，你是不是有個疑問，想折行還不好說嘛，就像在 word 文件檔或記事本中，在想要折行的前面輸入回車不就行了嗎？不好意思，在 html 中是忽略回車和空格的，你輸入的再多回車和空格也是顯示不出來的。

8.標籤

在信息展示時，有時會需要加一些用於分隔的橫線，這樣會使文章看起來整齊些。

語法：

html4.01版本

xhtml1.0版本

注意：

標籤和標籤一樣也是一個空標籤，所以只有一個開始標籤，沒有結束標籤。標籤的在瀏覽器中的默認樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關係，這些外在樣式在我們以後學習了css樣式表之後，都可以對其修改。大家注意，現在一般使用 xhtml1.0 的版本（其它標籤也是），這種版本比較規範。

9.標籤

一般網頁中會有一些網站的聯繫地址信息需要在網頁中展示出來，這些聯繫地址信息如公司的地址就可以標籤。也可以定義一個地址（比如電子郵件地址）、籤名或者文檔的作者身份。

語法：

聯繫地址信息

如：

文檔編寫：lilian 北京市西城區德外大街10號

10.標籤

在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業的編程代碼，當代碼為一行代碼時，你就可以使用標籤了，如下面例子：

var i=i 300;

注意：在文章中一般如果要插入多行代碼時不能使用標籤了。

語法：

代碼語言

注：如果是多行代碼，可以使用標籤。

11.標籤

主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。

語法：

語言代碼段

如下代碼：

var; for(var i=1;i<=10;i ) { alert(message); }

效果如下：

注意：標籤不只是為顯示計算機的原始碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是標籤的一個常見應用就是用來展示計算機的原始碼。

12.標籤

ul-li是沒有前後順序的信息列表。

這樣是空心圓，

ul{ list-style:circle; }

這個就是去除前面的點

ul{ list-style:none }

語法：

信息信息 ......

舉例：

精彩少年美麗突然出現觸動心靈的旋律

ul-li在網頁中顯示的默認樣式一般為：每項li前都自帶一個圓點

13.標籤

ol-li是有前後順序的信息列表

語法：

信息信息 ......

舉例：

前端開發面試心法零基礎學習html JavaScript全攻略

在網頁中顯示的默認樣式一般為：每項前都自帶一個序號，序號默認從1開始。

14.標籤

可定義文檔中的分區或節（division/section）。標籤可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。如果用 id 或 class 來標記，那麼該標籤的作用會變得更加有效。是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是固有的唯一格式表現。可以通過的 class 或 id 應用額外的樣式。不必為每一個都加上類或 id，雖然這樣做也有一定的好處。可以對同一個元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解為某一類元素），而id 用於標識單獨的唯一的元素。

15.標籤

常用屬性

1）屬性：border

作用：規定表格邊框的寬度

2）屬性：cellpadding

作用：單元格中的文本與單元格邊框的間距

3）屬性：cellspacing

作用：單元格之間的間距

創建表格的四個元素：

table、tbody、tr、th、td

1、…：整個表格以標記開始、標記結束。

2、…：當表格內容非常多時，表格會下載一點顯示一點，但如果加上標籤後，這個表格就要等表格內容全部下載完才會顯示。如右側代碼編輯器中的代碼。

3、…：表格的一行，所以有幾對tr 表格就有幾行。

4、…：表格的一個單元格，一行中包含幾對...，說明一行中就有幾列。

- 常用屬性： colspan：規定單元格可橫跨的列數，值為數字 rowspan：規定單元格可橫跨的行數，值為數字

5、…：表格的頭部的一個單元格，表格表頭。

6、表格中列的個數，取決於一行中數據單元格的個數。

總結：

1、表頭，也就是th標籤中的文本默認為粗體並且居中顯示2、table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的3、用css樣式，為表格加入邊框Table 表格在沒有添加 css 樣式之前，是沒有邊框的。

16.標籤

表格還是需要添加一些標籤進行優化，可以添加標題和摘要。

摘要

摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜尋引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。語法：

標題

用以描述表格內容，標題的顯示位置：表格上方。語法：

標題文本 … … … …

17.標籤

_blank --在新窗口中打開連結_parent --在父窗體中打開連結_self --在當前窗體打開連結,此為默認值_top --在當前窗體打開連結，並替換當前的整個窗體(框架頁)一個對應的框架頁的名稱 -在對應框架頁中打開href：Hypertext Reference的縮寫。意思是超文本引用。使用標籤可實現超連結，它在網頁製作中可以說是無處不在，只要有連結的地方，就會有這個標籤。語法：

連結顯示的文本

例如：

click here!

上面例子作用是單擊click here!文字，網頁連結跳轉到http://www.imooc.com這個網頁。

標籤在默認情況下，連結的網頁是在當前瀏覽器窗口中打開，有時我們需要在新的瀏覽器窗口中打開。如下代碼：

click here!

title屬性的作用，滑鼠滑過連結文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大，主要方便搜尋引擎了解連結地址的內容（語義化更友好）。注意：還有一個有趣的現象不知道小夥伴們發現了沒有，只要為文本加入a標籤後，文字的顏色就會自動變為藍色（被點擊過的文本顏色為紫色），顏色很難看吧，不過沒有關係後面我們學習了css樣子就可以設置過來（a{color:#000}),下面會詳細講解。使用mailto在網頁中連結Email地址

標籤還有一個作用是可以連結Email地址，使用mailto能讓訪問者便捷向網站管理者發送電子郵件。

注意：如果mailto後面同時有多個參數的話，第一個參數必須以「?」開頭，後面的參數每一個都以「&」分隔。引號只有一對！

例子：

如果：A 發送郵件給B1、B2、B3，抄送給C1、C2、C3，密送給D1、D2、D3。

那麼：1）A知道自己發送郵件給了B1、B2、B3，並且抄送給了C1、C2、C3，密送給了D1、D2、D3。2）B1知道這封是A發送給B1、B2、B3的郵件，並且抄送給了C1、C2、C3，但不知道密送給了D1、D2、D3。3）C1知道這封是A發送給B1、B2、B3的郵件，並且抄送給了C1、C2、C3，但不知道密送給了D1、D2、D3。4）D1知道這封是A發送給B1、B2、B3的郵件，並且抄送給了C1、C2、C3，而且密送給了自己，但不知道密送給了D2、D3。5）郵箱地址 mailto: 發送6）抄送地址cc: 發送7）密件抄送地址用分號分隔: 發送8）多個收件人、抄送人、密送人 ;bcc: 發送9）郵件主題subject: 發送10）郵件內容body: 發送例子：對此影評有何感想，發送郵件給我

18.標籤

在網頁的製作中為使網頁炫麗美觀，肯定是缺少不了圖片，可以使用

標籤來插入圖片。

語法：

[站外圖片上傳中……(2)]

講解：

src：標識圖像的位置；alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；title：提供在圖像可見時對圖像的描述(滑鼠滑過圖片時顯示的文本)；圖像可以是GIF，PNG，JPEG格式的圖像文件。路徑有兩種填寫方式：絕對路徑、相對路徑相對路徑：相對於我們當前 html 文件的位置來寫路徑即可！./表示當前目錄，../表示上一級目錄

19.標籤

注意:

1、所有表單控制項（文本框、文本域、按鈕、單選框、複選框等）都必須放在標籤之間（否則用戶輸入的信息可提交不到伺服器上哦！）。

2、method:post/get的區別這一部分內容屬於後端程式設計師考慮的問題。

網站怎樣與用戶進行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數據傳送到伺服器端，這樣伺服器端程序就可以處理表單傳過來的數據。

語法：

講解：

：標籤是成對出現的，以開始，以結束。action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。method ：數據傳送的方式（get/post）。用戶名: 密碼:

20.標籤

當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。

語法：

屬性：

舉例：姓名：密碼：替換為的體驗更好一些，placeholder屬性為 HTML 5 的新屬性。placeholder 屬性提供可描述輸入欄位預期值的提示信息（hint）。該提示會在輸入欄位為空時顯示，並會在欄位獲得焦點時消失。

語法：

注釋：placeholder 屬性適用於以下的類型：text, search, url, telephone, email 以及 password。

注意:同一組的單選按鈕，name 取值一定要一致，比如上同一個名稱「gender」，這樣同一組的單選按鈕才可以起到單選的作用！

type：

當type="text"時，輸入框為文本輸入框;當type="password"時, 輸入框為密碼輸入框。hidden 定義隱藏輸入欄位image 定義圖像作為提交按鈕number 定義帶有 spinner 控制項的數字欄位password 定義密碼欄位。欄位中的字符會被遮蔽radio 定義單選按鈕checkbox 定義複選框按鈕range 定義帶有 slider 控制項的數字欄位reset 定義重置按鈕。重置按鈕會將所有表單欄位重置為初始值search 定義用於搜索的文本欄位submit 定義提交按鈕。提交按鈕向伺服器發送數據text 默認。定義單行輸入欄位，用戶可在其中輸入文本。默認是 20 個字符url 定義用於 URL 的文本欄位

name：為文本框命名，以備後臺程序ASP 、PHP使用。

value：為文本輸入框設置默認值。(一般起到提示作用)

21.標籤

當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。

語法：

文本

標籤是成對出現的，以開始，以結束。cols ：多行輸入域的列數。rows ：多行輸入域的行數。在標籤之間可以輸入默認值。

舉例：

聯繫我們在這裡輸入內容...

22.標籤

使用下拉列表框，節省空間。下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。

語法：

顯示的值 ... 屬性，則該選項就被默認選中。

若想實現多選

然後選擇時候按ctrl點滑鼠選中

若想讓某個選項不可選 optgroup 標籤

把相關的選項組合在一起

屬性 label：給選項組命名

屬性 disabled：禁用該選項組

23.標籤

label標籤不會向用戶呈現任何特殊效果，它的作用是為滑鼠用戶改進了可用性。如果你在 label 標籤內點擊文本，就會觸發此控制項。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項上（就自動選中和該label標籤相關連的表單控制項上）。語法：

注意：標籤的 for 屬性中的值應當與相關控制項的 id 屬性值一定要相同。

例子：

男女輸入你的郵箱地址

24.標籤

使用 map 標籤可以給圖片某塊區域加超連結

使用方法：

1）為 map 標籤首先加上 id 屬性用來為 map 標籤定義一個唯一的名稱

2）為了保證兼容性再加上 name 屬性，屬性值與 id 的值相同

3）為 map 標籤所作用的圖片加上 usemap 屬性，屬性值為 #id 名稱

4）在 map 標籤內嵌套 area 標籤來實現給指定區域加連結

shape 屬性：定義連結區域的形狀，常用值 rect、circle coords 屬性：確定區域的精確位置。填寫坐標即可，以父元素左上角為原點，可藉助qq截圖來得到想要的坐標 href 屬性：填寫連結地址即可 alt 屬性：給連結加一些說明信息

例子：

注意：

第一個coords的四個參數中，前兩個參數為矩形的接近原點的頂角的坐標，後兩個參數為對角的坐標。第二個coords的三個參數中，前兩個為圓心坐標，第三個參數為圓的半徑。

25.標籤

創建包含另外一個文檔的內聯框架（即行內框架）

屬性：

frameborder

值：1、0

作用：規定是否顯示框架周圍的邊框。

width值：以像素計的寬度值、以包含元素百分比計的寬度值

作用：定義 iframe 的寬度

height

作用：定義高度

name

作用：給 iframe 命名

scrolling

值：yes、no、auto

作用：規定是否在 iframe 中顯示滾動條

src

作用：規定在 iframe 中顯示的文檔的 URL

可以是本地的 html 文件，也可以是遠程的 html 文件

標籤寫法與嵌套的討論

標籤寫法

元素標記的省略（在 html5 裡面有的標記是可以省略不寫的）

1）不允許寫結束標籤的元素

area,base,br,col,command,embed,hr,img,input,keygen,link,meta,paran,source,track,wbr。這些標籤都是單標籤例如：br 標籤，不可以這樣，只能這樣來關閉標籤。

2）可以省略結束標記的元素有：

li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。

3）可以省略全部標記的元素有

html,head,body,colgroup,tbody

具有 boolean 值得屬性

例如：disabled,readonly，checked 等只寫屬性而不寫屬性值得時候當做 ture 不寫屬性表示 false

屬性值的引號可以省略

要求：屬性值不包含空字符串，，=，『

標籤嵌套探討

1.html 規定我們必須要嵌套著寫的標籤

例如：頁面頭部是嵌套在 head 標籤裡面的，主體內容都是嵌套在 body 標籤裡面的表單的內容是嵌套在 form 標籤裡面的，dt、dd 是嵌套在 dl 標籤裡面的，li 是嵌套到ul 標籤裡面的，等等...

2.塊級元素可以嵌套內聯元素，但是內聯元素不能包含塊元素

我是一個 span 元素 —— 對 div 元素 —— 錯

3.內聯元素可以嵌套內聯元素

—— 對

4.塊級元素與塊級元素嵌套注意點

div 塊級元素是一個容器，幾乎可以存放任何常用標籤，包括自己，我們為什麼要使用 div 來嵌套標籤？這個問題可以用用我們國家的省份劃分來解釋，國家需要劃分不同的省份來利於管理，那麼我們 html 頁面也是的，整個 html 文檔元素太多，我們需要使用 div 標籤將頁面劃分成不同的塊，這樣可以對每塊進行分開管理，學完 css 我們就知道怎麼進行管理了。塊級元素不能放在 p 標籤裡面

—— 錯 —— 錯

li 內可以包含 div 標籤，li 和 div 標籤都是裝載內容的容器，地位平等，沒有級別之分（例如：h1、h2 這樣森嚴的等級制度），要知道 li 標籤連它的父級 ul 或者是 ol 都可以容納的