学习网页制作并不难，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里面最懂画画的，搞文字里面最懂程序的，最终一事无成，博而不精，徒留一堆手记。从菜鸟角度写手记，同样的”白”更易懂，你值得拥有！感兴趣的，请别忘点右角关注菜鸟手记。

天我们继续看看html的学习笔记。

文本标签

标题标签<hn>

将文本设置为标题显示的标签对。设定标题字体大小，n=1（大）~6（小），标题大小一共有6种，也就是从<h1>……</h1>到<h6>……</h6>

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<h1>我是菜鸟小白</h1>
<h2>你们的好朋友</h2>
<h3>  让我们一起学习吧！！！</h3>
</body>
</html>

显示效果如下：

字体修饰标签

对文字的格式做相应的变化，如粗体、斜体、底线、上标、下标等。常用的字体修饰标签有以下几种。

<b>……</b>:指定文字为粗体字
<i>……</i>:指定文字为斜体字
<u>……</u>:指定文字为带有下划线
<tt>……</tt>:指定文字为打字机效果
<sup>……</sup>:指定文字为上标
<sub>……</sub>:指定文字为小标
<em>……</em>:对某段文字进行强调，通常用斜体字显示出来
<strong>……</strong>:对文本进行强调，通常用粗体字显示出来我们看下加粗前后对比，其它效果类似方式

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<b>我是菜鸟小白呀</b>
我是菜鸟小白呀
</body>
</html>

显示效果如下：

字体标签<font>

设置文档的字体，改变其属性，对文本进行不同的设置，包含字体、大小、颜色等

size
face
color

我们看看大小的对比区别

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
我是菜鸟小白
<font size="20px">我是菜鸟小白呀</font>
</body>
</html>

显示效果如下：

超链接标签

超链接的定义

在不同文档、同一个文档的不同段落之前相互跳转。html链接包含两部分：锚标和目标点。锚标就是链接的源点，当鼠标被移动到锚标处时会变成小手状。此时，用户通过点击鼠标就可以到达链接的目标点。目标点可以是一张图片、一个网络文件、一个多媒体文件等。

属性href（hypertext reference）

用于设定链接地址，其链接地址必须是URL地址，必须给出具体的路径。其中URL地址可以为下面内容：

网站：可以设置ip地址或者是网站的网址。

<a href="http://www.baidu.com">百度地址</a>

点击页面的百度地址可直接跳转到百度页面

网页：链接到本机的网页。

<a href="cainiao-跳转后页面.html">跳转</a>

跳转前页面

点击跳转后直接跳转到新的本机页面

可执行文件：当文件扩展名不是html、asp等时，会将链接到的文件下载到本地计算机或直接执行。如果是文本文件（如word格式），则在浏览器中打开文件并进行编辑。

<a href="index.txt">txt文件，打开进行编辑</a>
<a href="index.wav">播放声音</a>

网页上的书签：通常使用在网页的长度超过屏幕时，可以使用书签直接跳转到该书签指向的具体内容，节省移动滚动条的时间。

属性target

属性值分别为_blank、_self、_parent、_top。
target=_blank：在新的浏览器窗口中打开连接的文档，同时保持当前窗口不变
target=_self：将链接的文档载入链接所在的同一框架或窗口，默认设置为_self
target=_parent：将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。
target=_top：将链接的文档载入整个浏览器窗口，从而删除所有框架我们以“_blank”为例，可以按照如下方式编写：

<!--在新的窗口中打开百度首页-->
<a href="http://www.baidu.com" target=_blank>百度地址</a>

属性title

浏览器会以浮动提示的方式显示解释信息

<a href="http://www.baidu.com" target=_blank title="百度欢迎你">百度地址</a>

实际效果展示：

属性name

利用name属性作为锚定位，可以实现文档内部的定位。这个需要我们在两个<a>标签中，一个写明name，作为一个锚点；另外一个写明herf，用于指向锚点。如下面的示例，点击“百度地址”会跳转到“这是测试跳转处”（当页面超过一页长度时，测试效果更明显）

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>

<body bgcolor="11ffff" text="000000">
<a name=ceshi>这是测试跳转</a>
<a href="#ceshi" title="百度欢迎你">百度地址</a>

</body>
</html>

图像标签

图片标签<img 属性=“属性值”>

属性src：来定义图片的URL（统一资源定位符）地址，是图片必不可少的属性。用法形如：<img src="url">

<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

属性height和width：规定图片的大小。属性值都是数字，表示图像宽度和高度所占的像素点数。默认是浏览器窗口将自动调整图像显示尺寸

<img heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

属性align：设置图片对齐方式，垂直对齐（居上、居中和居下）和水平对齐（居左、居中和居右）。

<img align="right" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

属性border：默认图片是没有边框的，可以利用border属性添加边框。

<img border="20px" align="rows" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

表格标签

表<table>

创建一个表格，有属性width（宽度）、height（高度）、border（边框）、bordercolor（边框颜色）、cellspacing、cellpadding

行<tr>

创建表格中的每一行，有属性align、valign、bgcolor

列<td>

创建表格的中每一列，有属性

表头<th>

设置表头

我们现在建造一个表

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>

<body bgcolor="11ffff" text="000000">

<table border>
<th>测试表头</th>

<tr>
<td>这是第一行第一列</td>
<td>这是第一行第二列</td>
<td>这是第一行第三列</td>
</tr>
<tr>
<td>这是第二行第一列</td>
<td>这是第二行第二列</td>
<td>这是第二行第三列</td>
</tr>
</table>

</body>
</html>

显示如下：

框架标签

框架<frame>

一个浏览器文档窗口一般只能显示一个网页文件，但是使用框架标签就可以将一个浏览器文档窗口分割成多个子窗口，每个子窗口中都可以显示一个独立的网页文件。

框架集<frameset>

多个框架组成了一个框架集（Frameset），定义了各个框架如何排列的。有属性rows和cols，两个属性至少选择一个，否则浏览器只显示第一个定义的框架。

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>

<frameset cols="25%,50%,25%">
<frame src="https://www.baidu.com"></frame>
<frame src="https://www.qq.com"></frame>
<frame src="https://www.sina.com"></frame>
</frameset>

</html>

最终我们将三个页面在同一个web窗口展示出来了

表单标签

表单标签<form>

主要用于采集和提交用户输入的信息，使网页具有交互功能。有属性：

action（处理提交数据的页面）
method（提交方式（get、post、request））
target（）

用户输入区域标签<input type="">

这个标签必须放在<form>……</form>标签之间。有属性type，具体参数值有：

text（单行文本输入框）
textarea（多行输入框）
password（密码输入框）
radio（单选框）
checkbox（复选框）
select（下拉框）
submit（提交）
reset（重置）
image（图片提交）
file（上传文件）

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>

<body>
<p>用户名<input type="text"></input></p>
<p>多行输入框<textarea></textarea></p>
<p>密  码<input type="password"></input></p>
<p>单选框<input type="radio"></input></p>
<p>复选框<input type="checkbox"></input></p>
<p>下拉框<input type="select"></input></p>
<p>提交<input type="submit"></input></p>
<p>重置<input type="reset"></input></p>
<p>图片提交<input type="image"></input></p>
<p>文件提交<input type="file"></input></p>

</body>
</html>

实现效果：

好了，今天的内容就分享完了，如有什么意见和建议可以私信菜鸟小白哦，我们下期再会~

在线咨询

上一篇：jQuery - 删除元素
下一篇：20 道必看的 Vue 面试题 - 原力计划

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

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

一、百度出品的UEditor

二、xhEditor开源HTML编辑器

三、KindEditor开源HTML编辑器

四、阿里的KISSY

文本标签

标题标签<hn>

字体修饰标签

字体标签<font>

超链接标签

超链接的定义

属性href（hypertext reference）

属性target

属性title

属性name

图像标签

图片标签<img 属性=“属性值”>

表格标签

表<table>

行<tr>

列<td>

表头<th>

框架标签

框架<frame>

框架集<frameset>

表单标签

表单标签<form>

用户输入区域标签<input type="">

您的项目需求