Html標籤屬性學習

阿新 • • 發佈：2020-12-19

技術標籤：HTML html css

1.標籤學習

一級標籤

二級標籤

三級標籤

四級標籤

五級標籤

六級標籤

		<!--h1~h6：標題標籤 -->
		<h1>一級標籤</h1>
		<h2>二級標籤</h2>
		<h3>三級標籤</h3>
		<h4>四級標籤</h4>
		<h5>五級標籤</h5>
		<h6>六級標籤</h6>

踏踏實實寫程式碼

勤勤懇懇做專案

<!--p：段落標籤-->
		
		<p> 
踏踏實實寫程式碼</p>
		<p>勤勤懇懇做專案</p>

用良心寫文章

做真實的自己

<!--br：換行標籤
	span：文字標籤-->
		
		<span>用良心做教育</span>
		<br />
		<span>做真實的自己</span>

水菜麗.jpg

<!--
			圖片標籤 -- 調整影象尺寸(畫素)
	img：圖片標籤
			
	屬性：	src：資源路徑
			width：寬度
			height：高度 
-->
			<!--
			圖片標籤 -- 調整影象尺寸(比例)
			10%：按照頁面長度的比例 --> 

        <img src= "img/水菜麗.jpg" width="10%" height="10%"/>

<!--圖片標籤 -- 為影象設定替換文字 -->
<img src= "img/水菜麗1.jpg" alt="水菜麗.jpg圖片載入失敗..."/>
<!--圖片標籤 -- 為影象設定網路地址 -->       
<img src= "https://img.796t.com/res/2020/12-19/10/e160e8a9ecef6507cd6458f7ac742156.jpg" width="221px" height="275px"/>

無序列表1
無序列表2
無序列表3
無序列表4

<!--
			ul：無序列表
			li：項
			
			type：樣式
				circle-空心圓
				disc-實心圓
				square-實心正方形
        -->
		
		<ul type="square">
			<li>無序列表1</li>
			<li>無序列表2</li>
			<li>無序列表3</li>
			<li>無序列表4</li>
		</ul>

註冊-注意事項：

必填密碼
密碼與確認密碼必須一致
必須繫結手機號

<!--
			註冊提示
        -->
		
		<h3>註冊-注意事項：</h3>
		<ul type="square">
			<li>必填密碼</li>
			<li>密碼與確認密碼必須一致</li>
			<li>必須繫結手機號</li>
		</ul>

有序列表1
有序列表2
有序列表3
有序列表4

<!--
			ol：有序列表
			li：項
			
			type：樣式
				1-數字
				a-小寫字母
				A-大寫字母
				i-小寫羅馬數字
				I-大寫羅馬數字
        -->
		
		<ol type="I">
			<li>有序列表1</li>
			<li>有序列表2</li>
			<li>有序列表3</li>
			<li>有序列表4</li>
		</ol>

開戶流程：

填寫個人資訊
開戶並設定密碼
存入初識金額
開通網上銀行

<!--銀行開戶-->
<h3>開戶流程：</h3>
		<ol >
			<li>填寫個人資訊</li>
			<li>開戶並設定密碼</li>
			<li>存入初識金額</li>
			<li>開通網上銀行</li>
		</ol>

定義列表

麻生希

18歲出道，在東京熱不熱公司擔任AV程式設計師一職，出道既是巔峰，2年後熟讀原始碼，晉升為技術總監。。

<!--定義列表-->
<dl>
			<dt>麻生希</dt>
			<dd>8歲出道，在東京熱不熱公司擔任AV程式設計師一職，出道既是巔峰，2年後熟讀原始碼，晉升為技術總監。</dd>
</dl>

列表案例

葷菜
1. 北京烤鴨
2. 水煮肉片
3. 毛血旺
4. 鮮椒兔
素菜
1. 炒土豆
2. 乾煸四季豆
3. 地三鮮
4. 虎皮青椒
5. 素炒西蘭花
湯
1. 黃瓜皮蛋湯
2. 西紅柿煎蛋湯
3. 紫菜蛋花湯

<ul>
			<li>
				<h3>葷菜</h3>
				<ol>
					<li>北京烤鴨</li>
					<li>水煮肉片</li>
					<li>毛血旺</li>
					<li>鮮椒兔</li>
				</ol>
			</li>
			<li>
				<h3>素菜</h3>
				<ol>
					<li>炒土豆</li>
					<li>乾煸四季豆</li>
					<li>地三鮮</li>
					<li>虎皮青椒</li>
					<li>素炒西蘭花</li>
				</ol>
			</li>
			<li>
				<h3>湯</h3>
				<ol>
					<li>黃瓜皮蛋湯</li>
					<li>西紅柿煎蛋湯</li>
					<li>紫菜蛋花湯</li>
				</ol>
			</li>
		</ul>

在當前頁面中開啟
 在新頁面開啟百度

<!--
			a：超連結
			
			href：連線地址
			target：開啟連結方式
				_self：在當前卡頁中開啟
				_blank：在新卡頁中開啟
        -->
		
		<a href="http://www.baidu.com" target="_self">百度</a>
		
		<a href="http://www.baidu.com" target="_blank">百度</a>

帶圖片的超連結

點選圖片，跳轉頁面，召喚迪迦

錨鏈接

法制新聞
 體育新聞
 娛樂新聞

法制新聞 – 法制新聞1

法制新聞 – 法制新聞2

法制新聞 – 法制新聞3

法制新聞 – 法制新聞4

法制新聞 – 法制新聞5

法制新聞 – 是道德的淪喪還是人性的泯滅

體育新聞1

體育新聞2

體育新聞3

體育新聞4

體育新聞5

體育新聞6

體育新聞7

體育新聞8

體育新聞9

娛樂新聞1

娛樂新聞2

娛樂新聞3

娛樂新聞4

娛樂新聞5

娛樂新聞6

娛樂新聞7

<a href="#new1">法制新聞</a>
<a href="#new2">體育新聞</a>
<a href="#new3">娛樂新聞</a>
		
		<!--鋪設錨點-->
		<a name="new1"></a>
		<h1>法制新聞 -- 法制新聞1</h1>
		<h1>法制新聞 -- 法制新聞2</h1>
		<h1>法制新聞 -- 法制新聞3</h1>
		<h1>法制新聞 -- 法制新聞4</h1>
		<h1>法制新聞 -- 法制新聞5</h1>
		<h1>法制新聞 -- 是道德的淪喪還是人性的泯滅</h1>
		<h1>法制新聞 -- 是道德的淪喪還是人性的泯滅</h1>
		<h1>法制新聞 -- 是道德的淪喪還是人性的泯滅</h1>
		<h1>法制新聞 -- 是道德的淪喪還是人性的泯滅</h1>
		<h1>法制新聞 -- 是道德的淪喪還是人性的泯滅</h1>
		
		<a name="new2"></a>
		<h1>體育新聞1</h1>
		<h1>體育新聞2</h1>
		<h1>體育新聞3</h1>
		<h1>體育新聞4</h1>
		<h1>體育新聞5</h1>
		<h1>體育新聞6</h1>
		<h1>體育新聞7</h1>
		<h1>體育新聞8</h1>
		<h1>體育新聞9</h1>
		
		<a name="new3"></a>
		<h1>娛樂新聞1</h1>
		<h1>娛樂新聞2</h1>
		<h1>娛樂新聞3</h1>
		<h1>娛樂新聞4</h1>
		<h1>娛樂新聞5</h1>
		<h1>娛樂新聞6</h1>
		<h1>娛樂新聞7</h1>

表格.
姓名年齡性別
麻生希 29 女
椎名空 29 女
深田詠美 23 女

姓名	年齡	性別
麻生希	29	女
椎名空	29	女
深田詠美	23	女

<!--
			table：表格
			tr：行
			th：列（加粗、居中）
			td：列
			
			border：邊框
			width：寬度
		td:		
			rowspan：佔n行
			colspan：佔n列
        -->
<table border="1" width="300px">
			<tr>
				<th>姓名</th>
				<th>年齡</th>
				<th>性別</th>
			</tr>
			<tr>
				<td>麻生希</td>
				<td>29</td>
				<td>女</td>
			</tr>
			<tr>
				<td>椎名空</td>
				<td>29</td>
				<td>女</td>
			</tr>
			<tr>
				<td>深田詠美</td>
				<td>23</td>
				<td>女</td>
			</tr>
		</table>

C	→	＋	－
1	2	3	×
4	5	6	÷
7	8	9	＝
0		·	＝

<table border="1" width="260px" height="350px">
			<tr>
				<th>C</th>
				<th>→</th>
				<th>＋</th>
				<th>－</th>
			</tr>
			<tr>
				<th>1</th>
				<th>2</th>
				<th>3</th>
				<th>×</th>
			</tr>
			<tr>
				<th>4</th>
				<th>5</th>
				<th>6</th>
				<th>÷</th>
			</tr>
			<tr>
				<th>7</th>
				<th>8</th>
				<th>9</th>
				<th rowspan="2">＝</th>
			</tr>
			<tr>
				<th colspan="2">0</th>
				<th>·</th>
			</tr>

	<form action="伺服器地址" method="post">
		
		輸入框：<input type="text" /><br/>
		密碼框：<input type="password" /><br/>
		單選框：
			<input type="radio" name="sex"/>男
			<input type="radio" name="sex"/>女
			<input type="radio" name="sex"/>不明
		<br/>
		複選框：
			<input type="checkbox"/>111
			<input type="checkbox"/>222
			<input type="checkbox"/>333
			<input type="checkbox"/>444
		<br/>
		上傳檔案：<input type="file"/><br/>
		下拉列表：
			<select>
				<option>四川</option>
				<option>湖南</option>
				<option>湖北</option>
			</select>省
			<select>
				<option>成都</option>
				<option>綿陽</option>
				<option>自貢</option>
				<option>雅安</option>
				<option>眉山</option>
			</select>市
			<br/>
		文字域：<textarea cols="20" rows="5" required="required" readonly="readonly">文字內容</textarea><br/>
		
		<input type="submit" value="提交按鈕" />
		<input type="reset" value="重置按鈕" />
		<input type="button" value="普通按鈕" />
		<input type="image" src="../img/櫻井步.jpg" width="100px" height="100px" />
 </form>

H5新特性

<form action="#" method="post">
			
			日期選擇器：<input type="date"/><br/>
			時間選擇器：<input type="time"/><br/>
			郵箱輸入框：<input type="email"/><br/>
			數字輸入框：<input type="number" value="50" min="10" max="100" step="5"/><br/>
			URL輸入框： <input type="url" list="url_list"/>
				<datalist id="url_list">
					<option label="W3School" value="http://www.w3school.com.cn" />
					<option label="谷歌" value="http://www.google.com" />
					<option label="百度一下" value="http://www.baidu.com" />
				</datalist><br/>
			
			<input type="submit" value="提交"/>
		</form>