从0到1开启web前端学习之旅

来源:互联网 发布:html5连接mysql数据库 编辑:程序博客网 时间:2024/05/20 02:21

Hello!Everyone欢迎回到老渡司机的Coding Time。今天我们开始正式的技术学习之旅,本着少扯皮,多干货的原则,我在这先立下重誓,7次博客更新带着大家搞定任意你能看到的静态网页,如有不成,我前公司立马倒闭(我依然深爱着自己的前公司)。

 

今天我们要讲的是html,是hyperText markup language, 超文本标记语言,在网页中所有的文字图片和组织架构都是由html来编写的,当然html能够完成的工作不止有这些。

这里要强势声明以下html不是一种编程语言,它只是一种计算机语言,html不具备像c/c++/java等编程语言中的变量或者函数等东西,它仅仅由头标签和尾标签组成如:<html></html> 当然也有单标签的存在如:<br>, <meta>等。

 

这个语言该如何编写呢,你只需要在桌面上点击右键弹出菜单栏,创建一个文本文档


图1

 







在桌面生成一个这样的文件图2,然后我们开始对它进行重命名图3,记住一定要把该文件名称的.后面的名称改成html,这是告诉我们的系统此文件是一个html文件,然后就可以在里面编写html语言。创建成功后我们可以把它拖到之前我们下载过的VSCode(全称Visual Studio Code)的编辑器内(这里如有不懂请看上期文章)图4,于是乎我们就可以开始在编辑器里为所欲为了,

图5

当内容全部编辑好以后我们需要按一下ctrl+s保存以下文件,之后就可以把该文件以浏览器的方式进行打开,这里强烈推荐该浏览器图6,它是一个强大的调试工具,运行网页的速度快到令人发指,那么如何下载请自行百度

图7

 

由于我得网页没有写任何内容所以打开后它是一片纯白的样子

 图8

接下来我们要开始讲html标签,那么讲标签首先不得不提的就是结构化标签:

图9


为什么叫结构化标签呢,原因很简单因为当浏览器显示一个没有任何内容的html文件时,浏览器会自动的帮你把这些标签添加到页面里去,充当基础网页结构的作用!!!

 

这三个标签分别是html标签, 也叫根标签:<html></html>,叫根标签的原因是因为我们在编写其他任何标签的时候都要在根标签的头尾标签中间的部份去写,而且大树只有一个根,我们的html文件里也只能写一个根标签,另外两个一个头部标签<head></head>,一个是(身)体标签<body></body>,其名字也是有寓意的,在头部标签里写的内容可以说都是设置给浏览器看的,而(身)体标签里所写的内容都是给用户看的。

 

这里我们来测试一下:

测试一下


<meta>是一个单标签,你会发现我在它标签的身上加上了一个属性,charset=‘utf-8’,此举是告诉浏览器让它识别所有国家的语言。除此之外还写了一个<title></title>标题标签,顾名思义这是个该html网页加上标题。

在身体标签上写了一句话赞美今天的美好生活,life is shit!!!

 

最后的效果就是:

图11


下面的空白区域是给用户看的可视区域,我们在body标签里所填写的内容在这个可视区域展示出来了。

 

讲完最最基础的标签后,我们接着往下说,最早的网页只是用来显示一些类似与今天word能显示的文本信息,所以html中最早出现的一批标签,或者说一些功能很基础的标签都是围绕着显示文本而存在的,例如<p></p>(paragraph段落标签,能让文本成段展示) <i></i>(italic 斜体,能让文本加粗展示)等等。

这里我想详细的给大家展示说明,但是只靠文本的方式,有些力不从心,所以老渡急眼了拿出了看家的视频辅助讲解,感兴趣的童鞋可以听一听。

该视频里所用的编辑其是sublime而不是我所说的VSCode,编辑部分好坏纯看个人习惯。


本章博客知识点详细视频:http://v.youku.com/v_show/id_XMTU5OTE0MDE0OA==.html?spm=a2h0k.8191407.0.0&from=s1.8-1-1.2


后学内容下一期尽情期待。