HTML标签详解-优快云博客

本文详细介绍了HTML中的各种常用标签，包括块级标签、行级标签、列表标签等，并通过实例展示了这些标签的应用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

块级标签独占一行有间隔上下分开

h1 - h6 标签标题
p 标签段落有间隔
hr 标签分割线
blockquote 引用标签 cite 属性有间隔有缩进
pre 标签保留文本原格式

ol标签有序列表

1.修饰符默认是数字，它会随着项目的增多，自动增加
2.有序列表也是可以嵌套的

li标签列表项
ctrl+f 快速查找
ctrl+alt+l 代码排版格式化
ctrl+shift+x 快速变大写 + y 快速变大写

ul标签无序列表
1.修饰符是默认的原点
2.可以嵌套，嵌套的修饰符会与外层产生区别

dl标签定义列表

子标签分两个
dt标签标题放图片没有缩进图文混编
dd标签描述有缩进

img src="../../img/" 图片路径标签
alt 属性加载失败时显示
title 属性当鼠标悬浮在图片上相关的提示信息
align 属性指定图片的显示位置
width 属性图片宽度
height属性图片高度

figure 图片

定义图文

figcaption 文本

div标签块级标签分区标签

行级标签
span标签包裹特定元素一个或几个字段方便添加样式本身没有样式

em标签显示效果倾斜并且表强调的作用优化排名搜索

i标签只是斜体

strong 标签显示粗体表强调作用优化排名搜索

b标签只是粗体

q标签短引用主动添加双引号

small标签相比相邻的文本，small标签里的字更小

a href="" 标签 3种功能
1.页面跳转本地页面跳转
2.锚点链接 a name="#xxx"
3.功能链接 a href="tencent"message/?uin=972947494

a href="mailto"://邮箱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表</title>
</head>
<body>
<h1>新人上路指南</h1>
<ul><!--无序列表-->
    <li>如何激活会员名？</li>
    <li>如何注册贵美会员?</li>
    <li>注册时密码设置有什么要求?</li>
    <li>贵美认证?</li>

<dl><!--定义列表-->
    <dt>咖啡</dt><!--标题-->
    <dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料</dd><!--描述-->
    <dd>可以提神，刺激神经。</dd><!--描述-->


<dl>
    <dt><img src="../../img/1111.jpg"></dt>
    <dd>产品型号：Y470,精悍的小y，娱乐影音本</dd>
    <dd>价格：5900</dd>
    <dd>所在地：北京</dd>
</dl>
</dl>
</ul>
</body>
</html>

2017.3.12