标签语义化

article/2025/1/11 19:44:24

如何理解语义化标签?

我们平时使用DIV+CSS的布局,但是通过DIV+CSS布局的页面HTML文档不够清晰,不利于浏览器对页面的读取。语义化标签的主要目的就是发挥标签和属性的用途及作用,通过标签本身的意义合作来优化HTML文档结构。

语义化标签有什么优势?

1、 方便页面布局

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

2、 便于特殊化设备读取

语义化标签的实现有利于一些特殊设备的解析,比如盲人阅读器会完全根据你的标签来“读”你的网页。

3、 利于SEO优化

语义化标签能和搜索引擎建立良好沟通,通过标签本身的含义(例如:h1是标题,p是段落,strong是强调)来理解页面内容是搜索引擎分析和理解页面的重要方式之一,使用语义化标签有助于提高页面关键词排名,减少SEO优化难度。

4、 便于团队开发和维护

语义化更具可读性,是下一步网页开发的重要动向,如果遵循W3C标准的团队都遵循这个标准,可以减少差异化。

常见的语义化标签

header标签

HTML5中的header元素是一种具有引导和导航作用的结构元素,该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题,也可以包含网站Logo图片、搜索表单或者其他相关内容。

nav标签

nav元素用于定义导航链接,是HTML5新增的元素,该元素可以将具有导航性质的链接归纳在一个区域中,使页面元素的语义更加明确。其中的导航元素可以链接到站点的其他页面,或者当前页的其他部分。

article标签

article元素代表文档、页面或者应用程序中与上下文不相关的独立部分,该元素经常被用于定义一篇日志、一条新闻或用户评论等。article元素通常使用多个section元素进行划分,一个页面中article元素可以出现多次。

aside标签

aside元素用来定义当前页面或者文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。

aside元素的用法主要分为两种。

● 被包含在article元素内作为主要内容的附属信息。

● 在article元素之外使用,作为页面或站点全局的附属信息部分。最常用的使用形式是侧边栏,其中的内容可以是友情链接、广告单元等。

section标签

section元素用于对网站或应用程序中页面上的内容进行分块,一个section元素通常由内容和标题组成。在使用section元素时,需要注意以下3点。

● 不要将section元素用作设置样式的页面容器,那是div的特性。section元素并非一个普通的容器元素,当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div。

● 如果article元素、aside元素或nav元素更符合使用条件,那么不要使用section元素。

● 没有标题的内容区块不要使用section元素定义。

footer标签

footer元素用于定义一个页面或者区域的底部,它可以包含所有通常放在页面底部的内容。在HTML5出现之前,一般使用

标记来定义页面底部,而通过HTML5的footer元素可以轻松实现。

与header元素相同,一个页面中可以包含多个footer元素。同时,也可以在article元素或者section元素中添加footer元素。

 


http://chatgpt.dhexx.cn/article/JK3yeMeU.shtml

相关文章

【HTML】讲讲对HTML5的语义化的理解

【HTML】讲讲对HTML5的语义化的理解 引言 github:【HTML】讲讲对HTML5的语义化的理解 内容速递:看了本文您能了解到的知识 在讲什么是语义化之前,先看看语义化的背景。 在之前的文章中提到HTML最重要的特性,那就是标签。但是项…

语义化版本规范

1. 概念 语义化版本规范(SemVer Semantic Versioning)是 GitHub 起草的一个具有指导意义的、统一的版本号表示规范。它规定了版本号的表示、增加和比较方式,以及不同版本号代表的含义。 在这套规范下,版本号及其更新方式包含了相…

Appium:Unable to launch WebDriverAgent because of xcodebuild failure: xcodebuild failed with code 65

Appium运行异常记录: Unable to launch WebDriverAgent because of xcodebuild failure: xcodebuild failed with code 65 api文档: XCUITest Real Devices (iOS) Appium 官方文档 看云 参考文档:遇到 Unable to launch WebDriverAgent be…

xcodebuild: Returned an unsuccessful exit code

在执行pod repo push 的时候报了如下错误 ERROR | [iOS] xcodebuild: Returned an unsuccessful exit code. 解决方法 在命令行最后添加 --skip-import-validation pod lib lint paperShare.podspec --allow-warnings --sourceshttps://github.com/CocoaPods/Specs.git,http://…

探究 Xcode 命令行用法三:xcodebuild 打包实践(上)

本文还是 adat 项目的延伸,开始介绍打包实践。打包相关的内容繁多,作者把它分成了多篇文章,本文主要是概念部分。理解这些概念对于自己动手编写打包命令至关重要。如果你使用 fastlane、bitrise 或其他构建工具来打包,但对于某些配…

【Appium踩坑】Unable to launch WebDriverAgent because of xcodebuild failure: xcodebuild failed with code

解决 原因其实是没有启动 WebDriverAgentRunner, 解决就是启动 WebDriverAgentRunner 就行了。 详细报错 Failed to create session. An unknown server-side error occurred while processing the command. Original error: Unable to launch WebDriverAgent…

Xcode编译没问题而使用xcodebuild命令却生成失败

可能大家在项目开发中有时会遇到这样的问题: 明明在Xcode工具中编译没问题,但当使用xcodebuild命令时却无法正常打包,这是为什么呢? 一、错误 比如,一个错误如下: xxx/ViewController.swift:339:15: warn…

探究 Xcode 命令行用法二:xcodebuild 测试实践

本文还是 adat 项目的延伸,瞄准开发周期的测试环节,主要介绍 Xcode 范畴内的测试概念和自动化测试实践,不会讨论如何编写高质量的测试用例。文中涉及到 Xcode 构建的许多概念,大部分已在前两篇文章中有所说明,建议先大…

如何让php执行xcodebuild,Xcodebuild命令使用

Xcode-select命令 xcode-select是Mac系统自带的命令行工具,属于用户系统内/usr/bin。当电脑上安装多个Xcode时,xcode-select用来选择命令行工具为哪一个版本的Xcode服务。 命令行工具安装指令:xcode-select --install 选择指定的Xcode路径&am…

iOS 自动构建命令——xcodebuild

想想当初天天来到公司,每天需要做一件事就是打开Xcode打包ipa,上传到fir。日复一日月复一月年复一年的做着同样的事情,作为有志成为优秀工程师的我来说,这是必须要解决的问题,所以决定自动化解决问题。 简介 xcodebu…

iOS开发-思维导图(初级)

简介:本脑图只整理了一些自认为比较基础的东西(比较主观),可能适用于部分初学者,对于正在进阶的小伙伴参考意义可能不大哦~😁 如果有小伙伴觉得哪些知识也需要加到图中,欢迎评论区留言&#xff…

IOS开发之证书

分别为证书、appID、设备、描述文件 一、证书Certificates 证书类型: Software:开发证书(程序员开发app)、分发证书(真机调试)、发布证书(正式发布) Services:通知证书&…

怎么学习iOS,如何学习iOS开发?

近年来ios app开发在不断发展中,各中小型也如雨后春笋纷纷露头,像广州商侣软件公司这样的app开发企业可以说是处处可见,然而ios app开发到底该如何入手,如何才能如鱼得水般在这个领域里面畅游呢? 一、什么是ios app开发 ios app开发是指针对苹果公司所生产的手机的ios系统…

零基础学习 iOS 开发

作者:匿名用户 链接:https://www.zhihu.com/question/22000647/answer/114700565 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作为一名混迹iOS开发圈近4年的码农,资历不深不浅&a…

IOS小白入门指南

加入ios 项目已经一个多月了,本篇文章主要介绍IOS开发入门的一些基础知识,帮助想学习iOS开发的人更有效率地学习。 目录 需要的计算机基础 开发语言选择 IOS两种开发语言的异同 Objective-C和swift的相同点: 二者的不同点&#xff1a…

java ios开发_使用Java开发iOS应用

自从使用Objective C开发原生的iOS应用以来,就有许多使用别的语言来开发iOS应用的替选方案。比如说,下面就列出了一些: PhoneGap, 使用HTML/JS来开发 RubyMotion,使用Ruby ionic,使用AngularJS开发 我最近发现的一个的是RoboVM,你可以通过它来用Java开 自从使用Objective…

IOS开发进阶学习资料(提升必备)

最近整理了下IOS学习资料,包含了入门、进阶、性能优化、面试和学习书籍,算是比较全面的,在这里分享给大家,希望对大家有用。 先晒出IOS学习路线图,大家照着图谱修炼。 学习社区 objc中国 learn IOS Ray Wenderlich…

iOS开发进阶(二):走近iOS原生开发

文章目录 一、前言二、知识储备三、 Object-C四、启动流程五、拓展阅读 一、前言 在应用 uni-app 进行跨平台APP开发过程中,发现并不支持视频播放小窗功能,且插件市场提供的插件用户体验不好,遂决定自行开发 uni-app 原生插件。 uni-app原生…

iOS开发学习系列(1)———Swift语言入门

缘起 对于成为全栈开发者的目标而言,很好奇自己几年前怎么就没想过iOS开发的事情。iOS好歹也是移动操作系统两巨头之一。反思了下,有可能是因为之前对Object-C太无感导致的。现在趁着Swift,借这个机会重新整理iOS的开发。本系列虽然是iOS开发…

IOS开发学习资料集合(开发必备)

最近整理了下IOS学习资料,包含了入门、进阶、性能优化、面试和学习书籍,算是比较全面的,在这里分享给大家,希望对大家有用。 先晒出IOS学习路线图,大家照着图谱修炼。 学习社区 objc中国 learn IOS Ray Wenderlich…