一、我为什么要学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：内容。
