HTML常用标签总结归纳 | 青训营笔记

143 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

前一篇写了HTML网页必要的几个标签,今天来对HTML常用标签做一个补充

文本格式化标签

  • 加粗 <strong> <b>
  • 倾斜 <em> <i>
  • 删除 <del> <s>
  • 下划线 <ins> <u>

其中<strong> <em> <del> <ins>更为推荐使用

特殊标签

<div> <span>这两个标签本身不具备含义,类似于一个盒子,用来装内容

  • <div>是自己独占一行,类似于一个长方形的盒子,直接占据一行
  • <span>表示跨距,类似于一个小盒子,一行可以放多个<span>

图像标签

<img>是一个单标签

格式:<img src="图像URL" 选择加入/ >

选择加入处可以添加以下内容

  • alt:图片显示不出来,可以用文字来显示
  • title:指示文本,鼠标放在图像上提示的文本
  • width:宽度
  • height:高度
  • border:图像边框

添加音视频

格式

  • 音频:<audio src=" " 选择加入> </audio>
  • 视频:<video src=" " 选择加入> </video>

以视频来举例,格式也可以写成:

<video> <source src=" " controls> </video>

特别说明:在默认情况下,不允许用户自己控制播放停止,所以需要在选择加入处添加controls来控制,如需设置为自动播放,则添加autoplay

超链接

格式:<a href="跳转目标" target="目标窗口弹出方式"> 文本或图像 </a> 目标窗口弹出方式默认为当前页面弹出,_self,可设置为新窗口打开,_blank

链接分类

  • 外部链接
  • 内部链接
  • 空连接:#代替空链接
  • 下载链接:若href里面地址是一个文件或者压缩包,会下载这个文件
  • 网页元素链接:在网页中各种元素,如图片、音频等都可以添加超链接
  • 锚点链接:点击链接,可以快速定位到页面的某个位置

其中特别说明锚点链接,假设我想要在某个菜谱网页上快速找到红烧肉的做法,可以这样写: <a href="#hongshaorou"> 红烧肉 </a>......

<h1 id="hongshaorou"> 红烧肉 </h1>

注释标签

格式:<!--我有一个梦想-->

表格标签

基本语法:

image.png 合并单元格:

  • 跨行合并:rowspan="合并单元格的个数"
  • 跨列合并:colspan="合并单元格的个数"

列表标签

  • 无序列表:<ul> <li>列表项</li> </ul>
  • 有序列表:<ol> <li>列表项</li> </ol>
  • 自定义列表:<dl> <dt>关键内容</dt> <dd>围绕展开</dd> </dl>

内联框架

即向当前页面引入一个其他页面 <iframe src="网址" frameborder="0"> </iframe>

几个重要的特殊字符

  • 空格:&nbsp;
  • 小于:&lt;
  • 大于&gt;
  • &:&amp;