HTML5语义化标签

字号+ 编辑: Snake 修订: 呆头鹅甲 来源: 慕课网 2021-03-24 15:28 我要说两句(0)

HTML5语义化标签,有什么好处呢?语义化,让你的网页更好的被搜索引擎理解……

2-1 语义化,让你的网页更好的被搜索引擎理解

标签的用途:网页制作时,会听到一个词,语义化。

即明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等。

语义化有什么样的好处呢?

  1. 玩转SEO,更容易被搜索引擎收录。

  2. 更容易让屏幕阅读器读出网页内容。

2-2 段落标签

如果想在网页上显示文章,这时就需要<p>标签了,把文章的段落放到<p>标签中。

语法:

<p>段落文本</p>

注意一段文字一个<p>标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到3个<p>标签中。如下图所示:

 图片11.jpg

在浏览器中显示的效果:

 图片12.jpg

<p>标签的默认样式,可以在上图中看出来,段前段后都会有空白,可以用css样式来删除或改变它。

2-3 使用<span>标签自定义文字样式

<span>标签,这个标签是没有语义的,它的作用就是为了设置单独的样式用的。

如果现在我们想把下面的第一段话“美国梦”三个字设置成blue(蓝色),这样情况下就可以用<span>标签。

 图片13.jpg

语法:

<span>文本</span>

2-4 使用<hx>标签为网页增加标题

文章的段落用<p>标签,那么文章的标题用什么标签呢?在本节我们将使用<hx>标签来制作文章的标题。

标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

语法:<hx>标题文本</hx> (x为1-6)

文章的标题,使用标题标签,另外网页上的各个栏目的标题也可使用它们。如下图为腾讯网站

 图片14.jpg

注意:因为h1标签在网页中比较重要,所以一般h1标签被用在网站名称上。

腾讯网站就是这样做的。如:

<h1>腾讯网</h1>

h1-h6标签的默认样式:

标签代码:

 图片15.jpg

在浏览器中显示的样式:

 图片16.jpg

标题标签的样式都会加粗,h1标签字号最大,h2标签字号相对h1要小,以此类推h6标签的字号最小。

图片17.jpg 

2-5 使用<div>标签自定义块

在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。

语法:

<div>…</div>

确定逻辑部分:

什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。

如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div>标签作为容器。

 图片18.jpg

 图片19.jpg

2-6 <header>标签定义头部区域

html5新增的语义化标签,首先学习header标签,用来定义头部区域。

 图片20.jpg

2-7 <footer>标签定义底部区域

footer标签,用来定义底部区域。

 图片21.jpg

2-8 <section>定义区段

section标签,定义一个区域。

 图片22.jpg

2-9 <aside>定义侧边栏区域

aside标签,定义一个侧边栏区域。

例如网站中侧栏部分:

 图片23.jpg

阅完此文,您的感想如何?
  • 鼓掌

    0

  • 鄙视

    0

  • 开心

    0

  • 愤怒

    0

  • 可怜

    0

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.交流群: PHP+JS聊天群

相关课文
  • 分享一个videojs 7.x在pc端浏览器播放m3u8直播流的代码案例

  • HTML语言当中6种空白空格符号种类说明以及区别

  • html头部标记中的lang属性后面值写什么

  • 前端入门方法

我要说说
网上宾友点评
沙发已空
HTML5语义化标签