引入:
作为一个嵌入式开发人员,网页的开发一直以为不用涉及,以前在整lwip的时候有简单涉及到简单的网页,最近在整wifi模块又涉及到了网页知识,确实在wifi的配置中使用网页配置是十分方便的,不用工具和软件就能方便的实现升级及参数配置。为了更好的实现设备与网页的交互,也为了实现华丽的界面,决定系统的学习下网页,在学习之前,网页的一大堆问题就整蒙圈了 ,网页开发好多人用PHP,也有用JAVAScript的,下载文件有的只有单个.html文件,有的却有.js .css .html三种文件,网页又要用什么软件开发呢?其实在系统的学习后,这些问题肯定都不是问题了。
首先用哪种语言开发就不讨论了,用什么的都有,接下来的学习我们使用HTML+CSS+JavaScript这种方式。
而一个.html和多个文件的就类似于一个文件根据功能它们分工出去,减少冗余同时更利于维护,html是主体(框架),装载dom元素,css用来装饰元素又叫做层叠样式表(样式),javascript用来控制元素(交互),连接前后台的桥梁。
说道网页开发工具最常见的还是dream weaver.
下面开始正式学习,一提到html肯定要有游览器的事情,那么浏览器的作用?就是把我们的代码渲染成想要的界面
1. 浏览器内核
浏览器内核可分为两部分:渲染引擎和JS引擎
IE,猎豹,360极速,百度浏览器(Trident)
火狐(Gecko)
苹果(webkit)
谷歌,欧鹏(bink)
移动端浏览器常用的内核也是以上几种
2. web标准
Web标准的出现是必要的,不然一家一样式,咋开发。。
Web标准不是某一个标准,而是由W3C等组织制定的一系列标准集合,主要包括结构标准,样式标准,行为标准。
结构标准:结构用于对网页元素进行整理分类,主要包括XML和HTML
样式标准:表现用于设置网页元素的版式,颜色,大小等外观样式,主要指的是CSS
行为标准:行为指网页模型的定义及交互的编写,主要包括DOM和ECMAScript(js)
上面我们提到的 html css js三种类型的文件。
按照正常的思路,应该先学习html基础,再学习css基础,然后在学习js基础知识,然后把他们之间的结合交互方式搞懂,开始做项目就可以了。
作为一个嵌入式开发人员,一点点的去学一遍整个开发过程对于我来说是很不耐烦的,因为对于基础知识来说,好多内容我们在实际中很少用到,所以用到哪去查哪,个人觉得会更快点,做一条项链先准备好线,再一个个串珠子会更有目的性。
Html css js 三种不同的语言有他们自己的编写方式,我们把他们都独立出来,逐个攻破,然后理解他们之间的联系和结合方法,独立部分的个别的难点可以先跳过,这样会更快的完成目标,不会一条路走到黑。
说了这么多废话,开始学习吧
Html css及js的基础学习先延后,先搞懂他们之间的联系及交互方式,过程中穿插的知识点可以先作为了解知识。
一. 基础准备--各个文件之间的交互
上面我们我们也提到了用html+CSS+JS这种方式是为了方便维护,框架更为清晰等,我们是可以直接使用一个html文件搞定的,类似于嵌入式中,我们按功能分为很多个文件及函数,在一个文件中添加引用,在调用函数就可以了,我觉得这几个文件之间肯定也是添加引用,然后进行相互调用的。
1.Js的组成:
我们在平时的过程中,打开一个网页类似于静态的可以显示一些字等,但是想要实现一些按键等动态效果就要用到交互。
2.ECMAScript标准规定的基本语法是基础,无法实现交互效果,交互还要用到DOM,BOM。从这里我们就可以意识到,你学的时候要有重点侧重,不然学半天才是个生米,想做成炒饭还要再加工好几轮,在洗米的过程中占用了太多时间。
3.Web API:是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
整的还挺洋气,Api就是官方给我们封装好的库,我们直接调用api函数就行了。
例如我们想要浏览器弹出一个警示框,直接使用alert(“弹出”)
不用想,肯定有很多API,不过直接用哪种效果,查哪种效果就行了。
4.什么是DOM?
文档对象模型,是处理可扩展标记语言(html xml)的标准编程接口
通过这些接口就可以改变网页的内容,结构和样式。
(1)怎么获取页面元素?
想把其中的元素更改样式?
通过ID(getElementById()),标签名,html5新增方法,特殊元素等方法进行获取
例子:获取元素
以ID进行元素获取
1>一个文件中使用
2>分文件
根据标签名获取
getElementByTagName(),
获取body,html元素
document.body document.documentElement
(2)事件基础(事件源,事件类型,事件处理程序)
触发----响应的机制
每个元素都可以产生事件(按钮触发)
怎么操作DOM元素属性?(下面是一个获取系统时间的例子)
定义了一个按键,和一个盒子。当点击按钮后,div内的文字会刷新为系统时间。
到了这里我们已经对交互已经有了一点了解
二. 基础准备--html
那么先开始html的学习。
Html:超文本标签语言,主要通过html标签对网页中的文本图片,声音等内容进行描述。
简单说它就是一种语言带有一些特殊标签。
骨架格式
<html> //根标签
<head> //头标签
<title></title> //标题标签
</head>
<body> //主体标签
</body>
</html>
这些标签实在是太多了,可以使用的时候查呗,只要注意格式,还是很好理解的。
刚说了标签有很多,那标签是怎么分类的?
双标签(常用),单标签(<br />)
Html的标签关系
嵌套关系及并列关系
作为一个不专业的网页开发者的我,很着急看到自己的网页,那么怎么快速实现一个网页的开发,之前的了解过java,app的开发,c#的开发都是使用拖拽,很快的就实现了一个静态页面,现在你让我一点点敲代码,我是相当不乐意啊,到目前为止也了解了部分html编写和css样式的编写,和js交互实现动态切换。但是急急急,该怎么加快我的进度。
没有思路怎么办,只能根据一个项目,快速浏览之中涉及到的知识,进行知识缩减再缩减
通过快速的浏览果然发现了一些重要词汇。
Web APIs重点查看,京东项目应用重点查看。
- 下载Dreamweaver,配置软件(工作布局设置,必备的面板,默认文档设置,代码提示,浏览器设置)
- 新建站点,并包含.css . html .js文件需要的话再添加image文件夹,这样一个工程就建立了,一边编写一边通过浏览器进行结果查看。
- CSS 复合选择器,css层叠性与继承性,CSS优先级。
标记选择器具 类选择器具 ID选择器具
Bootstrap.min.css属于压缩文件和Bootstrap.css无区别。
https://v3.bootcss.com/getting-started/#download可以官网下载v3.3.7版本,是没什么区别的
<link href="bootstrap.min.css" rel="stylesheet">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
也是没问题的,bootstrap就是一个插件库,默认情况下是不需要修改的。
文字左对齐问题:
Bootstrap默认情况下,control-label的文本采用右对齐方式。这种方式在Form中如果含有checkbox等控件情况下,实际对齐方式很难看。可以将其修改为左对齐方式。在bootstrap.css文件中,搜索.form-horizontal .control-label,将其中的text-align项修改为左对齐:
.form-horizontal .control-label {
text-align: left;
}
制作IP配置栏
<div class="col-sm-2 ">
<input id="plugName" class="form-control" type="number" placeholder="请输入...">
</div>
中使用col-sm-2后栅栏的宽度太大col-sm-1的宽度又太小,所以强制替换他的格式为
Col-sx-1后完美解决。
未完待续。。
未完待续。。