整合营销服务商

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

免费咨询热线:

学习网页制作并不难,HTML菜鸟教程,从这里开始第一课学习

多朋友想学一下网页制作,上网一看,只要涉及到网页制作,都离不开HTML这个词语,HTML是HyperText Markup Language的简称,想学习HTML语言,先得了解一些基本知识,今天这边内容可以作为学习HTML的菜鸟教程第一课。

HTML是什么?

一般我们说HTML是指超文本标记语言,英文名称为HyperText Markup Language,简称HTML,它是目前互联网上应用最广泛的语言。

如何查看HTML?

拿最常见的网页为例,如果用大家熟悉的IE浏览器的话,直接在网页上点右键,选择“查看源”即可查看当前网页的HTML源码;如果是其他浏览器的话,多数情况下点击右键,选择“查看源码”或者类似“查看网页源代码”这样的选项即可查看。

当然也可以通过专业的网页制作软件以及各种文本编辑器来查看。

HTML有什么用?

HTML语言可以方便地将网络上存储于不同位置的文字、图片、声音、视频等内容组织起来,方便用户浏览。对于我们来说,HTML是学习网页制作的基本功,熟练掌握HTML这项基本功,可以为以后的学习和工作打下良好的基础。

HTML如何入门?

要学习任何编程语言,都不好好高骛远,HTML的入门很简单,但是也要遵循学习的基本步骤,选择一本入门书籍,循序渐进地去学习每一张的内容。一边学习,一边查看网页代码对照来学,提升入门速度。

HTML案例

下面就是最基本的HTML案例,在这个案例中,用的是HTML5,

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
  • <title> 描述了网页的标题
  • <body> 元素包含了可见的页面内容,因为下面是最简单的案例,所以只有几行,实际网页一般都有很多行。
  • <h1> 定义一个大标题
  • <p> 元素定义一个段落,也就是大家常说的分段。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

如何编辑HTML?

这个就很多了 ,比如最出名的Dreamweaver,当然如果熟练之后,可以选择任意自己喜欢的编辑器,一些小的改动或者一小段代码的话,也可以用各种常见的文本编辑器来处理,比如我们在wodows系统上常见的记事本,总之只要自己觉得方便就好。

总结

以上是学习HTML菜鸟教程的第一课,首先保持一个良好的心态来学习,有好的心态,知识方面只要循序渐进,学会就是水到渠成的事情了 。

普及一下基本知识:什么叫在线HTML编辑器?

说得简单点,在线HTML编辑器就是在网上发帖子、写博客的那个带编辑功能的框框,可以进行图文排版等操作。


当年本菜鸟做网站的时候,曾经自己用javascript编写过一个比较简单的在线HTML编辑器,用于文本内容的排版。但是因为水平有限,很多功能都无法实现。后来有了eWebEditor,功能确实强大,但这个编辑器是个收费的软件,并且正因为功能强大,也就显得过重,一些轻量的场合不是太适用。那有没有既免费、又功能强大、还能适应轻量场合的在线HTML编辑器呢?

答案肯定是有的。这首先要感谢这些年来有一批奉献精神的程序猿们不断推进共享软件的开发,让我们得以享受他们的成果。

一、百度出品的UEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。特别要说的是,头条号后台发布文章的编辑器就是用的UEditor!

百度UEditor

UEditor还有一个轻量版的,叫做UMeditor,简称UM。UM是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线HTML编辑器。 主要特点是容量和加载速度上的改变,主文件的代码量为139k,而且放弃了使用传统的iframe模式,采用了div的加载方式, 以达到更快的加载速度和零加载失败率。UM的第一个使用者是百度贴吧,以经受贴吧每天几亿的pv的考验,功能设计应当是最优化的了。 当然随着代码的减少,UM的功能对于UE来说还是有所减少,但也有增加,比如拖拽图片上传,chrome的图片拖动改变大小等。

百度UEditor界面

二、xhEditor开源HTML编辑器

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。

xhEditor完全基于Javascript开发,可以应用在任何的服务端语言环境下,例如:PHP、ASP、ASP.NET、JAVA等。可以在CMS、博客、论坛、商城等互联网平台上完美的嵌入运行,能够非常灵活简单的和您的系统实现完美的无缝衔接。

主要特点:

  • 精简迷你:初始加载4个文件,包括:1个js(50k)+2个css(10k)+1个图片(5k),总共65k。若js和css文件进行gzip压缩传输,可以进一步缩减为24k左右。

  • 使用简单:简单的调用方式,加一个class属性就能将textarea变成一个功能丰富的可视化编辑器。

  • 无障碍访问:提供WAI-ARIA全面支持,全键盘精细操作,全程语音向导,提供完美无障碍访问体验,充分满足残疾人的上网需求。

  • 内置Ajax上传:内置强大的Ajax上传,包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传),剪切板上传及远程抓取上传

  • Word自动清理:实现Word代码自动检测并清理,生成代码最优化精简,却不丢失细节效果。

  • UBB可视化编辑:支持UBB可视化编辑,在获得安全高效代码存储的同时,又能享受可视化编辑的便捷。

三、KindEditor开源HTML编辑器

KindEditor 也是一个开源的在线HTML编辑器, 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。本菜鸟感觉这个编辑器上手比较容易,功能也很强大,界面比较友好,很适合菜鸟使用。可惜的是最近好像停止更新了,官网好象也能不正常访问。

KindEditor界面

主要特点:

  • 快速:体积小,加载速度快

  • 开源:开放源代码,高水平,高品质

  • 底层:内置自定义 DOM 类库,精确操作 DOM

  • 扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能

  • 风格:修改编辑器风格非常容易,只需修改一个 CSS 文件

  • 兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera

四、阿里的KISSY

严格来说,KISSY不仅仅是一个在线HTML编辑器,而是由阿里集团前端工程师们发起创建的一个开源 JS 框架,具有跨终端、模块化、使用简单的特点。里面带有HTML编辑器这个模块。

阿里的KISSY

正因为KISSY采取模块化设计,因此具有高扩展性、组件齐全,接口一致、自主开发、适合多种应用场景等优点。KISSY 除了完备的工具集合诸如 DOM、Event、Ajax、Anim 等,KISSY 还面向团队协作做了独特设计,提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的 JavaScript 框架,KISSY还 为移动终端做了大量适配和优化,搞移动web开发的可以好好研究一下KISSY的运用


关于菜鸟手记:

菜鸟最怕就是看大神的攻略,全是术语看头就头大!本人作为一名对啥都感兴趣的资深菜鸟,潜心研究各类技术二十余年,做网站、写程序、搞美工、练书法、学画画、作文章、抓管理、装逼格,属于搞IT里面最懂美工的,搞HR里面最懂画画的,搞文字里面最懂程序的,最终一事无成,博而不精,徒留一堆手记。从菜鸟角度写手记,同样的”白”更易懂,你值得拥有!感兴趣的,请别忘点右角关注菜鸟手记。

荐几个免费视频、音频素材网站,记得收藏哦!

1、菜鸟图库

https://www.sucai999.com/video.html?v=NTYwNDUx

站内有超多视频素材,各种类型的都有像自然、交通、科学、动物等等都能找到,全部都按照标签分类好了,找起来非常方便。还有超多音频、音效素材,网络流行的各种热梗音效这里都能找到。

重点是可以免费下载,还能商用哦,非常不错的一个素材网站。


2、Pixabay

https://pixabay.com/

Pixabay是一个国外免版税的素材网站,里面有很多图片、视频、音频等素材,很多自媒体人都在用这个网站。


3、爱给网

https://www.aigei.com/

一个非常不错的素材网站,主要以音频素材为主,全部都分类好了板块,找起来很方便,下载直接找免费商用区。视频素材也很多,但大部分收费,还有下载次数限制。


4、Mixkit

https://mixkit.co/

这个网站里面的PR、AE、达芬奇模板都是免费的,使用无须署名,也无需注册就能免费下载,还有很多音频、音乐等素材也都是免费的。虽然他是个国外网站,但是浏览起来一点也不卡顿。


5、mazwai

https://mazwai.com/

网站主要以视频素材为主,数量非常多,主要以自然、城市交通、航拍等一系列作品为主。全站视频素材无需注册就能免费下载,还可以商用。但是网站更新比较慢,很多都是之前的素材了。