web前端技术课程内容详解之语义化标签的理解

语义化标签的理解

在学习HTML阶段的最后,我们会涉及到学习语义化标签,明明用div等标签就可以构成页面,那么为什么还会有语义化标签的存在?语义化标签到底是什么?学好语义化标签又会在哪方面应用?接下来会从上面几个方面说一下我的理解。

1、 语义化标签是什么?

常用的语义化标签包括

<header></header>头部 <nav></nav>导航栏 <section></section>区块(有语义化的div) <main></main>主要区域 <artical></artical>主要内容 <aside></aside>侧边栏 <footer></footer>底部

2、 为什么会用语义化标签?

平时,我们都会采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于浏览器对页面的读取。所以HTML5新增了很多新的语义化标签。并且,在我们未给页面添加css样式时,用户体验并不好。语义化标签也能让浏览器更好的读取页面结构。再就是便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

1、 页面布局

如下图,如果我们用div来实现此图的布局,那么就要涉及到加类名或者选择符的问题,还有起名字,很多时候就会弄混。直接用语义化标签就会标记出每个区域的作用并且更好是实现页面布局。

2、 在移动端布局方面应用

学习一阶段的最后我们会学习到移动端的布局与书写,那么此时选择使用语义化标签往往要比div书写更简单优化。比如移动端布局中我们要采用百分比布局或者rem布局方式,就会涉及到弹性盒中的固比固。比如在我们移动端页面中,拿QQ举例。

QQ的页面中就可以划分状态栏,header,main,footer。三个区域。在我们的消息区域,有很多消息时,要想查看最底部消息就要下拉,但与此同时header与footer是不动的。那么我们就用到了语义化标签。用到了弹性盒中的固比固(固定高 : flex:1 : 固定高);

3、 举例

这是在学习移动端布局时所写的一个练习,之所以拿出来它,是因为它是一个很典型的案例,页面中都运用了语义化标签。

给大家看一下页面结构的代码:

<div class="all">
<header>
<ul>
<li><i class="iconfont">&#xe6ca;</i></li>
<li>
<a href="#" class="cur">热点</a>
<a href="#">关注</a>
</li>
<li><i class="iconfont">&#xe50d;</i></li>
</ul>
</header>
<nav>
<ul>
<li>足球现场</li>
<li class="cur">足球广场</li>
<li>足球美女</li>
</ul>
</nav>
<main>
<figure>
<img src="images/img1.jpg"/>
<figcaption>我也不看足球,这里没什么文字时代复分</figcaption>
</figure>
<figure>
<img src="images/img2.jpg"/>
<figcaption>我也不看足球,这里没什么文字时代复分</figcaption>
</figure>
<figure>
<img src="images/img3.jpg"/>
<figcaption>我也不看足球,这里没什么文字时代复分</figcaption>
</figure>
<figure>
<img src="images/img4.jpg"/>
<figcaption>我也不看足球,这里没什么文字时代复分爱</figcaption>
</figure>
<figure>
<img src="images/img1.jpg"/>
<figcaption>我也不看足球,这里没什么文字时代复分</figcaption>
</figure>
</main>
<footer>
<ul>
<li>
<i class="iconfont">&#xe627;</i>
<p>首页</p>
</li>
<li>
<i class="iconfont">&#xe627;</i>
<p>首页</p>
</li>
<li>
<i class="iconfont">&#xe627;</i>
</li>
<li>
<i class="iconfont">&#xe627;</i>
<p>首页</p>
</li>
<li>
<i class="iconfont">&#xe627;</i>
<p>首页</p>
</li>
</ul>
</footer>
</div>

3、 总结

其实总结起来也就是一句话,没有没有用的东西,div等无语义化的标签有他们的好处,语义化标签也有语义化标签的好处,不可一概而论。但是语义化标签也不是乱用的,视我们页面需求与情况而定

添加收藏

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏达摩兵的技术空间

动态内容的等高布局实现

首先不同内容的固定高度等高布局没有任何难度,本文讲的不是这种。本文讲的是,不同行级或者浮动元素具有不定高度时,将其他元素的高度填充为最大高度元素的高度这种场景。

10730
来自专栏vue学习

小程序 — 展开/收起

(1)首先我们应该在data中定义一个变量isShow用来控制样式的切换,默认为收起状态(即不展示)。

51340
来自专栏Coco的专栏

妙用 scale 与 transfrom-origin,精准控制动画方向

18040
来自专栏Coco的专栏

妙用 scale 与 transfrom-origin,精准控制动画方向

20340
来自专栏我就是马云飞

一个精致的打钩小动画

前言 最近在看轻芒杂志的时候,看到一个动画很带感很精致; 恰好这段时间也在看【HenCoder】的自定义view教程(里面写得非常非常详细,也有相应的习题等等)...

24850
来自专栏成长道路

html 边框变粗 margin -1px

最近刚开始学习web前端,html和css,对于遇到的边框变粗的问题,用margin为负值解决问题发表一些自己的理解 首先我们来看看下面一张图片 ? lis...

34400
来自专栏Coco的专栏

你所不知道的 CSS 动画技巧与细节

15130
来自专栏Coco的专栏

【CSS3进阶】酷炫的3D旋转透视

30040
来自专栏葡萄城控件技术团队

响应式设计(Response Web Design)实践

前一篇响应式设计(Response Web Design)浅谈提到了响应式设计的由来和应用场景。本文聊一聊如何实现。 如何让自己的网站也响应式Web设计,可以响...

31070
来自专栏前端儿

细说移动端 经典的REM布局 与 新秀VW布局

说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等...

36820

扫码关注云+社区

领取腾讯云代金券