精华内容
下载资源
问答
  • 这一小节我们来通过编写一个简单网页,来看一下Hbuilder和谷歌浏览器的使用方法及各种标签。我们打开Hbuilder,先来创建一个项目,项目也就是我们平时创建的文件夹。我们把它命名为HTMLCSS,这里选择了基本的HTML...

    3104e95980ba63d0436f5f682a9c911f.gif

      Hbuilder与浏览器的配合使用  

    上一节我们了解并安装了Hbuilder 和chrome谷歌浏览器的安装。这一小节我们来通过编写一个简单的网页,来看一下Hbuilder和谷歌浏览器的使用方法及各种标签。

    我们打开Hbuilder,先来创建一个项目,项目也就是我们平时创建的文件夹。

    2bb01b795da69cd23f07bc8731528d86.png

    我们把它命名为HTMLCSS,这里选择了基本的HTML项目,也就是包含css样式文件夹、js代码javascript文件夹、img我们存放图片的文件夹、index.html 是一个空网页,也就是主页。

    0177720d929aa8f581dc6fa78b6ee575.png

    创建好后右击刚创建好的HTMLCSS文件夹,新建一个目录,也就是子文件夹,来用于存储我们即将要编写的网页。

    88d2d15924b3076a2116e75abd627ea4.png

    将其重命名为001网页。

    9a5249049d707389d569abd6ed41bc52.png

    右击001网页文件夹,新建一个html文件,也就是我们的主页。一会要编写的网页就在这里面编写并展示效果。

    080b383b2287e250c901ec7eb600a5d6.png

    将html文件命名为index。index代表的就是主页的意思,我们以后编写网页,也要将第一个网页编写为index.html。

    创建好后大家可以自行在电脑上打开主页所在的的文件夹,来查看我们所建立的这些文件。

    1809af5343d6676bd4285650a361024f.png

    创建好index.html后,会自动出现一些代码标签,这些都是一个网页最基本的格式,不要删除,我们一条一条来看:

    1、 这个表示声明此页是一个html网页文件。

    2、这一对标签就表示本网页所有的html代码都在这里面。

    3、表示网页的头部,他包含了字符集标签、标题标签,等一些网页中的重要标签。字符集标签代表着本网页显示效果时是中文语言还是其他语言,这里的utf-8就是代表显示中文,此代码可以防止在网页中有乱码出现。

    3、这是个重要的标签,他所包含的就是我们网页中可以看到的文字、图片或其他效果。

    下面我们在中输入一行文字,来看一下效果

    3dfbe6a6a9fb9e9127f4feada824478d.png

    输入好文字后,我们点击运行,选择我们安装好的谷歌浏览器chrome

    635446ff1806e6a2a47f6d2b92c94488.png

    可以看到在网页中有一行文字出现,就是我们在中所包含的文字。

    a0283ca1745f7519b1489b3b145c1f3f.png


     

     

    现在显示的文字是我们在中输入的文字一模一样,但是在我们实际的网页中,不可能所有的文字全部都相同,比如有一些标题文字,要比普通文字更粗大一些,我们网页中也是将标题文字分为了6个等级,分别是从

    ,从大到小。下面列举三个我们来看一下。

    e5e47042bf4d8064aa4ce79f9667d3e5.png

    可见,最大号的标题就是

    ,但是如果给文字加了,文字还是会像什么都没加一样的效果,大家可以自己试一下。

    ce230697a80a4e6c41fb717983ba444e.png


    介绍完标题后,我们来添加时间,输入我们的时间,但是时间在网页中一般都是以斜体出现,我们在要输入的时间中,添加一个标签,就可以实现输入的内容变为斜体的效果。

    b18ed280199b8ef909fec72f388ea628.png1a710b7bc847816b683f862f41f63079.png


    标题、时间输入好后,我们来进行正文内容的编写,在写正文时,我们通常要与标题分隔开,在网页中有一种标签 它没有结束标签,隔开在我们的额时间线下直接输入即可在网页中添加一条水平分割线

    f61bbb22c4bdd3785e034c3cd2dbd7fe.png56075060c19294f785e4186b24ad6028.png


    添加好分割线后,我们开始编写内容,我们输入两端内容,虽然在网页中输入的文本已经换行,但是在网页中我们可以看到文本是没有换行的,这需要怎么办呢?

    fe6e02a90cccdd4887fc50993939a7e9.png207a72998adec09b2aac3f88656eeeaf.png

    这也需要我们的一个段落文字标签,单独的一段。即可实现换行效果。

    ebf940ed10138e7b40cdf050b5cded76.png02f11522e8396aa8a772fc0d672189bf.png


    刚才我们讲到标题文本h1-h6可以实现对文本的加粗加大并且换行显示,但是我们如果不想让文本换行,那应该使用加粗文本签来实现,他可以让文本加粗且不用换行。

    bc54367bc8b61cbb4b085bb60c51b471.png762e21826b98599dca6c08727f467722.png


    刚才使用的
    换行就可以避免这个问题,使文本上下紧挨着

    4f4c70916c3f6b50c125989b909074ac.png9e0b1a20f59006c22e755dee2badc04b.png


    还有一点,在内容编写中,我们难免需要用到空格来间隔一下文字之间的距离,但是在body中不管你打多少个空格,在网页中都是显示的一个空格,这时我们就需要用到&nbsp这个代码,这个就表示空格的意思,想在哪里加入空格就在哪输入,可以多个累加。

    fdbff75e6d9908b0560342e86b861cbb.png

    f32f28ee33a0b9d3fcc7c4fe755e4e4f.png

    好了,这节我们先来熟悉一下编写和浏览器的配合使用方法。

    下一小节我们来总结一下常用的标签。

    - End -

    aa8448ced8a73398d571fff5105b8b02.png

    web分享,分享的不只是web

    展开全文
  • 2、Dreamweaver cc Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,拥有可视化编辑界面,支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页,初学HTML5的人可以无需编写任何代码...

    324cc4cc3d0da977da52fc2747c2626a.png

    HTML5被看做是Web开发者创建流行web应用的利器,增加了对视频和Canvas 2D的支持。用HTML5的优点主要在于,这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏,你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到App Store或Google Play上,所以它的跨平台性非常强大,这也是大多数人对HTML5有兴趣的主要原因。今天,我将为大家推荐几个主流的HTML5开发工具。

    1、Sublime Text

    Sublime Text是一个跨平台的代码编辑器,同时支持Windows、Linux、Mac OS X等操作系统,也是HTML的文本编辑器。

    Sublime Text具有漂亮的用户界面和强大的功能,主要功能包括:拼写检查、书签、完整的 Python API 、Goto 功能、即时项目切换、多选择、多窗口等等。

    2、Dreamweaver cc

    Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,拥有可视化编辑界面,支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页,初学HTML5的人可以无需编写任何代码就能快速创建Web页面。

    3、Adobe Edge

    Adobe Edge是一款新型网页互动工具,允许设计师通过HTML5、CSS和Java制作网页动画。Edge的一个重要功能是Web工具包界面,方便确保页面在不同浏览器中的架构一致性。

    4、WebStorm

    WebStorm是一款Java开发工具,WebStorm具有的优势是:智能的代码补全、代码格式化、html提示、联想查询、代码重构、代码检查和快速修复、代码调试、代码结构浏览、代码折叠、包裹或者去掉外围代码。

    5、HBuilder

    HBuilder,即Html Builder的缩写,Builder是建造者的意思。HBuilder是一个极客工具,追求无鼠标的极速操作,不管是敲代码的快捷设定,还是操作功能的快捷设定,都融入了效率第一的设计思想。

    6、visual studio code

    一个运行于Mac OS X、Windows和 Linux 之上的,针对于编写现代Web和云应用的跨平台源代码编辑器。该编辑器也集成了所有一款现代编辑器所应该具备的特性,包括语法高亮,可定制的热键绑定,括号匹配以及代码片段收集。

    7. DevExtreme

    DevExtreme Complete Subion是性能比较好的的HTML5、CSS和Java移动开发框架,可以直接在Visual Studio集成开发环境,构建iOS、Android、Tizen和Windows Phone 8应用程序。DevExtreme包含 PhoneJS 和 ChartJS 两个原生UI组件,并且提供源代码。目前,DevExtreme支持VS2010/2012/2013集成开发环境,兼容Android 4+、iOS5+、Windows 8、Window Phone 8、Tizen五大移动平台,是Visual Studio开发人员开发跨平台移动产品的首选工具。

    8. Sencha Architect

    在开发移动和桌面应用的工具中,Sencha的定位是HTML5可视化应用开发。开发团队可以在一个单一集成的环境中完成应用的设计、开发和部署。开发者还可以开发Sencha Touch2和Ext JS4 Java应用,并实时预览。

    开发工具的选择,可以说是开发者社区中一个经久不衰的话题,现今编辑器的数量数不胜数,vim、sublime Text,Emacs,Atom等等,那么对于一个开发者而言,挑选一个合适的编辑器是可以有效的提高编程效率;那么以上是我为大家推荐的几款开发工具啦,大家可根据自己的喜好选择哦!分享一个WEB学习交流VX群,有什么不懂的可以在群里跟大家互相学习交流。

    https://weixin.qq.com/g/AwYAAKetRYfa0j2YQ2bDeIjfDp_7I3WZHrOOIgmf9pXq1BAYBZx8Sm8pIHJuEQmo (二维码自动识别)

    展开全文
  • 最近,有些客户会问这样一个问题,hbuilder如何将网页打包成APP,其实操作比较复杂,需要有开发者证书或者自有证书。但是很多人并没有这些证书,其实可以借助开发者服务平台进行网页封装打包APP,这是更简单、更快捷...

    181745f6cefb1c5f32ba916b90792896.png

    最近,有些客户会问这样一个问题,hbuilder如何将网页打包成APP,其实操作比较复杂,需要有开发者证书或者自有证书。但是很多人并没有这些证书,其实可以借助开发者服务平台进行网页封装打包APP,这是更简单、更快捷的方法。

    亥著-苹果签名|TF上架|超级签名|分发托管|封装打包|软著申请|软件定制www.haizhuyx.com
    2862428fa60c6c713d5a140e4ce6b881.png

    7a5de2b8960718f0c600d84a70a74b80.png
    https://www.haizhuyx.com/

    网页封装打包APP其实就是给网页套一个APP的外壳,可以根据自己的需要将网页封装成苹果APP或者安卓APP,这是一种“快速开发”APP的方法,通常很多企业建设好自己的网站后,没有足够的精力和资金投入到APP开发中,但又不想放弃手机用户,就可以使用网页封装打包APP的方法,快速得到属于自己的APP。

    网页封装打包APP怎么做?

    搜索亥著,进入平台,点击右上角的小头像进行登录,进入开发者后台,点击左侧导航栏的“封装APP”。

    61748735ca135d948fa6639f19e0ff8a.png

    选择应用平台是Android或ios,然后输入应用名称,和网页地址,上传自己的APP图标和启动图,如果没有准备图片,也可以直接选择平台现有的图片。点击下一步

    675e5ec898959092349649eb8b5c3f30.png

    亥著有几十种免费的功能插件,比如扫一扫、微信登录、下拉刷新等等。

    bb94a7522e0ea1a4a052c3ace6c1e2a7.png

    选择时长,提交订单就可以封装成功了。

    eb84556535e62c6171c21cb39c7e9a84.png

    封装完成后就可以下载安装包,不过需要注意的是,网页封装打包APP安卓版的APP可以直接安装,但是苹果APP需要做苹果企业签名才能够安装在苹果手机上。

    苹果企业签名相关内容,可以百度搜索苹果企业签名亥著平台或点击上方官网链接了解。

    展开全文
  • 很多人把网站制作网页制作混为一谈,在他们的意识中,所谓做网站,就是用Hbuilder等工具把图片、文字弄到一起,形成一个页面。他们制作网站时,往往直奔主题,直接进入Hbuilder环境,随着制作的深入,越来越糟糕,...
    9789e584d2bac5ed87ef38b546c3fc5f.png

    爱美食爱技术

    网站制作流程,是指网站制作过程中必须遵循的工作顺序。每个成品网站都必须按标准流程进行建设。这类似于企业的产品生产线,一个工序一个工序地完成整个产品加工。很多人把网站制作与网页制作混为一谈,在他们的意识中,所谓做网站,就是用Hbuilder等工具把图片、文字弄到一起,形成一个页面。他们制作网站时,往往直奔主题,直接进入Hbuilder环境,随着制作的深入,越来越糟糕,越来越难以维系。最后,网站的夭折将会导致网站制作者创作激情的泯灭。电子商务网站的功能较多,应用性极强,更要注重按流程制作。可见,网站的制作流程在网站制作中有着重要的意义。

    bd9389dc6250417690b0fbbcf6e16d35.png

    1.以网站建设流程为指导

    只有具备一套标准的网站建设流程,网络公司或制作网站的个人才能开始电子商务网站的实际制作工作,才能有序地组织素材,设计界面,编写代码,网站建设的每个步骤才能清晰明了。

    2.建设流程是网站成功的保障

    网站建设是一个系统工程,好比盖一座高楼,工序清晰、有序开展,才能保证工程顺利进行。网站建设决不是今天做个界面,明天编个代码,这样的网站即使做出来,日后的维护工作也无法进行。电子商务网站的制作必须按标准流程进行,这样,网站建设才有成功的保障。

    b2b2678273f8872729643259bca6196a.png

    3.建设流程可以有效提高网站制作效率

    网站制作,一般都有明确的工期要求,必须有一个整体计划,才能按时、保质完成网站建设工作。有了标准的流程,确定了明确的分工,每个阶段有了具体的时间要求,网站才能如期交付用户使用。

    177c365fb6a14654af18779f7634a0d2.png

    4.建设流程有利于实施团队合作

    一个人的力量总是不够的,团体的力量才能移山填海。网站的建设,不是一个人的力量所能完成的,必须发挥团队的优势,业务、策划、美工、程序编写都必须按照标准流程分工协作,共同完成。没有标准流程,就谈不上分工协作,就会打乱仗。

    展开全文
  • 今天开始js的内容整理,跳动在网页里的精灵就是它了。一、简介1、什么是JavascriptJavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本...
  • 利用HbuilderX制作简单网页

    千次阅读 2021-01-07 15:37:24
    鉴于Android的知识放得太久,且AndroidStudio已被删除,所以尝试下载HbuilderX(十几M大小,操作简单),自学半天设计一个简陋的网页,由于没学过前端,所以很一般。 工具: 项目文件及包含: 1. HTML是描述网页...
  • 可以用其制作包含图像、文字、声音等精彩内容在内的网页,它由浏览器解释并显示在用户浏览器的窗口中。HTML文档的基本结构如下所示:基本HTML页面从标记开始,到结束。在它们之间,就是头部分和主体部分。头部分用…...
  • 下面就跟大家说说手机网页制作教程:首先,你需要选择一个比较好用的手机网页制作app。尽量找知名度高、业界口碑好、基础功能比较完善的软件,比如「上线了」,下载安装后,选个模板就能快速建站。方法如下:打开...
  • 制作简单网页的具体操作有哪些呢?如果是详细的网页制作,设计和制作一样关键。有可能是网页设计制作新手对简单网页制作设计的具体操作不太清楚。更别说设计详细的网页了。下面一起来看看吧! 首先,选择网页的主题。...
  • 首先我要说学习前端网页制作其实很简单!今天我带着你踏入前端开发的大门,我不会给大家说一些难懂的概念上的东西,有些知识其实不必知道,学习之后再慢慢了解也是可以的。简单粗暴,直接让你上手就完事了!先大致...
  • 为了节省网页制作费用,很多企业现在会选择自适应网页制作,因为这种网页能够在多个终端完美呈现,不用耗费时间做多个终端企业网站。现在移动互联网发展迅速,大部分企业流量都是来自于移动互联网用户,因此自适应...
  • 现在越来越多企业想要制作自己的网络营销推广网站,但又不知从何开始,下面就跟大家科普下简单教程,不懂技术的小白也能做好:在「上线了」sxl.cn注册账号后选择“创建网站”,然后选择一个你喜欢的模板(一般是公司...
  • 可以把网页打包app的软件和网站有很多,今天要推荐的是国产的一款轻巧、极速 10M的绿色发行包。 C++架构,启动速度、大文档打开速度、编码提示,都极速响应。强大的语法提示 一流的ast语法分析能力,语法提示精准、...
  • 不过使用网页制作工具虽然简单,但仍有很多细节需要注意,并且要遵循一定流程。那么个人究竟该如何建站呢?下面就给大家详细科普下个人网页制作教程:第一步:确定网站定位先要想明白你打算用这个网站做什么,是做...
  • Hello,大家好,这里是TopOne软件管家!今天教大家简单的做一个APP,大家可能好奇...下载链接:由于限制,详情查看微信公众号(TopOne软件管家)对于大部分小白来说,利用网页制作APP无疑是一个高效的方式,我只是...
  • 随着互联网发展,个人建站已经不是什么稀奇事...好的网页制作软件对于零基础新手来说,做网页设计则一般是使用自助建站模板,模板的质量对网站有重要影响。因此,若想让自己的个人网站美观,你需要尽量找设计感强的...
  • 随着互联网发展,个人建站已经不是什么稀奇事...好的网页制作软件对于零基础新手来说,做网页设计则一般是使用自助建站模板,模板的质量对网站有重要影响。因此,若想让自己的个人网站美观,你需要尽量找设计感强的...
  • 很多人都有在淘宝购物的经历,在逛淘宝的时候,很多商品详情的页面是卖家自己制作的,而不是淘宝提供的,所以想要在淘宝上开店,是需要会制作网页的。那么,哪里有免费的网页模板?下面将会为大家介绍。哪里有免费的...
  • 主要使用document对象实现,在网页之上输出简单时间变化 使用setInterval方法进行不断调用fun()函数,来实现时间的显示,此处使用HBuilder编译。 setInterval("fun()",1000); ...
  • 制作简单网页的基本步骤 01 了解网站是做什么的,来设计网站整体风格。首先要对网站整体页面色彩、版式有一个统筹安排,方便后面的进行。这一步最重要,做好了后面就不会反反复复修改。 02 首页设计。首页是网站...
  • 话不多说,我用的软件是HBuilder制作网页。样式是这样的 相信学过的都会做这个页面; <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面跳转</title> ...
  • 静态HTML个人主页学生网页作品作品介绍修改教程作品演示代码演示源码文件作品下载 作品介绍 大学生网页设计个人主页网站模板采用DIV ...网页代码采用基础学生水平DIV 布局制作,可使用Dreamweaver、HBuilder、Notepad++
  • 整体页面宽度1100PX,使用CSS制作网页背景图,导航部分简单制作了鼠标经过变色效果。 个人网主页模板作品下载后可自行修改,所看到的文字都可以编辑修改,图片可直接在文件夹中替换覆盖。可使用Dreamweaver、...
  • 此作品为学生个人主页网页设计题材,代码为简单学生水平 DIV CSS布局制作,整个作品由主页、个人历程、兴趣爱好、学业成绩、联系我们共5页组成,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、NotePAD等...
  • 此作品为学生个人主页网页设计题材,代码为简单学生水平 DIV CSS布局制作,整个作品由主页、个人历程、兴趣爱好、学业成绩、联系我们共5页组成,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、NotePAD等...
  • HBuilderX.1.8.2.20190401.解压直接使用;简单快捷的网页生成软件,可编写HTML5+CSS+JS简单网页制作,网页制作入门推荐。
  • 学生个人网页设计作品网页介绍修改说明网页演示...网页作品代码简单,可使用Dreamweaver、HBuilder、Notepad++等任意HTML软件编辑修改网页内容为个人信息。 网页演示 以下为网页作品首页截图,更多页面效果可点击此处

空空如也

空空如也

1 2
收藏数 40
精华内容 16
关键字:

hbuilder制作简单网页