HTML学习-3.部分标签介绍

语义化标签

各种不同的标签自身在网页中就有其自带的样式,比如不同标签内的字体大小、字体样式各有不同,但是标签的各类样式我们通过CSS进行改变,并且后期我们为了网页的美观或者达到某种要求,一定会用CSS重新进行样式设置。因此,我们在学习HTML标签时,只需要重点记住标签的语义即可,不必在意它的具体样式

内容语义标签

  • 标题标签(h1~h6)

h1 ~ h6 一共有六级标题,从 h1 ~ h6重要性递减 ,h1最重要,h6最不重要,h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1(搜索引擎搜索网页时,可能会通过标题来了解网页内容,因此title和h1中一般放非常重要的内容),通常情况下标题标签只会使用到h1~ h3,h4 ~ h6很少用。另外,有些情况下文章的两级标题存在关联性,例如我们的文章标题HTML学习标题下有一个副标题3.部分标签介绍。因此还存在一个标签 hgroup 专门为标题进行分组。
HTML学习-3.部分标签介绍_第1张图片
不必在意样式,只关注标签语义即可。

  • 段落标签 (p

p标签表示页面中的一个段落,就是我们平时写文章中的段落。

  • 强调标签(emstrong

em标签把文本定义为强调的内容
strong标签把文本定义为语气更强的强调的内容。

  • 引用标签(blockquoteq

blockquote标签定义块引用。blockquote中的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进,而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
q标签定义短的引用。浏览器经常在引用的内容周围添加引号。

  • 换行标签(br

br标签可插入一个简单的换行符(就是按一次回车)。br标签是空标签(意味着它没有结束标签,因此这是错误的:< b r> < / br >
HTML学习-3.部分标签介绍_第2张图片

结构化语义标签

结构化语义标签即布局标签,主要是用于网页的布局。

  • header 表示网页的头部
  • main表示网页的主体部分(一个页面中只会有一个main)
  • footer 表示网页的底部
  • nav表示网页中的导航 aside 和主体相关的其他内容(侧边栏)
  • article 表示一个独立的文章
  • section表示一个独立的区块,上边的标签都不能表示时使用section

HTML学习-3.部分标签介绍_第3张图片

块元素与行内元素

仔细观察上面的例子我们就会发现,有些标签的内容即使很短它也会自动占满一行 即使后面有很大的空白也不会写入内容,像标题标签段落标签长引用标签等,而有些标签的内容则不会单独占据一行,写完之后仍然和其他内容共处一行 ,例如强调标签短引用标签,这就是块标签和行内标签的区别。
块元素:独占一行,在网页中一般通过块元素来对页面进行布局。
行内元素:可以多个标签存在一行,行内元素主要用来包裹文字。
一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素。

非语义标签

div:div标签是一个块元素,它没有语义,几乎可以用所有块元素的位置,因此是HTML文档中使用最多的一个标签。
span:span标签是一个行内元素,它同样没有特定的语义,可以用于大部分需要行内元素的位置。

[注] 本人也正在自学当中,文中如有理解不当或者错误表述之处,欢迎交流指正。

你可能感兴趣的:(html5,html)