對於很多人來說，用HTML標簽都是熟能生巧，而不清楚為什么是那樣的標簽，所以我在這列了一個表，翻譯了其對應的英文。
標簽
| 標簽分類 | 標簽名 | 英文 | 英文含義 | 標簽類型 | 備注 |
|---|---|---|---|---|---|
| HTML頁面結構 | <html> | HyperText Markup Language | 超文本標記語言 | ||
| <head> | head | 頭部 | |||
| <title> | title | 網頁標題 | |||
| <body> | body | 主體 | |||
| 常用標簽 | <h1>~<h6> | head1~6 | 子標題 | 塊標簽 | |
| <p> | Paragraph | 段落 | 塊標簽 | ||
| <font> | fort | 字體 | |||
| <a> | Anchor | 錨(超鏈接) | |||
| <img> | image | 圖像 | 空標簽 | ||
| <br> | Barter Rabbet | 換行 | 空標簽 | ||
| <hr> | Horizontal Rule | 水平線 | 空標簽、塊標簽 | ||
| <marquee> | marquee | 選取框(文字滾動) | |||
| 格式化標簽 | <b> | bold | 粗體 | ||
| <big> | big | 大號字 | |||
| <em> | EMphasize | 着重 | |||
| <i> | Italic | 斜體 | |||
| <small> | small | 小號字 | |||
| <strong> | strong | 加重語氣 | |||
| <sub> | SUBscript | 下標 | |||
| <sup> | SUPerscript | 上標 | |||
| <u> | Underline | 下划線 | |||
| 列表標簽 | <ul> | Unorder List | 無序列表 | 塊標簽 | |
| <ol> | Order List | 有序列表 | 塊標簽 | ||
| <li> | LIst | 列表項目 | 塊標簽 | ||
| <dl> | Define List | 定義列表 | 塊標簽 | ||
| <dt> | Define Title | 定義標題 | 塊標簽 | ||
| <dd> | Define Describtion | 定義描述 | 塊標簽 | ||
| 表格相關 | <table> | 表格 | 塊標簽 | ||
| <tr> | Table Row | 表行 | 塊標簽 | ||
| <td> | Table Data cell | 單元格 | |||
| <th> | Table Head | 表頭 | |||
| <caption> | caption | 標題 | |||
| <thead> | Table head | 表頭部分 | |||
| <tbody> | Table body | 主體部分 | |||
| <tfoot> | Table foot | 底部業腳部分 | |||
| 表單相關 | <form> | form | 表單 | ||
| <input> | input | 表單元素 (輸入框) |
空標簽 | ||
| <select> | select | 選擇(下拉框) | |||
| <option> | option | 選項(下拉列表項) | |||
| <textarea> | text area | 文本域 | |||
| 框架相關 | <frameset> | frame set | 框架集 | ||
| <frame> | frame | 框架 | 空標簽 | ||
| <iframe> | iframe | 內嵌框架 | |||
| 容器 | <div> | division | 分隔(容器標簽 (塊)) |
||
| <span> | span | 跨度(容器標簽 (行內)) |
屬性
| 屬性名 | 英文 | 英文含義 | 取值 | 應用場景 | 備注 |
|---|---|---|---|---|---|
| src | SouRCe | 資源位置 | 資源的路徑 | ||
| border | border | 邊框 | 數字(像素) | ||
| size | size | 尺寸 | 數字(像素) | ||
| width | width | 寬度 | 數字(像素) | ||
| height | height | 高度 | 數字(像素) | ||
| bgcolor | BackGround COLOR | 背景顏色 | 顏色值：rea或#ffffff | ||
| background | background | 背景圖片 | 圖片路徑 | ||
| list-style | list-style | 設置列表的所有屬性 | 列表 | ||
| list-style-image | list-style-image | 將圖像設置為列表項標記 | None url |
列表 | |
| list-style-type | list-style-type | 設置列表項標記的類型 | Disc(實心圓) Cirle(空心圓) Square(實心方塊) |
列表 | |
| line-height | line-height | 行高(行間距) | 數字(像素) | 布局多行文本 | |
| text-align | text-align | 對齊方式 | Left、right、center | 各種元素對齊 | |
| letter-spacing | letter-spacing | 字符間距 | 數字(像素) | 加大字符間間隔 | |
| text-decoration | text-decoration | 文本修飾 | Underline、none | 加下划線、中划線等 | |
| margin-top (right、bottom、left) |
margin | 外邊距 | 數字(像素) | ||
| padding-top (right、bottom、left) |
padding | 內邊距 | 數字(像素) | ||
| display | display | 改變塊級元素與行內元素的默認顯示方式 | block(行變塊) inline(塊變行) none(該元素不顯示在網頁中) |
||
| position | position | 定位 | static(靜態定位) relative(相對定位) absolute(絕對定位) fixed(固定定位) |
用於定位 | |
| float | float | 浮動 | None、left、right | ||
| clear | clear | 處理浮動塌陷 | left(清除左邊浮動) right(清除右邊浮動) both(清除兩邊浮動) none(不清除浮動) |
||
| type | type | 列表類型 | Disc(實心圓) Cirle(空心圓) Square(實心方塊) |
用於列表 | |
| align | align | 對齊 | Left、right、center top、middle、bottom |
段落內容水平對齊文字與圖片垂直對齊 | |
| type | type | 表單元素類型 | text(文本) checkbox(復選) radio(單選) password(密碼) file(文件) submit(提交) reset(重置) button(按鈕) image(圖片按鈕) hidden(隱藏) |
表單元素 | |
| method | method | 表單數據的提交方式 | get post |
||
| alt | alter | 改變、替換(圖片不顯示時提示信息) | 圖片 | ||
| cellpadding | cell padding | 單元格內邊距 | 數字 | 表格 | |
| cellspacing | cell spacing | 單元格之間距離 | 數字 | 表格 | |
| href | Hypertext REFerence | 超文本引用(跳轉到文件位置) | |||
| rel | RELationship | 關系(用於定義鏈接的文件和HTML文檔之間的關系) | StyleSheet樣式表 | link鏈接一個文件時 | |
| target | target | 目標(網頁打開的位置) | _blank(新窗口打開) _self(自身窗口打開) _top(以整個瀏覽器作業作為窗口顯示新頁面) _parent(在父窗口中打開新的頁面) |
||
| colspan | COLumn span | 單元格跨列 | 數字(跨的列數) | 表格 | |
| rowspan | row span | 單元格跨行 | 數字(跨的行數) | 表格 | |
| readonly | read only | 只讀 | |||
| value | value | 輸入框的初始值 | |||
| maxlength | max length | 最大長度 | |||
| scrolldelay | scroll delay | 滾動延時 | <m arquee> | ||
| direction | direction | 方向(滾動方向) | <m arquee |
塊級標簽與行級標簽
| 塊級標簽 | 行級標簽 |
|---|---|
| <div>、<h1>~<h6>、<p>、<hr>、 <ul>、<li>、<ol>、<dl>、<dt>、 <dd>、<table> |
<a>、<font>、<img>、<input>、<select>、<textarea>、<label>、<span> |
選擇器
| 格式 | 選擇器類別 | 備注 |
|---|---|---|
| 標簽名{} | 標簽選擇器 | |
| .類名{} | 類選擇器 | |
| #ID標識名 | ID選擇器 | |
| p.red | 交集選擇器 | 第一個必須是標簽選擇器，第二個必須是類選擇器或ID選擇器 |
| P,.red,#header | 並集選擇器 | |
| #header ul li a | 后代選擇器 | |
| 標簽名:偽類名 | 特殊選擇器 |
超鏈接偽類
| 偽類 | 英文 | 英文含義 | 示例 | 含義 | 應用場景 |
|---|---|---|---|---|---|
| a:link | link | 鏈接 | a:link{color:#999} | 未單擊訪問時的超鏈接樣式 | 常用，超鏈接主樣式 |
| a:visited | visited | 訪問 | a:visited{color:#999} | 單擊訪問后的超鏈接樣式 | 區分是否已被訪問 |
| a:hover | hover | 懸停 | a:hover{color:#999} | 鼠標懸浮在超鏈接上的樣式 | 常用，實現動態效果 |
| a:active | active | 起作用的、有效的、積極的 | a:active{color:#999} | 鼠標單擊未釋放的超鏈接樣式 | 少用，通常與link一致 |
to be continued(未完待續)...