首頁 > 開發者 > JavaScript
Web前端學習——HTML，web前端html
HTML其實還是蠻容易學習的，無非就是一些標籤、格式的填寫，大學的時候也做過網站設計，所以這裡主要記錄一些常用的HTML標籤、屬性以及書寫方法等。
一、常見HTML格式
主要包含檔案type，html標籤、head標籤、body標籤三個主題標籤，其中Head主要包含字元集、描述、關鍵字等資訊，而Body標籤裡是HTML的主要內容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body></html>
二、head標籤
1、自閉合標籤
（1）<meta>標籤
<meta charset="UTF-8"> ##設定html內容字元集
<meta http-equiv="refresh" content="3"> ##每隔3秒重新整理一次
<meta http-equiv="refresh" content="3;Url=http://www.hao123.com"> ##隔3秒重新整理並跳轉值url指定網頁
<meta name="keywords" content="測試網頁,網頁頭部"> ##指定網頁關鍵字，利於SEO，網頁搜尋排序
<meta name="description" content="描述資訊"> ##指定網頁描述資訊
（2）link
<link rel="shortcut icon" href="image/fac.ico"> ##頭部表徵圖
（3）stype
（4）script
2、主動閉合標籤
（1）title
<title>網頁頭部標題內容</title> ##網頁頭部顯示內容
三、body標籤
1、a標籤：
定義超連結，最重要的屬性為href,超連結和錨使用
##普通超連結<a href="http://www.hao123.com" target="_blank"> 中國人</a>##通過a標籤做錨點<a href="#id1" > 第一章 </a><a href="#id2"> 第二章 </a><a href="#id3"> 第三章 </a><div id="id1" style="height:100px"> 第一章內容 </div><p id="id2"style="height:300px"> 第二章內容 </p><div id="id3"style="height:500px"> 第三章內容 </div>
2、p標籤：
定義段落，不換行,段落段落之間有間距
<p> 段落標籤，不換行</p>
3、br標籤：
換列標籤
<p>段落標籤，不<br>換行</p>
4、h標籤：
標題標籤，從h1-h6表示字型從大到小，加粗顯示
<h1>中國人</h1><h2>中國人</h2><h3>中國人</h3><h4>中國人</h4><h5>中國人</h5><h6>中國人</h6>
5、span標籤
白板，行內標籤，段與段之間只有空格，不換行
<span>中國人</span><span>中國人</span><span>中國人</span>
6、div標籤
白板，塊級標籤
<div>中國人</div><div>中國人</div><div>中國人</div>
7、input標籤
標準輸入框
<input type="text" name="username" value="Tom" ><br><input type="password" name="pwd" value="123456" ><input type="button" value="註冊" ><input type="submit" value="提交" ><input type="reset" value="重設" ><input type="checkbox" name="雙選" value="1" checked="checkted" ><input type="radio" name="單選" value="1" checked="checkted" ><input type="file" name="fname" enctype="multipart/form-data" >
8、form標籤
表單使用,get方式提交資料拼接顯示在url，post方式提交資料不拼接顯示在url上（更安全）
<form action="http://www.hao123.com" method="get"> <input type="text" name="username" value="Tom" ><br> <input type="password" name="pwd" value="123456" > <input type="button" value="註冊" > <input type="submit" value="提交" > <input type="checkbox" name="雙選" value="1" > <input type="radio" name="單選" value="1" ></form>
9、textarea標籤
接受多行文本輸入，其中可以輸入多行資料
<textarea name="username" >預設值</textarea>
10、select標籤
下拉框標籤，通過option指定下拉框內容
<select name="city" > <option value="1" selected="selected">北京</option> <option value="2">上海</option> <option value="3">南京</option></select><select name="city" size=10 mutiple="mutiple"> <option value="1" selected="selected">北京</option> <option value="2">上海</option> <option value="3">南京</option></select><select name="city"> <optgroup label="省分"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">南京</option> </optgroup></select>
11、img標籤
圖片標籤
<img src="C:\Users\Desktop\001.jpg" style="height: 200px;width: 200px" ><img src="file:///C:/Users/Desktop/001.jpg"><a href="http://www.hao123.com"> <img src="001.jpg" style="height: 200px;width: 200px" title="名稱" alt="描述"></a>
12、ul標籤
無序列表，對應的li標籤標記列表行
<ul> <li>第一行</li> <li>第二行</li> <li>第三行</li></ul>
13、ol標籤
有序列表，對應的li標籤標記列表
<ol> <li>第一行</li> <li>第二行</li> <li>第三行</li></ol>
14、dl標籤
分層列表，用dt標籤表示標題，用dd標籤表示列表內容
<dl> <dt>第一層</dt> <dd>1.第一層列表</dd> <dd>2.第一層列表</dd> <dd>3.第一層列表</dd> <dt>第二層</dt> <dd>1.第二層列表</dd> <dd>2.第二層列表</dd> <dd>3.第二層列表</dd></dl>
15、table標籤
表格標籤，通過tr表示行，td表示單表格
（1）第一種table寫法
<table border="1.5"> <tr> <td>第一個行第一個表格</td> <td>第一個行第二個表格</td> <td>第一個行第三個表格</td> <td>第一個行第四個表格</td> </tr> <tr> <td>第二個行第一個表格</td> <td>第二個行第二個表格</td> <td>第二個行第三個表格</td> <td>第二個行第四個表格</td> </tr></table>
（2）第二種table寫法
<table border="1.2"> <thead> <tr> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> <th>表頭4</th> </tr> </thead> <tbody> <tr> <td>第一列資料</td> <td>第二列資料</td> <td>第三列資料</td> <td>第四列資料</td> </tr> <tr> <td>第一列資料</td> <td>第二列資料</td> <td>第三列資料</td> <td>第四列資料</td> </tr> </tbody></table>
<td colspan="2">第一個行第二個表格</td> ##橫向合并合併儲存格
<td rowspan="2">第一個行第四個表格</td> ##縱向合併儲存格
16、lable標籤
用於標記文本輸入
<label for="username"> 使用者名稱: </label><input id="username"type="text" >
17、fieldset標籤
用於文字框
<fieldset> <legend> 登陸 </legend> <label for="username"> 使用者名稱: </label> <input id="username"type="text" ><br> <label for="password"> 密 碼: </label> <input id="password"type="password" ></fieldset>
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
