搜索框语义化的html标签是,HTML标签语义化和常用的标签

如何理解标签语义化

HTML的历史

在一开始，没有前端的概念，页面的HTML都是后端程序员去写的，后端程序员在页面布局的时候使用的是table去布局，样式丑陋并且出现很多table嵌套的情况。

之后出现了一些有美工基础的人员做前端界面，当时使用的是DIV+CSS，全部标签使用DIV，并且配合CSS写一写样式，页面大有改观，但是HTML全部使用DIV仍然存在标签名没有意义的情况，页面各个结构无法直接明确它的意义。

在现在，前端程序员使用带有一定含义的标签比如，等标签替代全部用DIV，这样的书写方式就是语义化，有很强的可读性，并且对搜索引擎也友好的。

标签语义化好处

便于后期维护，代码更加优雅

让搜索引擎爬虫和其他辅助技术更好的解析

增强可阅读性，利于无障碍阅读

常用的HTML标签

1. 结构的语义化标签

图片摘自网络，需要删除联系我

在页面结构上，以上图为例：

标签

语义

header

文档的介绍信息，标题、logo、slogan，搜索框，nav等

nav

文章导航栏，配合ul或者ol使用

main

文章主要信息

article

一份独立的内容

section

是页面的一个章节，与article相比更偏向于整体

aside

侧边栏

footer

页脚，包含作者、版权信息等

2. 内容的语义化标签

The HTML

(Figure With Optional Caption) element represents

self-contained content, potentially with an optional caption, which is

specified using the (

) element. The figure, its caption, and its

contents are referenced as a single unit.

复制代码

通常 figure 元素被认为用来包裹图或图表，它还可以承载文档主要内容中引用的但不是冗余信息的任何内容(代码片段、引用、音频、视频等)。在文档流中可以把 figure 完全删除，而不会影响用户对主要内容的理解。

The HTML Mark Text element () represents text which is marked or

highlighted for reference or notation purposes, due to the marked passage's

relevance or importance in the enclosing context.

复制代码

mark标签表示被标记的或者高亮的引用或者需要注意的内容，基础样式是黄色背景高亮。

The HTML element represents a specific period in time. It may include

the datetime attribute to translate dates into machine-readable format,

allowing for better search engine results or custom features such as

reminders.

复制代码

HTML 元素表示特定的时间段。它可能包括datetime属性将日期转换为机器可读格式，以获得更好的搜索引擎结果或自定义功能，例如提醒。

The canvas element is part of HTML5 and allows for dynamic, scriptable

rendering of 2D and 3D shapes and bitmap images. It is a low level,

procedural model that updates a bitmap and does not have a built-in scene

graph. It provides an empty graphic zone on which specific JavaScript APIs

can draw (such as Canvas 2D or WebGL).

复制代码

HTML 的 元素提供了一个空白绘图区域，可以使用 APIs (比如 Canvas 2D 或 WebGL)来绘制图形。

这里有我写的一个canvas画板开源项目，点击这里体验一下吧

HTML 元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的

视频播放。你也可以将 标签用于音频内容，但是 元素可能在用户体验上更合适。

复制代码HTML 元素用于在文档中表示音频内容。

元素可以包含多个音频资源， 这些音频资源可以使用 src 属性或者

元素来进行描述； 浏览器将会选择最合适的一个来使用。对于不支持元素的

浏览器，元素也可以作为浏览器不识别的内容加入到文档中。

复制代码

易混淆的标签

1. 、、

表示对文本内容的强调，目的并非传达重要性

表示强调的着重意味，强调的是传递内容的重要性，严重性，紧急性

表示样式上的粗体，不强调重要性，也不影响语气，只是文本的特殊样式，常用语关键字。