语义化标签 [HTML][web前端]

语义化标签(一)

在网页中HTML主要是用来负责网页的"结构",所以在使用html标签的时候我们就应该关注的是标签的语义,而不是标签的样式

• 标签的样式属于网页的表现 ,而网页的表现我们通过css来负责
• 网页的功能由JavaScript负责

我们的HTML主要是用来负责网页的结构,这个时候比如: 对于h1和h2标签,我们要知道h1和h2标签是表示的标签,而不需要关注h1标签比h2标签大, 我们后续再css中甚至可以将h2标签设置的比h1标签大

①标题标签 : h1 ~ h6

我们的h1 到 h6标签的重要性依次递减

• 在HTML中h1标签的重要性仅次于title标签,一般情况之下我们一个网页中设置一个h1标签就够了
• 这里的重要性指的就是浏览器在搜索的时候会关注的信息的程度,我们的浏览器在搜索的时候最关注title标签的内容,接下来就是关注h1标签中的内容,然后依次递减

一般情况下标题标签我们只使用到h1~ h3, h4 ~h6很少使用

• 因为我们的h3 ~ h4标签的重要性已经是很低了,和普通标签其实甚至都差不多了,而我们使用标签就是为了提供内容的重要程度,所以我们一般都不使用h4 ~ h6标签

• hgroup标签用来为标题分组,可以将一组相关的标题同时放到一个hgroup分组标签中

标题标签是一个块元素

• 块元素: 又称之为: 块标签
  • 块标签就是独占一行的标签

②p标签

p标签表示页面中的一个段落

我们要关注的是p标签表示一个段落,而不是关注段落的形式(段落之间有明显空隙分开)

p标签是一个块标签

• 这个时候注意: 我们对于块标签一般都是定义网页的布局的,我们一般都是在块元素中可以有放任何的元素,但是这时候我们规定: p元素(标签)中不能放置任何的块元素(标签)

③em标签

em标签用于表示语调的加重

• 表现形式为斜体
  • 注意: 这里的斜体我们不需要去过分关注,斜体只是一个外在形式,而我们关注的是em标签的语义是"加重语气"

em标签是一个行内标签

④strong标签

strong标签用于表示内容的重要

• 表现形式为: 加粗
  • 注意: 这里的加粗我们也不用过分的去关注,加粗只是一个外在形式,我们要去关注的是strong标签的语义是"表示内容的重要"

strong标签是一个行内标签

⑤blockquote标签

blockquote标签表示长引用

• 这里的引用指的是引用别人的话
• 表现形式为: 引用的内容前面有一个缩进

blockquote标签是一个块标签

⑥q标签

q标签表示短引用

• 也是指引用别人的话
• 表现形式为: 引用的内容使用""(双引号)括住了

q标签是一个行内标签

⑦br标签

br标签用于表示回车

br标签是一个自结束标签(或者加自闭和标签)

⑧b标签

b标签表示加粗

b标签是一个行内标签

⑨i标签

i标签表示斜体

i标签是一个行内标签

补充:

我们的HTML其实就是将一些语义化标签