一, 我为什么要学 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 http://www.yidianzixun.com/channel/w/html ,CSS http://www.yidianzixun.com/channel/w/css ,Java http://www.yidianzixun.com/channel/w/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: 内容.
来源: http://www.jianshu.com/p/92de269d7413