本篇全是經過整理的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 規定是否應該翻譯元素內容