整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
html是一种简单易记，功能强大的标记语言，它是学习前端知识的第一站，也是所有WEB开发者、乃至产品经理、运营人员必须学习的一项基础内容。
1. html5是WEB开发者，必须掌握的基础知识；
2. html5应用广泛，它可以用来开发网站、WEB应用、WEB游戏等等，如微信小程序、移动端小游戏等都跟html5有关；
3. html5很容易掌握，花几个小时就可以掌握它；
1. 讲师讲课风格幽默，整个学习过程轻松有趣，不枯燥、不乏味；
2. 以就业为导向，与实战相结合，满足大部分学员的学习需求；
1. 学完每一节课程，动手将代码打一遍；
2. 举一反三，学完每节课程，思考一下它的应用场景；
3. 完成本门课程，试着自己写一个纯html5的网页；
1. 零基础学员；
2. 前端爱好者；
1、DOCTYPE 描述文档的类型，规定web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
网页可以使用的具体版本，网页中可以使用那些标记，每个版本的DTD版本均有不同
2、<html></html> 网页文档中的根标记
html 标签有三个特殊的属性
3、<head></head>头部标签在网页中只能有一个，设置HTML文档的头部信息，里面内容不会在页面中显示出来·。
head里面的标记
4、<body></body>只能有一个，显示网页的主体内容。
<meta>元素的属性：
1、name 属性
1 <meta name="author" content="nyw">
2 <!--作者， 定义网页的作者 -->
3 <meta name="description" content="meta标记学习">
4 <!-- 描述，描述网页的实际内容 -->
5 <meta name="keywords" content="HTML,meta">
6 <!-- 关键字，定义网页关键字 -->2、http-equiv属性
1 <meta http-equiv="refresh" content="30">
2 <!-- 网页30s后自动刷新 -->
3 <meta http-equiv="refresh" content="5,url=dom.html">
4 <!-- 网页30秒后跳转到dom.html文档 --><meta http-equiv="refresh" content="5,url=dom.html">
http-equiv描述网页的行为，行为 refresh刷新，内容为5，表示5秒后跳转到 dom.html这个文档。
3、content 属性
特殊属性
4、charset属性
指定网页的编码，推荐使用UTF-8来增加网页的兼容性。
代码实例：
为搜索引擎抓取机器人准备一些信息
这段代码可以禁止搜索引擎缓存和跟踪网页。
<meta name="robots" content="noindex,nofollow">
<!-- name定义的是机器人，内容部分表示不要被搜索引擎缓存，也不要被搜索引擎跟踪 -->代码实例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>网页标题(显示在浏览器上)</title>
6 <meta name="author" content="nyw">
7 <!--作者， 定义网页的作者 -->
8 <meta name="description" content="meta标记学习">
9 <!-- 描述，描述网页的实际内容 -->
10 <meta name="keywords" content="HTML,meta">
11 <!-- 关键字，定义网页关键字 -->
12 <meta http-equiv="refresh" content="30">
13 <!-- 网页30s后自动刷新 -->
14 <meta http-equiv="refresh" content="5,url=dom.html">
15 <!-- 网页30秒后跳转到dom.html文档 -->
16 <meta name="robots" content="noindex,nofollow">
17 <!-- name定义的是机器人，内容部分表示不要被搜索引擎缓存，也不要被搜索引擎跟踪 -->
18 </head>
19 <body>
20 </body>
21 </html>title和base标记都是写在head标签中
title：设置网页的标题
写法：<title>内容</title>。
base：指定网页跳转基准URL，如果不指定的话默认为当前网站的当前路径。
写法：<base href="http://www.aaa.zzz/">
base属性值：
<base href="http://baidu.com/"> 这是将页面跳转到百度的网站打开。
<base target="_blank"> 网页中的链接都应该在新的窗口中打开。
terget属性值：
link标记：链接外部文件时使用的标记，可以把外部文件的内容引入到当前文件中来，使当前网页实现更多的功能。
link属性：
href：指定链接外部路径的路径和文件名，要设置全路径并且带文件名
rel：引用文件，引用资源的类型定义
我们在使用link标签引用外部文件的时候，外部文件的类型是多种多样的。
alternate 代替文档（种子，其他语言版本，其他格式等等）
author 网页的作者
help 帮助文件的链接
icon 网页的图标
next 如果是连续网页的时候，指定下一个网页
prefetch 把链接外部资源时提前缓存起来。
prev 如果是连续网页
media 链接文件或是资源属于哪一种资源。
hreflang 链接文件的语言种类
type 链接文件的mi/me类型（比如说，图片图标文本）
sizes 根据link链接文件的类型，来指定文件的大小
代码示例：
链接网页图标：
网站的图标指定，可以显示在浏览器的图标栏，也可以被手机读取作为网站的图标存入收藏夹1 <!-- 网站的图标指定，可以显示在浏览器的图标栏，也可以被手机读取作为网站的图标存入收藏夹 -->
2 <link rel="icon">
3 <!-- 示例 -->
4 <link rel="icon" href="img/favicon.png" type="image/png">
5 <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
6 <link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png">注意：后面的href和前面type标注的类型要一致，这样既可以显示在浏览器，又可以显示在手机上
链接外部样式单
1 <link rel="stylesheet">
2 <link rel="stylesheet" href="style1.css" media="screen">
3 <link rel="stylesheet" href="style2.css" title="主题样式文件">
4 <link rel=" alternate stylesheet" href="style3.css" title="可选样式单">说明：
alternate 会在浏览器中会弹出一个对话框，供用户可以进行选择
media 表示媒体类型为屏幕，可以是手机，但不包括打印机和投影仪
title 对这个link进行简单的说明
网站RSS种子指定
<!-- 网站RSS种子指定 -->
<link rel="alternate" type="application/rss+xml">为搜索引擎的准备的网页的URL
<!-- 为搜索引擎的准备的网页的URL -->
<link rel="canonical">
<link rel="canonical" href="http://www.aaa.zzz/help.html">告诉搜索引擎代替URL是哪里。
果想开发一个网站，除了要精通后端开发语言（如：php）外，还要精通HTML代码。那么，什么是HTML呢？HTML是一种超文本标记语言，它包含有众多的标签，我们可以通过这些标签，把不同的internet资源（如：文字、图片、视频、音频、表单等等）整合在一个统一的文档中，这就形成了我们可以看得见的网页。那么，HTML都有哪些常用的标签呢？
html5文档类型声明：<!doctype html>
html4文档类型声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这个标签是html最外层的标签，所有其它的HTML标签都要放在这个标签的内部。
<html>
<head></head>
<body></body>
</html>
在HTML标签中，有的标签是成双成对的，如：<html></html>（如下图）；而有的标签是单个的，如：<hr>横线标签。
head头部有以下几种常用标签：
meta：主要提供有关页面的元信息。
link：用来定义文档与外部资源的关系，最常用的是调用CSS样式文件。
title：页面标题的标签。
script：用来调用JS文件或JS代码。当然，script标签也可以在body主体中使用。
1、块级标签。
块级标签的特性是：独自占有一行；标签的高与宽、边距可以修改；没有设置宽与高时，默认继承父标签。例如：
<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
前端页面显示的效果如下图：
常用的块级标签有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、内联标签。
内联标签与块级标签不同，它不能独自占有一行，会与其它内联标签在同一样展示；内联标签的高与宽、上下边距是不能修改的，它里面的文字或图片有多高，它就是多高。例如如下代码：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>
CSS样式代码跟块级标签的例子是一样的，而显示的效果就不一样了，宽与高、上下边距没有效果。如下图：
常用的内联标签有：span、a、b、strong、i、em 。
3、内联块级标签。
内联块级标签，既有一些内联标签的特性，也有一些块级标签的特点：它不能独自占有一行，但是可以修改它的宽度和高度。例如下面这段代码：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">
CSS样式代码跟块级标签的那个例子仍然是一样的，图片的宽和高、上下边距修改成功，而2个图片不能独自占有一行，而是在同一行。如下图：
常用的内联块级标签有：img、input、textarea。
4、区域标签。
所谓区域标签，就是主要用来划分布局页面区域的。如：头部、主体内容、侧边栏、底部。这样划分的好处是：让页面布局更加清晰明了。
常用的区域标签有：header（头部）、footer（底部）、nav（导航）、aside（侧边栏）、section（主体）、article（独立内容）。
5、表单标签。
这个表单标签我们也是会经常用到的，如：登录网站的时候、提交数据的时候。如下图的评论表单：
表单常用的标签有：form、input、select、option、textarea 。
以上就是我们开发网页时，会常用到的HTML标签。当然，HTML标签远不止这些，尤其是html5出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。
大家好，今天给大家带来一套比较不错的单页制作课程。
本套课程作者在9年多时间里，一直专注于单页网站制作、优化、推广和单页营销方面的研究，并带领一批学员通过单页网站销售产品，实现网上成功创业！
什么是手机版单页网站
手机版单页网站，是用Html5代码编写的纯静态独立页面网站，自动适应手机、台式电脑、平板电脑的用户屏幕观看，完美展现产品和项目内容，用户体验好。
在单页网站里面，可以添加文字、图片、视频、动画、客服系统、订单系统、分享系统、流量统计系统等等功能，使单页网站功能强大、内容丰富多彩！
本套“单页网站制作教程”，是由作者根据多年的实战经验总结，原创开发录制而成，教程系统全面、简单易学、上手快速，即使是0基础的新手朋友，也能快速学会。
手机版单页网站能做什么
1.产品展示
单页网站是一个独立的页面，不存在分散目标客户注意力的信息。页面简单直接，从头至尾展示产品信息。让目标客户最直观的的全方位了解你的产品，达到快速成交的目的。
2.服务展示
如果你有一技之长，想通过提供自己的技术服务来赚钱，只需要制作一个单页面，把自己当特长展示出来，留下联系方式，做好网站推广，就有客户主动找上门。
3.竞价推广
用竞价推广是当前大流量入口之一。竞价推广排名快，效果好，利润高。而竞价推广的落地页，全部用的自适应竞价单页面，自动适应手机和电脑用户屏幕，完美展示产品信息，
4.做信息流
信息流属于竞价推广的一种，是把广告信息展示在百度和360旗下相关联平台上面，访客点击信息流链接进入单页面，进行产品展示和客户转化，完成产品销售。
单页网站强大优势
1.制作超级简单
单页网站模板，可做任何编辑和排版。包括修改文字内容、更换图片、更换视频、修改背景颜色以及订单系统。只要会打字会做图片，就可以实现自己动手不求人，制作出精美的符合你要求的单页网站，实现销售产品网络赚钱的目的！
2.全方位展示产品
单页网站因为没有网站的固定框架和固定表格限制，也没有分散目标顾客注意力的信息。可以轻松的添加文案、图片、视频、见证和订单系统，全方位展示你的产品，达到快速成交的目的！
3.吸引目标客户注册
单页网站很容易吸引访客注意力，在页面上添加客户注册系统，通过设置免费赠品方式，很容易获得访客联系信息，方便后期对潜在客户进行后端培养和产品销售。
4.易被搜索引擎收录
因为单页网站，是精心设计和布局的，有着良好的用户体验和网站优化，更容易被搜索引擎搜录，带来好的排名！
5.单页网站安全性高
单页网站没有后台管理，如果有人想攻击你的单页，他只有攻陷整台服务器，才能拿到控制权。但是服务器都是放在专业的IDC机房，有高级防火墙和杀毒软件防护，还有专业的技术人员维护，难度可想而知。
6.单页网站管理方便
单页网站只有简单的文字信息、图片资料、视频和其他代码组成。即使网站程序坏了，恢复数据也就几分钟的事情。需要修改内容，只需要在电脑上面编辑完成，用FTP软件上传，覆盖掉前一个单页即可。
手机版单页制作教程介绍
手机版单页网站制作教程，包含“单页制作”和“单页优化”2部分视频内容，是由作者总结9年多建站实战经验，原创开发的高清视频课程。旨在帮助想用单页网站，在网上卖产品的朋友，实现网上赚钱的梦想！
本套手机版单页网站制作课程，共有21课时，通过精心排版、录制、剪辑，时间控制在15分钟左右，只讲干货不说废话。
单页网站制作视频，全部是高于720P高清视频，由浅入深、循序渐进讲解，简单易懂，即使零基础的朋友，都能轻轻松松学会单页网站制作。
想要学习的话，可以私聊视频内容！
*请认真填写需求信息，我们会在24小时内与您取得联系。
