HTML基础——HTML使用规范

本文最后更新于：8 个月前

使用语义化标签，HTML只关注内容、alt标签不为空…..本文介绍了编写HTML文件时应该遵从的重要规范

HTML基础——HTML使用规范

一、语义化

H5新增了很多语义化元素，不要再无脑使用div和span标签了。

使用语义化元素能够使文档结构清晰、一目了然，便于维护，利于SEO

推荐的文档结构：使用语义化布局标签

1
2
3
4
5
6
7
8
<body>
    <header></header>
    <nav></nav>
    <main>
        ...
    </main>
    <footer></footer>
</body>

更多语义化标签见：HTML基础——body部分 - timegogo

二、结构、表现、行为三者分离

尽量在文档和模板中只包含结构性的 HTML；

而将所有表现代码，移入样式表中；

将所有动作行为，移入脚本之中。

HTML、CSS、JavaScript各自负责自己的内容

三、HTML只关注内容

  • HTML只显示展示内容信息
  • 不要引入一些特定的 HTML 结构来解决一些视觉设计问题
  • 不要将img元素当做专门用来做视觉设计的元素
  • 样式上的问题应该使用css解决

四、alt标签不为空

<img>标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：

  • 网速太慢
  • src 属性中的错误
  • 浏览器禁用图像
  • 用户使用的是屏幕阅读器

从SEO角度考虑，浏览器的爬虫爬不到图片的内容，所以我们要有文字告诉爬虫图片的内

五、H5新特性

HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

HTML5 的一些最有趣的新特性：

  • 新的语义元素，比如 <header>, <footer>, <article>, and <section>。
  • 新的表单控件，比如数字、日期、时间、日历和滑块。
  • 强大的图像支持（借由 <canvas> 和 <svg>）
  • 强大的多媒体支持（借由 <video> 和 <audio>）
  • 强大的新 API，比如用本地存储取代 cookie。

HTML5 - 新的属性语法：空值，不用引号，单引号，双引号

1
2
3
4
<input type="text" value="Bill Gates" disabled>
<input type="text" value=Bill Gates>
<input type="text" value="Bill Gates">
<input type="text" value='Bill Gates'>
HTML > HTML基础
HTML基础——HTML使用规范
http://timegogo.top/2022/11/05/HTML/HTML基础——HTML使用规范/
作者
丘智聪
发布于
2022年11月5日
更新于
2023年7月16日
许可协议