如何理解HTML语义化

最新推荐文章于 2024-07-14 17:09:06 发布

爱划水de鲸鱼哥～

最新推荐文章于 2024-07-14 17:09:06 发布

阅读量81

点赞数 1

分类专栏：笔记文章标签： html html5

本文链接：https://blog.csdn.net/m0_47901007/article/details/117552471

版权

笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

HTML语义化

合理使用HTML语义化标签，避免DIV+CSS布局。

<header>：头部
<h1>~<h6>:第一至第六级标题
<nav>：导航
<main>：页面主要内容
<footer>：页脚

HTML语义化的好处

方便阅读代码：便于开发和维护；
有利于SEO：搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析：如屏幕阅读器、盲人阅读器等；

写HTML代码时应注意什么

尽可能少的使用无语义的标签div和span；
不要使用纯样式标签，如：b、u等，改用css设置；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱划水de鲸鱼哥～

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

如何理解 HTML 语义化

Kofe_Chen的博客

03-04

773

你是如何理解 HTML 语义化的？(面试) 在了解 HTML 语义化之前，先科普一下下面几个名词：语义：是语言所蕴含的意义 (语言的含义)。简单的说，符号是语言的载体，符号本身没有意义，只有赋予含义的符号才能够被使用，此时语言就转化为了信息。 SEO（Search Engine Optimization）: 译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名 ...

HTML语义化的理解

番茄脸红了~

06-14

1030

html语义化及其基础内容理解

参与评论您还未登录，请先登录后发表或查看评论

你是如何理解 HTML 语义化的？

weixin_44932552的博客

08-01

1665

面试题–你是如何理解 HTML 语义化的？简单来说：就是用正确的标签做正确的事。比如：头部：header 导航：nav 主体内容：main 标题：h1 ~ h6 段落：p 侧边栏：aside 页脚：footer 从历史讲起，大家知道前端也是这两年才发展起来的，以前的前端都是写写展示页，所以其实很早以前，是没有专门的前端的，需要写网页了，就让后端看看顺手写了，所以那时候的网页，都是一堆Table 或者满屏幕的div标签。不要说给别人看自己的HTML结构了，估计自己也看的够累。而且对于搜索引擎和设备

如何理解HTML语义化以及它的重要性体现在哪里

最新发布

2402_84885073的博客

07-14

788

综上所述，HTML语义化对于提升网页的SEO、无障碍访问性、代码可读性可维护性、减少CSS和JavaScript依赖、支持多终端设备的浏览器渲染以及提高网站的专业性和可信度等方面都具有重要意义。因为通过合理的标签选择和结构安排，可以使得网页在没有或较少CSS和JavaScript的情况下也能够呈现出清晰的结构和基本的布局效果。HTML语义化是指使用具有明确含义的HTML标签来构建网页内容的过程，这些标签不仅描述了内容的结构，还传达了内容的含义。这有助于提高网页在搜索引擎中的排名，增加网页的曝光度和流量。

面试题：你怎么理解 HTML 语义化？语义化有什么优点？

Hlleo Wrold

05-31

1042

（语义化是什么）HTML 语义化要求开发者，而不是像divspan等无意义的标签，这里的意义就是语义。（语义化的作用）通过使用语义化标签，开发者。（语义化举例）如header常用于定义nav常用于定义article常用于定义一篇section常用于定义aside常用于定义footer常用于定义main常用于定义等等。

HTML语义化标签理解

qq_30104281的博客

04-08

2105

1：语义化标签是什么？语义化标签，目的是让标签有自己的含义 <p>语义化</p> <span>非语义化</span> 如上代码，p标签含义就是段落，而span标签毫无意义。 2：语义化标签好处方便用户阅读，页面更加清晰。更好的SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。有利于开发维护。 3：页面结构语义化标签 ...

如何理解语义化

前端攻城狮

03-08

2922

1、语义化的背景以前的HTML的结构，基本上就是DIV+CSS。然而，DIV它并没有什么任何的意义，全靠CSS显示页面的样式。那么近几年呢，开发者提出了HTML结构的语义化，所以W3C就制定出了语义化标签。 2、什么是语义化语义化就是构成HTML结构的标签要有意义，比如有这样的标签：head表示页面头部，main表示页面主题，footer表示页面底部。那么这些标签构成的HTML结构就是有意义的，也是语义化的。如果说页面的头部、主体以及底部都用div来表示，那么他就不是...

HTML语义化标签的理解

weixin_47227886的博客

04-10

5223

1. 语义化的背景：以前的HTML的结构，基本上就是DIV+CSS。然而，DIV它并没有什么任何的意义，全靠CSS显示页面的样式。那么近几年呢，开发者提出了HTML结构的语义化，所以W3C就制定出了语义化标签。 2. 什么是语义化语义化就是构成HTML结构的标签要有意义。比如有这样的标签： header表示页面头部 main表示页面主题 footer表示页面底部那么这些标签构成的HTML结构就是有意义的，也是语义化的。如果说页面的头部、主体以及底部都用div来表示，那.

如何理解html语义化

qq_41865159的博客

04-19

1262

1.背景介绍语义化的出现是大势所趋，来看看语义化的前世今生。对于当前的 Web 而言，HTML 是联系大多数 Web 资源的纽带，也是内容的载体。在 Web 被刚刚设计出来的时候，开发者可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。也许起初的想法很简单：用来发布Web 内容和资源的索引，方便人们查看。但是随着 Web 规模的不断扩大，信息量之大已经不在人肉处理的范围之内了。这个时...

语义化的HTML结构怎么理解

09-28

相信大家都知道html和css，知道html结构和css表现分离，知道html语义化，这些都是这几年的热门关键字。语义化的html在国内也是一两年前才开始被追捧的，看看现在群里谈论的html结构，关于html结构的面试题，语义化的...

加深对HTML和CSS标签语义化的理解

01-08

以前我真的没有怎么重视过搜索引擎，现在开始比较在意了，因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以就要尽可能地使标签语义化。以前以我对web开发的粗浅理解，觉得写一个...

HTML中语义化的理解

06-21

搜索引擎优化（SEO）：搜索引擎更喜欢能够理解和解析的页面内容，语义化的HTML结构可以提高页面在搜索引擎结果中的排名，增加网页的曝光和访问量。代码可读性和可维护性：使用语义化的标签和属性，可以让代码更易于...

HTML标签语义化的介绍

12-11

理解HTML标签语义化的重要性在于，它能帮助搜索引擎更好地理解网页内容，从而有利于SEO（搜索引擎优化）。例如，正确使用`<header>`、`<nav>`、`<main>`、`<article>`、`<aside>`和`<footer>`等结构性元素，可以为...

浅谈margin负值问题

Sun_blog

06-09

4567

说到margin负值问题，很多都小伙伴都一脸懵逼。哈哈，没错说到margin大家用到的最多的还是它的正值。例如：margin-top: 20px 等等。但是margin负值的情况也十分重要，比如经典三栏布局中的圣杯布局和双飞翼布局中就应用了margin负值。那么接下来我就带大家看看什么是margin负值。 margin负值 margin负值顾名思义，就是margin属性的值为负值的情况，例如：margin-left: -20px。看到这个例子各位小伙伴们就对margin负值的情况有了初步的了解。接下来我们就

div盒模型宽高计算

Sun_blog

06-07

1926

offsetWidth = width + padding + 左右border-width offsetHeight = height + 上下padding + 上下border-width

CSS经典布局 -- 圣杯布局 & 双飞翼布局

Sun_blog

06-10

482

文章目录引言圣杯布局圣杯布局DOM结构圣杯布局样式圣杯布局总结双飞翼布局双飞翼布局DOM结构双飞翼布局样式双飞翼布局总结总结引言圣杯布局和双飞翼布局都是比较经典的三栏布局，两种布局的页面效果基本相同。两种布局都是两侧宽度固定，中间宽度自适应且中间内容优先渲染的三栏布局。圣杯布局圣杯布局DOM结构 <header>this is the header</header> <main> <div class="center"&gt

node.js学习笔记--定义GET和POST路由

Sun_blog

06-15

207

const http = require(‘http’) const queryString = require(‘querystring’) const server = http.createServer((req, res) => { const url = req.url const path = url.split(’?’)[0] const queryStr = url.split(’?’)[1] //a=100 && b=200 const method = req.m

margin常见问题

Sun_blog

06-07

165

一、margin纵向重叠页面结构： <div class="box1"> box1 </div> <div class="box2"> box2 </div> 页面样式： .box1{ width: 100px; height: 100px; margin: 20px; backgr