我眼中的语义网
时间：2023-04-02 22:43:42
HTML
我眼中的语义网什么是语义网？Web语义，使用语义合适的标签，可以使页面具有良好的结构，页面元素具有良好的含义，使人和机器都能快速理解。一方面，语义网页可以让机器在较少人为干预的情况下收集和研究网页信息，从而理解网页内容，然后对收集和汇总的信息进行分析，结果可供人类使用;另一方面，它允许开发人员了解结构以及用户和屏幕阅读器（如果访问者有视力障碍）了解内容。为什么是语义？有利于搜索引擎优化。SEO也就是SearchEngineOptimization，搜索引擎优化。指站内优化，如网站结构调整、网站内容建设、网站代码优化等，以及站外优化，如网站站外推广、网站品牌建设等，使网站满足搜索引擎排名的需要，提高关键词在搜索引擎中的排名，从而吸引精准用户进入网站，获得免费流量，产生直销或品牌推广。人们可以通过视觉划分来判断内容的语义，而搜索引擎只能通过爬取网页标签等代码来判断内容的语义。搜索引擎的有效抓取是增加网站流量的有效途径之一。为了使您的页面尽可能地对搜索引擎友好，请使您的标签和内容尽可能语义化。当页面被移除或样式丢失时，它可以使页面呈现出清晰的结构。html的一些标签，比如h1（粗体）、strong（粗体）、em（斜体），通过一些默认的样式，即使没有CSS样式修饰，也能使页面呈现出清晰的结构。屏幕阅读器（如果访问者有视力障碍）将完全根据您的标记“阅读”您的网页。在团队开发中，好的语义标签可以减少很多差异，降低成员之间的沟通成本，方便开发和后期维护，便于模块化开发。Web语义的分类Web语义应该是风格和结构分离的结果。重构中的语义包括HTML标签语义和CSS命名语义。HTTP语义是针对HTTP协议的。HTML标签语义HTML为Web文档内容提供上下文结构和含义。对于HTML系统来说，Web语义是指使用具有适当语义的标签，使页面结构良好，页面元素有意义，易于被浏览器和搜索引擎解析。通常我们所说的HTML应该是和表现信息完全分开的，里面的标签都应该在语义上定义文档的结构。比如：做SEO，我们会选择h1标签来突出标题，用strong标签来突出关键词，这其实就是语义的体现。SEO的原理其实就是通过分析源代码来反映或猜测网站想表达什么。比如我们要表达一篇文章的标题，我们可能会这样写：文章标题
但是为了更好的取悦搜索引擎，我们会最好写成下面的形式：
文章标题中一些常用的标签元素
是：本身没有实际意义，与其他HTML元素结合，在页面布局中经常使用：div集text,fillsparagraphs:h1~h6,p,span,strong,em...performanceList:ul,li,ol,dl,dt,dd表单相关：form,input,select,buttontbody,tfoot,th,tr,td图片展示：img,canvas打开链接，发送邮件，段落跳转：a另外，metaDescription/metakeywords等描述和关键字metatags用于搜索引擎和更新频率也将用于实现网页SEO。【详情请参考：w3schools.com:https://www.w3schools.com/tag...】其实HTML规范一直在语义化方向下功夫。在设计HowtomakeHTMLdocumentbetterunderstandingbyvarioususeragentsandevenwebcrawlers时，已经考虑了许多元素和属性。HTML5在之前规范的基础上，修改或删除了所有表现层的语义描述，增加了很多可以表达更丰富语义的元素，也出现了很多可以引用DIV元素的更具体的标签。一个经典的页面结构如图：html5显示内容。jpgheader区：包含ph1~h6hgroup等，可以表示标题和字幕。例如：
Title
Subtitle
Textorpicture
2.nav标签中的导航区是专门为页面导航功能定义的一个区域
3.ArticleandSectionareaArticle包含页面的实际内容，包括网页内容的相关组成部分。
4.figure标签包含图像、图表和照片。figure标签可以包含figcaption，代表图片对应的描述文字，与图片有对应关系。
图的标题5.媒体元素audio/video/source/embed6.aside包含一些补充内容，可以将其删除而不影响文章或文章所在的部分或页面的信息。
7.footer等，语义div+span+class鼓励使用HTML定义的语义标签。当然，如果需要兼容低版本的IE浏览器，如IE8及以下，则需要选择合适的兼容标签。CSS命名语义CSS语义是类和ID命名的语义。class属性是连接HTML和CSS的纽带，其初衷是描述元素的内容。指的是给附加在html标签上的class或id取一个通俗易懂的名字。如果说HTML语义标签是供机器阅读的，那么CSS命名的语义则是供人阅读的。好的CSS命名方式可以减少沟通和调试成本，并且易于理解。CSS命名首先要符合W3C命名约定和团队命名约定。其次是效率和可重用性。.main/.sidebar似乎比.left_content/.right_content具有更好的类命名灵活性。
nickName:segnickName:segHttp+URLSemanticurl语义化可以让搜索引擎或者爬虫更好的理解当前url所在目录下需要表达的内容；对于用户来说，也可以通过URL来确定上级目录或下级目录要表达的内容，可以提高用户体验。比如我们搜索分类的url：https://mall.midea.com/index.php/category?id=10049&addr_code=440000,440100,440103https://mall.midea.com/category?id=10049&addr_code=440000,440100,440103这两个url指向同一个资源，但显然第二个url对用户和搜索引擎更友好。URL语义可以根据以下标准进行衡量：URL简化和规范化。例如：url中参数的两个词之间的连接使用下划线_。结构化和语义化。例如：category“category”采用技术无关的url：比如第一个链接中的index.php不应该出现在用户端的url中。参考文档：关于HTML语义和前端架构HTML元素参考HTML语义IBMdeveloperWorks?urlrefactoringsearch-engine-optimization-starter-guide-zh-cn
