HTML 学习第一步内容

最新推荐文章于 2021-10-21 22:30:47 发布

weixin_34087301

最新推荐文章于 2021-10-21 22:30:47 发布

阅读量101

点赞数

原文链接：https://my.oschina.net/honchy/blog/353291

版权

为什么80%的码农都做不了架构师？>>>

加油，HTML 虽然很多标签，不过用用就习惯了。很快就能maste ！

HTML 是原始内容和浏览器沟通的方式。把原始内容组织成为HTML的格式，浏览器能够认识，并很好的展示出来。

因此，写一个网页最重要的时我们要准备什么样的内容。然后，参考HTML的规则，以HTML的规则对这些内容进行包装。当我们包装成为HTML格式后，浏览器就能够很好的解读了。

HTML的规则是以HTML的标签来表达的，对于HTML规则来说，标签就是内容。也就是我们准备的内容需要包装在标签内部来表示。这也就是当我们打开浏览器，右键查看源代码的时候，总是有很多标签的原因。我们看到的网页就是这份源代码被浏览器解释后的结果，这份源代码就叫做文档(document)。

HTML的标签是有限的，而我们要表达的内容如此的丰富多彩，显而易见，我们写HTML就是用有限的HTML标签表达无限的内容和思想。很像一个翻译是不？呵呵。用有限的字词，表达无尽的诗意。好的翻译呢，我们说优雅，说美；差的呢，我们说牵强，说丧尽节奏，不择手段。

不过这个HTML编写和翻译不同的地方在于，每个人的翻译看起来都不一样；而HTML的翻译在浏览器解释后，是可以看起来一样的，只是查看源代码时才发现原来源代码不同。说HTML编写的好坏呢，如果为了显示效果，不择手段，标签乱堆，那尽管在浏览器解释后，页面看起来是非常漂亮，也是不太好的。这种情况可以前面的八个字概括，丧尽节操，不择手段。

所以学习HTML的第一步，就是看看HTML的标签有哪些，这些标签基本用法是做什么的。

常用的标签：

div 这个是最常用的，他表示一块内容。几乎所有的标签都可以由他替代，是个万金油。因为，不管怎么样，展示出来的效果一定可以划分成一块一块的（所以倒着推理，内容也一定可以通过包装成div而现实成为一块一块的）。不过缺点是，div 没有亲戚，也就是，如果两个div在一起，那么他们还是两个div。不会因为他们挨着很近就说他们两个是一对，也不能说他们两个很远，就不是一对。div 是孤独的。

span 这个也比较常用。理由和div的一样。至于和div的区别，动手实验一下就知道了。

p 这个表示一个段落文字。可以用来展示一个段落的文字。

h1~h6 这个是一些列大小的标题。

a 这个是超链接。是从此处到彼处的桥梁。往往表示通过点击此处能够从当前的状态（页面）进入到另一个状态（页面）。

img 这个表示一张图片。可以显示一副图片。

ul li 这个是一套标签，表示列表。ul只是个壳子，代表一个大类别，重要的是li。li之间是有关系。他们属于同一个父类型，他们互为兄弟。

dl dt/dd , ol li 这两套标签和ul li 是一样的。至于区别，自己动手实验。

form 学名表单。用来接受输入和按钮点击，当输入完毕后，form 就是指定这些输入交给谁，以及如何交付的。form本身不具有输入和按钮点击功能。不过他有一组成员帮组实现。

input 比如百度搜索，那个输入框。特点是你能够输入一行文本。

textarea 比如百度贴吧发表回帖，的那个输入框。特点是能够输入多行文本。

=================华丽的分割线===================

在参与实际的开发过后，我时常会迷惑，HTML到底核心是内容还是样式。如果是内容，那么大概90%以上的时间是在设计layout布局和css样式，如果是样式为主，那么又如何体现html的内容语义化呢？

今天我想到，无论是内容还是样式，都是在为了更好的表达。html的语义化，应该是一种符合常规的表达方式，以至于机器和程序都能够很好的理解。这样看，内容和形式，都是一样的，基于表达的需要产生的。所以如果是针对视觉用户来说，那么边框，颜色等形式也是内容的一部分了。那么再理解通过多层潜逃的div来完成一定的布局或者样式上，就没有心理障碍了。