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

余先生：13699882642

8年

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

网站百科

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

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

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

web前端小白入门之钥

发表日期：2017-11 文章编辑：小灯浏览次数：943

web前端：

web应用被分类为分布式应用，一般是客户端和服务器结构，所以我们有一部分的代码运行在客户端，另一部分代码运行在服务器。那些客户端上的应用就是前端，通常指的是我们的浏览器。

入门要求：了解什么是前端，了解基本的html css javascript语法（基本的语法是整个技术体系最重要的东西。）

前端开发语言共三种：

html（Hypertext Markup Language）——结构超文本标记性语言（ html相当于大楼的钢筋水泥结构）

css（Cascading Style Sheets） ——样式层叠样式表（ css可看作大楼的装修，它用来铺平样式）

js（Javascript）——行为（ js可理解为大楼的物业，它为这栋大楼供水供电）

HTML和CSS基础

HTML（Hypertext Markup Language）是超文本标记语言。

一·HTML特点：

1.HTML不需要编译，直接由浏览器执行。

2.HTML文件是一个文本文件。

3.HTML文件必须使用html或htm为文件名后缀。

4.HTML大小写不敏感，HTML与html一样。

二·<!DOCRYPE>声明必须放在HTML文档第一行，该声明不是HTML标签。

三·网页编码设置：

四·当网页出现乱码时

解决方式：

在<head></head>标签之间添加：

注：常用utf-8· GB2312·gbk等编码

五·文字和段落标签

起始终止标签（创建一个HTML文档）：<html></html>头部标签（设置文档标题以及其它不在WEB网页上显示的信息）：`<head></head>设置文档的可见部分：<body></body>将题目放到标题栏中：<title></title>快;盒子(装内容)：<div></div>风格类型:<style></shyle>位置：<link></link>标题标签：<h1></h1>~<h6></h6>段落标签：<p> </p>align对齐属性值例：<p >left：左对齐内容right：右对齐内容center：居中对齐内容justify：对行进行伸展，这样每行都可以有相等的长度换行标签：</br>空格标签:（必须在英文状态下进行）<pre></pre> :可以保证空格和换行（输入什么样，浏览器展出什么样）<hr/>水平线属性： width：设置水平线宽度，可以像素或百分比color：设置水平线颜色 align：设置水平线居中对齐 noshade：设置水平线无阴影文字斜体： <i></i><em></em>加粗：<b></b><strong></strong>下标：<sub>上标：<sup>下划线：<ins> 删除线：<del>

<!DOCTYPE html><html><head><title>文字和段落标准</title><meta http-equiv="Content-Type "contect="text/html;charse=utf-8"/></head><body>hellohtml!HTML是超文本标记语言！</body></html>

CSS样式（宽度，高度，颜色，字体）

一·行内样式（弊端：太繁琐）

<div style="width:200px;height:100px; background:reds"></div>
则可出现宽度200，高度100的红色盒子

二·内部样式（其好处为可将同名盒子同时控制，其坏处为若更改仅能一个一个改）

<style> .div1{wiidth:150px;height:100px;backgound:red;} </style> <body> <div class="div1"></div> </body>

三·外部样式（可方便一次性更改）

<link href="style.css"rel="stylesheet"1> href="sthle.css" rel=“stylesheet"`

我们一般而言主要用外部样式

JavaScript

JavaScript是目前唯一一个被广泛使用的给予原型继承的语言。

一·什么是原型？

JavaScript中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象。
Object Function是JS自带的函数对象
每个对象都有原型（null和undefined除外），可将它理解为对象的默认属性和方法。

二·什么是原型链？

在JavaScript中，每个对象都有个指向它的原型（prototype）对象的内部链接。这个原型对象又有自己的原型，直到某个对象的原型为null为止（也就是不再有原型指向），组成这条链的最后一环，这种一级一级的链结构就称为原型链。

原型链继承的例子：

function A （）{this.name="Nonentity" } A.prototype.getName=function(){ return this name } function B (){ this.age=18; } B.prototype=newA()

前端面试题

什么是Webpack？Webpack可理解为什么？

Webpack可看作是模块打包机，也是一个前端资源加载/打包工具。它相当于一个媒介，将多种静态资源js.css./ess转换成一个静态文件，减少了页面的请求次数。
（个人认为类似于搬家工人的作用，减少了主人所需花费的时间与精力）

CSS属性display中的block，inline和inline-block概念和区别？

设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
内联对象inline给它设置height width是没用的，致使它变宽变大的原因是：内部元素的宽高“padding”。
inline对象的前后元素不单独占一行，其它紧随其后。

CSS模型？

Paste_Image.png

原理

网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
这些属性我们可以用日常生活中的常见事物--盒子作一个比喻来理解，所以叫它盒子模式。

特点

想象一个盒子，它有:外边距(margin)、边框(border)、内边距(padding)、内容(content)四个属性;
俯视这个盒子之后，它有上下左右四条边，所以每个属性除了内容(content)，都包括四个部分:上下左右;这四部分可同时设置，也可分别设置;内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。

结构

内容(CONTENT)就是盒子里装的东西
填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料
边框(BORDER)就是盒子本身，至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子(DIV嵌套)，与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。
填充只有宽度属性，每个HTML标记都可看作一个盒子;
block可设置宽高，“block”前后元素中“block”单独占一行。

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

上一篇：<web前端开发工程师, 你应该了解的几点SEO知识! 下一篇：优就业：自学web前端开发的4大弊端，之途而返>