HTML的標籤、屬性大整理


本篇全是經過整理的HTML中常用的標籤和屬性大全,純整理乾貨。在HTML中有太多太多的標籤,我們可能無法完全記住,這時候我們就需要一個索引來幫助我們在需要的時候快速找到該標籤的作用。

一、結構編碼類

1、外層

<!DOCTYPE html>    一種渲染標識

<html></html>   整個網頁所有內容

<body></body>   顯示給用戶看的內容

<style></style>   包含CSS樣式設計

<script><script>   包含JavaScript語句

2、頭部信息

<head></head>   定義文檔的頭部,是所有頭部元素的容器,可以引用腳本、指示瀏覽器在哪裏找到樣式表、提供元信息等
		<title>   懸窗提示文本

		<meta>   提供有關頁面的元信息
		
				<meta charset=“UTF-8”>   默認UTF-8編碼的請求頭
				
				<link rel=“icon” href=“”>   關聯網頁圖標
				
				<meta http-equiv = “X-UA-Compatible” content = “IE=EmulateIE7” />   必須加的兼容性標籤
				
				<meta http-equiv=“Refresh” content=“2;URL=”>   間隔跳轉,頁面隔兩秒就調到某頁面
				
				name:主要用於描述網頁,與之對應的屬性值爲content
				
				type:內容類型
				
				href:路徑
				
				url:網址

二、內容元素類

1、塊級與內聯元素特點

  • block(塊級)元素特點:
    總是在新行上開始;
    寬度缺省是它的容器的100%,除非設定一個寬度。
    它可以容納內聯元素和其他塊元素

  • inline(內聯)元素的特點:
    和其他元素都在一行上;
    寬度就是它的文字或圖片的寬度,不可改變
    內聯元素只能容納文本或者其他內聯元素

  • 塊級內聯的轉化(display)
    隱藏內容:display:none
    轉化爲塊級標籤:display:block
    轉化爲內聯標籤:display:inline
    既是塊級又是內聯:display:inline-block

2、塊級元素

address   地址(定義文檔或文章的作者/擁有者的聯繫信息)

blockquote   塊引用

center   居中對齊

dir   目錄列表

div   常用塊級標籤,也是CSS layout的主要標籤

dl   定義列表

fieldset   form控制組

form   交互表單

h1   大標題

h2   2副標題

h3   3級標題

h4   4級標題

h5   5級標題

h6   6級標題

hr   水平分隔線

menu   菜單列表

noframes   frames可選內容,(對於不支持frame的瀏覽器顯示此區塊內容

noscript   可選腳本內容(對於不支持script的瀏覽器顯示此內容)

ol   有序表單

p   段落

pre   格式化文本

table   表格

textarea   可調大小的文本框

ul   無序列表

3、內聯元素

a   錨點連接,後帶:href+鏈接

abbr   縮寫

acronym   首字

b   粗體(不推薦使用)

big   大字體

br   換行

cite   引用

code   代碼(在引用源碼的時候需要)

dfn   定義字段

em   強調

font   字體設定(不推薦)

i   斜體

img  圖片

input   輸入框

kbd   定義鍵盤文本

label   表格標籤

q   短引用

s   刪除線(不推薦)

samp   定義範例計算機代碼

select    下拉列表(項目選擇)

small   小字體文本

span   常用內聯容器,定義文本內區塊

strike   刪除線

strong   將字體加粗

sub   添加下標

sup   上標

textarea   多行文本輸入框

tt   電傳文本

u   下劃線

var   在JS中定義變量

4、表單元素

<input   type="text">   文本輸入框

<input   type="password">   密碼框

<input   type="radio">   單選框

<input   type="checkbox">   多選框

<input   type="submit">   提交按鈕

<input   type="reset">   重置按鈕

<input   type="button">   普通按鈕

<input   type="file">   提交文件

<input   type="date">   日期

<input   type="tel">   電話框

<input   type="number">   數字框

<input   type="email">   郵件框

<input   type="range"></input>   滑塊

<input   type="file"></input>   文件域

<select   name="">   <option   value=""></option>......   </select>   下拉列表,option爲選項

name:表單元素的屬性,通過submit按鈕提交的元素必須要有 name 值才能被後端接收到       

value:提交的屬性值

5、HTML全局屬性

accesskey	規定激活元素的快捷鍵

class	規定元素的一個或多個類名(引用樣式表中的類)

contenteditable	規定元素內容是否可編輯

contextmenu	規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示

data-*   用於存儲頁面或應用程序的私有定製數據

dir   規定元素中內容的文本方向

draggable	規定元素是否可拖動

dropzone   規定在拖動被拖動數據時是否進行復制、移動或鏈接

hidden	  規定元素仍未或不再相關

id   規定元素的id(唯一)

lang   規定元素內容的語言

spellcheck	規定是否對元素進行拼寫和語法檢查

style	   規定元素的行內 CSS 樣式

tabindex   規定元素的 tab 鍵次序

title	規定有關元素的額外信息

translate   規定是否應該翻譯元素內容
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章