Python全棧Web（HTML標籤大全）

巴黎香榭發表於2018-09-08
Python全棧WebHTML

<!-- H5的宣告方式 -->
<!DOCTYPE html>



<br><br><br>

<h4>
	<p>©ParisGabriel  </p>
	<dir>
		2018/9/1<br>
		QQ:1546079656  <br>
		Eminl:1546079656@qq.com  <br>
	</dir>
	<br><br><br><br><br>
</h4>





<!-- 文件的結束標記 -->
	<html>

	<!-- 網頁的頭部資訊 -->
	<!-- 標題、選項卡圖示、關鍵字、作者、描述等 -->
	<head>
		<!-- 網頁標題 -->
		<title>首頁</title>
		<!-- 字元編碼 -->
		<meta charset="utf-8">
		<!-- 選項卡圖示 -->
		<link rel="shortcut icon" href="web.ico" type="image/x-icon">
	</head>

		<p>
			<img src="./color.jpg">
		</p>
	<!-- 網頁的主體資訊 -->
	<!-- 網頁所呈現的內容等 -->
	<body>
        <!-- 空格：&nbsp;<br>
		換行：<br>
		小於：&lt;<br>
		大於：&gt;<br>
		版權符號：&copy;<br>
		人民幣：&yen;<br> -->
      
		空格： <br>
		換行：<br>
		小於：<<br>
		大於：><br>
		版權符號：©<br>
		人民幣：¥<br>
		斜體顯示：<i>斜體</i><br>
		下劃線：<u>下劃線</u><br>
		文字加粗：<b>加粗</b><br>
		刪除線：<s>刪除</s><br>
		上標記：<sup>上標</sup><br>
		下標記：<sub>下標</sub><br>
		標題：
			<h1>一級標題</h1>
			<h2>二級標題</h2>
			<h3>三級標題</h3>
			<h4>四級標題</h4>
			<h5>五級標題</h5>
			<h6>六級標題</h6>
		水平對其方式：
			<h4 align="left">預設居右</h4>
			<h4 align="center">設定居中</h4>
			<h4 align="right">設定居左</h4>
		水平線：<hr>
		段落：<p></p>
		分塊：
			<div>
				這是<br>
				一塊<br>
				元素<br>
			</div>
		分割槽：這是<span>綠色</span>、<span>黃色</span>、<span>紅色的字型</span>
		有序列表：
			<!-- type 屬性：1、a、A、i -->
			<!-- start屬性：開始位置 -->
			<ol type="1" start="10">
				<li>有序列表列表項一</li>
				<li>有序列表列表項二</li>
				<li>有序列表列表項三</li>
			</ol>
			<!-- type屬性：disc（實心圓）、circle（空心圓）、square（實心方框）、none（不顯示） -->
		無序列表：
			<ul type="square">
				<li>無序列表列表項一</li>
				<li>無序列表列表項二</li>
				<li>無序列表列表項三</li>
			</ul>
			<!-- 有序列表無序列表可以任意巢狀 -->

		影像標籤：
			<!-- 屬性：src（路徑）、width、height、title（滑鼠懸停標題）、alt(錯誤提示) -->
			<p>絕對路徑：</p>
			<img src="C:UsersAdministratorDesktopHTML標籤501018476.jpg" width="800px" height="430px">
			<p>相對路徑：</p>
			<img src="專案.jpg" alt="檔案路徑不存在 專案.jpg" title="專案開發流程">
			<p>
				超連結：
					<!-- target屬性:_self（預設視窗開啟）、_blank（新建視窗開啟）-->
					<a href="https://www.baidu.com" target="_blank">百度</a>
					<a href="C:UsersAdministratorDesktopHTML標籤gvideo-720-2.mp4">視訊</a>
					<a href="圖片.zip">下載</a>
					<a name="bottom">設定錨點</a>
					<a href="#bottom">連結錨點</a>
			</p>
				<!-- 表格：<table> -->
				<!-- 行標籤：<tr> -->
				<!-- 單元格：<td> -->
			<br>
			表格：
			<!-- 屬性:border(邊框)、width、height、align（水平對齊） -->
			<!-- cellpadding（內邊距）、cellspacing（外邊距）、bgcolor（背景色） -->
				<table border="1px" width="200px" height="200px" cellspacing="10px" cellpadding="10px">
					<!-- 屬性：bgcolor、align（水平）、valign（垂直對齊）：top、middle、bottom -->
					<tr>
						<!-- 屬性：width、height、align、valign、bgcolor -->
						<!-- colspan（跨行合併單元格）、rowspan（跨列） -->
						<td align="center">單元格</td>
						<td align="center">單元格</td>
					</tr>
					<tr>

						<td align="center">單元格</td>
						<td align="center">單元格</td>
					</tr>
				</table>
			<br>
			行分組：
				<table border="1px" width="300px" height="300px" cellspacing="10px" cellpadding="10px">
					<thead>
						<tr>
							<td>表頭</td>
							<td>表頭</td>
							<td>表頭</td>
						</tr>
					</thead>
					<tfoot>
						<tr>
							<td>表尾</td>
							<td>表尾</td>
							<td>表尾</td>
						</tr>
					</tfoot>
					<tbody>
						<tr>
							<td>表主體</td>
							<td>表主體</td>
							<td>表主體</td>
						</tr>
					</tbody>
				</table>
			<br>
			合併單元格：
				<table border="1px" width="300px" height="300px" cellspacing="10px" cellpadding="10px">
					<tr>
						<td colspan="2">跨列合併</td>
						<td>單元格</td>
					</tr>
					<tr>
						<td>單元格</td>
						<td rowspan="2">跨行合併</td>
						<td>單元格</td>
					</tr>
					<tr>
						<td>單元格</td>
						<td>單元格</td>
					</tr>
				</table>
			<br>
			表單控制元件：
				<!-- 屬性：action(指定資料提交地址)、method（請求方式） -->
				<form>表單控制元件</form>
			<br>
			表單控制元件：
				<form>
					<!-- 屬性：name（必填自定義名稱）、value（控制元件上的預設值） -->
					<!-- maxlength（字元限制）、placeholder（文字框提示文字） -->
					文字框：<input type="text" name="utext" placeholder="username"><br>
					密碼框：<input type="password" name="upaddeord">
				</form>
			<br>
			選擇框：
				<form>
					<!-- 屬性：name（用來同名分組）、value（控制元件代表的值）、checked（預設選擇） -->
					單選框:<input type="radio" name="radio">
					單選框:<input type="radio" name="radio" checked><br>
					多選框：<input type="checkbox" name="checkbox">
					多選框：<input type="checkbox" name="checkbox">
				</form>
			<br>
			隱藏域:
				<frame>
					<!-- 屬性：name(控制元件名)、value（控制元件值） -->
					<input type="hidden" name="uname" value="張三"><br>
					<!-- 屬性：name(控制元件名稱) -->
					<br>
					檔案選擇框：<input type="file" name="圖譜"><br>
				</frame>
			<br>
			下拉選單：
				<frame>
					<!-- 屬性：name（URL後拼接數、value（選項值） -->
					<select name="province">
						<option value="山東">山東省</option>
						<option value="山西">山西省</option>
					</select>
				</frame>
			<br><br>
			文字域：
				<p>
					<!-- 屬性：name（控制元件名）、cols（列數）、rows（行數） -->
					<textarea name="個性簽名" cols="50" rows="10"></textarea>
				</p>
			按鈕：
				<p>
					<form>
						<!-- 屬性：value（按鈕名） -->
						<input type="submit" name="提交按鈕" value="提交按鈕">
						<input type="reset" name="重置按鈕" value="重置按鈕">
						<input type="button" name="普通按鈕" value="普通按鈕">
					</form>
				</p>
				<!-- 在form外是普通按鈕form內預設是提交 -->
				<!-- 可以新增屬性type：submit、reset、button -->
				<p>
					<button>
						普通按鈕
					</button>
				</p>
			點選塊：
				<form>
					<!-- 將文字和單選框之類的小按鈕合併 點選文字也能選擇 -->
					<label for="male">男</label>
					<input type="radio" name="gender" value="男" id="male">
					<label for="female">女</label>
					<input type="radio" name="gender" value="女" id="female">
				</form>


	</body>
 
<!-- 文件的結束標記 -->
</html>


相關文章