快捷搜索:  汽车  科技

前端开发基础入门教程(零基础的小白想要了解前端)

前端开发基础入门教程(零基础的小白想要了解前端)html,是首字母缩写,具体意义请百度,大家要记住"t"代表text,是的,你们没有想错,text就是文本文件text,好了准备工作做好了,现在开始做网页javascript呢,就好比这个房子的功能,房子需要制冷吧,需要暖气吧,也需要上下水吧。这些功能性的就相当于是javascript前端分为三个部分,学习前端就好比如盖房子~html就充当了房子结构这部分,也是房子的基础。css呢,就好比咱们房子的装修,墙面什么颜色,什么风格,什么地板...这些给房子改变风格,样式的就是css

本文内容相对基础,是写给现在想了解一点前端知识的小白,文章把前端相关的术语用通俗易懂的语言讲解,绝对是小白入门的好教程!

1.什么是前端

简单来说,前端就是做网页(大神勿喷,本文一切从简)

2. 前端技术

前端分为三个部分,学习前端就好比如盖房子~

html就充当了房子结构这部分,也是房子的基础。

css呢,就好比咱们房子的装修,墙面什么颜色,什么风格,什么地板...这些给房子改变风格,样式的就是css

javascript呢,就好比这个房子的功能,房子需要制冷吧,需要暖气吧,也需要上下水吧。这些功能性的就相当于是javascript

html,是首字母缩写,具体意义请百度,大家要记住"t"代表text,是的,你们没有想错,text就是文本文件text,好了准备工作做好了,现在开始做网页

3. 我们的第一个网页

请身边有电脑的小伙伴和我一起开始,在桌面鼠标右击,创建一个text文件,命名为index把后缀修改为html,可能会跳出一个弹出框点击确定~点击这个文件大部分人应该会在浏览器打开吧,如果是那就对了,然后这个页面可以不关掉接着走下一步

这是临时的编辑代码的写法,刚学习前端的小白推荐使用JetBrains WebStorm 编辑器。对于新人来说

1.内置zencode编码风格,让你快速开发

2.丰富的插件资源,你可以去webstormw官网下载你需要的插件,官方更新很给力

3.简单易操作的版本控制,只要你简单的配置下git或svn就可以使用快捷键快速的进行版本控制

4.实时保存,不用频繁的按ctrl s了

5.对nodejs typeScript coffeScript支持良好

4. 添加内容

右键点击刚才建立的文件,我们可以直接用记事本打开,现在在文档里面输入hello world~刷新刚才用浏览器打开的那个页面~不出意外hello world应该在了

5. 页面结构

在文档中输入以下代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body> </body>

</html>

6. 代码说明

<!DOCTYPE html> 这行代码位于文档的第一行,用于声明文档类型

1.对于 <!DOCTYPE>在 HTML 4.01 中有三种 声明,在HTML5中只有以上一种声明

2.<!DOCTYPE>声明不是HTML标签

3.<html lang="en"> ...</html>

html标签内包裹页面文档的整个内容

lang="en"告诉浏览器这个网页是英文网站

lang="zh"表示该网站是中文网站

lang="en"可以省略

4 .<head> ....</head> head标签内可以放入描述文档的各种属性和信息的标

<meta>、<title>、<script>、<link>、<style> <meta charset="UTF-8"> meta元素提供页面的信息

5.meta里面放入charset="UTF-8"说明页面编码格式是UTF-8

meta里面放入name="keywords" content="html css JavaScript是描述文档的关键字 <title>Document</title> 定义文档的标题,这个你可以根据你的需求命名 <body> ....</body> body标签放入文档的所有内容比如插入一张图片,写一段说明,放个视频什么的都是放在body中

7. 语法规则:

1. 标签与属性全部小写

2. 标签必须要闭合

3. 属性="值" 不能简写

4. 标签的顺序要一致

8. 基本标签

标题 :<h1 > ... </h6>

段落: <p></p>

加粗:<strong></strong>

倾斜: <em></em>

水平线:<hr />

换行 :<br />

超链接标签: <a></a>

快:<div></div>

图片:<img src=''/>

按钮:<button></button>

标签非常多,这里就一一不多写了,可以在w3cschool上面学习,也可以跟着我学习使用是记住它。

9.实战页面

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>百度一下,你就知道</title>

<style>

.header{text-align:right;width:100%;}

.header a{color:#333;margin-left:20px;font-size:13px;font-weight:bold;}

.logo{text-align:center;}

.logo img{width:270px;height:129px;}

.search{text-align:center;}

.search input{width:539px;height:34px;border:1px solid #b6b6b6;}

.search button{width:100px;height:38px;background:#3385ff;border:1px solid #3385ff;color:#fff;cursor:pointer;}

</style>

</head>

<body>

<div class="header">

<a href="#">糯米</a>

<a href="#">新闻</a>

<a href="#">hao123</a>

<a href="#">地图</a>

<a href="#">视频</a>

</div>

<div class="content">

<div class="logo">

<img src="https://img.aigexing.combd_logo1.png" alt="">

</div>

<div class="search">

<button >百度一下</button>

</div>

</div>

</body>

</html>

这段代码我简单的写了一下基本页面,主要是为了说明如何添加页面内容,其中style标签内添加了一部分样式文件,具体含义留在后面继续为大家讲解。想要学习web前端知识,快速入行,请关注我,我会带大家一起学习,共同进步。

猜您喜欢: