首頁 > 開發者 > JavaScript
【前端】:HTML，】:HTML
前言: 最近開始學前端了，這篇部落客要介紹html的一些主要標籤，寫完這篇部落格，我會用剛學的html做一個簡單的登陸介面~~
一、HTML介紹
HTML(Hyper Text Mark-up Language)超文字標記語言 (HTML)，是一種製作全球資訊網頁面標準語言。相當於定義一套規則，大家都來遵守它。這樣就可以讓瀏覽器根據標記語言的規則去解釋它。
瀏覽器(用戶端)向服務端發出請求，服務端會返回字串，瀏覽器會根據自己規定的規則，將字串渲染成相應的介面。
Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔.
二、<head>頭部
meta
提供有關頁面的元資訊，例：頁面編碼、重新整理、跳轉、針對搜尋引擎和更新頻度的描述和關鍵詞
頁面編碼:
目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字元聲明為 UTF-8:
1 <meta charset="UTF-8">
每2秒重新整理:
1 <meta http-equiv="refresh" content="2"/>
跳轉:
開啟html檔案，5秒後會自動跳轉到www.etiantian.org:
1 <meta http-equiv="refresh" content="5; url=http://www.etiantian.org">
title:
標籤頁顯示為hello: <title>hello</title>
如果要在hello前加小圖片，可到別人的網站，copy圖片到電腦，然後在head頭部加上下面的代碼:
1 <link rel="icon" href="favicon_1c83d380.ico">
:
注意的點:
三、<body>
標籤一般分為兩種: 塊級標籤和內聯標籤.
塊級標籤(會佔一整行) eg:<h1></h1>
內聯標籤(只佔字型所佔的空間大小) eg:<a></a>
1、p標籤
p表示段落，預設段落之間是有間隔的。
2、br標籤
br是換行<br/>
3、a標籤
點擊百度，當前介面則跳轉到www.baidu.com:
1 <a href="http://www.baidu.com">百度</a>
點擊百度，開啟新介面www.baidu.com:
1 <a href="http://www.baidu.com" target="_blank">百度</a>
點擊S2,跳轉到本機檔案s2.html:
1 <a href="s2.html" target="_blank">S2</a>
在html中，每一個標籤都可以有一個id,該id必須是唯一的。點擊"看第二章"，當前介面會跳到第二章的介面:
1 <ahref="#tt">看第二章</a>2 <divstyle="height:1000px;background-color:red;">第一章</div>3 <divid="tt"style="height:1000px;background-color:yellow;">第二章</div>
4、div標籤
用於布局
5、img 圖片標籤
和a標籤結合點擊圖片直接跳轉，title指定滑鼠放到圖片後顯示的內容，style定義寬高，alt指定圖片不存在時的顯示資訊
1 <a href="https://www.baidu.com">2 <img src="i.png" title="大帥鍋" style="height: 300px;width: 220px;" alt="索隆">3 </a>
6、H標籤(標題)
1 <h1>h1</h1>2 <h2>h2</h2>3 <h3>h3</h3>4 <h4>h4</h4>5 <h5>h5</h5>6 <h6>h6</h6>
7、select標籤
1 <select> 2 <option>北京</option> 3 <option>上海</option> 4 <option>廣州</option> 5 <option>惠來</option> 6 </select> 7 8 <select size="2"> 9 <option>北京</option>10 <option>上海</option>11 <option>廣州</option>12 <option>惠來</option>13 </select>14 15 <select size="3" multiple="multiple">16 <option>北京</option>17 <option>上海</option>18 <option>廣州</option>19 <option>惠來</option>20 </select>21 22 <select>23 <optgroup label="廣東省">24 <option>惠來</option>25 <option>廣州</option>26 </optgroup>27 <optgroup label="山西省">28 <option>太原</option>29 <option>平遙</option>30 </optgroup>31 </select>
運行介面:
以第一個複選框為例，在未選時預設是北京，如果想預設為惠來，可加上一個屬性selected，PS:提交資料時，是提交value
1 <option value="4" selected="selected">惠來</option>
8、input系欄標籤
複選框(eg: 興趣): <input type="checkbox"/>
單選框(eg: 男女): <input type="radio"/>
上面兩種框預設都是未選中的狀態，加上checked屬性則預設為選中狀態
1 <input type="radio" checked="checked"/>
radio的name相同，則表示選中的時候是互斥
1 <p>男:<input name="gender" type="radio"/></p>2 <p>女:<input name="gender" type="radio"/></p>
文字框/密碼框/button按鈕/submit按鈕/上傳檔案
1 <input type="text"/>2 <input type="password"/>3 4 <input type="button" value="btn"/>5 <input type="submit" value="sub"/>6 <hr />7 <input type="file"/>
運行介面:
9、form標籤
form相當於一個表單，配合input標籤submit可以把表單的內容提交到指定位置，提交內容以字典的形式提交{‘user’:xx,'email':xx,'pwd':xx},key值為name屬性值
button只是一個簡單的按鈕; submit是提交表單的按鈕(往後台提交資料)
1 <h2>Form</h2> 2 <form action="http://www.baidu.com"> 3 <div> 4 主機名稱:<input name="host" type="text"/> 5 </div> 6 <div> 7 連接埠:<input name="port" type="text"/> 8 </div> 9 <div>10 使用者名稱:<input name="username" type="text"/>11 </div>12 13 <input type="button" value="提交"/>14 <input type="submit" value="提交"/>15 </form>
運行介面:
如果想要提交檔案，需要在其所在的form標籤中添加特殊的一個屬性: enctype="multipart/form-data" method="POST".
action＝“A”: A表示資料提交的地方
1 <form action="A" enctype="multipart/form-data" method="POST">2 <input type="text"/>3 <input type="file"/>4 </form>
10、textarea標籤
可輸入多行的文字框
1 <textarea>zcl</textarea>2 <input type="text" value="zcl"/>
運行介面:
11、label標籤
label標籤中的for屬性與input標籤中的id相同，效果是只要點擊文字就選中了對應的checkbox
1 <label for="cb1">婚否</label>2 <input id="cb1" type="checkbox"/>
12、列表標籤ul,ol,dl
1 <ul> 2 <li>111</li> 3 <li>222</li> 4 </ul> 5 <ol> 6 <li>aaaa</li> 7 <li>bbbb</li> 8 </ol> 9 <dl>10 <dt>標題</dt>11 <dd>內容1</dd>12 <dd>內容2</dd>13 </dl>
運行介面:
13、<hr />標籤
<hr/> 水平分割線
14、table標籤
border="1": 設定邊框 colspan: 合并列 rowspan: 合并行
1 <table border="1"> 2 <thead> 3 <tr> 4 <th>第一列</th> 5 <th>第二列</th> 6 <th>第三列</th> 7 </tr> 8 </thead> 9 <tbody>10 <tr>11 <td colspan="2">h1 h2</td>12 <td>h3</td>13 </tr>14 <tr>15 <td rowspan="2">hh1 hhh1</td>16 <td>hh2</td>17 <td>hh3</td>18 </tr>19 <tr>20 <td>hhh2</td>21 <td>hhh3</td>22 </tr>23 </tbody>24 </table>
運行介面:
15、span標籤
對文本中的一部分進行著色
1 <p>我的母親有 <span style="color:blue">藍色</span> 的眼睛。</p>
總結:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
