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常用标签的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。