前言
分享之前，我们先回顾一下汪涵在《偶像来了》中的经典台词：“炒菜是情感的温暖，酸甜可口是情感的甜蜜，做一碗拉面不是温柔。” 看到明天的标题，是不是已经很有视觉了，哈，今天的分享来自@王德福的授权分享。
正文从这里开始~
大家都知道前端功课有三项：HTML、CSS、JS
大家都说HTML最简单，在w3school上看了一晚上大概就能学会了。
几个初学者告诉我，他们两天就学会了HTML，学会CSS后才感觉到困难。 他们不知道如何使用选择器、盒子模型和定位。 花了点时间攻破了CSS，发现上面的JS才是大佬。
所以HTML只是一只小白兔，在学习的路上被新手村给了经验。 看完教程，背了标签，是不是就算是学会了HTML呢？
HTML 全称为“超文本标记语言”。 首先，它是一种没有变量、循环或函数的语言，但它确实是一种语言。 这种语言是静态的，它描述的东西也是静态的，比如标题、段落、图片。
我们对语言的“学习”实际上就是学习翻译。 如何将我们熟悉的语言翻译成新学的语言，那么HTML负责翻译什么呢？ 我们先来看看HTML到底做了什么。
浏览器会根据HTML的描述勾勒出DOM的轮廓。 HTML写起来像一篇文章，但执行后，它更像一个屏幕。 可以这样理解，HTML就是脚本，浏览器就是编剧，我们看到的页面就是编剧根据脚本制作的电影。
例如，让我们看一张图片并尝试用文字描述它：
页面中间有一个标题，下面有一张图片。 图片下有三个圆圈，圆圈下有三个标题，每个标题下有三段描述。 再往下有两个按钮，一个是橙底黄字，另一个是白底橙字。
如果结合图片看这个描述，还是合适的。 但对于浏览器来说，它需要一个足够精确的描述，比如页面中间的标题，是主标题还是次标题？ 下面的三个圆圈是什么？ 下面的描述中应该指出什么文字？ 这些都是HTML来描述的。 再加上CSS来准确描述图片的颜色、粗细、大小、宽高以及按钮的位置。
如果你有兴趣，你可以和你的同学一起玩这样的游戏。 如果掌握了后端的基础知识，就可以几乎完全用语言指导同学绘制指定页面了。 普通人往往没有办法量化准确的描述。
因为有这样的规范，浏览器才能准确的渲染出我们看到的页面，所以HTML最重要的一点就是：语义。
对于我们学习 HTML 来说，支持标签和标记属性只是一种幻想。 背后是学习如何从语义上分析页面html字体颜色设置，做出合理的HTML文档结构。
语义的第一级是选择正确的标签。 例如，HTML5标准中添加了很多语义标签，利用好这些标签可以更清晰地表达页面的内容。 再比如，如果我们想要将一段文字加粗，我们可以选择使用strong标签或者CSS的font-weight属性来将其加粗。 我们应该选择哪种方法？ 如果是为了指出内容，那么我们选择将标签加粗。 如果是设计风格，并不意味着关注和指出。 最好用CSS来处理。
第二层语义是选择正确的id和类命名。 因为常用的HTML标签只有50个左右，比如title、subtitle、close等，这些也是很常见的语义，没有对应的标签，所以必须以class的形式显示。 HTML标准中有两个无意义的标签：div和span，纯块级元素和内联元素。 我告诉中学生，永远不要写没有类或id的div元素。 div 元素不能表达单一含义。 我们按类命名，不是为了CSS，而是为了表明它在这个页面上。 例如，它是标题（title），还是注释（note）。 我们用class来补充这些HTML标签无法涵盖的语义。
id 和 class 有什么区别？ class指的是一个类别，比如程序员、计算机、键盘。 而id指的是一个具体的东西，比如我的程序员、公司的笔记本、我家里的机械键盘。 初学者经常混淆这两个概念。 他们不知道什么时候使用id，或者使用id命名的原则来命名类。 例如，设置一个名为“my_photo_1”的类显然是一个特定的事情。 我们先来看看这个。 是否需要选择该元素，如果需要，是否可以使用更通用的选择器来代替设置如此特殊的类名。
这里还需要谈谈类的命名策略。 有一段时间，BEM 命名法非常流行。 追求的人很多，批评的人也很多。 虽然有点复杂，但确实是语义学的一个很好的实践。 对比另一种极端的原子类命名方式，命名原则更多的是受样式影响，语义受样式影响，完全背离了HTML+CSS语义和样式分离的初衷。
如何进行语义训练？
找到一个网页，猜测该页面的各个部分使用了哪些标签，看看是否与猜测的相同。 通过这个练习，你可以培养元素的使用感，熟悉并理解每个HTML标签所代表的语义。
第三层语义是文档结构。 作家从大纲到章节，画家从大纲到细节。 而我们剪图的原则也是从大到小，从外到内。
（借用书法的形式）
从上到下画，那就是打印机，而人类书法的一般方法是先画轮廓，然后再处理细节。 参考HTML的写法，也是先制作框架，比如顶栏、侧栏。 然后再对顶栏上的logo和导航栏进行细分，一直划分到内部完全由基本标签组成，然后再精雕细琢风格。 如果你对类命名没有灵感，可以参考bootstrap等框架的类命名策略。 有许多有用的关键字可供您学习。
练习HTML的另一个好方法是做纯代码练习，即放弃CSS，简单地编写HTML。 最终的目标是其他人可以通过阅读这个HTML文件来了解页面的结构，甚至可以使用HTML代码来了解页面的结构。 画一个大概的页面。
我们的课程中，HTML的教学花了三天时间，但是之前的练习持续了两周，而且我们还在讲课。 在这个过程中，我能感觉到你逐渐有了从整体到局部的认识，同时类的命名也变得更加合理，可以按照正确的语义、正确的结构和顺序来编写HTML 。
我们遇到过很多CSS问题甚至JS问题，问题的症结在于HTML结构不合理，语义不清晰。 写好HTML确实不容易。 过去，虽然CSS是用来修复HTML的缺陷的。
就好像新鲜的菜往往煮起来很美味，但是不太新鲜的菜如果做成辣的，吃不好就会出现一些问题。 那么html字体颜色设置，你们不想要一些可盗取的 HTML 吗？
关于本文
发表评论