前端基础1:HTML常用标签

202 阅读2分钟

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 文本框 行内元素