前端与HTML

这是我参与「第五届青训营 」笔记创作活动的第1天

概念

HTML（HyperText Markup Language）：超文本标记语言

HyperText：超文本，顾名思义，不止是文本，还有图片、链接等等

Markup Language：标记语言：顾名思义，标记也是标签，例如<h1>文章标题</h1>中的h1就是一个标题的标签，它被成对的双尖括号包裹起来

空标签

img标签用来表示一个图片，开始和结束标签中间不需要写其它内容，要展示的图片通过属性src来指定，所以就不需要结束标签了，可以写错/>的形式，这是一种简写

<img src="photo.jpg" />

语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不写结束标签，比如input、meta
• 属性值推荐用双引号包裹
• 某些属性值可以省略，例如required、readonly

语义化是什么？

在开发过程中应该注意语义化！

简单来讲，语义化就是让符合语义的元素、属性或属性值来做对应的事！

• HTML中的元素、属性及属性值都拥有某些含义
• 开发者应该遵循语义来编写HTML
  • 比如有序列表用ol；无序列表用ul
  • lang属性表示内容所使用的的语言

为什么要遵循语义化？

• 在团队开发中，更有利于队友理解你的代码
• 让浏览器理解你的代码
• 让搜索引擎理解你的代码、页面 - 提取关键词、排序等等
• 屏幕阅读器 - 给盲人读页面内容

如何做到语义化？

• 了解每个标签和属性的含义
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码

HTML是传达内容的，而不是样式

假如你想使用比较大的文字来表示一个标题，你可能会使用这种不建议的方法来实现

<p style="font-size: 32px;">前端工程师的自我修养</p>

更建议这样去做，让对应的标签去做这件事

<h1>前端工程师的自我修养<h1>

总结

这堂课不是简单讲每个标签的作用，那样内容太多学起来也枯燥，但那么多标签还是得学的，关于这一点老师也给了建议，不需要每个都看，到MDN上去看；课上还讲了很多对于前端开发中的好习惯，这些好习惯将在后续的学习和开发中显现出来，它们的重要性到时候自然不言而喻了