整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
一、学习html学的是什么？
1.1学标签
我要什么内容，就用什么标签 在去思考使用标签的什么属性
比方说：文字就用文字标签，HelloWorld 6号字 颜色变成红色
<html>
<head>
<title></title>
</head>
<body>
<font size="6" color="red" >HelloWorld </font> //这个就是文字标签 属性尺寸是6，颜色是红色
</body>
</html> 二、编写格式
1、每个网页页面都是一个单独的文件，页面的后缀是XXXX.html 或者 XXXX.htm
2、编译器/解释器就是浏览器，浏览器会一行行编译，不会像C 或者PLC等还需要再次编译。
3、用记事本做演示，需要把后缀名改成.html ,如果后缀名被隐藏了，需要在文件菜单-查看-选项-查看-把隐藏已知文件类型的拓展名去掉
<html> //html开始
<head> //头标签开始
<title></title>
</head> //头标签结束
<body> //身体标签开始
HelloWorld //主体内容
</body> //身体标签结束
</html> //html结束三、常用标签及其属性：
3.1 文本修饰
font 行内标签 （没有换行效果）
size 字体的大小，最大值是7
color 颜色值
颜色的第一种表示形式：颜色单词 red green blue
颜色的第二种表示形式： 颜色的RGB 如：rgb(0,0,255) 第一个0表示R红色的份数，第二个表示G绿色的份数 ，第三个0表示B蓝色的份数
颜色的第三种表示形式：十六进制表示，把颜色这个写成#0000ff ,就是第一个红绿蓝十六进制，
face 字体族 黑体 楷体 宋体 华文彩云等 但必须是浏览器支持的字体
节课开始前，我们先回忆一个事情，我们小时候写作文时，老师都会教我们一些“规矩”，比如说：题目要在中间写，也就是居中，要分段，要有标点符号，第一段要空两个格子等等。那同样的！ HTML文件也有他们的书写规则 ？那他们都有什么规则呢？我来慢慢告诉你！
通过上节课学习，你已经认识了，在浏览器中运行的文件就是网页，那么这个文件到底是什么呢？其实就是一个以 html 为后缀的普通文件，说到这，你可能会出现疑问了，这个文件我也没见过，应该怎么创建和书写呢？
先来尝试一下，新建一个 test.html 文件（注意是html为后缀名哦！如果不能改后缀名的话，度娘查一下，如何显示文件后缀名，就可以更改了），右键点击文件， 使用记事本打开。
可以看到 html 文件可以直接在这里面进行读写了 但是记事本的功能比较少 不够强大 ，就像我们要编辑一个文字文件需要Word一样，我们需要用到一个专业读写 html 文件的软件 我们叫它代码编辑器
市面上有各种各样的代码编辑器 比如说 Notepad++， sublime， DreamWeaver， webStorm， Hbuilder， 等等。
今天为大家推荐的一款编辑器 是开发工程师们使用频率比较高的一款软件 vscode 它是一款轻量级编辑器 上手方便 操作简单
只需要来到官网（Visual Studio Code - Code Editing. Redefined） 点击下载 下载好以后双击安装 你可以自己选择安装路径 也可以用默认安装路径 安装好以后 桌面上会出现一个图标 这就是我们的VScode代码编辑器了
那我们吃饭的家伙有了 我们先来认识一下它，双击图标 打开软件一看是是英文的，根本看不懂！没关系 我们只需要安装一个汉化插件就好了。
首先点击左侧这个按钮 在输入框内输入 Chinese 对应搜索结果的第一个 点击 install 稍等一会 即可安装完成 此时 我们只要重启 vscode 这个编辑器 会发现 英文变成中文了
接下来就可以使用这个vscode 来进行 html 文件的创建和编辑了
首先在电脑桌面上面点击鼠标右键 新建一个文件夹 命名为千锋学习 这个文件夹用来存储其他文件夹和网页相关的文件，用编辑器打开文件夹可以右击选择→通过code打开，也可以直接直接将文件夹拖到编辑器里直接打开
接下来新建一个文件，在这里关于文件的命名 希望你遵循以下规范
根据文件命名规则 我们在 vscode 里创建一个文件，点击这里的新建文件图标 书写文件名 start.html 注意 你要手动写上文件后缀 这样一个标准的 html 文件就创建好了
点击文件 我们看到在右侧打开了这个文件 目前内容还是空白的 我们直接写入 hello world 点击这里的保存按钮 也可以使用快捷键 ctrl + s 完成文件保存 此时 一个简单的 html 文件就写好了 我们赶紧到浏览器内运行一下吧
返回到文件夹——右键点击文件——打开方式——用浏览器打开
好啦！我们的第一个网页运行成功了。
到这里 细心的小朋友发现了 每次这样打开文件岂不很麻烦 其实可以在 vscode 内安装一个的插件 直接打开浏览器 就像安装 Chinese 汉化版插件一样。
再次点击 扩展 按钮 搜索 open in browser 点击安装 在文件位置点击右键 选择 open in default browser 就可以直接在浏览器打开了 或者你可以直接使用快捷键 alt + b
回到编辑器的 start.html 再来写点内容 前端培训界的扛把子——千锋HTML5大前端 首先记得ctrl+s保存文件，然后打开浏览器
点击刷新按钮—看到新增的文字也出现了，仔细观察发现：所有的文字格式都一样，如果你想把某些文字变得不一样。该怎么办呢？
这时候就需要用到标签了 比如：我们来书写一个 < h1 >再写一个</h1> 两个组合在一起形成一个完整标签 ，这个标签对中间可以书写一段内容，把我们的这一段内容复制进去，再次打开浏览器刷新，这一段内容变得不一样了 这就是 h1 标签的作用
在HTML 中 有很多不同的标签 各自有不同的作用 我们就是用这些标签来组成页面的骨架。
这节课你学会了编写一个简单的网页 并了解了文件的书写规范，我们也只是了解了冰山一角，九牛一毛。那其他的标签，都有什么呢？标签又有什么书写规范呢？
我们下一篇文章等你哦！
什么学习HTML？
理解HTML代码是制作网页的基本技能。在互联网高度发达的今天，网页制作技术开始变的和修图、处理视频一样重要。
第一，学会制作网页就可以把自己想要展示的信息让其他人使用浏览器观看，无论是文字、照片还是视频都可以通过浏览器观看，甚至是分享自己制作的小游戏。
第二，理解网页运行的基本原理后可以更好的浏览他人的网页，寻找有用信息，更合理的使用第三方工具，简单高效的制作自己的网页。
HTML学习难度与重要性
HTML代码本身非常容易理解，使用也非常简单，但是单纯使用HTML代码写出的网页效果和我们平时看到的网页相差甚远。要想做出一个漂亮的页面，我们还需要CSS和JavaScript的帮助。
HTML、CSS、JavaScript这些不同的代码都有什么作用呢？简单来说，HTML代码可以为网页提供基本内容，比如文字、图片、音乐、视频等。CSS代码可以为页面安排布局，比如标题的位置、字体、颜色、大小等，笼统的说就是为HTML代码添加的内容增加样式信息，例如修改位置、尺寸、颜色等属性。JavaScript代码可以为页面提供交互（互动）功能，例如通过按钮控制页面内容的隐藏、出现，或者为多张图片添加轮播功能等。
对比起来，HTML的学习难度最低，但作用是最重要的，因为一切页面的基础是内容，没有内容，样式与交互都不存在。
认识HTML基本结构
第一行 <!DOCTYPE HTML>
第二行 <html>
第三行 <head>
第四行 </head>
第五行 <body>
第六行 </body>
第七行 </html>
以上七行代码是一个网页文件的HTML代码的基本结构。
大家观察一下可以发现一个规律，每一行的内容都是写在“<>”里面的。原因说来话长，先记住就行。每个写在“<>”里面的内容叫做“标签”。以后“标签”这个词会经常出现。
第一行<!DOCTYPE HTML>标签指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令（这句话可以暂时不必理解）。重要的是这句傲娇的代码只能存在在HTML代码的第一行！
第二行<html>标签与第七行的</html>标签是一对，“<html>”叫做开始标签，“</html>”叫做结束标签。他们之间的区别在于结束标签比开始标签多一个“/”。这是HTML代码的一个重要规律，以后我将要学到的大部分标签都是这样的，可能浏览器有些强迫症吧，如果没有结束标签它会很不舒服，有可能会消极怠工而产生麻烦（不能正常显示）。不过遗憾的是<!DOCTYPE HTML>太傲娇，至今没有另一半。<html> 与 </html> 标签限定了文档的开始点和结束点。
第三行与第四行组成一对，叫做“head”标签。顾名思义，这个“头”标签里的内容统领全局，比如控制布局与样式的CSS代码文件和添加互动功能的JavaScript代码文件在这里添加或导入；搜索页面用的关键词信息在这里添加；页面信息的编码方式也是由此指定；浏览器窗口的标题也在这里显示。
第五行与第六行组成一对，叫做“body”标签。用来显示所有的页面内容信息。
画个图来表示一下这四个标签的层级关系（就是谁包含谁的意思，或者谁在谁的势力范围内出现）：
边学边练------写一个最简单的页面
正所谓万丈高楼平地起，下面我们就动手做我们的第一个网页文件。
工具：电脑，安装一个浏览器（IE 火狐 谷歌浏览器都可以），确定“记事本”工具可用。
有了以上工具我们就可以写了。
Step1 新建一个.txt文件。
操作如下：
（1）选择合适的磁盘，比如D盘或F盘新建一个文件夹，命名为“网页”。点击进入。
（2）在空白处点击鼠标右键新建一个文本文件，命名为“第一个页面”。这时我们就有了一个“第一个页面.txt”文件了。
如果你的电脑不显示“.txt”这样的文件后缀，可以在屏幕左上方寻找“查看”菜单，如图2
图 2
点击后，出现如下菜单如图3，点击“选项”。
图 3
点击“查看”，去掉“隐藏已知文件类型的扩展名”选项前的“对号”，如图4所示。这时就能显示或修改文件后缀了。
图 4
Step2 添加内容
（1）双击打开“第一个页面.txt”文件，把HTML基本结构共七行代码输入进去。
（2）保存，关闭文件，在“第一个页面.txt”文件上点击鼠标右键，选择“重命名”，将“.txt”修改为“.html”。这时，系统会提示，如图1，大胆点“是”。
图 1
这时我们的文件就变成了html网页文件了。
我们双击这个文件发现浏览器内一片空白，这就好比我们在桌子上摆了个碟子，里面并没有放美食。浏览器中的一片白就是空碟子的颜色，而HTML基本结构就是这个碟子。
下面我们往碟子里加点东西。
Step3 添加内容
（1）在“第一个页面.html”文件上点击鼠标右键，选择“打开方式”，选择“记事本”，如果没有“记事本”选项，请点击“选择其他应用”，点击选择最下面的“更多应用”，选择“记事本”。下一次选择“打开方式”时，“记事本”就会出现了。
（2）在<head></head>标签之间添加“<title>学习写第一个网页</title>”。在<body></body>之间添加“<h1>第一个网页</h1>”；“<p>随着学的内容越来越多，网页就会越来越漂亮了！</p>”完成如图5
图 5
（3）保存，关闭，双击打开！效果如图6
图6
今天的边学边做就到这里，下一次会详细解释<head>标签、<body>标签中常出现的子标签以及它们各自的作用。
第二篇《边学边做网页篇——<head>标签里装点啥？》http://mp.toutiao.com/preview_article/?pgc_id=6738988870622249479
*请认真填写需求信息，我们会在24小时内与您取得联系。
