技术类文章收集大杂烩坚持写Web前端之路

技术 | Web前端开发

2017-03-07  本文已影响77人  techLee

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上的小蜘蛛

全平台更新,欢迎关注

上一篇下一篇

猜你喜欢

热点阅读