当前位置: 澳门新濠3559 > 编程 > 正文

图四是我在HTML文件中引用的js及css,是HTML文件的

时间:2019-12-27 17:08来源:编程
FeWeb基础之HTML 欲善其事必先利其器,我做了两周的HTML5开发,帮着同事写了1、2个界面,然后我就分享我的这条道路吧。 第一个图是我直接运行HTML显示出来的,第二个图是我通过Pytho

澳门新濠3559 1

FeWeb基础之HTML

欲善其事必先利其器,我做了两周的HTML5开发,帮着同事写了1、2个界面,然后我就分享我的这条道路吧。

第一个图是我直接运行HTML显示出来的,第二个图是我通过Python运行出的网站打开的,它没有样式了??!图三是我的结构,图四是我在HTML文件中引用的js及css,路径肯定是没有问题的但是为什么不显示!!?

1、HTML简介

澳门新濠3559,概述

ECharts是百度公司支持的开源产品,定位于Chart, Qunee for HTML5 是上海酷利软件的商业软件,定位于拓扑图,两者都是前端技术,同属于数据可视化类库,但差异也很明显,本文将从大的方面对比两者特点

ECharts Qunee for HTML5
License 开源 商业
产品定位 图表 - 饼图、柱状图、雷达图、地图等 拓扑图 - 组织图、流程图、地铁图等
典型界面 标题,图例,数据过滤等 工具栏 - 框选,缩放,搜索等
典型驱动方式 数据驱动,配置 API驱动,二次开发
js大小 echarts.js - 350kb, echarts-all.js - 921kb qunee-min.js - 333kb
浏览器支持 IE6+, chrome, safari, firefox ... IE9+, chrome, safari, firefox ...

澳门新濠3559 2

    HTML是一种超文本标记语言,它的文件扩展名为.html,它的所有部分都是由标记<...>和标记</...>包括起来。

图四是我在HTML文件中引用的js及css,是HTML文件的总标记。产品定位

  • ECharts:图表 - 折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图
  • Qunee for HTML5:拓扑图 - 拓扑图 - 社交网络图、网络管理图;地图 - 地铁图、统计地图;其他 - 组织图、思维导图、流程图

澳门新濠3559 3

搜索下载

    在一个HTML文件中,至少需要4对标记。<html>...</html>是HTML文件的总标记。<head>...</head>是HTML文件头部的总标记。<title>...</title>是HTML文件头部分,用来写HTML文件标题的标记。<body>...</body>是HTML文件体部分,它是HTML文件中最重要的一部分,大部分内容都会写在这里面。

典型界面

  • ECharts:标题,图例,数据过滤,数据视图等
  • Qunee for HTML5:工具栏:缩放、框选、搜索等

澳门新濠3559 4

HBuiler的好处在于它引用了一个MUI框架(MUI官网地址:http://dev.dcloud.net.cn/mui/)
还可以直接创建APP项目

    接下来先来建立第一个HTML文件吧,首先在桌面上右击,新建一个txt文本文件,并在txt文本里输入以下代码:

驱动方式

  • ECharts:数据驱动,chart.setOption({series, legend …})
  • Qunee for HTML5:API驱动,graph.createNode(..), graph.createEdge(…)

澳门新濠3559 5

<html>
          <head>
                <title>第一个HTML文件</title>
               <body>
                        恭喜你,你已经进入HTML世界!
              </body>
        </head>
</html>

Hello ECharts

echarts定位于图表,用户配置特定的数据,echarts解析显示,非开发者也可以使用

<div id="main" style="height:400px"></div>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        tooltip: {show: true},
        legend: {data: ['销量']},
        xAxis: [{type: 'category', data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]}],
        yAxis: [{type: 'value'}],
        series: [{"name": "销量", "type": "bar", "data": [5, 20, 40, 10, 10, 20]}]
    };
    myChart.setOption(option);
</script>

运行效果: 

澳门新濠3559 6

创建APP项目

    然后将该文件扩展名.txt改成.html,并重新命名文件名,然后鼠标双击该文件,即可在浏览器中看到如下图一所示:

Hello Qunee

qunee定位于拓扑图二次开发包,通常都需要编写代码,面向高级开发者

<div style="height: 500px;" id="canvas"/>
<script src="http://demo.qunee.com/lib/qunee-min.js"></script>
<script>
    var graph = new Q.Graph('canvas');

    var hello = graph.createNode("Hello", -100, -50);
    hello.image = Q.Graphs.server;
    var qunee = graph.createNode("Qunee", 100, 50);
    var edge = graph.createEdge("HellonQunee", hello, qunee);
</script>

运行效果:

澳门新濠3559 7

你可以直接创建一个MUI Hello 然后在mac下运行各种模拟器,真机,都可以,它下面还有入门介绍。我就不多说了。

澳门新濠3559 8

关于地图

  • ECharts - 展示地图上的统计数据
  • Qunee for HTML5 - 展示地图背景拓扑图
ECharts Qunee for HTML5
产品定位 地图数据统计 地图拓扑图
拓扑图 没看到地图 + 拓扑图的示例 专注于拓扑图
性能体验 官方示例数据量并不大,性能却不高,炫光特效的几个例子略卡 从世界地图到地市级别,再加上万节点连线,交互依旧流畅
地图数据 地图数据比较粗糙,广东省和海南岛居然是连在一起的,不确定echarts能提供从世界地图放大到地市的方案 可以提供从世界地图到国内县市,各种精度的地图输出
样式 官方示例中地图只有颜色填充,成图效果不佳 支持颜色、渐变、阴影、边线样式等效果,更好的展示效果
支持与定制 地图拓扑并非echarts的重点,不确定如何从百度公司获得官方支持和定制服务 商业软件,专注于拓扑,提供官方技术支持,特殊需求可以定制

澳门新濠3559 9

图一:实例一运行结果

ECharts 地图截图

澳门新濠3559 10

引用MUI

 

Qunee 地图截图

澳门新濠3559 11

运行模拟器

    HTML标记分为文件标记、字体属性标记、标示标记、区段标记、链接标记、图像标记、表单标记、表格标记、多媒体标记和其它标记。现在就其中六个标记作一一详细介绍。

总结

两者定位不同,ECharts专注于大众的图表,Qunee专注于专业的拓扑图,图表用户群体比较广,通常配置一下数据就可以显示,而Qunee面向专业开发人员,通常需要编写代码才能实现业务需求 

关于地图,ECharts可以显示地图统计数据,而Qunee则支持地图与拓扑图的结合展示 

性能方面,Qunee(商业授权)支持上万图元,交互流畅,从官方示例看,ECharts在性能和体验方面还有很大的改善空间 

总的来说,两者可以互补,Qunee目前没有图表,ECharts拓扑图弱,此外Chart方面的优秀组件很多,比如highcharts,也有map,效果体验更好

澳门新濠3559 12

2、字体属性标记

运行

    字体属性标记是用来设置字体的标记。字体属性标记包括设置标题字体大小的标记,把字体设置成粗体、斜体,也可以为字体加下划线、删除线等很多标记,具体如下:

澳门新濠3559 13

(1)<Hn>标记

模拟器效果图

    <Hn>标记用来设定标题字体的大小,n的取值范围为1~6,在显示字体时1最大,6最小。

做开发啥的就不用我说了吧,该怎么写就怎么写,我也没有技巧。

(2)<b>粗体字

将纯HTML5项目集成iOS项目运行

这个前提是你必须在HBuilder上开发的HTML项目,因为我是跟着它的官网来的。

文档路径:http://ask.dcloud.net.cn/docs/

澳门新濠3559 14

路径

澳门新濠3559 15

下载的东西

进入下载他提供的东西,然后直接在他给的项目行进行各种文件的配置,不需要自己一个一个去集成,不然,你会很吃亏的,我吃过了,弄了一天,各种错误,然后问了人别人给我说他们都是直接在官网给的项目上修改的。

我接下来就说需要重点注意的地方:
1>将www文件夹上面的那个文件夹名称改为你的HBuiler里面json的id名称

澳门新濠3559 16

iOS项目显示效果

澳门新濠3559 17

HBuilder中的json显示

2>在这个里面,修改id,为html项目中的id,appver为HTML项目中JSON里面的code

澳门新濠3559 18

修改

3>在info中当前版本号对应json中的东西,build对应code(这个是为了你做版本更新的)

澳门新濠3559 19

info文件中

4>你必须将iOS项目中的json中的注释全部删掉

5>如果你想用自己的启动图和图标,我试了几种,然后成功的就是根据他给的名称改你的图片名称

澳门新濠3559 20

启动图和app应用图标

6>这是我感觉最重要的你做了上述操作还必须做一件事情(将你的程序卸载,再重新运行一次,因为你有些东西不这样是引用不了的)

澳门新濠3559 21

卸载程序

    <b>...</b>标记用来设置字体,使在<b>...</b>之间的字体变为粗体字。

大功告成

澳门新濠3559 22

运行效果

(3)<I>斜体字标记

    <I>...</I>标记用来设置字体,使在<I>...</I>中间的字体变为斜体字。

(4)<U>加底线标记

    <U>标记用来是中间的字变为加底线的样式。

(5)<DEL>删除线标记

    <DEL>...</DEL>删除线标记就是在字的中间划一道横线,用来表示删除的意思。

(5)<!...>注解标记

    <!--...-->标记中间部分为注释的内用,注释是在写代码过程中很重要的一部分但是不显示。

(6)设定字体的颜色、大小、字型标记

    在HTML中对字体的设定有很多种,包括对整个文件字体的设定,对单句话字体的设定。

    接下来,蓝看两个具体实例。实例二,新建一个txt文本,在其中输入以下代码:

 

<html>
          <head>
                <title>字体属性标记实例一</title>
               <body>

                        <h1>设定字体大小</h1><br>
                        <h6>设定字体大小</h6><br>
                        <!-- <Hn>标记示例 -->

                        <b>粗体字</b><br>
                        <!-- <b>粗体字标记示例 -->

                        <I>斜体字标记</I><br>
                        <!-- <I>斜体字标记示例 -->

                        <U>加底线标记</U><br>
                        <!-- <U>加底线标记示例 -->

                        <DEL>删除线标记</DEL><br>
                        <!-- <DEL>删除线线标记示例 -->

              </body>
        </head>
</html>

 

 

    然后,修改文件扩展名为.html,鼠标双击运行,可以看到图二所示结果:

澳门新濠3559 23

图二:实例二运行结果

    实例三,新建一个txt文本文件,输入以下代码:

 

<html>
          <head>
                <title>字体属性标记实例二</title>
               <body>
                        <font color="#CC0000" size="5" face="隶书">字体大小颜色设定</font><br>
                        <!--使用font标记设定字体大小颜色-->

                        <BIG>对字体大小进行设定</BIG><br>
                        <SMALL>对字体大小进行设定</SMALL>

              </body>
        </head>
</html>

 

 

    然后,修改文件好、扩展名为,html,双击运行,可以看到如下图三所示的结果:

澳门新濠3559 24

 

图三:实例三运行结果

 

3、标示标记

    在HTML中,为了使要显示的文字更加工整一些,使其条理顺序更加明朗一些,就需要用到标示标记。具体,请看以下实例四:

 

<html>
          <head>
                <title>标示标记实例三</title>
               <body>
                        <li>第一项
                        <li>第二项
                        <li>第三项
                        <li>第四项
                        <li>第五项
                        <li>第六项
              </body>
        </head>
</html>

 

 

    运行结果如图四所示:

澳门新濠3559 25

图四:实例四运行结果

4、区段标记

    <br>是区段标记中的换行标记,<hr>水平线标记是用来分割字符串的水平线。<p>...</p>段落标记使内容跳入下一行并加入一行空白,需要注意的是</p>可以省略。

    接下来,请看一下实例五:

 

<html>
          <head>
                <title>区段标记实例五</title>
               <body>
                        1.回执分割字符串的水平线一
                        <hr>
                        2.绘制分割字符串的水平线二
                        <hr width="160%">
                        3.绘制分割字符串的水平线三
                        <hr width="50%" size="4">
                        4.绘制水平分割字符串的水平线四
                        <hr width="400" size="30" noshade>
                        5.绘制分割字符串的水平线五
                        <hr align="left" width="400" size="10">
                        <hr align="center" width="400" size="10">
                        <hr align=“right” width="400" size="10">

                        <p>
                          段落标记一
                       </p>
                        <p>
                         段落标记二
              </body>
        </head>
</html>

 

    运行结果如图五所示:

澳门新濠3559 26

图五:实例五运行结果

 

5、链接标记

    链接标记根据链接的地方不同可分为外部链接、内部链接和邮箱链接。它们的格式大致相同,都是用href链接URL位置或文件,用target指定链接到的URL位置或文件显示于哪一个视窗。

接下来,请看以下实例六:

 

<html>
          <head>
                <title>链接标记使用实例六</title>
               <body>
                        <a href=https://www.baidu.com/” target="_blank">外部链接</a>
              </body>
        </head>
</html>

 

 

    运行后,结果如图六所示:

澳门新濠3559 27澳门新濠3559 28

 图六:实例六运行结果

6、图像标记

    图像标记就是往网页中添加图像,它有很多属性,用SRC或URL来引入图像,用align调整图像的位置,用alt设置提示子,用border设置边框,用height和width分别设置高度和宽度。

接下来,请看以下实例七:

<html>
          <head>
                <title>图像标记的使用实例七</title>
               <body>
                        <iMG SRC="5.jpg" 
        alt="图像" 
        width="600" height="300" 
        border="1" 
        align="middle">
              </body>
        </head>
</html>

    运行结果如图七所示:

澳门新濠3559 29

图七:实例七运行结果

 

7、表单标记

    表单标记是HTML中的一项重要内容,有很多有用的控件可以在HTML中直接定义。具体如下:

(1)form表单

    在HTML中,<form>...</form>用来创建一个表单,它定义了表单的开始和结束位置,在<form>...</form>之间的一切都属于表单的内容。在表单<form>标记中,可以设置表单的基本属性,包括名称、处理程序、传送方式等。

(2)Text文本框

    Text文本框有很多属性,例如type属性是用来指定它是单行文本框。

(3)Password密码框

    Password密码框和Text单行文本框几乎是一样的,唯一不同的是在密码框中书写文字时,显示的特殊符号。

(4)Radio单选按钮

    在Radio单选按钮中,需要特别说明的一个属性是checked,它用来指明初始选中哪一项。

(5)Checkbox复选框

    Checkbox复选框和单选框唯一的不同之处就是可以选择很多项,它的属性也和单选按钮完全相同。

(6)SELECT列表框

    SELECT列表框有个很特别的属性,就是multiple属性,加上这个属性后就可以通过Shift和Ctrl键来进行多选。

(7)File文件夹

    File文件夹是用来在HTML中打开电脑中的文件的一种标记。其中的重要属性为accept,它是用来设定要接收什么类型的文件。

(8)TEXTAREA文本框

    TEXTAREA文本框是相对TEXT单行文本框的多行文本框。它通过cols和rows属性分别来设定TEXTAREA文本框的列和行,用WRAP来设定是否自动换行。其参数有3个,分别是off、physical、virtual。off表示此属性忽略不记;physical表示必须将文字换行才能送给服务器;virtual表示换行由人控制,什么时候换行由用户来决定。

(9)Submit提交及Reset清除

    提交按钮是一种比较特殊的按钮,在单击该按钮时即可实现表单内容的提交。清除按钮也是比较特殊,它可以清除用户在页面中输入的信息。

接下来,来看两个有关表单标记使用的具体实例,实例八:

<html>
          <head>
                <title>第表单标记的使用实例八</title>
               <body>
                        <form name="form1" method="post" action="...">
    form表单
                         <br>
                         <form action="..." method="POST"> 
    输入名字:<input type="Text" name="name" value="" 
                     size="15" maxlength="8"> 
                        </form> 
                        <br>
                        用户名:<input name="username" type="text"  size="20"><br>
                       密码: 
                                    <input name="password" type="password"  size="20" maxlength="10">
                        <br>
                         <form action="" method=POST>
                         <input type=radio name="sex" value="男" > 男<p>
                         <input type=radio name="sex" value="女" checked> 女<p>
                         </form>
                          <br>
                          <form action="" method=POST>
                              <input type=checkbox name="Banana" value="Banana" checked> Banana<p>
                              <input type=checkbox name="Apple" value="Apple" checked> Apple<p>
                              <input type=checkbox name="Orange" value="Orange"> Orange<p>
                          </form>
                           <br>
                            <form action="" method=POST >
                               <select name="where" size =5 multiple>
                               <option  selected value="beijing" >北京
                               <option value="tianjin" >天津
                               <option value="hebei" >河北
                              </select><p>
                            </form>
              </body>
        </head>
</html>

    运行后,结果如下图八所示:

澳门新濠3559 30

图八:实例八运行结果

 

    实例九:

<html>
          <head>
                <title>表单标记的使用实例八</title>
               <body>
                       <form action="" method="POST">
                             <input type="file" name="upload" size="25" maxlength="75" 
                               accept="text/html"> 
                       </form>
                       <br>
                       <form action="www.163.com" method="POST">
                           <textarea name="comment" rows=10 cols=50>
                           </textarea>
                       <P>
                            <input type="submit" value="提交">
                            <input type="reset" value="清除">
                      </form>
              </body>
        </head>
</html>

    运行后,结果如下图九所示:

澳门新濠3559 31

 图九:实例九运行结果

 

 

 

 

编辑:编程 本文来源:图四是我在HTML文件中引用的js及css,是HTML文件的

关键词: