char2
第二章 HTML5语义化标签
2-1 语义化、让你的网页更好的被搜素引擎理解
标签的用途:我们学习网页制作时,常常会听到一个词,语义化。那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等。
语义化可以给我们带来什么样的好处呢?
-
- 更容易被搜索引擎收录。
-
- 更容易让屏幕阅读器读出网页内容。
2-2 段落标签
如果想在网页上显示文章,这时就需要
标签了,把文章的段落放到
标签中。
语法:
<p>段落文字</p>
注意一段文字一个<p>
标签,如在一篇文章中有3段文字,就要把这3个段落分别放到3个<p>
标签中。
<p>
标签的默认样式,可以在上图中看出来,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它。
2-3 DIY一个标签吧~
- <span>标签,这个标签是没有语义的,他是为了设置单独的样式用的。
- 语法:
<span>文本</span>
- 例子:把美国梦设置为蓝色的代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>了不起的盖茨比</title><style>span {color:blue;}</style>
</head><body><p>为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>
</body></html>
2-4 使用<hx>
标签为网页增加标题
-
标题标签一共有6个,
h1、h2、h3、h4、h5、h6
分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>
是最高的等级。 -
标签代码:
<body><h1>一级标题</h1><h2>一级标题</h2><h3>一级标题</h3>
</body>
2-5 <div>
定义标签块
在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>
标签中,这个<div>
标签的作用就相当于一个容器。
什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分,可以使用<div>
标签作为容器。
2-6 <header>
用来定义头部区域
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>header</title>
</head><body><header> 我代表头部</header>
</body></html>
2-7 <footer>
标签定义底部区域
footer标签代表底部,但作用等同于div,只是具备语义化。
2-8 <section>
定义区段
section标签,定义一个区域。作用等同于div,只是具备语义化。
2-9 <aside>
定义侧边栏区域
v,只是具备语义化。
2-8 <section>
定义区段
section标签,定义一个区域。作用等同于div,只是具备语义化。
2-9 <aside>
定义侧边栏区域
同上
更多推荐
char2
发布评论