時間：2023-08-29 05:06:01 | 來源：網(wǎng)站運營
時間：2023-08-29 05:06:01 來源：網(wǎng)站運營
小白7天入門PHP Web開發(fā) - Day 2 HTML的基礎(chǔ)應(yīng)用：《小白7天入門PHP Web開發(fā)》系列文章，面向單純善良的完全不懂Web開發(fā)編程的入門速成課程，小白們?nèi)绻信d趣可以研讀此系列文章，也可以連線提問。各路大神有何指教還請指點一二。希望各路大神手下留情，注意維護自己的身份和形象。拜謝各位。上一篇文章 我們比較通俗簡單的了解了整個網(wǎng)站的訪問過程，以及涉及到了哪些技術(shù)，為了快速入門，我們廢話不多講，從本篇文章開始，我們就以 留言評論功能（簡版） 為例，講解如何開發(fā)一個簡單的web網(wǎng)站。
在線咨詢
<!-- index.html --><!-- HTML頁面代碼基礎(chǔ)結(jié)構(gòu) --><!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>頁面標(biāo)題（瀏覽器標(biāo)簽上看到的內(nèi)容）</title> <link rel="stylesheet" href=""></head><body> 頁面主體內(nèi)容（網(wǎng)頁上看到的內(nèi)容）</body></html>仔細觀察一下上面這個代碼，看不懂沒關(guān)系，正常，但是，有沒有什么發(fā)現(xiàn)？<html></html><head></head><title></title><body></body>還有還有，那些不成對出現(xiàn)的，看到了嗎？<meta><link>以上這些東西，在HTML代碼里面，我們都叫她們 標(biāo)簽，她們是HTML的最基本的單位，用來組織各個元素然后組成網(wǎng)頁。<!-- 注釋（備注）內(nèi)容 -->好，我們一起總結(jié)一下，以上基礎(chǔ)代碼我們了解了什么基本內(nèi)容？<!-- 1.基礎(chǔ)的HTML代碼結(jié)構(gòu) --><!-- 2.標(biāo)簽 --><!-- 3.標(biāo)簽屬性 --><!-- 4.HTML代碼注釋 -->你可以不用考慮太多，我們現(xiàn)在寫HTML代碼的話就直接先把上面的結(jié)構(gòu)敲出來，然后再在里面添加?xùn)|西就行了。通常其他標(biāo)簽都放在<body>標(biāo)簽內(nèi)。下面我列了一些常用的或者我們即將可能用到的標(biāo)簽。<!-- index.html --><!-- HTML頁面代碼基礎(chǔ)結(jié)構(gòu) --><!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>頁面標(biāo)題（瀏覽器標(biāo)簽上看到的內(nèi)容）</title> <link rel="stylesheet" href=""></head><body> <!-- 內(nèi)容塊標(biāo)簽 --> <div>我是內(nèi)容塊，里面可以放下面所有的其他標(biāo)簽</div> <!-- 段落標(biāo)簽 --> <p>我是段落標(biāo)簽，也可以放下面所有的其他標(biāo)簽，并且我會自動上下?lián)Q行</p> <!-- 內(nèi)聯(lián)文本標(biāo)簽 --> <span>我是內(nèi)聯(lián)文本標(biāo)簽，當(dāng)然也可以放，但一般放別人里面，我可以和同樣標(biāo)簽放一行不會自動換行</span> <!-- 圖片標(biāo)簽 --> <img src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> <!-- 無序列表 --> <ul> <li>項目1</li> <li>項目2</li> </ul> <!-- 有序列表 --> <ol> <li>項目11</li> <li>項目22</li> </ol> <!-- 輸入框 --> <input type="text" name="input" value="我現(xiàn)在是一個文本輸入框"> <!-- 文本域標(biāo)簽 --> <textarea>我是文本域，可以放很多文本內(nèi)容</textarea> <!-- 下拉選擇菜單 --> <select> <optgroup>我是下拉菜單的分組</optgroup> <option>我是分組下的下拉選項</option> </select> <!-- 表格標(biāo)簽，行tr、列td --> <table border="1"> <tr> <td>我是表格第1行第1列</td> <td>我是表格第1行第2列</td> </tr> <tr> <td>我是表格第2行第1列</td> <td>我是表格第2行第2列</td> </tr> </table> <button>我是按鈕</button> </body></html>更多的HTML知識和標(biāo)簽可以參考 <!-- board.html --><!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>留言評論頁面</title></head><body> <!-- 已經(jīng)留言評論的內(nèi)容 --> <div> 這是展示的留言評論內(nèi)容 </div> <!-- 提交留言和評論 --> <div> 我即將在這里提交新的留言評論 </div></body></html>②留言評論展示內(nèi)容，從（圖 2-3）能看出，包含了幾行內(nèi)容她們的從屬關(guān)系或者叫層疊關(guān)系是評論，評論下面的評論回復(fù)，同時有多條評論、多條回復(fù)，評論中有評論者的頭像和名稱以及評論內(nèi)容、時間等。有沒有發(fā)現(xiàn)多條評論或者多條回復(fù)就像一個列表（或叫清單，1什么什么2什么什么），上面我們有提到列表標(biāo)簽<ul>。<!-- board.html --><!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>留言評論頁面</title></head><body> <!-- 已經(jīng)留言評論的內(nèi)容 --> <div> <!-- 留言評論列表 --> <ul style="list-style: none;"> <li> <!-- 評論內(nèi)容 --> <p> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>張五兒：</span> <span>我就是趴窗口看啊，不然能怎么看</span> <span>22：29</span> </p> <!-- 回復(fù)內(nèi)容 --> <p> <!-- 回復(fù)列表 --> <ul style="list-style: none;"> <li> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>李二狗 <span>回復(fù)</span> 張五兒：</span> <span>666</span> <span>22：29</span> </li> </ul> </p> </li> <li> <!-- 評論內(nèi)容 --> <p> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>張五兒：</span> <span>我就是趴窗口看啊，不然能怎么看</span> <span>22：29</span> </p> <!-- 回復(fù)內(nèi)容 --> <p> <!-- 回復(fù)列表 --> <ul style="list-style: none;"> <li> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>李二狗 <span>回復(fù)</span> 張五兒：</span> <span>666</span> <span>22：29</span> </li> </ul> </p> </li> </ul> </div> <!-- 提交留言和評論 --> <div> 我即將在這里提交新的留言評論 </div></body></html>③接下來我們看一下提交留言評論的部分包含了那些內(nèi)容，一個文本框（上面我們有提到的input標(biāo)簽這里用）、一個文本域（textarea）和一個提交按鈕（button），我也把他們都先寫下來，一行一個，我們可以用<p></p>標(biāo)簽也可以用<div></div>標(biāo)簽來包裹起來，他們都可以實現(xiàn)自動換行。<!-- board.html --><!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>留言評論頁面</title></head><body> <!-- 已經(jīng)留言評論的內(nèi)容 --> <div> <!-- 留言評論列表 --> <ul style="list-style: none;"> <li> <!-- 評論內(nèi)容 --> <p> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>張五兒：</span> <span>我就是趴窗口看啊，不然能怎么看</span> <span>22：29</span> </p> <!-- 回復(fù)內(nèi)容 --> <p> <!-- 回復(fù)列表 --> <ul style="list-style: none;"> <li> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>李二狗 <span>回復(fù)</span> 張五兒：</span> <span>666</span> <span>22：29</span> </li> </ul> </p> </li> <li> <!-- 評論內(nèi)容 --> <p> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>張五兒：</span> <span>我就是趴窗口看啊，不然能怎么看</span> <span>22：29</span> </p> <!-- 回復(fù)內(nèi)容 --> <p> <!-- 回復(fù)列表 --> <ul style="list-style: none;"> <li> <span> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span>李二狗 <span>回復(fù)</span> 張五兒：</span> <span>666</span> <span>22：29</span> </li> </ul> </p> </li> </ul> </div> <!-- 提交留言和評論 --> <div> <form action="" method="get"> <!-- 標(biāo)題，此處標(biāo)題在上面其實并沒有用到，大家理解怎么使用HTML就可以了 --> <p> <input type="text" name="title" placeholder="請輸入標(biāo)題"> </p> <!-- 內(nèi)容 --> <p> <textarea name="content" placeholder="請輸入內(nèi)容"></textarea> </p> <!-- 按鈕 --> <p> <button type="submit">提交</button> </p> </form> </div></body></html>到這里，我們是時候展現(xiàn)真正的實力了~！瀏覽器打開這個文件，看下效果~！關(guān)鍵詞：基礎(chǔ),入門
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
