技术 | Web前端开发

html是什么？

html --> hyperText markup language!  它是这个英文的缩写，翻译过来就是超文本标记语言。这个东西当然是可会可不会的，它的具体前端编程的代码并不相关，但是我希望大家可以多了解一些。

比如有一天，去一个公司面试，HR不懂技术，他问html是什么，你给我解释解释呗，你就得解释啊，解释html是什么。再比如一个不懂技术的外行问你，他肯定什么也不懂，你也得解释啊～所以，会总比不会要好。

简单介绍一下html，html由一对一对的标签组成，每一对标签都有自己特殊的功能和用处。

演示：

移除

html标签

​这就是一对标签，前面的叫头标签，后面的叫尾标签，头标签由两个尖括号和一个标签名称组成，尾标签由两个尖括号和一个标签名，以及标签名前的反斜杠（标签结束符）组成。这两个共同组成一对标签。每一个标签都有一个特殊的用法和特殊的含义。

标签代表一定的功能，它还要包裹一定的东西。

这个html标签，我们叫根标签。这个标签是整个html文档的根。再写代码只能写在html标签里。

移除

head 和 body 标签

​head就像是头脑，body就像是身体。

body区是给用户看的，head区是给浏览器看的

移除

演示

​比如，我们在body区写上一些东西，I just wanna run!!!

我们再看浏览器中

移除

演示

​

我们怎么在浏览器中看到自己写的代码，很简单：我们可以直接双击保存的html文件，或者直接拖动保存的html文件到浏览器中。

移除

演示在浏览器中打开html文件

​再或着，直接在编辑器中右键选择Open in Browser。

这个时候我们在编辑器代码里写一些汉字：

移除

演示，在代码中写汉字

​再看代码在浏览器中解释：

移除

点击此处添加图片说明文字

​

发现现在不太对劲了。后面的中文没有显示出中文。浏览器认不出来中文。那为什么浏览器可以认出英文呢？废话～人家美国人开发的，能不认识英文吗？

这个时候，我们可以意识到代码中缺少了一种可以让浏览器认出中文的东西。

下面我们来添加一下：

移除

添加文字编码的代码

​我们注意到不是成对出现的

移除

点击此处添加图片说明文字

移除

点击此处添加图片说明文字

​

这个时候，我们发现浏览器中可以显示中文了，那么这个标签是什么意思呢。每个标签有自己的属性以及属性值。属性可以直接写，属性值必须加双引号。

那么什么意思呢？它是告诉浏览器，我们的编码格式是utf-8的形式。什么叫编码格式呢？就是浏览器存的字典，让浏览器认识不同的字。

移除

点击此处添加图片说明文字

​我们再看一个新的标签，还是在部分的，先看一下效果。

移除

点击此处添加图片说明文字

​

​网页上出现了刚才的名字，我们之前的显示都是lesson1。所以这个标签的作用就是改变网页的名字。

这个时候，可能有人发现，我没有解释上面的lang="en"，这段代码，英文好的人，可能会翻译成

language="english".这个绝对不是这个意思。这个涉及seo。我在后期会做一个专题详细解释。

下面我们看一些基础标签：

移除

代码

​

移除

代码在浏览器中显示

​

我们来挨个看一下：

标签，又叫段落标签​，在浏览器中我们可以看到，它是成段显示的。自成一行。

​

​

​

​

​

​

h1到h6，我们称为标题标签，它可以显示出不同大小的字体。

标签可以起到加粗字体的效果

标签可以让字体显示出斜体的效果​

​标签可以让字体既加粗又出现斜体效果。当然，这种效果，我们也可以通过上面的  ，这两个标签叠加，显示出来。

总结：介绍html是什么，一些简单的html标签的功能及作用。

本教程持续更新。八月可能出视频教程，欢迎持续关注。

微信公众号：Technikzeit

新浪微博：Net上的小蜘蛛

：Net上的小蜘蛛

全平台更新，欢迎关注

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​