HTML標簽

p標簽

• p為段落標簽
• 特性：
  • 獨占一行

h標簽

• 標題標簽
• 特性：
  • 獨占一行
  • 由大到小
  • 加粗

strong\em標簽

• 加粗\斜體標簽

a標簽

• 超鏈接標簽

ol標簽

• 有序列表

<ol type="a/Ⅰ/i"><li>列表1</li><li>列表2</li><li>列表...</li> </ol> 復制代碼

小技巧: li * 4 + Tab鍵 alt鍵 + 光標 (li>a)*6 + Tab鍵

<li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> 復制代碼

ul標簽

• 無序列表

<ul type="circle"><li>列表1</li><li>列表2</li><li>列表...</li> </ul> 復制代碼

div/span標簽

• div和span可以充當容器使用
• 作用：
  • 1.結構更清晰
  • 2.可以實現整體挪動

自定義列表

<dl><dt>表頭</dt><dd>表項1</dd><dd>表項2</dd><dd>表項3</dd> </dl> 復制代碼

br標簽

• 換行標簽

img標簽

• 添加圖片
  • src圖片路徑屬性
  • alt 圖片信息 ##常用html編碼集
• &nbsp;空格
• &lt less than 小于號
• &gt great than 大于號

常用快捷鍵

Ctrl + D 復制一行 Ctrl + X 刪除一行 Shift + F6 重命名

獨占一行為塊元素

table標簽

• 表格

• thead標題

  • tr 行
    • td 列

• tbody 主體

  • tr 行
    • td列

• table 屬性

  • colspan 和 rowspan一定要寫在<td>中
  • colspan合并列
  • rowspan合并行

• form表單

  • input
    • type=“text”文本框
    • type=“”文本框

##標簽表格

標簽名標簽意義特性

p	段落	獨占一行
h1-h6	標題	獨占一行，由大到小，加粗
strong		加粗
em		斜體
b		行內元素，加粗
i		行內元素，斜體
a	超鏈接	行內元素，字體顏色不同，有下劃線
div	無意義標簽，結構化，綁定化操作	獨占一行
span	無意義標簽，結構化	行內元素
img	圖片	行內元素
ol>li	有序列表	獨占一行
ul>li	無序列表	獨占一行
dl>dt>dd	自定義列表	獨占一行
table>thead>tbody>tr>th td	表格
form	表單	獨占一行
input type：text	文本框	行內元素
input type：password	密碼框	行內元素
input type：radio	單選按鈕	行內元素
input type：checkbox	多選按鈕	行內元素
input type：button	按鈕	行內元素
input type：submit	提交按鈕	行內元素
input type：reset	重置按鈕	行內元素
select	下拉列表	行內元素
textarea	文本框	行內元素

轉載于:https://juejin.im/post/5b8530d1e51d4538d84b0d91

總結

以上是生活随笔為你收集整理的前端基础1：HTML常用标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。