HTML及CSS学习笔记 03 - 常用标签-CSDN博客

本文链接：https://blog.csdn.net/cgl125167016/article/details/88975815

本文是HTML及CSS课程的第三课，介绍一些在制作HTML文档时经常用到的块标签和行标签

一、常用标签

1、什么是块标签和行标签（内联标签）

在HTML中，所有的标签都是预定义的，而其中的大多数标签根据其特点可分为块标签（block-level tags）和行标签（或称为内联标签）（inline-level tags）。

块标签：块标签在浏览器中单独占一行。
行标签（内联标签）：行标签在浏览器中不单独占一行。

下面是一个例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>块标签和行标签</title>
  </head>
  <body>
    <div>块标签1</div>
    <div>块标签2</div>
    <span>行标签1</span>
    <span>行标签2</span>
  </body>
</html>

页面浏览效果：
块标签和行标签
说明：

<div>标签是块标签，每一个<div>标签中的内容在浏览器中显示时都单独占一行。
<span>标签是行标签（内联标签），每一个<span>标签中的内容在浏览器中显示时不单独占一行。

2、常用块标签

2.1、<div>标签

div是单词division的前3个字母，意为分开、分隔，主要作用是将网页中的一块相关内容区域组织在一起。
下面是一个示例：

<body>
  <div style="width:300px; height:100px; background:#F0F0F0">
    div是一个块标签，通常表示页面中的一个分区或节
  </div>
</body>

页面浏览效果：
div标签
说明：

<div>标签是一个块标签，通常表示页面中的一个分区或节，在HTML页面布局时常常用到该标签。
由于<div>标签缺乏语义，HTML5中新增了一些具有语义的标签，如<article>、<section>、<nav>、<aside>、<header>、<footer>、<main>、<figure>、<figcaption>等，它们的主要作用均是更具语义的组织页面中的一块相关内容区域，它们也都是块标签，关于它们的用法，将在后面的章节详细介绍，这里不再展开。

2.2、标题标签<h1> 至 <h6>

<h1> 至 <h6> 标签用来定义标题。<h1> 定义最大的标题，<h6> 定义最小的标题。标题标签属于块标签。通常用来表现网页内容的结构，本身具有语义。
下面是一个示例：

<body>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
</body>

页面浏览效果：
标题标签
说明：

标题标签从<h1>到<h6>，共6个，标题标签中显示出来的文字为粗体，且依次从大到小。

2.3、段落标签<p>

<p> 标签可定义一个段落，用来表现描述性内容。段落与段落之间有一个空行。
下面是一个示例：

<body>
  <p>　　有一天，老马对小马说：“你已经长大了，能帮妈妈做点事吗？”小马连蹦带跳地说：“怎么不能？我很愿意帮您做事。”老马高兴地说：“那好啊，你把这半袋麦子驮到磨坊去吧。”</p>
  <p>　　小马驮起口袋，飞快地往磨坊跑去。跑着跑着，一条小河挡住了去路，河水哗哗地流着。小马为难了，心想：我能不能过去呢？如果妈妈在身边，问问她该怎么办，那多好啊！可是离家很远了。他向四周望望，看见一头老牛在河边吃草，小马嗒嗒嗒嗒跑过去，问道：“牛伯伯，请您告诉我，这条河，我能过去吗？”老牛说：“水很浅，刚没小腿，能过去。”</p>
  <p>　　小马听了老牛的话，立刻跑到河边，准备过去。突然从树上跳下一只松鼠，拦住他大叫：“小马！别过河，别过河，河水会淹死你的！”小马吃惊地问：“水很深吗？”松鼠认真地说：“当然啦！昨天，我的一个伙伴就掉在这条河里淹死的！”小马连忙收住脚步，不知道怎么办好。他叹了口气说：“唉！还是回家问问妈妈吧！”</p>
</body>

页面浏览效果：
段落标签
说明：

上例中三个自然段分别使用了三个<p>标签，每个自然段之间空了一行，通常一个段落表示文章的一个自然段。

2.4、水平线标签<hr />

<hr />标签在浏览器中产生一条水平线。标签都是成对的，即有开始标签就有结束标签，<hr />中的/表示标签结束。
下面是一个示例：

<body>
  <h1>欢迎你</h1>
  <hr />
  <p>快乐工作，快乐学习。</p>
  <p>今天的努力是未来成功的基石</p>
</body>

页面浏览效果：
水平线标签

2.5、有序列表标签<ol>

<ol>标签表示有序列表标签，<li>标签用来表示每一个列表条目。<ol>标签的type属性可以更改有序列表条目符号风格。
下面是一个示例：

<body>
  <h3>注册步骤：</h3>
  <ol type="1">
    <li>填写信息</li> 
    <li>收电子邮件</li>
    <li>注册成功</li>  
  </ol>
</body>

页面浏览效果：
有序列表标签
说明：

<ol>标签的type属性用来表示条目符号风格，常见的有
type属性及值风格
type="1" 以数字风格表示列表顺序
type="a" 以小写字母风格表示列表顺序
type="i" 以罗马数字风格表示列表顺序

type属性及值	风格
`type="1"`	以数字风格表示列表顺序
`type="a"`	以小写字母风格表示列表顺序
`type="i"`	以罗马数字风格表示列表顺序

2.6、无序列表标签<ul>

<ul>标签表示无序列表标签，<li>用来表示每一个列表条目。<ul>标签的type属性可以更改无序列表条目符号风格。
下面是一个示例：

<body>
  <h3>新人上路指南</h3> 
  <ul type="disc">
    <li>如何成为优秀的员工</li>
    <li>如何做好每天的工作</li>
    <li>如何成就职业生涯</li>
  </ul>
</body>

页面浏览效果：
无序列表标签
说明：

<ul>标签的type属性用来表示条目符号风格，常见的有
type属性及值风格
type="disc" 以实心圆表示列表顺序
type="square" 以矩形表示列表顺序
type="circle" 以空心圆表示列表顺序

type属性及值	风格
`type="disc"`	以实心圆表示列表顺序
`type="square"`	以矩形表示列表顺序
`type="circle"`	以空心圆表示列表顺序

2.7、描述列表标签<dl>

描述列表使用<dl>标签表示，在<dl>标签中包含标题标签<dt>和描述标签<dd>。
下面是一个示例：

<body>
  <dl>
    <dt>咖啡</dt>
    <dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。</dd>
    <dd>可以提神，刺激神经。</dd>
  </dl>
</body>

页面浏览效果：
描述列表标签
说明：

<dl>是定义列表标签；
<dt>是定义列表的标题；
<dd>是定义列表的描述，描述部分会向右侧缩进。

3、常用行标签（内联标签）

3.1、<span>标签

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。如果说<div>是将一块相关内容区域组织在一起的话，那么<span>标签是将一行内的一部分相关内容组织在一起。<span>标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 标签中的文本与其他文本不会任何视觉上的差异。
下面是一个示例：

<body>
  <p>价格：<span style="color:red;font-size:70px;">10</span>元</p>
</body>

页面浏览效果：
span标签

3.2、换行标签<br />

<br />表示换行标签，<br />后面的内容在浏览器中另起一行显示。<br />标签中的/表示标签结束。
下面是一个示例：

<body>
  <p>
  难忘今宵<br />无论天涯与海角<br />神州万里同怀抱<br />共祝愿祖国好 祖国好
  </p>
</body>

页面浏览效果：
换行标签

3.3、图片标签<img />

<img /> 标签可定义一副图像。<img />标签中的/表示标签结束。
下面是一个示例：

<body>
  <img src="images/dog.png" width="400" height="400" alt="狗狗" title="可爱的狗狗" />
</body>

页面浏览效果：
图片标签
说明：

src属性是图片的来源，src属性的值是图片文件的路径，可以使用相对路径或绝对路径。本例中是src="images/dog.png"。
alt属性用于在图片不能正常显示时的提示文字。
title属性用于在鼠标悬停在图片上时提示文字。
width属性表示图片的宽，单位是像素。
height属性表示图片的高，单位是像素。

3.4、视频标签<video>

<video>标签，用于在浏览器中播放视频。使用标签不需要下载任何额外的浏览器视频播放插件，完全由浏览器自身来实现视频的解码和播放。
下面是一个示例：

<body>
  <video src="source/likeYou.mp4" controls="controls" width="500" height="250"></video>
</body>

页面浏览效果：
在这里插入图片描述
说明：

src属性是必要的属性，表示视频文件的路径，可以是相对路径或者绝对路径。
controls属性表示显示一组视频播放控件，用以控制视频的播放。是controls="controls"的简写。
HTML5规范中并没有对视频播放控件的样式进行规范定义，因此，不同的浏览器可能会有不同外观的播放控件，但功能大都大同小异。
width属性表示视频的宽，单位是像素。
height属性表示视频的高，单位是像素。
<video>标签可以添加poster属性，用来定义封面图片。一般情况下，浏览器会显示视频的第一帧，但有时，第一帧没有画面或者第一帧的画面并不适合宣传展示，因此，需要人为的设置一个封面。poster属性的值是图片文件的路径，可以使用相对路径或绝对路径。

其他属性说明：

属性	说明
`autoplay`	页面加载后自动播放视频，如果有该属性，视频自动播放，如果没有该属性，视频就不会自动播放
`preload`	`none`：视频播放前，浏览器不会预先下载视频资源，当用户不点击播放按钮时，会节省带宽 `metadata`：视频播放前，浏览器不会下载视频资源，但是会获得资源的元数据（视频大小，持续时间，视频格式，前几帧画面） `auto`（默认）：浏览器根据实际情况动态决定。例如，在wifi、3G、4G数据漫游情况下，动态采用不同的加载方案注意：如果设置了`autoplay`属性，那么`preload`属性的值将会被忽略
`muted`	静音播放
`loop`	循环播放

一个视频文件包含两部分内容，即视频部分和音频部分，每一个部分都使用一种特定的编码类型来编码。HTML5并没有对视频和音频编码制定标准，理论上允许任何格式的视频文件，目前最流行的视频格式主要有三种，如下

而鉴于目前各浏览器及操作系统的支持情况，MP4格式是一种最好的选择。

3.5、音频标签<audio>

<audio>标签，用于在浏览器中播放音频。使用<audio>标签不需要下载任何额外的浏览器音频播放插件，完全由浏览器自身来实现音频的解码和播放。
下面是一个示例：

<body>
  <audio src="source/YouAreMySunshine.mp3" controls></audio>
</body>

页面浏览效果：
音频标签
说明：

src属性表示音频文件的路径。
controls属性表示显示一组音频播放控件，是controls="controls"的简写。

其他属性说明：

属性	说明
`autoplay`	页面加载时是否自动播放音频
`preload`	`none`：不预先加载音频 `metadata`：预先加载元数据 `auto`：让浏览器根据实际情况动态决定
`muted`	静音播放
`loop`	循环播放

HTML5支持MP3、AAC、AAC+、WAV PCM等众多音频格式，鉴于目前各浏览器及操作系统的支持情况，MP3格式是一种最好的选择。

3.6、<i>标签

<i>表示强调不同的情绪或声音，也可以表示技术术语、生物分类、来自另一种语言的成语或习语、一个想法等等。
下面是一个示例：

<body>
  <p><i>小狗</i>是一种可爱的动物！</p>
  <p><i>Thank god</i>，项目终于可以按时交付了。</p>
  <p><i>我希望这次可以成功</i>，他想。</p>
</body>

页面浏览效果：
i标签
说明：

<i>标签中的内容默认会被浏览器显示为斜体。

3.8、<b>标签

<b>标签表示文档中的关键字、商品名称等。
下面是一个示例：

<body>
  <p>
    关键词：
	<b>HTML5</b>、<b>CSS3</b>、<b>W3C</b>
  </p>
</body>

页面浏览效果：
b标签
说明：

<b>标签中的内容默认会被浏览器显示为粗体。

3.9、<em>标签

em是emphasis的意思，<em>标签中的内容是用来强调的重点内容。
下面是一个示例：

<body>
  <p><em>小狗</em>是一种可爱的动物！</p>
  <p>小狗是一种<em>可爱</em>的动物！</p>
</body>

页面浏览效果：
em标签
说明：

<em>标签中的内容默认会被浏览器显示为斜体。

3.10、<strong>标签

<strong>标签表示非常重要、严重性或内容的紧迫性。
下面是一个示例：

<body>
  <p><strong>警告：水深危险！</strong></p>
</body>

页面浏览效果：
strong标签
说明：

<strong>标签中的内容默认会被浏览器显示为粗体。

二、W3C标准

1、W3C提倡的Web规范基本原则

标签的开始和结束符合规范
内容（结构）和表现（样式）分离
HTML内容结构要求语义化

还有很多细节性的规范，比如行标签中不可出现块标签、尽可能减少div多层级嵌套等。这里需要特别说明的一点，刚才介绍到的<i>标签，<b>标签，<em>标签，<strong>标签，如果在内容不具有语义，只是单纯的想将文字的样式显示为斜体或粗体，请不要使用这几个带有语义的标签。

1.1、一个符合规范的例子

下面是一个符合W3C提倡规范的例子：

<h1>一级主题1</h1>
  <p>一级主题阐述文字</p>
  <h2>二级主题</h2>
  <p>二级主题阐述文字</p>
  <ul>
    <li>项目列表1</li>
    <li>项目列表2</li>
    <li>项目列表3</li>
  </ul>

1.2、一个不符合规范的例子

下面是一个不符合W3C提倡规范的例子：

<font size="7">一级主题</Font><br/>
一级主题阐述文字 <br /><Br />
<font size="5">二级主题</font><br />
二级主题相关文字
<P>项目列表1
<p>项目列表2
<p>项目列表3

说明：

一级主题和二级主题没有体现出具体语义
代码中有与表现相关的标签，如<font size="7">。
标签<p>没有结束标签