技术 | Web前端开发

作者: techLee | 来源:发表于2017-03-07 20:42 被阅读77次

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

    全平台更新,欢迎关注

    相关文章

      网友评论

      • d296d7389683:好乱😂
        techLee: @不明真相的吃瓜群众_9385 很乱啊,我也感觉图文很难讲清楚😭,要怎么样才能表达清楚啊,我今天会继续写的

      本文标题:技术 | Web前端开发

      本文链接:https://www.haomeiwen.com/subject/atkvgttx.html