HTML基础标签元素

基础标签元素

1. 标题

<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

2. 段落
   <p>我是一个段落</p>

3. 换行符
   <br />

4. 水平线
   <hr />

5. 文本格式

   • b 和 strong: 文字以 粗体 方式显示
   • i 和 em: 文字以 斜体 方式展示
   • s 和 del: 文字以 删除线 方式展示
   • u 和 ins: 文字以 下划线 方式展示

<p>我是一个<b>段落</b></p>
<p>我是<em>一个</em>段落</p>
<p>我是<em>一个</em><b>段落</b></p>
<p><s>我是段落，废弃了，没用了</s></p>
<p><u>我是有下划线的文本</u></p>

6. 盒子标签div与span

   <div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。

   特点:

   • <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
   • <span> 标签用来布局，一行上可以多个 <span>。小盒子

7. 图像标签
   <img src="图像URL" />
   src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
   图像标签的其他属性:

属性	属性值	描述
src	URL	图像路径
alt	文本	图片的描述和替代文本
height	数值(默认单位 px)	图片的高度
width	数值(默认单位 px)	图片的宽度
title	文本	鼠标悬停显示的内容

需要注意其中图像路径分为相对于绝对路径

• **相对路径：**以引用文件所在位置为参考基础，而建立出的目录路径。这里简单来说，图片相对于 HTML 页面（源代码）的位置。
  • 同一级目录：空或者./
  • 下一级目录：./images/或者images/
  • 上一级目录：../
• **绝对路径（了解）：**是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。例如，“D:\web\img\logo.gif”或完整的网络地址“https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png”。

9. 超链接标签
   在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。
   <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

两个属性的作用如下：

• href：用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
• target：用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

超链接标签常用方法：

• 外部链接：例如 < a href="http:// www.baidu.com "> 百度</a >。

• 内部链接：网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。

• 空链接：如果当时没有确定链接目标时，< a href="#"> 首页 </a > 。

• 下载链接：如果 href 里面地址是一个文件或者压缩包，会下载这个文件。

• 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。

• 锚点链接：点我们点击链接,可以快速定位到页面中的某个位置。

11. 列表
    列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

• 无序列表 ul>li

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。

无序列表的基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

• 有序列表 ol > li

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。

有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

• 自定义列表 dl>dt+dd

自定义列表的使用场景：自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。

其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>