HTML基础知识（二）

HTML基础知识（二）

块级元素

所谓块级元素，就是能够独占一行，且可以单独设置宽高和各类边距。在不改变其属性不添加css样式的情况下，每一个块级元素占一行或多行（根据块级元素内元素内容来定），不管该块级元素内容有多少，第二个元素都会换一行显示。本文介绍一部分常用的块级元素，以助于理解块级元素的含义。

1.划分区域的语义化标签和div

上文提到的语义化标签和div都是块级元素，他们之间可以相互嵌套来定义网页的布局结构。
header:一般用于网页的头部或者某个区域的头部，比如标题、导航栏等都可以放在header内部。
nav：表示导航栏，一般导航栏的标签都可以点击跳转，所以内部可以放a标签等。
article：一般是页面的主题部分，比如一篇文章的内容部分。
section：是article的子元素，一般是一个整体需要划分成多个部分时使用。
aside：适用场景比如广告、侧边补充信息栏。
footer：表示页面的底部，一般用来放网页的注册信息、法律条文、联系方式等等。

2.标题

在HTML中写标题我们一般用h标签，h1~h6定义了不同级别的标题样式。随着h后面数字越大，字体会越小。

下面是网页显示效果

h是块级元素，标签独占一行，第二个h标签不会紧跟着第一个h标签后面显示，而是换一行显示。

注意：
h标签内部不能再嵌套一个h标签，会改变标签内部的层次结构。

在编辑器中h内部嵌套了另一个h，这两个h应该是父子关系，但是当我们打开检查器后会发现

这两个h标签是兄弟关系，层次结构发生了变化。

段落

段落是p标签，p标签也是块级元素，p 元素会自动在其前后创建一些空白，常用来放一段文字。
注意：
p内部不能嵌套的元素：
1.p元素
2.h元素
3.上文提到的div和语义化标签
理由同h元素内部不能嵌套h元素一样，元素的层次结构会发生变化。

二、行内元素

行内元素不能单独设置宽高，元素所占区域由元素内容的多少来决定，一般情况下行内元素在网页都会并排显示。

1.span

span是一个无语义元素，他没有内部含义，功能是给一小段文本添加样式，能让多个标签的内容在一行显示。
比如当我们想要添加文本或者符号又不想要换行，且需要单独设置css样式时，就可以使用span标签。

2.文本元素

• blockquote：整段引用，自动进行缩进
  q：小段文本的引用，自动添加引号
• cite：对参考文献的引用，当标签时，自带斜体，搜索引擎可以识别内容来自哪里。当属性时，属性值不会显示到页面，普通浏览器不识别，阅读浏览器识别后会说来自于哪里
  abbr：对缩写词的引用，鼠标移动到缩写处会显示全称（title的属性值是展示到页面的内容）
  
• em：强调的文本，文本斜体，普通浏览器不识别，阅读浏览器em会加重 读音，会被搜索引擎识别在搜索引擎眼里权重比正文高
  ​ i：应该区别对待的文本，文本斜体
• strong：重要的文本，加粗，普通浏览器不识别。会被搜索引擎识别在搜索引擎眼里权重比正文高
  b：应该突出的文本 ，加粗，普通浏览器不识别，和strong的区别是阅读浏览器会加重读音