免费教程
作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法。 既然题目已经定了一个小时那么废话就不多说
Web前端教程
零基础小白,30分钟完成一个网页开发
来源:易牛云朗沃
  |  
发布时间:2021-08-21 15:14
  |  
关键词:Web前端开发
  |  
阅读量:
做为一个新手入门Web前端的时候,总想自己去尝试做一个一个网页,那多久可以多做一个网页嗯?作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法。
 
零基础小白,30分钟完成一个网页开发


 
既然题目已经定了一个小时那么废话就不多说了,计时开始
 

1.什么是前端

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

2.前端技术

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

3.我们的第一个网页

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

4.添加内容

 
右键点击刚才建立的文件,我们可以直接用记事本打开,ok现在在文档里面输入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标签
 
<html lang="en">
 
...</html>
 
html标签内包裹页面文档的整个内容
1、 告诉浏览器这个网页是英文网站
2、 lang="zh"表示该网站是中文网站
3、 lang="en"可以省略
 
<head>
 
....</head>
 
head标签内可以放入描述文档的各种属性和信息的标签例如<meta>、<title>、<script>、<link>、<style>
 
<meta charset="UTF-8">
 
meta元素提供页面的信息
1、meta里面放入charset="UTF-8"说明页面编码格式是UTF-8
2、meta里面放入name="keywords" content="html, css, JavaScript是描述文档的关键字
 
<title>Document</title>
 
定义文档的标题,这个你可以根据你的需求命名
 
<body>
 
....</body>
 
body标签放入文档的所有内容比如插入一张图片,写一段说明,放个视频什么的都是放在body中
 

7、实战页面

 
<!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="bd_logo1.png" alt="">
        </div>
        <div class="search">
            <input><button type="">百度一下</button>
        </div>
    </div>
</body>
</html>
 
这段代码我简单的写了一下百度的首页(虽然和真正的百度首页差的有点多),主要是为了说明如何添加页面内容,其中style标签内添加了一部分样式文件,具体含义留在后面继续为大家讲解。想要系统学习web前端知识,快速入行就业的快速通道:也可以去进行申请试听一下吧。【申请试听Web前端课程