天天看點

html回顧總結排版标簽

前言Sublime3快捷方式

生成html骨架:!+TAB 或者 html:5 +TAB
html:xt +TAB   含版本資訊的骨架

生成标簽:标簽名 +TAB   如 div +TAB
生成多個标簽:div *10 +TAB

子屬關系ul >li*2  +TAB 	
輸出結果:<ul>
			<li></li>
			<li></li>
		</ul>
兄弟關系:div+p +TAB
<div></div>
<p></p>

類調用.red +TAB
<div class="red"></div>

空格:&nbsp;
           
<!DOCTYPE html> 文檔類型
<meta chartset=”UTF-8”>  字元集
           

排版标簽

頭部、标題标簽:<h></h>
段落标簽:<p></p>
水準線标簽:<hr />
換行标簽:<br />
布局标簽:<div></div>   <span></span>
           
文本格式化标簽:
粗體:<b></b>			<strong></strong>
斜體:<i></i> 		<em></em>
加删除線:<s></s>		<del></del>
加下劃線:<u></u>		<ins></ins>
           
圖像标簽:<img src=”圖檔url”	
		alt=”文本#圖檔未顯示替換文本”
		title=”文本#滑鼠懸停時顯示的内容”
		width=“像素#設定圖像高度”
		height=“像素#設定圖像的高度”
		border=“數字#設定圖像邊框的寬度” />
           
連結标簽:<a href=”跳轉網頁url 或者#” 
			target=“目标視窗的呈現方式(_blank,_self)”>
			文本或者圖像</a>
			
錨點定位:目錄跳轉
		<a href=“#live”>我是目錄</a>
		..........................
		<h id=“live”>跳轉目錄對應标題</h>
		
Base标簽: 設定整體連結打開狀态
<base / target=”_blank”>

注釋标簽:<!--注釋内容-->	
           
特殊字元标簽:
html回顧總結排版标簽
清單标簽
		無序清單:
<ul>
	<li>清單項1</li>
	<li>清單項2</li>
	<li>清單項3</li>
</ul>	
	
		有序清單:
<ol>
	<li>清單項1</li>
	<li>清單項2</li>
	<li>清單項3</li>
</ol>
		自定義清單:
<dl>
	<dt>實數</dt>
	<dd>小數</dd>
	<dd>整數</dd>
	<dt>虛數</dt>
	<dd>複數</dd>
</dl>
           
表單标簽:<input />
	單行文本輸入框:<input  type=”text” />    
	密碼輸入框:<input type=”password”  maxlength=”6” />
	單選按鈕:<input type=”radio”	name=”sex”	checked=”checked” />男
	//name表示同一類型(sex)單選,checked=”checked”表示預設(男)
	複選框:<input type=”checkbox” />
	
	按鈕組:
	普通按鈕:<input type=”button”  value=“搜尋”/>
	送出按鈕:<input type=”submit” value=”送出表單” />
	重置按鈕:<input type=”reset” value=”重置表單” />
	圖像按鈕:<input type=”image” src=”img.png” />
	檔案按鈕(檔案上傳):<input type=”file” />
           
html回顧總結排版标簽
lable 标簽 
<lable > 使用者名 <input type=”text” value=”點使用者名進入輸入搜尋框” /></lable>

<lable for=“first”> 使用者名 <input type=”text” value=”點使用者名也可以進入輸入搜尋框”  id=“first”/></lable>
//如果lable裡面有多個表單,想定位到另外幾個,可以通過for   id 的格式來進行
           
文本域
<textarea  cols=“每行字數” rows=“顯示的行數”>請輸入留言</textarea>
	
	<p>留言闆<textarea name="content"></textarea></p>
           
下拉菜單
<select>
	<option>北京</option>
	<option>上海</option>
	<option	selected=“selected”>重慶</option>   
	//selected表示預設選中(重慶)
</select>
           
表單域
<form action=”xxx.php” method=”post” name=”user_information”>
</form>
           

繼續閱讀