整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

全程软件测试(一零七):HTML 语言入门学习—读书笔记

、 HTML 语言

1 HTML 简介

HyperText Markup Language(超文本标记语言)

  • 标记也称标签,放在< >中。
  • 标记是英文单词或缩写,有固定含义,能被浏览器识别和翻译。

2 HTML 文档的结构

二、 常用 HTML 标记

1 特殊字符标记

2 段落标记

<p 属性=值>
------段(paragraph) (可以看作是空行)
------align 属性可设置段落的对齐方式,如左对齐、居中、右对齐。

3 换行标记

<br>

4 居中标记

<center>需要居中的内容</center>

5 字体标记

<font face="字体样式" color=字体颜色 size=字体大小>文字</font>

6 格式标记

<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>

7 图像标记

<img src="images/adv_2.jpg" width="300" height="150" alt="明星演唱会开幕">
------image:图片/像
------source:来源
------alternative:交替、变换

8 链接标记

<a href="register/register.html">[免费注册]</a>
------anchor:锚,链接
------http references:参考的 http 地址

9 表格标记

9.1 表格的结构

9.2 表格标记

9.3 合并行或列

10 表单标记

10.1 典型应用

  • 注册用户
  • 收集信息
  • 反馈信息

10.2 表单由控件组成

10.3 表单中的标记

10.3.1 表单标记

10.3.2 控件标记

样式表(Cascading Style Sheets,层叠/级联样式表)
------用于设置控件属性格式。
------行内嵌入 css 样式表:<标记 style="">

10.3.3 文本框控件

10.3.4 密码框控件

10.3.5 单选按钮控件

10.3.6 复选框控件

10.3.7 下拉列表控件

10.3.8 列表框控件

10.3.9 多行文本框/文本区域控件

10.3.10 按钮控件

按钮类型可为 submit、reset、button

10.3.11 框架标记

10.3.11 .1 创建框架中的每个子页面窗口

top.html
left.html
main.html

10.3.11 .2 创建框架集

改变框架内的页面显示

单击 left.html 中不同的按钮,在 rightframe 中显示不同的页面
使用 target 目标窗口属性
<a href=url target="要显示的框架名">

三、 Session 和 Cookie

1 http 无状态

http 协议是无状态的,本次请求和上次请求无法判断是不是同一个人操作的,从而 http本身不会记住"过去的"数据。

2 Session

用于解决 http 无状态问题。一般称为“会话控制”,浏览器在第一次访问服务器时,服务器会创建一个 session,然后同时为该 session 生成一个唯一的会话 sessionid。

Session 存储特定用户会话所需的属性及配置信息,当用户在应用程序的 Web 页之间跳转时,存储在 Session 中的变量将不会丢失,而是在整个用户会话中一直存在下去。当用户请求来自应用程序的 Web 页时,如果该用户还没有会话,则 Web 服务器将自动创建一个Session 对象。当会话过期或被放弃后,服务器将终止该会话。Session 最常见的一个用法就是存储用户的首选项。

3 Cookie

有时也用其复数形式 Cookies,指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密)。

Cookie 技术诞生以来,它就成了广大网络用户和 Web 开发人员争论的一个焦点。有一些网络用户,甚至包括一些资深的 Web 专家也对它的产生和推广感到不满,这是因为 Cookie的使用对网络用户的隐私构成了危害。因为 Cookie 是由 Web 务器保存在用户浏览器上的小文本文件,它包含有关用户的信息。当 Web 服务器创建了 Cookies 后,只要在其有效期内,当用户访问同一个 Web 服务器时,浏览器首先要检查本地的 Cookies,并将其原样发送给 Web服务器。

查看 Cookie:

一章: 初识Javascript

>>>>

一、Javascript是什么?

Javascrip诞生于1995年,是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言。

当然和java是没有半毛钱关系的,比如雷锋塔和雷锋有什么关系?显然是没有关系的。javascript最初的名字是livescript,用来处理以前由服务器端语言(如 Perl)负责的一些输入验证操作,而在其发布的前夕,Netscape 为了搭上媒体热炒 Java 的顺风车,临时把 LiveScript 改名为 JavaScript。

1997年,以 JavaScript 1.1 为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA),随后 ECMAScript成为了Javascript脚本语言的标准。

虽然 JavaScript 和 ECMAScript 通常都被人们用来表达相同的含义,但 JavaScript 的含义却比 ECMA-262 中规定的要多得多。一个完整的Javascript是ECMAScript(语言核心标准)与DOM(文档对象模型)、BOM(浏览器对象模型)的集合。

2006年,XMLHttpRequest被W3C正式纳入标准。John Resig发布了jQuery。

于2008年问世的谷歌V8引擎改变了这一局面。现代浏览器的崛起终结了微软的垄断时代!

2009年AngularJS诞生,随后被谷歌收购。

2009年Ryan Dahl发布了NODE,新的时代在这一天悄然开启。

2010年backbone.js诞生。

2011年React和Ember诞生。

2014年,第五代HTML标准发布。2014年Vue.js诞生……前后端分离可谓大势所趋。

2015年,ECMAScript6面世,掀起了Javascript浪潮。

……


>>>>

二、Javascript能做什么?

如今JavaScript是最流行的脚本语言,在Web世界里,只有JavaScript能跨平台、跨浏览器驱动网页,与用户交互。

github上javascript活跃度:

而WEB的演化也从后端走向了前端:

那javascript到底能做什么呢?

如果大家对于学习JavaScript有任何的疑问都可以来问我,可以关注我的头条号,里面有“问题咨询”按钮,如果需要JavaScript学习视频,可以私信我“学习资料”便会自动回复下载地址。

操作HTML元素

   响应用户的操作

   处理发送数据

   实现局部刷新(ajax)

   解决浏览器问题

   提升用户体验

当然随着NodeJS的问世,Javascript把大爪伸向了服务端,从此全栈工程师成为了大势所趋!!而数据挖掘、智能家居、智能驱动、桌面应用、IDE开发、WEB APP等等也不在话下了。


>>>>

三、为什么要学好原生Javascript?

2015年是前端行业的分水岭,过去只需要会html、css、js和jquery就可以胜任前端开发的日子已经一去不复返了。大前端时代已然来临,全栈化已是大势所趋。PC端网页开发、移动端开发、服务端开发、原生APP开发。前端如今已经脱离了茹毛饮血、刀耕火种的原始社会,开始步入了工业时代,工程化(npm、bower、grunt、gulp、webpack),模块化(Commonjs( Node.js)、AMD(RequireJs)、CMD(Seajs)、ES6模块),组件化(Vue.js、Angularjs、React、ReactNative)。组件化的概念在后端早已存在多年,只不过近几年随着前端的发展,这个概念在前端开始被频繁提及,特别是在MV*的框架中。组件化极大提高开发效率和后期维护的效率。

随之而来的就是大批量“代码的搬运工”(说的通俗一点就是“码农”,说的高大上一点叫做“框架熟练工”)诞生。这一批人是做什么的呢?说的好听点叫开发项目,说的直白点就是拿别人的现成工具来快速的搭建一个项目。说白了,四个现代化的诞生就是为了提高开发效率的,但是千万不能认为企业需要的就是这样的人。下面分享一个在知乎上看的的例子:

这就是典型的框架熟练工,三五年之后终将被淘汰,因为你的学习速度更不上互联网的发展速度了,而且当现有的框架满足不了企业项目需求的时候,不能够提供解决方案,所有终将没有未来,只是昙花一现。

那么什么才是长久之计呢?肯定是学好原生,学到能够轮子,即自己能够独立封装插件、架构框架的高度,我们不需要重复造轮子,但是需要懂得造轮子的方法。当你达到这样的高度的时候,不管前端市场如何演变,其实都万变不离宗,因为你的学习、吸收速度很快了,或者也可能你就是推进演变的人!


>>>>

四、怎么学习原生Javascript?

对于很多初学者来说,原生javascript无疑是一座很难翻越的大山(“javascrip从入门到放弃”)。其实也能理解,因为现有的很多教条式的教学及字典式书籍让大部分初学者莫不着头脑,即使背完了一本书发现自己还是啥都写不出来,然后写不出来就等于不会。很多大家公认的经典书籍(出于对经典的尊重就不一一罗列了),其实也都只是对javascript基础知识的罗列而已,而并没有真正结合具体的项目案例进行讲解,然而编程无疑是一个大量练习实践的过程。

本书《原生Javascript立体学习指南》将打破传统的教学模式,通篇以知识点结合案例的形式,让初学者吃透每个知识点,并能及时运用到实际项目中,真正的学以致用,进而锻炼提高逻辑思维,最终达到封装插件、开发框架的高度。

明确一个概念什么才算入门?我的定位是能找到一份前端工作才叫入门。接下来我制定了一个自学前端的学习路径,避免一些自学的朋友走弯路,大概能在4个月左右从小白到入门,如果你有基础更好了。

第一阶段,牛刀小试(2周左右)

都知道要学html,css,我说一下要掌握的核心点

标签:p,div,a,span,img,input,link,script,ul,li。其它的大概过一遍,有个印象就可以了。这几个标签能解决你工作95%以上的需要。

理解块元素/行类元素文本流盒子模型概念。

css重点掌握选择器,选择器层级,浮动,清除浮动,定位,伪类,伪元素,背景,字体,颜色,宽高,margin,padding的设置。

基本的概念搞定后,就可以仿造一些知名网站写静态demo,如美团优酷,大概写两个首页,就可以进入第二阶段了。

或许到这里,你已经小有成就感,那就继续加油吧!

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年我花了一个月整理了一份最适合2020年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

第二阶段,初入江湖(2周左右)

这一阶段是最为重要的阶段,前端重头戏JavaScript,决定你放不放弃自学,大部分同学在这个阶段就退缩了。

dom部分:dom选择器,className,style,属性操作。

es部分:注释,定义变量,数据类型(基本类型和引用类型),运算符,流程控制,函数,内置函数。

这个阶段如果你能学会断点调试就会轻松很多。

基础掌握后,你可以写个轮播,或者做个小游戏贪吃蛇。

切记,切记,切记不要太在意一些花里花哨的东西,更多注重程序的逻辑。

建议买本犀牛书打基础。

第三阶段,小露锋芒(1周左右)

这个阶段比较轻松,jquery + bootstrap不要刻意去背里面的东西,做的时候查文档就可以了。用这两个库配合仿写几个页面,或者自己写几个页面。

这时候你可能已经体会到库给我们带来的方便了,再也不想用原生js了,但我要告诉你,少年你的想法很危险,重点还是要放在原生js,框架都是浮云。

第四阶段,渐入佳境(3周左右)

这个阶段主要是学习前端的数据交互,可能你很难受,又想放弃了。

我们需要服务器来提供数据才能真正感受到,这时候Node登场,首先学习express,具体怎么搞,自己去学习,核心知识请求,响应,路由,中间件。

前端需要学习ajax,先理解原生的ajax,然后再使用jquery封装好的ajax来请求数据,自己写一些动态页面,体会数据交互的过程。

理解跨域httpjsonp的一些概念。

第五阶段,势不可挡(1周左右)

这个阶段你可能也比较痛苦,挺过了你就渐渐比较舒服了。

深入理解面向对象闭包this三座大山。

自己尝试封装一些插件,像之前写的轮播。

第六阶段,所向披靡(3天左右)

git,svn,建议你开通一个github账号。

第七阶段,炉火纯青(6周)

这个阶段学的好不好,关系到找工作了。

首先理解webpack,入口,出口,loader,plugin这些基础概念要知道,不要求精通,大概知道什么配置干什么的。

然后react、angular、vue里选择一个深入学习,其他了解一下就可以了,建议选择vue,上手快,文档清晰,国内市场用的也比较多。先装个vue-cli自己玩一下,然后照着文档学习vue技术栈的东西

指令

方法

计算属性

自定义组件

组件通讯

理解响应式

vuex

element-ui

axios

基础过一遍后在github上找优秀项目学习,如vue2仿饿了么链接;https://github.com/bailicangdu/vue2-elm 然后自己写一些demo。

作者:大橙子思密达

第八阶段,登峰造极(2周)

这个阶段主要针对移动端,css3,和一些h5的新标签,重点关注移动端适配,媒体查询,移动端布局,flex。

第九阶段,备战江湖(1周)

准备面试,简历(项目经验,不能少),前端面试题链接:https://www.jianshu.com/go-wild?ac=2&url=https%3A%2F%2Fyuchengkai.cn%2Fdocs%2Ffrontend%2F

多投简历,多总结。

祝好运,希望想入坑前端的同学,早日找到自己心仪的工作。



作者:程序员的青春
链接:https://www.jianshu.com/p/1dfc6b12c272