HTML前端常用標簽(復習)

. HTML 初識

HTML 指的是超文本標記語言 (Hyper Text Markup Language)是用來描述網頁的一種語言。
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標簽 (markup tag)

所謂超文本，有2層含義：

因為它可以加入圖片、聲音、動畫、多媒體等內容（超越文本限制 ）
不僅如此，它還可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接（超級鏈接文本 ）。

標題標簽       	<hx></hx>     
段落標簽     		<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" />	src  圖像路徑	圖像標簽	<img src="圖像URL" />

該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標簽的必需屬性。

屬性:

alt 文本,圖像不顯示時顯示文字<img src="" alt="">

title 文本,鼠標懸停時顯示內容<img src="cz.jpg" title="文本" />

width 圖像寬度<img src="cz.jpg" width="300" height="300" />

height 圖像高度<img src="cz.jpg" width="300" height="300" />

border 設置圖像邊框寬度<img src="cz.jpg" border="3" />

鏈接標簽

<a href="#" target="目標窗口的彈出方式">文本或圖像</a>

屬性：

href (鏈接地址)必須寫	用于指定鏈接目標的url地址，（必須屬性）當為標簽應用href屬性時，它就具有了超鏈接的功能			1. 外部鏈接需要添加 http:// www.baidu.com 2. 內部鏈接直接鏈接內部頁面名稱即可比如 < a href="index.html"> 首頁 </a > 3. 如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。 4. 不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。
target (默認當前窗口打開,可新建窗口打開)	用于指定鏈接頁面的打開方式，其取值有self和blank兩種，其中_self為默認值，__blank為在新窗口中打開方式。

錨點標簽

id=""

錨點定位

通過創建錨點鏈接，用戶能夠快速定位到目標內容。

使用相應的id名標注跳轉目標的位置。 (找目標)

base標簽

base 可以設置整體鏈接的打開狀態

base 寫到 <head> </head> 之間

預格式化標簽

標簽可定義預格式化的文本。

所謂的預格式化文本就是，按照我們預先寫好的文字格式來顯示頁面，保留空格和換行等。

表格標簽

<table> 定義表格標簽 <tr> 定義表格行 <td></td> 表格數據 </tr> </table>	border	設置表格邊框(默認border="0"無邊框)	<table> <tr> <td>單元格內的文字</td> ... </tr> ... </table>
	cellspacing	設置單元格與單元格之間的空白間距 (默認2像素)
	cellpadding	設置單元格內容與單元格邊框之間的空白間距 (默認1像素)
	width	設置表格的寬度
	height	設置表格的高度
	align	設置表格在網頁中的水平對齊方式 (三個屬性:left左 center中 right右 )	align="center" align="right"
	caption	caption 元素定義表格標題，通常這個標題會被居中且顯示于表格之上。	<caption>個人信息表</caption>
	rowspan="合并單元格的個數"	跨行合并	合并的順序我們按照先上后下先左后右的順序
	colspan="合并單元格的個數"	跨列合并	<td colspan="3"> </td>
	<caption></caption>	表格標題標簽
	<tr></tr><td></td>	標簽，他就像一個容器，可以容納所有的元素	<tr><td></td></tr>
	<th><td>	一般表頭單元格位于表格的第一行或第一列，并且文本加粗居中	<th><td></td></th>
	<thead> 于定義表格的頭部。用來放標題之類的東西。<thead> 內部必須擁有 <tr> 標簽！	以上標簽都是放到table標簽中。	更好的給表格劃分結構
	<tbody> 用于定義表格的主體。放數據本體。	以上標簽都是放到table標簽中。
	<tfoot>放表格的腳注之類。	以上標簽都是放到table標簽中。

列表標簽

列表(ul里面只能包含li ,li里面可以包含標簽)	<ul><li></li></ul>	無序列表	1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。 2. <li>與</li>之間相當于一個容器，可以容納所有元素。 3. 無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！	里面只能包含li 沒有順序，我們以后布局中最常用的列表
	<ol><li></li></ol>	有序列表	所有特性基本與ul 一致。但是實際中比無序列表用的少很多。	里面只能包含li 有順序，使用情況較少
	<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> </dl>	自定義列表		里面有2個兄弟， dt 和 dd

input控件

<input type="屬性值" value="你好">	text	單行文本輸入框
	password	密碼輸入框
	radio	單選按鈕
	checkbox	復選按鈕
	button	普通按鈕
	submit	提交按鈕
	reset	重置按鈕
	image	圖像形式的提交按鈕
	file	文本域
name	由用戶自定義	控件的名稱	用戶名:<input type="text" name=“username” />
value	由用戶自定義	input控件中的默認問本值	用戶名:<input type="text" name="username" value="請輸入用戶名">
size	正整數	input控件在頁面中的顯示寬度
checked 默認被選中	checked	定義選擇控件默認被選中的項	<input type="radio" name="sex" value="女" />女
maxlength	正整數	控件允許輸入的最多字符數

<label> </label>

<label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名"> </label>	第一種用法就是用label直接包括input表單。		當我們鼠標點擊 label標簽里面的文字時，光標會定位到指定的表單里面
<label for="sex">男</label> <input type="radio" name="sex" id="sex">	第二種用法 for 屬性規定 label 與哪個表單元素綁定。		當我們鼠標點擊 label標簽里面的文字時，光標會定位到指定的表單里面

文本域

通過textarea控件可以輕松地創建多行文本輸入框.

cols="每行中的字符數" rows="顯示的行數" 我們實際開發不用

select下拉列表

在option 中定義selected =" selected "時，當前項即為默認選中項。

form表單域

<form action="url地址" method="提交方式" name="表單名稱"> 各種表單控件 </form>	action 屬性值:url地址	用于指定接收并處理表單數據的服務器程序的url地址。
	method 屬性值:get/post	用于設置表單數據的提交方式，其取值為get或post。
	name 屬性值:名稱	用于指定表單的名稱，以區分同一個頁面中的多個表單。

以上標簽基本包含了前端開發所需常用標簽.來自本人,黑馬程序員.傳智播客學習筆記.

以下是個人筆記整理,需要請關注私信我.

希望本人筆記能對各位有所幫助.

前端不難,難的在于東西多和雜.每天努力學習一點點,不放棄.

ul加入zoom:1;overflow:hidden;

ul {

zoom:1;

overflow:hidden;

}

例

目錄列表：

<dir>

<li>xhtml</li>

</dir>

瀏覽器支持

所有主流瀏覽器都支持 <dir> 標簽。

標簽定義及使用說明

HTML5 不支持 <dir> 標簽。請用 CSS 代替。

在 HTML 4.01 中，<dir> 元素已廢棄。

<dir> 標簽被用來定義目錄列表。

提示和注釋

提示：請使用 CSS 來為列表添加樣式！在我們的 CSS 教程中，您可以找到更多有關為列表添加樣式的細節。

HTML 4.01 與 HTML5之間的差異

HTML5 不支持 <dir> 標簽，HTML 4.01 已廢棄 <dir> 標簽。

可選的屬性

屬性	值	描述
compact	compact	HTML5 不支持。HTML 4.01 已廢棄。規定列表必須比常規狀態小一號呈現。

標準屬性

在 HTML 4.01 中，<dir> 標簽支持如下標準屬性：

屬性	值	描述
class	classname	規定元素的類名
dir	rtlltr	規定元素中內容的文本方向
id	id	規定元素的唯一 id
lang	language_code	規定元素中內容的語言代碼
style	style_definition	規定元素的行內樣式
title	text	規定元素的額外信息

如需完整的描述，請訪問標準屬性。

事件屬性

在 HTML 4.01 中，<dir> 標簽支持如下事件屬性：

屬性	值	描述
onclick	script	當鼠標被單擊時執行腳本
ondblclick	script	當鼠標被雙擊時執行腳本
onmousedown	script	當鼠標按鈕被按下時執行腳本
onmousemove	script	當鼠標指針移動時執行腳本
onmouseout	script	當鼠標指針移出某元素時執行腳本
onmouseover	script	當鼠標指針懸停于某元素之上時執行腳本
onmouseup	script	當鼠標按鈕被松開時執行腳本
onkeydown	script	當鍵盤被按下時執行腳本
onkeypress	script	當鍵盤被按下后又松開時執行腳本
onkeyup	script	當鍵盤被松開時執行腳本

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：掌握 onmouseover 事件：打造動態 HTML 體驗
下一篇：HTML講解-網頁中的文本框

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML前端常用標簽(復習)

. HTML 初識

您的項目需求