跳转至

5-常用标签

标题标签 <h1>~<h6>

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了 6 个等级的网页标题，即 <h1>- <h6>。

  • 为heard的缩写，表示头部
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
  • 标题标签独占一行

段落标签 <p></p>

<p>这是一个段落。</p>

用于书写文本，区分段落

  • 段落里的文字会更具窗口大小自动换行
  • 段落之间会有空隙

换行标签 <br />

<br />

会强制换行，但是不会增加空隙

  • 只有一个标签，没有闭合标签，是一个单标签

水平线标签 <hr />

<hr />

水平线，用于分割内容

  • 只有一个标签，没有闭合标签，是一个单标签

div标签 <div> </div>

<div>这是一个div标签</div>

div标签是一个块级元素，它本身并无实际意义，主要用来配合CSS对网页进行布局

  • 块级元素：独占一行

span标签 <span> </span>

<span>这是一个span标签</span>

span标签是一个内联元素，它本身并无实际意义，主要用来配合CSS对网页中的某部分内容进行样式设置

  • 可以在一行显示多个

图像标签 <img />

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。

<img
  src="api/images/lwHDLyw4umim/图像URL"
  alt="图像无法显示时的替代文本"
  title="鼠标悬停时显示的文本"
/>

单词image的缩写，意为图像。

  • src 图片路径，必须属性
  • alt 替换文本，图像不能显示的文字
  • title 提示文本，鼠标放到图像上，显示的文字设置图像的宽度
  • width height border 设置图像的高度设置图像的边框粗细

注意

  • 属性必须写到标签名后面
  • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
  • key = value 的形式，中间以等号连接，

超链接标签 <a></a>

<a href="#root/x5v2RLg33YHD" target="目标窗口的弹出方式">文本或图像</a>

单词anchor的缩写，意为“锚”

  • href：用于指定链接目标的url地址，必须属性
  • target：用于指定链接页面的打开方式，取值有
    • _self为默认值，即在当前窗口打开链接
    • _blank为在新的窗口打开链接

示例

  1. 链接到外部页面
<a href="http://www.baidu.com">百度</a>
  1. 链接到内部页面
<a href="#root/Fcdj2cXtfv7E">首页</a>
  1. 下载链接，可以下载各种文件
<a href="#root/fouzQ2NqxgQw">下载图片</a>
  1. 空链接
<a href="#">空链接</a>
  1. 网页元素链接
<a href="#"><img src="api/images/pkORUSwIBTWY/#" /></a>
  1. 锚点链接
<a href="#two">第二部分</a>

注意

  • 如果是外部链接，则需要添加http://或https://
  • 需要再地址的最后面加上/,减少一次服务器请求
  • 如果是链接，鼠标移上去会变成小手

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签语义：突出重要性，比普通文字更重要

标签 作用
<strong> <b> 加粗
<em> <i> 斜体
<del> <s> 删除线
<ins> <u> 下划线
<sup> 上标
<sub> 下标