第六届字节跳动青训营第一次文章| 青训营

63 阅读2分钟

第六届字节跳动青训营第一次文章| 青训营 本次文章目的:进行HTML语义化的案例分析一些实际网站的HTML结构,对比非语义化标签的差异; 首先我们要知道html语义化标签的意思是什么,语义化的标签,旨在让标签有自己的含义。例如

和标签有各自的意思,

表示的是一行文字,表示一行文字。 语义化标签具有很多的优势,例如代码结构清晰,方便阅读,方便解析,方便搜索引擎优化,因此我们在写一些页面结构时,应尽量使用有语义的html标签。 接下来要解析的是qq浏览器的页面结构,首先进入首页后,出现的是文档声明,,指定了所使用的html的版本,其次就是文档的具体结构部分,有页头,像qq浏览器的页头是比较多的,粘贴一段表头所示,

//这里是解释编码格式 上网导航 - 轻快上网 从这里开始 //这里是标题 //这里文档里页面里的前几段文字的样式和链接都已经给出 这里的表头到此结束,在其后是body,也就是页身,而在进页面中并没有body部分,而是选择了
  • 有序列表来分开呈现出一个又一个小标题,在其中又放入了链接,样式和其他的语义化标签来具体细化了所呈现的内容。多段有序列表来分块内容,用户想具体了解其中哪一块内容时,只需要点击链接,就可以通过跳转链接来得知具体的内容。 通过具体的解析,我们看到了语义化标签的使用好处,通过各种语义化标签的多种搭配,我们就可以做到我们想表达出来的效果