业精于勤
而荒于嬉

HTML 标签 第 1 篇

一、段落标签 P

  1. P 标签为双标签,必须有尾标签。
  2. P 标签默认占一整行,自带换行效果。
  3. P 标签里面可以嵌套其他标签。
  4. 掌握 P 标签的应用场景,在合适的场景使用合适的标签。


二、自定义文本内容标签 span

  1. span 标签为双标签,它总是成对出现的,需要首尾标签;
  2. span 用于对文档中的行内元素进行组合;
  3. span 标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 SPAN 应用样式,那么 SPAN 元素中的文本与其他文本不会任何视觉上的差异;
  4. span 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式;
  5. span 标签不会自动换行,他们会在同一行显示,但是左右会有间隙。如想解决此问题,把代码书写在一行即可。


三、标题标签 H

标题标签,和我们之前将的 title 标签并不是同一个意思,这里说的标题标签,是指在网页上定义标题,如文章的标题,段落的标题等,而 title 标签特指网页的标题。当我们需要给文章或者段落定义标题时,就需要用到 H 标签了。 H 标签分为 H1、H2、H3、H4、H5、H6,H1位超大标题,然后依次递减,H6 为最小的标题。

3.1 H 标签的作用

H 标签直观的告诉用户,网页哪部分是重要的,哪些是不那么重要的。H 标签通常用来为用户展现网页的结构,由于 H 标签通常会使某些文字比普通的文字大,对于用户来说,便于他们更直观地看出这些文字的重要性,而且可以帮助他们理解标题文字下方的内容。多种渐变大小的标题一开始主要为网页的内容创建分层结构,便于用户直观地浏览网站。
当我们需要在页面上,特别是为文章或段落定义标题时,我们就需要用 H标签了。例如:

而 HTML 给我们提供了从 H1 – H6 6个选择,让我们可以超大标题到超小标题自由选择,可以适应各种场景。


3.2 H 标签的用法

H1 – H6 标签都为双标签,所以必须有首尾标签。例如:

  <h1>我是h1标签</h1>
  <h2>我是h2标签</h2>
  <h3>我是h3标签</h3>
  <h4>我是h4标签</h4>
  <h5>我是h5标签</h5>
  <h6>我是h6标签</h6>

那么在页面上会呈现以下效果:

3.3 H 标签的特点

  1. H 标签和 P 标签一样,也是块级元素,所以也会默认占一整行;
  2. H 标签有默认样式:字体大小和字体粗细,所有标题标签的字体均为加粗的字体,且字体大小会随 H6-H1 逐渐增大;
  3. H 标签上下也有间距(CSS 中的外边距)。

例如:

3.4 注意事项

  1. H 标签通常用来标题,但是如果想定义文本加粗的内容,也可以使用 H 标签代替;
  2. H 标签有默认样式,如果想清楚该样式,必须借助 CSS 为其设置属性;
  3. H1、H2、H3、H4、H5、H6 作为标题标签,并且依据重要性递减。遵循这样的原则是很有必要的,它能让页面的层级关系更清楚,让搜索引擎更好地抓取和分析出页面的主题内容等等;
  4. H1 标签在一个页面中只能使用一次,因为它代表了页面的主标题(这相当于一篇文章不会有很多主标题一样),但是 H2 到 H6 标签可以使用多次,不过建议都是用一次,多次使用会稀释权重。使用 H1 关键词的时候,不要让题头失去可读性,内容要能概括文章主题,要考虑读者的感受。

3.5 小结

  1. H 标签均为双标签,必须具有首尾标签;
  2. H 标签从 H1 开始,H6 结束,字体均为加粗,H1 标签字体最大,H6 标签字体最小;
  3. H 标签均为块级元素,既默认占一整行,自带换行效果;
  4. H 标签均有上下边距,既 CSS 中的外边距。

四、div 标签

大部分的 HTML 标签都是有默认样式的,如果我们不想使用标签自带的默认样式,那么我们就需要借助 CSS 来清除这些默认样式。那有没有哪一个标签是没有默认样式的呢?答案是肯定的,就是我们的 div 标签。因为 div 标签是没有默认样式的,所以在网页布局时,我们更推荐使用 div 标签去搭建我们网页的结构,这样我们所有的样式都可以自定义了。

4.1 div 标签的作用

div 标签,称为区隔标记。作用是设定字、画、表格等的摆放位置。可定义文档中的分区或节。div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记 div,那么该标签的作用会变得更加有效。div 就相当于一个区域,我们把我们网页内容的都放在这个区域里面。

div 元素,是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。div 的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由 div 标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

4.2 div 标签的用法

div 标签为双标签,所以必须有首尾标签。区域内的内容即为 div 标签的内容。例如:

<div>
  我是一个div标签  
</div>

那么在页面上就会程序一下效果:

4.3 div 标签的特点

  1. div 标签是块级元素,默认占一整行,可以设置宽高。如我们写两个 div 标签,会呈现以下效果:

  1. div 没有任何的默认样式,所以它不会像 P 标签和 H 标签一样有上下间距。
  2. div 标签里面可以嵌套其他任意标签,例如:
<div>
  <p>我是div标签里面的p标签</p>
</div>
  1. 我们可以给 div 设置任意的样式。

4.4 经验分享

  1. 因为 div 标签没有任何的默认样式,所以我们推荐网页时,使用 div 标签。
  2. 我们可以给某些单独的标签外层包裹一个 div,比如 img 标签、a 标签,这样方便我们后续为其设置样式。
  3. div 为块级元素,默认占一整行,如果想让 div 在同一行排列,可以为其设置 CSS display 属性,或者使用 flex(弹性盒模型)布局。
  4. div 可以嵌套任意标签,所以我们可以让其他标签和 div 标签任意组合,来构成我们的网页。

4.5 小结

  1. div 标签为双标签,它总是成对出现的,需要首标签尾标签。
  2. div 标签用来定义文档中的分区或节。
  3. div 标签可以把文档分割为独立的、不同的部分。
  4. 可以使用 div 元素来组合元素,这样就可以使用样式对它们进行格式化。
  5. div 默认占一整行,而且没有任何默认样式。

五、总结

  • 块级元素( p 标签,h 标签, div 标签),块级元素的特点是默认占一整行,会自动换行。
  • 行内元素(span 标签),行内元素默认是在同一行排列。
赞(0)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《HTML 标签》
文章链接:https://ithuang.net/html-tag-1.html
本站资源仅供个人学习交流,本人版权所有。欢迎转载,转载请注明作者及来源链接,谢谢。