html常見基礎標籤大彙總

頭部標籤

meta標籤

<!-- 聲明必寫 -->
<!DOCTYPE html> 
<!--常用字符編碼-->
<meta charset="UTF-8">
<!--規定語言——英語-->
<html lang="en">
<!--作者信息-->
<meta name="anthor" content="http://www.yt4561761.com" />
<!--網頁關鍵字-->
<meta name="keywords" content="html,網頁"
<!--網頁描述-->
<meta name="description" content=我的第一個網頁 />
 <!-- 優先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <!-- 三秒後頁面重定向 -->
<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />

link標籤

<!-- 外部css鏈接,也可以鏈接js,或者其他外部資源 -->
<link rel="stylesheet" type="text/css" href="css1.css"/>

title標籤

<title>
			我的個人博客
</title>

塊級標籤

<h1></h1>...<h6></h6>
<hr/>
<br/>
<p></p>
<blockquote cite="http://www.yt4561761.com"></blockquote>
<pre></pre>

最常見的div

<div>
	zzh
</div>

列表類

<!-- 三種列表 -->	
		<!-- 無序列表,有序列表,定義列表 -->
		<!--  無序列表
		 ul標籤:列表體
		 li標籤:列表項
		 通過type屬性,修改列表狀態,可選值:disc,square,circle
		 一般不使用以上默認值
		 如果需要使用項目符號,可以設置背景圖片
		 ul和li都是塊元素 -->
		 <ul>
		 	<li>zzh</li>
			<li>ldn</li>
			<li>mwh</li>
		 </ul>
		 
		 <!-- 有序列表
		  ol,li都是塊元素
		  type可以改變序號類型
		  1,a,A,i,I-->
		  <ol type="I">
		  	<li>結構</li>
			<li>表現</li>
			<li>行爲</li>
		  </ol>
		  
		  <!-- 對事物進行定義 
		  dl標籤來創建一個定義列表-->
		  <dl>
			  <dt>武松</dt>
			  <dd>景陽崗打虎英雄,戰鬥力99.</dd>
			  <dd>後打死西門慶,投奔梁山。</dd>
			  <dl>
				  <dt>武大</dt>
				  <dd>賣燒餅的</dd>
			  </dl>
		  </dl>
		  <!-- 三種列表可以相互嵌套,都是塊元素 -->

figure標籤

<!--對插圖進行描述 -->
<figure>
  <p>妹子</p>
  <p>拍攝者:zzh  拍攝時間:2019 年 9 月</p>
  <img src="girl.jpg" width="520" height="1314" />
</figure>

行內元素

<span style="color:red; font-size66px;">zzh</span>
<img src="zzh.jpg"/>
<q>hello</q>
<a href="#">我是超鏈接</a>

有關字體樣式的

<!-- 總結 -->
		<pre>
			<!-- em 標籤: --><em>用於強調的文本,一般顯示爲斜體字</em>
			<!-- strong 標籤: --><strong>用於特別強調的文本,顯示爲粗體字</strong>
			<!-- cite 標籤: --><cite>用於引證和舉例,通常是斜體字</cite>
			<!-- code 標籤: --><code>用來指出這是一組代碼</code>
			<!-- small 標籤: --><small>規定文本以小號字顯示</small>
			<!-- big 標籤: --><big>規定文本以大號字顯示</big> 
			<!-- samp 標籤: --><samp>顯示一段計算機常用的字體,即寬度相等的字體</samp>
			<!-- kbd 標籤: --><kbd>由用戶輸入文本,通常顯示爲較粗的寬體字</kbd>
			<!-- var 標籤: --><var>用來表示變量,通常顯示爲斜體字</var>
			<!-- dfn 標籤: --><dfn>表示一個定義或說明,通常顯示爲斜體字</dfn>
			<!-- sup 標籤: -->12<sup>2</sup>=144
			<!-- sub 標籤:硫酸亞鐵的分子式是 --> Fe<sub>2</sub>SO<sub>4</sub> 
			<!-- ins插入標籤 -->
			<!-- del刪除內容標籤 -->

表格標籤

<!--兩行三列的表格-->
<table>
			<!--行-->
			<tr>
				<td>a1</td><!--列-->
				<td>a2</td>
				<td>a3</td>
			</tr>
			<tr>
				<td>b1</td>
				<td>b2</td>
				<td>b3</td>
			</tr>
		</table>

表單標籤

<!-- from標籤中必須指定action屬性,指向的是服務器地址 -->
			<form action="按鈕.html">
<!-- 一個空白表單 -->
<!-- 使用fieldset爲表單分組 -->
			<fieldset>
				<legend>必須輸入</legend>
				
<!-- 文本框 -->
			用戶名:<input type="text" name="user-name" value="大傻子">

<!-- 密碼框 -->
			密碼:&nbsp;&nbsp;&nbsp;<input type="password" name="password" value="000000">
			</fieldset>
			<fieldset>
				<legend>其他方面</legend>
				
<!-- 單選框 
通過name分組,達到單選的效果
如果希望在單選框和多選框中設置默認選中
使用 :checked=checked""-->
			性別:<input type="radio" name="i1" value="male" checked="checked"/>男<input name="i1" type="radio" value="female"/>女
			
<!-- 多選框
type=‘checkbox’-->
			愛好:<input type="checkbox" name="hobby" value="football"/>足球
				  <input type="checkbox" name="hobby" value="basketball" checked="checked"/>籃球
				  <input type="checkbox" name="hobby" value="badminton"/>羽毛球

<!-- 下拉列表
name屬性必須給select
value屬性給option
selected="selected"默認選項
給select選擇屬性multiple="multiple"-->
			你喜歡的明星:
			<select name="star" multiple="multiple">
				<optgroup label="男明星">
				<option value ="dc">鄧超</option>
				<option value ="xs">許嵩</option>
				</optgroup>
				<optgroup label="女明星"><!-- 對選項進行分組 -->
				<option value ="dlrb" selected="selected">迪麗熱巴</option>
				</optgroup>
			</select>
			 </fieldset>
			 
			 <fieldset>
				 <legend>自我介紹</legend>
				 
<!-- 多行文本框,文本域 -->
			 自我介紹<textarea rows="10" cols="20" name="textarea">
			 	"無畏"
			 </textarea>
			 </fieldset>
			 
<!-- 重置按鈕 -->
			<input type="reset"/>
			<input type="button" value="單純的按鈕"/>
			
<!-- 提交按鈕 -->
			<input type="submit" value="提交"/>
			<button type="button">單純按鈕</button>
			<button type="reset">重置</button>
			<button type="submit">提交</button>
			
<!-- 有一個表單提示標籤 
for 屬性指向一個表單項的id值-->
			<label for="">表單提示文字</label>

		</form>

後續會繼續補充,,,

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章