PHP（二）——HTML基础
生活随笔
收集整理的這篇文章主要介紹了
PHP（二）——HTML基础
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML簡介
HTNL是超文本標記語言 (Hyper Text Markup Language)，是一種文本標記語言，不需要編譯，可以直接被瀏覽器執行（屬于瀏覽器解釋型語言）。
HTML語法
HTML是一種標記語言，組成HTML語法的元素有HTML標簽和HTML屬性。
HTML頁面設計文件基本結構
編寫HTML程序要按照其基本結構形式編寫，一個完整的HTML文件結構由HTML主體標記、頭部標記、主體區標記組成。
主體標簽是<html>...</html>，HTML文件中包含<head></head>和<body></body>，HTML文檔內容都應該包含在這兩個標記之間。
頭部標記用于放置頁面的標題及文件信息等內容，通常將其兩個標記之間的內容統稱HTML的頭部，形式為：<head>...</head>。HTML主要包括頁面的一些基本描述的語句，如引用的JavaScript和CSS一般都在定義HEAD頭元素里，其常用的頭部標有：
- <title>，顯示瀏覽器標題欄上的文件標題，用于說明文件的性質。
- <meta>，定義頁面中的信息。標記是通過屬性來定義文件信息的名稱、內容等，其能為文檔提供關鍵字、描述等多種信息，但這些文件信息并不會出現在瀏覽器頁面的顯示中，只會顯示在源代碼中。
- <base>，設定URL地址，一般常用來設定瀏覽器中文件的絕對路徑。在瀏覽器中瀏覽的時候這些位置會自動附在絕對路徑的后面，成為完整的路徑。
- <style>，設定CSS層疊樣式表內容。
主體區標記是網頁的主要部分，絕大多數HTML的內容都放置在這個區域里，通常位于</head>之后，</html>之前，結構形式：<body>...</body>。<body>常用的屬性有text、bgcolor、background、link（默認鏈接顏色）、alink（單擊時鏈接顏色）、vlink（訪問后鏈接顏色）。
主體區標記中會用到的標簽有字體標簽（如<h1>/<h2>/<h3>、<ALIGN=LEFT/CENTER/RIGHT>、<b>/<i>/<em>/<u>/<s>/<sup>/<sub>/<big>/<small>/<var>/<samp>/tt(打印字體)、<font>等），段落標記<p>，行中斷標簽<br>，不換行標簽<nobr>
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!-- 這是一個html編程示例 --> <!doctype html> <html> <!-- html標簽開始 --> <head> <!-- 頭標記開始，頭部信息，包括要引入的文件也在這部分引用 --> <meta charset="utf-8"> <!-- 這個是必須的 --> <title>文件上傳及數據庫存儲</title> <!-- 頁面標題，在打開頁面時，頭部顯示的名字 --> </head> <!-- 頁面部分，顯示在瀏覽器頁面的內容，在這部分編寫 --> <body> <div> <!-- 塊元素的開始 --> <h1>我的第一個標題</h1> <p>我的第一個段落。</p> </div> </body> </html> |
一個HTML文檔總是以<html>開始，以</html>結束。
解析結果如下：
頁面標題
| 1 2 3 4 5 6 | <!-- 此處是在頁面中顯示的標題，也可用h2,h3,h4,h5,h6標簽 --> <h1 align="center">h1頁面標題</h1> <h2 align="center">h1頁面標題</h2> <h3 align="center">h1頁面標題</h3> <h4 align="center">h1頁面標題</h4> <h5 align="center">h1頁面標題</h5> |
效果：
塊元素
| 1 2 3 4 5 | <div> <p align="center">p標簽表示段落，一個段落之后是換行</p> <p><a href="http://www.w3school.com.cn/html/html_links.asp">超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。</a></p> <p><span>span標簽是被用來組合文檔中的行內元素，本身沒有任何屬性。其在行內定義一個區域，也就是一行內可以被它劃分成好幾個區域，從而實現某種特定效果。</span></p> </div> |
效果：
表單設計
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!-- 表單中包含輸入控件，用于用戶與網站的交互 --> <!-- form標簽用于包含一個表單，其中包含各種輸入控件，通過設置控件的type屬性來確定輸入控件的形式，submit用于交用戶輸入的數據通過get或是post提交到action屬性指定的后臺，然后在后臺對數據進行處理 --> <form name="form1" action="" method="post" enctype="multipart/form-data"> <b>填寫表單</b><br /><!-- br表示換行 --><hr> <div> <!-- 單選按鈕 --> <p><b>單選按鈕</b></p> <input name="myRadio" type="radio" value="163" οnclick="getRadioValue();"/>163郵箱 <input name="myRadio" type="radio" value="189" οnclick="getRadioValue();"/>189郵箱 <input name="myRadio" type="radio" value="gmail" οnclick="getRadioValue();"/>gmail郵箱 <br /> </div> <div> <!-- 文件上傳 --> <p><b>文件上傳</b></p> <input type="file" name="myFile[]" multiple="multiple"/><br/> <br /> </div> <div> <!-- 按鈕 --> <p><b>按鈕</b></p> <input name="setValue" type="button" value="選擇163郵箱" οnclick="setRadioValue('163');"/> <br /> </div> <div> <!-- 多選框 --> <p><b>多選框checkBox:</b></p> <input name="myCheckBox" type="checkbox" value="126" />126郵箱 <input name="myCheckBox" type="checkbox" value="163" />163郵箱 <input name="myCheckBox" type="checkbox" value="189" />189郵箱 <input name="myCheckBox" type="checkbox" value="gmail" />gmail郵箱 <input type="checkbox" id="checkAll" οnclick="checkall()" /> 全選 </div><br /> <div> <!-- 單行文本輸入框 --> <p></p>登錄：</b></p> <p>賬號：<input name="name" type="text" value="126" /></p> <p>密碼：<input name="password" type="password" value="126" /></p> <p>郵箱：<input type="email" name="user_email" class="form-control" placeholder="郵箱" required></p> <br /> </div> <div> <!-- 多行輸入框 --> <p><b>輸入內容:</b></p> <p><textarea name="content" style="width:300px;height:100px;"></textarea> </p> <br /> </div> <div> <!-- 選擇框 --> <p><b>選擇框</b></p> <select name="id"> <option value="1" >選擇1</option> <option value="2" >選擇2</option> <option value="3" >選擇2</option> <option value="4" >選擇4</option> </select> <br /> </div><br /> <!-- 在一個表單中一定要有一個提交的輸入控件，或者是有submit屬性的按鈕，否則無法將用戶體現的數據提交到后臺頁面 --> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </form><br><hr> |
效果：
表格設計
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!-- 表格標簽 --> <div> <p><b>表格</b></p> <table cellpadding="1" border="1"> <!-- 表格的第一行 --> <tr> <td> <span>表格的第一列</span> </td> <td> <span>表格的第二列</span> </td> <td> <span>表格的第...列</span> </td> <td> <span>表格的第n列</span> </td> </tr> <!-- 表格的第二行 --> <tr> <td> <span>表格的第一列</span> </td> <td> <span>表格的第二列</span> </td> <td> <span>表格的第...列</span> </td> <td> <span>表格的第n列</span> </td> </tr> <!-- 第n行 --> <tr> <td> <span>表格的第一列</span> </td> <td> <span>表格的第二列</span> </td> <td> <span>表格的第...列</span> </td> <td> <span>表格的第n列</span> </td> </tr> </table> </div> |
效果：
行和列標簽
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!-- 行列的標簽 --> <div> <p>行和列</p> <ul> <li> 第一行 </li> <li> 第二行 </li> <li> 第三行 </li> </ul> <ul>第一行</ul> <ul>第二行</ul> <ul>第三行</ul> </div> |
效果：
網頁設計應注意的問題
網頁設計的應從用戶體驗、網站的流量、網頁的調出率等方面，尤其注意下面幾個問題：
- 響應式Web開發，針對不同設備優化網頁。在設計網頁的時候應注意智能手機、平板電腦等移動設備進行網頁優化。確保用戶在任何設備上瀏覽網頁時，得到優秀的閱讀體驗。
- 游客瀏覽網頁內容。
- 簡潔的用戶提交表單，應盡可能的減少表單的內容。
- 合理的搜索功能。
- 使用合適的字體，讓用戶輕松的看懂網頁。
- 避免大塊文章，圖文結合。
- 使用清晰的圖片。
總結
以上是生活随笔為你收集整理的PHP（二）——HTML基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 征信不好可以去小银行贷款吗，不可以
- 下一篇： PHP（三）——PHP基础知识