目录
一、“前端开发”介绍
1.从“网页制作”到“前端开发”
1.Web 1.0时代的“网页制作”
网页制作是Web 1.0时代的产物，即2005年之前，那个时候的网页主要是静态页面，所谓的静态页面指的是仅仅供用户浏览而无法与服务器进行交互的页面，例如一篇博文就是一个展示性的静态页面。在这个时代网页三剑客指的是“Dreamweaver、Flash、Fireworks”。
2.Web 2.0时代的“前段开发”
我们现在常说的“前段开发”是从“网页制作”演变而来的。互联网十多年前进入了Web 2.0时代，在Web 2.0时代网页分为两种：一种是：“静态页面”，一种是“动态页面”。
“静态页面”仅供用户浏览，不具备交互的功能；“动态页面”不仅可以供用户浏览，还可以与服务器进行交互。例如我们想登录QQ邮箱，就得输入账号和密码，然后点击登录，这样服务器会对我们的账号密码进行验证，成功后才可登录
2.从“前端开发”到“后端开发”
这个时候，所谓的“三剑客”已经不能满足现在前端开发的需求，对于现在的我们来说，最核心的三个技术分别是HTML,CSS,JavaScript（简称JS），也叫“新三剑客”。
HTML的全称是“Hyper Text Markup Language”超文本标记语言，HTML是一门描述性语言。
CSS的全称是“Cascading Style Sheet”层叠样式表，是用来控制网页外观的一门技术。
JavaScript是一种嵌入到HTML页面中的脚本语言，由浏览器一边解释一遍执行。
为了方便说明，给大家举个例子，制作网页就像盖房子，盖房子的时候我们都是先把结构建好（HTML），再给房子装修（CSS），例如给房子装上窗户，窗帘，在地板上铺瓷砖。装修好之后，当夜幕降临，我们要开灯（JavaScript）,才能把屋子照亮。
总结一下，“HTML用于控制网页结构，CSS用于控制网页的外观，而JavaScript控制着网页的行为”。
3.HTML开发工具介绍
前端的开发工具非常多，如Dreamweaver,Sbulime Text,Atom,HBuilder,Vscode等。对于有经验的开发者来说，使用哪一款开发工具都可以，在这里推荐大家使用国产软件HBuilder。
下载地址：HBuilder
安装方法：
官网下载安装包后，直接解压，找到可执行文件“Hbuilder.exe”，将“Hbuilder.exe”这个执行文件发送到桌面快捷方式即可。
现在我们就可以新建第一个HTML文档了，打开Hbuilder，可以选择注册登录，也可选择暂不登录，点击左上角的“+”，新建第一个HTML文档：在body标签中写入，“这是我的第一个HTML文件”，显示如下：
二、HTML基本标签
1.HTML结构
我们在上面创建文件的时，HTML自动为我们创建好了几行代码，可以看出一个文档是由4个部分组成的：
一个完整的HTML页面，是由一对对的标签组成的，我们简单介绍一下这4个部分的作用：
<!DOCTYPE html> 文档声明：声明是一个HTML文档；
<html> </html> html标签，告诉浏览器这个页面是从<html>开始，到</html>结束；
<head> </head> head标签，是网页的头部，如定义页面标题，定时刷新等；
<body> </body> 是网页的“身体”，大部分代码都是在这个网页里编写的；
定义好网页标题后，页面显示如下：
2.head标签
在HTML中一般来说，head标签只有6个标签能放在head标签内。
| title | 定义网页的标题 |
| meta | 定义页面的特殊信息，页面关键字、页面描述 |
| link | 引入外部样式文件（CSS文件） |
| style | 定义元素的CSS样式 |
| script | 定义页面的JavaScript代码 |
| base | 没有意义的标签，知道有就好了 |
下面，我们重点介绍一下meta标签，meta有个重要的属性，分别的name和http-quiv：
name属性：
<!DOCTYPE html>
<html>
<head>
<!--解决中文乱码的问题-->
<meta charset="{CHARSET}">
<!--网页的关键字，搜索引擎提供的关键字列表-->
<meta name="keywords" content="我要学HTML">
<!--网页的描述，告诉搜索引擎你的网站主要内容，简单明了，尽量不超过十六个字-->
<meta name="description" content="网页简述">
<!--网页作者，一般不用-->
<meta name="author" content="西瓜WiFi">
<!--版权信息，一般不用-->
<meta name="copyright" content="本站均为原创，禁止转载" />
<title>这里是网页标题</title>
</head>
<body>
这是我的第一个HTML文件
</body>
</html>
http-quiv属性：
相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!DOCTYPE html>
<html>
<head>
<!--设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。注意：必须使用GMT的时间格式-->
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">
<!--禁止浏览器从本地计算机的缓存中访问页面内容-->
<meta http-equiv="Pragma"content="no-cache">
<!--自动刷新并指向新页面;注意后面的引号，分别在秒数的前面和网址的后面-->
<!--其中的2是指停留2秒钟后自动刷新到URL网址-->
<metahttp-equiv="Refresh"content="2;URL=http://www.baidu.com">
<!--Set-Cookie(cookie设定)-->
<!--如果网页过期，那么存盘的cookie将被删除-->
<meta http-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
<!--Window-target(显示窗口的设定)-->
<!--强制页面在当前窗口以独立页面显示。用来防止别人在框架里调用自己的页面-->
<meta http-equiv="Window-target"content="_top">
<!--content-Type(显示字符集的设定);设定页面使用的字符集-->
<metahttp-equiv="content-Type"content="text/html;charset=utf-8">
<!--content-Language（显示语言的设定）-->
<metahttp-equiv="Content-Language"content="zh-cn"/>
<title>这里是网页标题</title>
</head>
<body>
这是我的第一个HTML文件
</body>
</html>3. HTML注释
注释的语法： <!--注释的内容-->
注释的快捷键：Ctrl+/
三、HTML文本
在HTML学习中，我们主要学习来怎么做一个静态页面，多数静态页面一般都由以下4种元素组成：文字；图片；超链接；音频和视频；
1. 标题标签
在HTML中，共有6个级别的标签：h1,h2,h3,h4,h5,h6,h是header的缩写，h1的标签重要性最高，h6的标签重要性最低。一页页面最多只能由一个h1标签，h2到h6标签可以有很多个。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html文本</title>
</head>
<body>
<h1>一级标题：我要学html</h1>
<h2>二级标题：我要学html</h2>
<h3>三级标题：我要学html</h3>
<h4>四级标题：我要学html</h4>
<h5>五级标题：我要学html</h5>
<h6>六级标题：我要学html</h6>
</body>
</html>
2. 段落，换行标签
段落标签<p> </p>,是paragraph的缩写，表示一段内容；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html paragraph</title>
</head>
<body>
<h3>青玉案·元夕</h3>
<h6>[宋] 辛弃疾</h6>
<p>东风夜放花千树，</p>
<p>更吹落，星如雨。</p>
<p>宝马雕车香满路。</p>
<p>凤箫声动，玉壶光转，</p>
<p>一夜鱼龙舞。</p>
<p>蛾儿雪柳黄金缕，</p>
<p>笑语盈盈暗香去。</p>
<p>众里寻他千百度，</p>
<p>蓦然回首，那人却在，</p>
<p>灯火阑珊处。</p>
<hr />
<br />
<h3>青玉案·元夕</h3>
<h6>[宋] 辛弃疾</h6>
东风夜放花千树，<br />
更吹落，星如雨。<br />
宝马雕车香满路。<br />
凤箫声动，玉壶光转，<br />
一夜鱼龙舞。<br />
蛾儿雪柳黄金缕，<br />
笑语盈盈暗香去。<br />
众里寻他千百度，<br />
蓦然回首，那人却在，<br />
灯火阑珊处。<br />
</body>
</html>
使用段落标签和换行标签的区别：
段落标签<p></p>会自动换行，段与段之间有一定的距离；
换行标签<br/>是break的缩写，是自闭合标签，仅是换行显示；
3. 文本标签
在HTML中，我们使用“文本标签”来对文字进行修饰，如粗体，斜体，上标，下标等；
| strong,b | 粗体标签 |
| i,em,cite | 斜体标签 |
| sup | 上标 |
| sub | 下标 |
| s | 中划线 |
| u | 下划线 |
| big | 大号字标签 |
| small | 小号字标签 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html text</title>
</head>
<body>
<strong><big>永遇乐·京口北固亭怀古<br /></big></strong>
<h6>[宋] 辛弃疾</h6>
千古江山，英雄无觅，<u>孙仲谋处。<br /></u>
舞榭歌台，风流总被、雨打风吹去。<br />
斜阳草树，寻常巷陌，<br />
人道寄奴曾住。<br />
想当年，金戈铁马，气吞万里如虎。<br />
元嘉草草，封狼居胥，<br />
赢得仓皇北顾。<br />
四十三年，望中犹记，烽火扬州路。<br />
可堪回首，佛狸祠下，<br />
一片神鸦社鼓。<br />
凭谁问：廉颇老矣，尚能饭否？<br />
</body>
</html>
上面的代码，简单介绍了加粗标签，大号字标签，下划线等标签，标签使用都很简单，但是要常用常记忆，建议收藏好评，再赏析一下古诗词，何不乐哉！
4. 自闭合标签
在上面的介绍中，绝大多数标签是成对出现的，这些标签都有开始标签和结束标签，但是有一些标签是没有结束符号的，如换行标签<br />。在HTML中，只有开始标签，没有结束标签的标签成为自闭合标签，通俗的将就是“自闭了，emo了”，下面介绍一些常用的自闭合标签：
| 标签 | 说明 |
| <meta /> | 定义网页的信息，给搜索引擎看 |
| <link /> | 引入外部CSS文件 |
| <br /> | 换行标签 |
| <hr /> | 水平线标签 |
| <img /> | 图片标签 |
| <input /> | 表单标签 |
5. 块元素（block）和行内元素（inline）
块元素（block）和行内元素（inline），是HTML中及其重要的概念，同时也是学习CSS的重要基础知识;
块元素（block）块元素在浏览器显示状态下将占据一行，并且将排斥其他元素与其位于同一行，一般情况下块元素颞部可容纳其它块元素和行内元素，常见的块元素有；
| 块元素 | 说明 |
| h1-h6 | 标题元素 |
| p | 段落元素 |
| div | div元素 |
| hr | 水平线 |
| ol | 有序列表 |
| ul | 无序列表 |
行内元素（inline）可以与其他行内元素位于同一行的，行内元素内部只可以容纳其它行内元素，不可以容纳块元素（block），常见的行内元素有：
| 行内元素 | 说明 |
| strong | 粗图元素 |
| em | 斜体元素 |
| a | 超链接 |
| span | 常用行内元素，结合CSS定义样式 |
6. 特殊符号
筒子们，一些特殊符号在HTML中，输入是不能显示，拥有特别的语法，如空格，在HTML中为 ，下面列举一些HTML中常用的特殊符号；
| 特殊符号 | 说明 | 代码 |
| " | 英文双引号 | " |
| ‘ | 左单引号 | ‘ |
| ’ | 右单引号 | ’ |
| × | 乘号 | × |
| ÷ | 除号 | &divie; |
| > | 大于号 | > |
| < | 小于号 | < |
| & | “与”符号 | & |
| — | 长破折号 | — |
| | | 竖线 | | |
| ° | 度 | ° |
四、HTML列表
列表是网页中最常用的一种数据排列方式，在HTML中一共有3中列表：有序列表、无序列表和自定义列表；
有序列表(order list)：列表项之间有先后顺序之分；
无序列表(unorder list)：列表项之间没有先后顺序之分；
自定义列表(definition list)：一组带有特殊含义的列表，一个 列表项中包含列表项和条件列表两部分；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有序列表|无序列表|自定义列表</title>
</head>
<body>
<!--ol 即order list 有序列表；li 即list 列表项-->
<ol>
<h3>辛弃疾的词</h3>
<li>青玉案·元夕</li>
<li>永遇乐·京口北固亭怀古</li>
<li>西江月·夜行黄沙道中</li>
<li>西江月·画栋新垂帘幕</li>
<li>西江月·风月亭危致爽</li>
</ol>
<!--ul 即unorder list 有序列表；li 即list 列表项-->
<ul>
<h3>辛弃疾的词</h3>
<li>青玉案·元夕</li>
<li>永遇乐·京口北固亭怀古</li>
<li>西江月·夜行黄沙道中</li>
<li>西江月·画栋新垂帘幕</li>
<li>西江月·风月亭危致爽</li>
</ul>
<br />
<!--dl 即definition list 定义列表；dt 即definition term 定义名词；dd 即definition description定义描述；-->
<dl>
<h3>前端开发三剑客</h3>
<dt>HTML</dt>
<dd>制作网页的标准语言，控制网页的结构</dd>
<dt>CSS</dt>
<dd>层叠样式表，控制网页的样式</dd>
<dt>JavaScript</dt>
<dd>脚本语言，控制网页的行为</dd>
</dl>
</body>
</html>
type属性：
语法：
<ol type="A">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>说明：通过type属性改变列表前的序号值；
五、HTML表格
在早些年的Web 1.0时代，表格常用于网页布局，但是在Web 2.0中已经被抛弃了，网页布局都是用CSS实现的，在实际开发中可以更清晰地排列数据。
1. 表格的基本结构
表格：table标签
表格标题：caption标签
表头单元格：th标签
行：tr标签标签
单元格：td标签标签
说明：
<table>和<table />表示表格的开始和结束；tr指的是 table row，即表格行；td指的是table data cell;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html table</title>
<!--使用style标签给表格加上边框-->
<style type="text/css">
table,tr,td{border:1px solid silver;}
</style>
</head>
<body>
<table>
<caption>辛弃疾的词</caption>
<tr>
<th>词1</th>
<th>词2</th>
<th>词2</th>
<th>词3</th>
</tr>
<tr>
<td>京口北固亭怀古</td>
<td>夜行黄沙道中</td>
<td>画栋新垂帘幕</td>
<td>风月亭危致爽</td>
</tr>
</table>
<br />
<hr />
<br />
<table>
<caption>辛弃疾的词</caption>
<tr>
<th>词1</th>
<th>词2</th>
</tr>
<tr>
<td>京口北固亭怀古</td>
<td>夜行黄沙道中</td>
</tr>
<tr>
<td>画栋新垂帘幕</td>
<td>风月亭危致爽</td>
</tr>
</table>
</body>
</html>
六、HTML图片
语法：<img src="图片路径">
alt和title属性：
alt:用于图片描述，是给搜索引擎看的，当图片无法显示时，显示alt中的文字；
title:用于图片描述，当用户鼠标移动到图片上时，会显示title中的文字；
src属性：图片路径
src是图片路径，图片路径又分为绝对路径和相对路径：
所谓绝对路径：图片文件在本地位置的全部路径，如：D:/HTML/images/test_img.png
所谓相对路径：指的是图片路径相对于HTML文件的路径，如：
HTML文件的路径为：D:/HTML/test_html.html，那么我们称D:/HTML/为基本路径（base_dir）；
基本路径+相对路径=绝对路径
在开发中，我们习惯于在HTM文件的基本路径下，新建一个目录images，专门用于存放图片，因此在HTML中，src="images/test_img.png"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html images</title>
</head>
<body>
<img src="images/2.jpg" alt="网站使用" title="背景图片" />
</body>
</html>
最后在关于图片引入，在介绍一点图片格式的小知识。
在网页中，图片的格式有两种：一种是“位图”，一种是“矢量图”，在这里简单介绍一下“位图”。
位图又叫做像素图，它是由像素点组成的图片，对于位图来说，放大图片后会失真，图片缩小后同样会失真；
在实际开发中，最常见的位图图片格式有三种：jpg,png,gif
jpg:可以很好的处理大面积色调的图片，适合储存颜色丰富的复杂图片，如照片，高清图片等。此外jpg图片的体积较大，并且不支持保存透明背景；
png:是一种无损格式，可以无损压缩可以保证页面的打开速度。此外png图片的提交较小，并且支持保存透明背景，不过不适合储存颜色丰富的图片；
gif:图片效果最差，不过它适合制作动画。实际上，大家在QQ或微信上发的动图都是gif格式的；
小结一下：如果想要展示色彩丰富的高品质图片，可以使用jpg格式；如果是一般图片，为了减少体积，或想要透明效果，可以使用png格式；如果是动画图片，可以使用gif格式；
七、HTML超链接
1. 超链接
超链接，英文名htperlink，随处可见，是网页中最常见的元素，每一个网站都有非常多的网页组成，页面之间通常通过超链接来相互关联，在HTML中我们使用A标签来实现超链接；
语法： <a href="链接地址">文本或图片</a>
说明：href表示你想要跳转到页面的路径，可以是绝对路径，也可以是相对路径；
为了方便展示和加强记忆，我们对上面的HTML进行超链接设置；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html hyperlink</title>
<style type="text/css">
table,tr,td{border:1px solid silver;}
</style>
</head>
<body>
<table>
<caption>超链接文本</caption>
<tr>
<td><a href="html_doc.html">html_doc</a></td>
<td><a href="html_head.html">html_head</a></td>
<td><a href="list.html">list</a></td>
</tr>
<tr>
<td><a href="html_paragraph.html">html_paragraph</a></td>
<td><a href="html_text.html">html_text</a></td>
<td><a href="html images.html">html images</a></td>
</tr>
</table>
</body>
</html>
target属性：
默认情况下超链接都是在当前浏览器的窗口打开新页面的，在HTML中可以使用target属性来定义超链接的窗口打开方式；
语法：<a hreg="链接地址" target="打开方式">文本或图片</a>
说明：target属性的取值有4种，如下所示：
| 属性值 | 说明 |
| _self | 在原窗口打开链接（默认值） |
| _blank | 在新窗口打开链接 |
| _parent | 在父窗口打开链接 |
| _top | 在顶层窗口打开超链接 |
一般情况下，我们只会用到_blank这个值，其他3个值不要去深究。
2. 锚点链接
有些页面的内容比较多，导致页面过长，此时用户需要不停的拖动浏览器上的滚动条才可以看到下面的内容，为了方便用户操作，我们可以锚点链接来优化用户体验；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>锚点链接</title>
</head>
<body>
<div>
<h3>辛弃疾诗词集</h3>
</div>
<div>
<a href="#xinqiji1">永遇乐·京口北固亭怀古</a><br />
<a href="#xinqiji2">青玉案·元夕</a><br />
<a href="#xinqiji3">西江月·夜行黄沙道中</a><br />
</div>
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
<div id="xinqiji1">
<strong><big>永遇乐·京口北固亭怀古<br /></big></strong>
<h6>[宋] 辛弃疾</h6>
千古江山，英雄无觅，孙仲谋处。<br />
舞榭歌台，风流总被、雨打风吹去。<br />
斜阳草树，寻常巷陌，<br />
人道寄奴曾住。<br />
想当年，金戈铁马，气吞万里如虎。<br />
元嘉草草，封狼居胥，<br />
赢得仓皇北顾。<br />
四十三年，望中犹记，烽火扬州路。<br />
可堪回首，佛狸祠下，<br />
一片神鸦社鼓。<br />
凭谁问：廉颇老矣，尚能饭否？<br />
</div>
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
<div id="xinqiji2">
<h3>青玉案·元夕</h3>
<h6>[宋] 辛弃疾</h6>
<p>
东风夜放花千树，<br />
更吹落，星如雨。<br />
宝马雕车香满路。<br />
凤箫声动，玉壶光转，<br />
一夜鱼龙舞。<br />
</p>
<p>
蛾儿雪柳黄金缕，<br />
笑语盈盈暗香去。<br />
众里寻他千百度，<br />
蓦然回首，那人却在，<br />
灯火阑珊处。<br />
</p>
</div>
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
<div id="xinqiji3">
<h3>西江月·夜行黄沙道中</h3>
<h6>[宋] 辛弃疾</h6>
<p>
明月别枝惊鹊，清风半夜鸣蝉。<br />
稻花香里说丰年，听取蛙声一片。<br />
</p>
<p>
七八个星天外，两三点雨山前。<br />
旧时茅店社林边，路转溪桥忽见。<br />
</p>
</div>
</body>
</html>
我们分别点击“永遇乐·京口北固亭怀古”，“青玉案·元夕”，“西江月·夜行黄沙道中”，页面就会自动滚到相应的部分，实现锚点链接，需要定义以下两个参数；
目标元素的id,a标签的href属性指向该id，最后要注意的是，在使用锚点链接时，href属性的赋值前面要加“#”（井号），用来表示这是一个锚点链接；
八、HTML表单
1. HTML表单语法
对于表单，我们平时肯定接触过不少，像注册登录，话费充值，发表评论等都用到了表单；
表单标签：指的是文本框、按钮、单选框、复选框、下拉列表等的统称。
form标签属性：
| 属性 | 说明 |
| name | 表单名称 |
| method | 提交方式GET,POST |
| action | 提交地址 |
| target | 打开方式 |
| anctype | 指定编码方式 |
input标签属性：
| 属性 | 说明 |
| text | 单行文本框 |
| password | 密码文本框 |
| radio | 单选框 |
| checkbox | 多选框 |
| button,submit,reset | 按钮 |
| file | 文件上传 |
单行文本框：
语法：<input type="text"/>
属性：<input type="text" value="设置文本框的默认值" size="文本框的长度" maxlength="文本框中的字符数" />
密码文本框：
语法：<input type="password" />
属性：<input type="password" value="设置文本框的默认值" size="文本框的长度" maxlength="文本框的字符数" />
单选框：
语法：<imput type="radio" />
属性：<input type="radio name="单选框名" value="单选框值" checked(默认值)/>
复选框：
语法：<input type="checkbox" name="组名" value="取值" />
属性：<input type="checkbox" name="组名" value="取值" checked(默认值) />
按钮：
普通按钮：button
在HTML中，普通按钮通常配合JavaScript来进行各种操作；
语法：<input type="button" value="取值" /> value是按钮上的文字
提交按钮：submit
在HTML中，提交按钮通常都是用来给服务器提交数据的；
语法：<input tyep="submit" value="取值" />
重置按钮：reset
在HTML中，重置按钮一般用在清除用户在表单中输入的内容；
语法：<input type="reset" value="重置" />
文件上传：
语法：<input type="file" value="按钮值" />
多行文本框：
语法：<textarea rows="行数" cols="列数" value="默认值" placeholder="占位符">默认内容</textarea>
下拉列表：
语法：<select><option>选项内容</option></select>
日期选择框：
语法：<input type="date" /><br />
2. HTML表单综合设计
设计如下图所示的HTML表单：
技多不压身，利用国庆假期，简单学习了一下HTML，文章源码，HTML表单综合设计（html_for_design.html）均已放在我的网盘，提取码：html
2424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
