<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • html文字上下居中代碼(html零基礎入門教程)


    HTML基礎教程上篇介紹了HTML的基礎知識及一些常用的標簽,本篇文章主要介紹HTML的樣式、表單、Table、框架等內容。下面我們就一起來了解吧!

    01 HTML樣式

    所有的HTML可以通過設置其style屬性來設置標簽的樣式,下面我們就來演示幾個常用的HTML樣式設置。

    1)設置標簽寬度與高度

    我們創建一個div標簽,然后設置其高度與寬度,但由于div標簽默認沒有顏色我們看不到效果,所以在設置其高度與寬度時,同時為其設置一個背景顏色,具體示列如下:

    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.   <title>HTML基礎教程</title>  
    5.   <meta charset="utf-8" />  
    6. </head>  
    7. <body>  
    8.   <!-- 給div寬度設置為一個長寬都為400px的正方形塊,同時背景色代碼塊為#46a6ff -->  
    9.   <div style="width: 400px; height: 400px; background-color: #46a6ff;"></div>  
    10. </body>  
    11. </html>  
    程序員都必掌握的前端教程之HTML基礎教程(下)

    2)設置字體類型與大小

    我們在上面div塊中加入文字,并給加入的文字設置字體類型與大小,同時為其加粗,具體示列如下:

    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.   <title>HTML基礎教程</title>  
    5.   <meta charset="utf-8" />  
    6. </head>  
    7. <body>  
    8.   <!-- font-family是設置字體類型;font-size是設置字體大小;font-weight是給字體加粗  -->  
    9.   <div style="width: 400px; height: 400px;  
    10.         background-color: #46a6ff; font-family: 'Microsoft YaHei'; font-size: 40px; font-weight: bold">  
    11.     我是div塊  
    12.   </div>  
    13. </body>  
    14. </html>  
    程序員都必掌握的前端教程之HTML基礎教程(下)

    3)設置字體水平與垂直居中

    上面我們給div加了字體樣式但并沒有居中,現在我們來看看怎么設置字體居中

    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.   <title>HTML基礎教程</title>  
    5.   <meta charset="utf-8" />  
    6. </head>  
    7. <body>  
    8.   <!-- text-align給文字設置水平居中;line-height將其值設為與height一致,文字內容就可以垂直居中   -->  
    9.   <div style="width: 400px; height: 400px;  
    10.         background-color: #46a6ff; font-family: 'Microsoft YaHei';  
    11.         font-size: 40px; font-weight: bold;  
    12.         text-align: center; line-height: 400px">  
    13.     我是div塊  
    14.   </div>  
    15. </body>  
    16. </html>  
    程序員都必掌握的前端教程之HTML基礎教程(下)

    02 HTML Table

    在HTML頁面開發時我們經常會用到表格進行數據展示,HTML的表格是由標簽<table>來定義的,每個表格均有若干行(<tr> 標簽定義),每行被分割為若干單元格(由<td> 標簽定義)。表格中常用的標簽與樣式屬性如下:

    程序員都必掌握的前端教程之HTML基礎教程(下)

    下面我們創建兩個表格示列,分別設置上述屬性具體如下

    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.   <title>HTML基礎教程</title>  
    5.   <meta charset="utf-8" />  
    6. </head>  
    7. <body>  
    8.   <!-- 表格示列1 -->  
    9.   <table border="1" bordercolor="black" width="450" height="100">  
    10.      <caption>表格示列1</caption>  
    11.      <tr bgcolor="red" > <!-- tr為一行的起始與結束 -->  
    12.        <th>Column 1</th> <!-- 表格頭 -->  
    13.        <th>Column 2</th>  
    14.        <th>Column 3</th>  
    15.      </tr>  
    16.   
    17.     <tr bgcolor="cyan"> <!-- 設置表格背景色 -->  
    18.       <td>Data 1</td> <!-- td單元格 -->  
    19.       <td>Data 2</td>  
    20.       <td>Data 3</td>  
    21.     </tr>  
    22.   
    23.     <tr bgcolor="yellow">  
    24.       <td colspan="2">New Data 1</td> <!-- 設置該單元格合并這一行上的兩列 -->  
    25.       <td>New Data 2</td>  
    26.     </tr>  
    27.   </table>  
    28.   
    29.   <!-- 表格示列2 -->  
    30.   <table border="1" bordercolor="black" width="80%" height="100"> <!-- 設置單元格寬與高為百分比 -->  
    31.      <caption> 表格示列2</caption>  
    32.       <tr bgcolor="red" >  
    33.         <th>Column 1</th>  
    34.         <th>Column 2</th>  
    35.         <th>Column 3</th>  
    36.      </tr>  
    37.   
    38.      <tr>  
    39.        <td rowspan="2">Data 1</td> <!-- 設置該單元格合并這一列上的兩行 -->  
    40.        <td>Data 2</td>  
    41.        <td>Data 3</td>  
    42.      </tr>  
    43.   
    44.      <tr>  
    45.       <td>Data 2</td>  
    46.       <td>Data 3</td>  
    47.      </tr>  
    48.   </table>  
    49. </body>  
    50. </html>  
    程序員都必掌握的前端教程之HTML基礎教程(下)

    03 HTML表單

    HTML 表單是一個包含表單元素的區域,用于搜集不同類型的用戶輸入。HTML表單在我們日常瀏覽網頁時很常見,比如各網站的登錄頁面,就是典型的HTML表單應用。HTML表單常用的標簽元素有如下幾種:

    1)Text input:字符輸入框,一般賬戶與密碼輸入都是用的該標簽

    2)Text area:文本輸入框,一般需要輸入較多文本內容使用

    3)Radio button:單選框

    4)Checkbox:多選框

    5)Select box:選擇框

    6)File select:文件選擇框

    7)Buttons:按鈕

    表單元素常用的屬性及值設置如下表所示:

    程序員都必掌握的前端教程之HTML基礎教程(下)

    結合上表我們創建一個表單示列,按照上表的屬性值進行設置,具體操作如下

    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.   <title>HTML基礎教程</title>  
    5.   <meta charset="utf-8" />  
    6. </head>  
    7. <body>  
    8. <form>  
    9.   <h4>Input輸入框</h4>  
    10.   用戶名 : <input type="text" name="user_name" size="4" value="成哥" maxlength="10"><br>  
    11.   密碼 : <input type="password" name="user_pass" ><br>  
    12.   <h4> Radio單選框:(name值設置時必須一致)</h4>  
    13.     <input type="radio" name="r_gender"> Male  
    14.     <input type="radio" name="r_gender"> Female  
    15.     <input type="radio" name="r_gender" checked> Infant  
    16.   <h4> Check box多選框 :(name值設置時必須不一樣)</h4>  
    17.     <input type="checkbox" name="c_male" checked> Male  
    18.     <input type="checkbox" name="c_female"> Female  
    19.     <input type="checkbox" name="c_infant"> Infant  
    20.   <h4> Select box :選擇框(單選)</h4>  
    21.     <select name="s_box">  
    22.       <option value="s_male">Male</option>  
    23.       <option value="s_female" selected>Female</option>  
    24.       <option value="s_infant">Infant</option>  
    25.     </select>  
    26.   <h4> Select box :擇框(多選)</h4>  
    27.   <!-- 選擇項默認展示4個,其它的選擇內容需要通過鼠標滾動 -->  
    28.   <select name="s_box" size="4" multiple>  
    29.     <option value="s_male" selected>Male</option>  
    30.     <option value="s_female" selected>Female</option>  
    31.     <option value="s_infant">Infant 1</option>  
    32.     <option value="s_infant" selected>Infant 2</option>  
    33.     <option value="s_infant">Infant 3</option>  
    34.     <option value="s_infant">Infant 4</option>  
    35.   </select>  
    36.   <h4> Text文本輸入框</h4>  
    37.     <textarea rows="10" cols="80" name="txt_area">文本框  
    38.        HTML基礎教程  
    39.        表單示列  
    40.     </textarea>
    41.   </form>
    42. </body>
    43. </html>
    程序員都必掌握的前端教程之HTML基礎教程(下)

    下面我們再創建一個button的表單示列,具體如下

    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.   <title>HTML基礎教程</title>  
    5.   <meta charset="utf-8" />  
    6. </head>  
    7. <body>  
    8.   
    9.   <!-- 設置表單提交方式為get, 跳轉的url為"http://www.baidu.com" -->  
    10.   <form method="get" action="http://www.baidu.com">  
    11.     <h4> Buttons按鈕表單示列</h4>  
    12.     用戶名 : <input type="text" name="user_name" size="4" value="成哥" maxlength="16"><br>  
    13.     密碼 : <input type="password" name="user_pass" ><br>  
    14.     <!-- 點擊在游覽器上方顯示Say Hello -->  
    15.     <input type="button" onclick="alert('Hello')" name="b_alert" value="Say Hello"/><br>  
    16.     <!-- 點擊跳轉到百度 -->  
    17.     <input type="submit" name="b_submit" value="百度走起"/>  
    18.     <!-- 點擊重置會重置表單內輸入的內容 -->  
    19.     <input type="reset" name="b_reset" value="重置"/><br>  
    20.   </form>  
    21.   
    22. </body>  
    23. </html>  
    程序員都必掌握的前端教程之HTML基礎教程(下)

    04 HTML框架iframe

    使用HTML框架可以在同一個瀏覽器窗口中顯示多個頁面,iframe的語法格式如下所示

    1. <iframe src="URL">  
    2.   <!-- URL指向不同的頁面 -->  
    3. </iframe>  
    我們現在創建一個iframe框架使用示列具體如下
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.   <title>HTML基礎教程</title>  
    5.   <meta charset="utf-8" />  
    6. </head>  
    7. <body>  
    8.   
    9.   <h4>iframe使用示列一(簡單的iframe使用)</h4>  
    10.   <!-- 給iframe顯示區域設置寬度為800,高度為200,同時去掉其邊框 -->  
    11.   <iframe src="http://www.baidu.com" width="800" height="200" frameborder="0"></iframe>  
    12.   
    13.   <br/>  
    14.   <br/>  
    15.   
    16.   <h4>iframe使用示列二(通過點擊指定鏈接在iframe中顯示)</h4>  
    17.   <!-- a標簽中的target名稱必須與iframe的name一致都為qq -->  
    18.   <a >點擊我在iframe中顯示qq頁面</a>  
    19.   <iframe name="qq" width="800" height="200" frameborder="0"></iframe>  
    20. </body>  
    21. </html>  
    程序員都必掌握的前端教程之HTML基礎教程(下)

    05 總結

    至此我們《HTML基礎教程》就全部講完了,有任何問題都可以在文章后面留言。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦!

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费