欢迎您光临深圳塔灯网络科技有限公司！

余先生：13699882642

8年

专注网站建设行业优质服务商

网站百科

为您解码网站建设的点点滴滴

首页 > > 网站建设知识 > 建站知识 > 前端设计

企业建站知识推广知识小程序微信营销 APP开发前端设计 MindManager 开发语言自媒体

零基础学web前端学习记录整理（1）

发表日期：2018-12 文章编辑：小灯浏览次数：960

一、我为什么要学web前端呢?

其实在最开始,我对于计算机编程这部分完全不了解。由于人工智能和大数据的高端IT技术的兴起,互联网行业逐渐渗透到社会生活中的各个角落，我突然意识到，我应该好好了解一下互联网行业，否则在未来几十年，我可能会被社会所淘汰了。总之，人有点危机感才是好的嘛！

那互联网最根本的也是最重要的技术，就是编译代码。编程语言有很多种，例如Swift, JavaScript, C#, C, Ruby, PHP, Haskell, Java, C++，还有当前火热的python,作为普通小白，像我这样零基础的应该从哪种语言学起呢？当然是大众化的编程语言java开始啦！

理由：1、互联网市场需求量大。Java是大众化的编程语言，它也是一种永葆青春的语言，多年来一直是各个招聘板块的宠儿。

2、应用适用范围广。Java广泛地应用于web开发、企业软件开发和Android app开发。换句话说，pc和移动端都有广泛需求应用。

3、对于初学者学起来相对简单。Java是高级的面向对象的编程语言，学习起来比C++更容易。

那可能你会问了，java是后端，这和前段有什么关系？——其实从现在的互联网发展看，更需要全栈工程师，也就是前后端技术都会使用的人才。从技术上来讲，Java里面的很多编译语言会用到很多前端的“标签元素”语言，如果直接学习java，可能会由于你对“标签”的掌握不好，而影响后续的学习。所以我从前端开始学起。

二、什么是web前端?

定义：网站的“前端”是与用户直接交互的部分，包括你在浏览网页时接触的所有视觉内容--从字体到颜色，以及下拉菜单和侧边栏。这些视觉内容，都是由浏览器解析、处理、渲染相关 HTML、CSS、Java 文件后呈现而来。

简单来说：用编码语言把好看的网页做出来。这就是前端的工作。

前端三大语言：HTML,CSS,JavaScript；三者之间的关系，就好比人的构造，html是骨架，CSS填上肉和皮肤，JavaScript让这个人动起来。

或者正常一点：死的界面+排版+动画。

三、我的入门学习记录整理（只写我的重点）

1、HTML 指的是超文本标记语言 (Hyper Text Markup Language)，HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页。/3HTML 文档 = 网页

2、HTML 文档描述网页，HTML 文档包含 HTML 标签和纯文本，HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

所以只要有浏览器的平台都可以读取HTML文档。所以HTML可以用在电脑，手机，平板等等。

3、现在暂时用submit text编译器编辑html语言。（记得安装插件，方便编辑）

html基本结构

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>网页名</title>

</head>

<body>

</body>

</html>

4、创建文档

先新建一个新文件夹（随便命名），点进去，创建四个同级的文件或者文件夹，分别是：css文件夹，img文件夹，js文件夹，index.html文档（方式：先创建空文档，后缀名把text改为.html）。

5、怎样把css文档连接到html文档中

在<head> </head>之间加入<link rel="stylesheet" type="text/css" href="地址">这个“地址”是相对路径，由于html文档和css文件夹是同一级，所以是css/ +css文档名+.css

为了编译方便，ALT+SHIFT+2分成两栏。

6、表格

<tr>代表行，<td>代表列；在<table>里面加 border:表格线 cellpadding:单元格里内容和单元格边框距离 cellspacing:单元格之间的距离。

rowspan 列合并，colspan 行合并

7、表单

功能：网站获取用户信息的主要途径（账户，密码）

8、div+css

样式表的三中类型：

行内样式表：直接写在<div style="".....>这里面

内嵌样式表：写在<head>

写在这里<style type="text.css">这里面写字体，大小，颜色等</style>

</head>

外部样式表：以.CSS为扩展名文件，然后在页面中通过<link>链接标记链接到页面中，而且该链接语句必须放在页面的<head>标记区。

选择器：class:用“.”表示，id:用“#”表示标签选择器：直接写属性例如：p,h1,input,div,span 复合选择器：多个标签的属性一样，选择器名字之间用“，”

css盒子模式属性：margin:两个盒子之间的距离(margin-top,-right,-bottom,-left)；padding:内容与border的距离。border：边框（盒子外壳的厚度）content：内容。

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://www.dengtar.com/16681.html

上一篇：<学WEB前端开发如何从HTML5入门下一篇：Web前端开发之响应式布局（码动未来）>