前端的那些基本标簽【a table tr caption image等等......】

🍖🍖 作者 ： 不良使

🍖🍖🍖🍖 潛力創作新星 華為雲享專家部落客

🍖🍖🍖🍖🍖 Python+Android

🍖🍖🍖🍖🍖🍖 部落格記錄學習的思路，項目和錯誤,尋找志同道合的朋友

🍖🍖🍖🍖🍖🍖🍖 如果覺得有幫助記得一鍵三連 ┗|｀O′|┛ 嗷~~

前端的那些基本标簽

• ​​🍓🍓表單類型​​
• ​​🍓🍓表格結構​​
• ​​🍓🍓 圖像标簽屬性​​

​

​html頁面的骨架，相當于人的骨頭，隻有骨頭是不是看着有點瘆人，隻有HTML也是如此。​

​

​

​css,相當于把骨架修飾起來，相當于人的皮肉。​

​

​

​js(javascripts),動起來，相當于人的血液，大腦等一切能使人動起來的器官或者其他的。​

​

在刷題之前先介紹一下牛客。Leetcode有的刷題牛客都有，除此之外牛客裡面還有招聘（社招和校招）、一些上岸大廠的大佬的面試經驗。 ​

​牛客是可以伴随一生的程式設計軟體（完全免費），從學校到社會工作，時時刻刻你都可以用到​

​，感興趣的可以去注冊試試​​可以伴随一生的刷題app​​

刷題頁面，功能完善，短時間堅持可看效果。

檢視出現此處，篩標明制，查詢指定大廠出現頻率

首頁功能強悍，完全免費

🍓🍓表單類型

問題 1：

請依次寫出以下類型的輸入框。

1、 類型為密碼，預設值為"nowcoder"

2、類型為複選框，且狀态為已勾選

​

​解答：​

​

<form>
    <!-- 補全代碼 -->
    <input type="password" value="nowcoder"/>
    <input type="checkbox" checked/>
</form>      

總結：

🥭🥭1、表單 input是單标簽 ，但凡和輸入相關的都用它。

🥭🥭2、password是密碼，checked是選中checkbox, value預設值，這些都是固定的類型，記下來或者多敲敲就記住了。

🍓🍓表格結構

問題 2：

請寫出具有表格标題為"nowcoder"的2行3清單格結構。

​

​解答：​

​

<table border=1px>
    <!-- 補全代碼 -->
    <caption>nowcoder</caption>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
         <td>2</td>
         <td>2</td>
         <td>2</td>
     </tr>
</table>      

總結：

🥭🥭​

​<table></table>​

​定義一個表格

🥭🥭​

​<tr></tr>​

​被包含的都是一列

🥭🥭​

​<th></th>​

​粗體的标題，是被包含的内容加粗

🥭🥭​

​<td></td>​

​就是内容

🥭🥭​

​table裡面的border屬性就是邊界​

​，可以看見小框框和小框框，小框框和大框框之間的距離都是1px,是不是看着太醜了，這個沒關系，後面有css函數可以優化。

🍓🍓 圖像标簽屬性

問題 3：

請寫出具有标題屬性和代替文本屬性的圖檔标簽。

<!-- 補全代碼 -->
<img title="" alt="">      

總結：

🥭🥭1、​​

​<img src=" 圖檔位址 " title=" 标題屬性 " alt=" 代替文本屬性 " >​

​​

🥭🥭2、title:滑鼠移入圖檔顯示的值 alt:圖檔無法加載時顯示的圖檔

🥭🥭3、一般alt很常用，在工程項目中，一般項目很大由數十個人完成前端頁面工作。假如項目在你的電腦上圖檔可以顯示，别人的電腦運作同一個項目無法顯示圖檔，這時候可以根據alt快速的找到是拿一張圖檔顯示不出來，提高了問題解決的效率。

🍓🍓

問題 4:

請寫出可以在新視窗打開文檔的a标簽。

<!-- 補全代碼 -->
<a href="www.baidu.com" target="_blank">百度</a>      

總結：

🥭🥭a 标簽的href屬性是跳轉連結，項目中常用于項目内各功能頁面跳轉

🥭🥭預設target的值為_self，就是以目前頁面加載跳轉連結

🥭🥭​

​target="_blank"​

​ ,重新建立一個頁面執行加載跳轉鍊