HTML基础知识–HTML标签

排版标签

标签	功能	类型
h1-h6	标题	双标签
p	段落标签	双标签
div	没有含义，用于整体布局	双标签

1. h1 最好写一个，h2-h6能适当多写。
2. h1-h6 不允许嵌套
3. h1-h6不允许放在p标签里面
4. p标签里面不允许放h标签、div标签和p标签

语义化标签

概念：用特定的标签表达特定的含义。

原则：标签的默认效果不重要（后期可以通过CSS随便控制效果），语义最重要。

举例：对于h1标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。

优势：

• 代码结构清晰可读性强
• 有利于SEO（搜索引擎优化）
• 方便设备解析（如屏幕阅读器、盲人阅读器等）

块元素与行内元素

• 块级元素：独占一行（排版标签都是块级元素
• 行内元素：不独占一行

使用规则：

• 规则一：块级元素中能写：行内元素、块级元素（几乎什么都能写）

<div>
    <span>什么都能写</span>
    <input type="text">
    <div>什么都能写2</div>
</div>

• 规则二：行内元素中能写：行内元素，但不能写：块级元素

<span>
    <span>能写</span>
    <input type="text">
    <span>能写2</span>
</span>

• 特殊规则： h1-h6 不能互相嵌套
• 特殊规则： p标签中不能写块级元素

文本标签

• 通常用于包裹：词汇短语等。
• 通常写在排版标签里面。
• 排版标签更宏观（大段的文字），文本标签更微观（词汇、短语等）。
• 文本标签通常都是行内标签。

标签名	标签语义	单/双标签
em	要着重阅读的内容	双
strong	十分重要的内容（语气比em要强）	双
span	没有语义，用于包裹短语的通用容器	双

div是大包装袋，span是小包装袋

不常用文本标签

标签名	语义	单/双标签
cite	作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑）	双
dfn	特殊术语，或专属名词	双
del 与 ins	删除的文本与插入的文本	双
sub 与 sup	下标文本与上标文本	双
code	一段代码	双
samp	从正常的上下文中，将某些内容提取出来，例如：标识设备输出	双
kbd	键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中	双
abbr	缩写，最好配合上title属性	双
bdo	更改文本方向，要配合dir属性，可选值ltr(默认值)、rtl	双
var	标记变量，可以与code标签一起使用	双
small	附属细则，例如：包括版权、法律文本。	双
b	摘要中的关键字、评论中的产品名称。	双
i	本意是：人物的思想活动、所说的话等。现在多用于：呈现字体图标	双
u	与正常内容有反差的文本，例如：错的单词、不合适的描述等。	双
q	短引用	双
blockquote	长引用	双
address	地址信息	双

• 这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没毛病）

• blockquote与address是块级元素，其他的文本标签，都是行内元素

• 有些语义感不强的标签，我们很少使用，例如：small、b、u、q、blockquote

• HTML标签太多了！记住那些：重要的、语义感强的标签即可；截止目前，有这些

  h1-h6、p、div、em、strong、span

图片标签

标签名	标签语义	常用属性	单/双标签
img	图片	src: 图片路径alt: 图片描述width:图片宽度height: 图片高度	单标签

• 尽量不同时修改图片的宽和高，可能会造成比例失调

• 暂且认为img是行内元素

• alt属性的作用：

  • 搜索引擎通过alt属性，得知图片的内容。 —最主要的作用
  • 当图片无法展示的时候，有些浏览器会呈现alt属性的值
  • 盲人阅读器会朗读alt属性值。