零基础学web前台 学习记录整理（1）
一、我为什么要学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：内容。
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 零基础学web前台 学习记录整理（1）
