重学前端之HTML(四)HTML标签有关的问题与思考

  这一篇文章主要是写一下winter老师提出的一些问题,以及我在整理这一块内容时,想起的一些问题,都在此记录一下,方便自己回顾。

思考

一、语义类标签是什么,使用它有什么好处?
  语义类标签的主要区别在于它们表示了不同的语义,如p、ul、ol等,这些都是语义类标签。
  语义类标签的好处:
    1）结构清晰,即使在没有css的时候,也能清晰的看出网页的结构
    2) 增强可读性,便于团队开发和维护
    3) 有利于搜索引擎(SEO)优化
    4) 方便其他设备解析,如当视障人士使用屏幕阅读器来听网页时,可以快速找到他们需要的信息

二、winter对于语义标签的态度:
  “用对”比“不用”好，“不用”比“用错”好。当然了，我觉得有理想的前端工程师还是应该去追求“用对”它们。

三、为什么link一个css要用href,而引入js要用src呢?
  凡是替换型元素，都是使用 src 属性来引用文件的，链接型元素是使用 href 标签的。替换元素是把文件的内容引入,替换掉自身位置的一类标签。script是一个为数不多的既可以作为替换型标签,又可以不作为替换型标签的元素,所以在引入js时要在script上设置src属性进行替换。style标签不是替换型元素,不能使用src属性,所以在用link标签引入css文件时用href标签。

问题

一、为什么不推荐使用table布局?
  优点:
    1) 容易上手
    2) 兼容好,在不同浏览器中都能得到很好的兼容
    3) 通过复杂的表格套表格的形式，也可以实现比较复杂的布局需求。
    4) 数据化存放更合理
  缺点:
    1) table会阻挡浏览器渲染引擎的渲染顺序。会延迟页面的生成速度，让用户等待更久的时间。table布局时只有整个table加载完成后才会显示该块内容。
    2) table布局时,主要是用到表格的相互嵌套使用这样就会造成代码的复杂度更高,标签结构多
    3) table标签应该是一个存放数据的区域,而不是布局工具,不符合W3C标准,没有实现结构和表现相分离,它既有css的表现功能,也有html的结构功能
    4) 不利于维护和开发
参考来源: https://www.html5tricks.com/w...
     https://www.jianshu.com/p/cc1...

二、使用div + css布局的优缺点
  优点:
    1) 结构(HTML)和表现(CSS)相分离,便于开发和维护
    2) div+css页面打开速度比table快,浏览器是边加载边将内容呈现到浏览器上,而table布局是浏览器对整个table加载完成后才显示
  缺点:
    1) css的兼容性问题比较突出
    2) CSS+DIV网页设计并不能保证网页对搜索引擎的优化，甚至不能保证比html网页设计更简洁。主要取决于网页设计的专业水平而不是CSS+DIV本身。
参考链接: https://cloud.tencent.com/dev...

到这里关于HTML的相关知识已经结束了,如果大家觉得有什么不对的地方,希望大家可以指出,让我也学习一下,谢谢。