嵌入式人员入门 html

最新推荐文章于 2022-04-06 10:38:47 发布

lzs_blog

最新推荐文章于 2022-04-06 10:38:47 发布

阅读量1k

点赞数 2

分类专栏： html 文章标签：嵌入式人员学习html 入门html

本文链接：https://blog.csdn.net/lzs940320/article/details/103234373

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引入：

作为一个嵌入式开发人员，网页的开发一直以为不用涉及，以前在整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>

中使用col-sm-2后栅栏的宽度太大col-sm-1的宽度又太小，所以强制替换他的格式为

Col-sx-1后完美解决。

未完待续。。

lzs_blog

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
嵌入式人员入门 html

引入：作为一个嵌入式开发人员，网页的开发一直以为不用涉及，以前在整lwip的时候有简单涉及到简单的网页，最近在整wifi模块又涉及到了网页知识，确实在wifi的配置中使用网页配置是十分方便的，不用工具和软件就能方便的实现升级及参数配置。为了更好的实现设备与网页的交互，也为了实现华丽的界面，决定系统的学习下网页，在学习之前，网页的一大堆问题就整蒙圈了，网页开发好多人用PHP,也有用JAVASc...
复制链接

扫一扫