HTML介绍及编写第一个网页
HTML5是HTML的最新版本，2014年10月万维网联盟W3C完成制定，设计的目的是为了再移动设备上支持多媒体。
本文主要参考W3CSchool在线文档--https://www.w3cschool.cn/html5/html5-intro.html，请大家尽量能边看边动手编写。
HTML(Hyper Text Markup Language)是一种标记性语言。是前端程序员和浏览器的共同遵循的规则，懂了它就懂了和浏览器沟通的技巧，它是信息社会计算机相关工作者信息交流的一种必要表达语言。
网页的显示就是程序员负责编写，而浏览器负责解释展示出效果。所以应该明白编写和展示分属两个主体，那么编写的地方就不能是展示的场所，编写一般在文本编辑器如记事本等编辑软件中，而负责展示就是各种浏览器软件了。虽然区区记事本编写代码即可，然工欲善其事必先利其器，一个好的开发工具必然极大提升开发效率，这些工具从早期的DreamWaver到现在的形形色色的软件层出不穷，在此推荐HBuilderX软件，各类软件的使用优劣各位自行定夺！
在下载HBuilderX之前，先用记事本写一个简单的网页吧，主要是体验以下它的工作过程！
在自己电脑的任何地方新建一个记事本文档，
最好不要用word等带格式的编辑器，在上面图中圈出的地方一定要注意要显示文件的扩展名，这个是等下我们要修改的部分将txt修改为html，有的人可能一直没有显示出文件扩展名，而仅仅是将前面的名字改为新建文本文档.html而后面隐藏的还是txt。这点请大家务必注意，如果不知道怎么显示扩展名，请根据自己的操作系统版本在百度搜索如何显示文件扩展名即可，非常容易操作。修改后一半文件的图标都会发生改变，在此请注意，编写和展示是分属于两个主体的，编写时请用打开方式为记事本，要看效果打开方式是浏览器！后期推荐使用的编辑器HBuilderX可以从HBuilderX-高效极客技巧https://www.dcloud.io/hbuilderx.html?source=javascriptc.com这个网址下载，因为安装比较简单，此处不赘叙。
在记事本中编写如下内容：
<html>
<head>
<title> 网页的标题</title>
</head>
<body>网页的内容</body>
</html>即可在浏览器中展示一个最简单的网页。我们也正好通过这个简单的页面介绍HTML中的各种标签。
HTML中的标签分类及编写规范
在HTML中标签主要有两种，一种是双标签，一种是单标签。所谓标签即前面所讲的是一种程序员和浏览器做好的约定规范，如<html>中间内容</html>就是告诉浏览器<html>和</html>中间的部分要是网页中的内容而恰好浏览器懂这个规则。知道了标签就来探讨一下双标签和单标签，双标签故名思意就是两个标签,用<标签>开始，中间存放内容,到</标签>结束。当然标签中也可以嵌套其他标签，可以理解为一种级属关系。如上面记事本代码中<html>标签中包含了<head>双标签和<body>双标签，请理解为网页中有头部和主体两部分。在head标签中包含了title标签，当然主体中包含的其他内容就要写在<body></body>中间了。单标签往往表示一种功能，如换行<br/>，仅仅是给浏览器一个标记即可，单标签的格式通常就是<标签/>。
<html>
<head>
<title> 网页的标题</title>
</head>
<body>
其他标签都可以写在这里。
</body>
</html>为了给代码阅读者以清晰的构架思路，建议标签相对于其父一级标签向右缩进，如上图head相对于html靠右，title相对于head靠右。而head和body是两个同属于html的标签，则居于统一竖直线上。作为双标签的往往都是一个容器型元素，内部用来包含其他数据或者标签。而但标签往往不
常见的标签介绍
常用的单标签
如果一个标签内部不需要其他内容的支撑，仅仅是为了完成一定的功能，则仅需单标签即可，如告诉浏览器换行，则仅仅是需要一个指令而不需要其他数据则<br/>即可完成该功能。常见的单标签有：
<br/>换行。
<img />插入图片。
<hr/>绘制一条分割线。
常用的双标签
在加入新标签之前，首先要知道我们已经前面提及的<html>、<head>、<body>、<title>等几个常用标签。
<hn>标签，其中n可以取1--6，表示标题级别，如<h1>一号标题，字号比较大</h1>
<p>标签，p来自英文单词paragraph首字母，表示一个段落。
<em>标签,来自单词emphasize强调的意思，<strong>基本上表示同样作用，在早期html标签中还有<b>标签，效果为加粗。<big>字体相对于边上文字略微加大，还有<small>，同样相对于word文档中如图所示功能：
<b>来自bold单词表示加粗，<i>来自italic表示倾斜，<u>来自underline表示下划线，<s>实现添加删除线但一直没有搞清楚这个s来自哪个英文单词，但肯定不会是shanchu的s吧，幸好还有现在用<del>delete（删除的意思）来表示删除线，另外有<sub>表示文字实现下标效果，<sup>实现上标效果等。
标签中的属性
写到此处需要加入一个小模块，不知道大家在写到这里的时候有没有一个疑问，那就是这些标签中的内容如果想要一些特殊要求怎么办，如一个段落中如何控制字体大小，字体颜色等？如果刚才没有想这个问题，那现在也应该有这个疑问了，为了解决这个问题，在标签中还可以添加不同的属性，其格式为<标签 属性1="值1" 属性2="值2" .... />。如body标签中可以通过bgcolor属性来设置整个页面的背景色。
<html>
<head>
<title> 网页的标题</title>
</head>
<body bgcolor="red">网页的内容</body>
</html>有的标签必须通过属性值和其中标签包裹的文字一起来达成某种效果。如接下来的<a>标签，它是实现超链接的标签。
<a href="http://www.baidu.com">显示的文字，点击这里可以跳转，跳转到a中href属性指向的地址。
<div>标签，来自单词division（分割区域，划分的意思），这个是html中出现频率最高的一个标签，当下主流的网页布局都是靠div来实现的。div是网页中的一个块，这个块如果要实现背景等基本上都是通过style属性来控制，而style中又包含众多子属性，如字体大小，颜色等。
<html>
<head>
<title> 网页的标题</title>
</head>
<body bgcolor="red">网页的内容
<div style="background-color:#00ff00; font-size:20px;"> div中设置了背景色，设置了字体大小属性</div>
</body>
</html>其实现效果为：
从中也可以看出style内部子属性background-color可以实现其主体div的背景颜色更改，那body刚才用的属性bgcolor是否也可以用style来实现呢？答案是肯定的，所以style的编写是我们后期CSS部分讲解的重要部分，届时也会在那里重点给大家讲解常用的标签属性，此处建议大家稍安勿躁还是按着节奏稳步向前。
<span>常用于其他模块内部，用来标识一块单独的特殊的文字，如刚才div中需要将“字体”两个字背景设置为白色，而字号变为更大。
<html>
<head>
<title> 网页的标题</title>
</head>
<body bgcolor="red">网页的内容
<div style="background-color:#00ff00; font-size:20px;"> div中设置了背景色，设置了<span style="background-color:#ffffff;font-size:30px">字体</span>大小属性</div>
</body>
</html>其实现效果为：
span如果没有设置style值则其内部文字与周围文字无异。
<abbr title="鼠标经过标签内部文字时显示的内容">文字</abbr>，它可以实现当鼠标经过abbr内部的文字时将title中内容在文字下方提示的效果。
<textarea>文本区域标签，用来在页面中呈现一个用以用户输入多行文字的区域，其常用属性有rows=“数字n1”表示这个区域显示为n1行用以控制区域高度，cols=“数字n2”，表示这个区域每行可以放置的字符个数，一般用以控制区域宽度。它作为双标签出现，在两个标签中间的文字会默认显示在文本区域。
<html>
<head>
<title> 网页的标题</title>
</head>
<body bgcolor="red">网页的内容
<div style="background-color:#00ff00; font-size:20px;"> div中设置了背景色，设置了<span style="background-color:#ffffff;font-size:30px">字体</span>大小属性</div>
<textarea rows="5" cols="10">文本区域默认显示文字</textarea>
</body>
</html><pre>预定义标签，这个标签可以实现内部文字格式的原样输出，请对比
<html>
<head>
<title> 网页的标题</title>
</head>
<body bgcolor="red">网页的内容
1
2
3
<pre>
1
2
3
</pre>
<div style="background-color:#00ff00; font-size:20px;"> div中设置了背景色，设置了<span style="background-color:#ffffff;font-size:30px">字体</span>大小属性</div>
<textarea rows="5" cols="10">文本区域默认显示文字</textarea>
</body>
</html><pre>标签中1，2，3按三行显示，而没有在的因为没有给浏览器换行标记而在同一行显示出来，效果如下图：
以上是常用的简单双标签，可以单独使用也可以根据实际需求而配合使用。此外还有一种标签，必须通过相互配合达到效果。由于其使用略微复杂，我们在此以编号顺序依次介绍(也可以配合视频观看具体操作)：
1）<map>，故名思意就是地图，在html中常用来实现点击不同的位置进入不同的链接的效果，经常需要用一张图片的配合，所以在使用map时需要先添加一个单标签<img src="图片地址" usermap="map名字" />，然后在map中划分不同的区域，<map name="map名字"><area shape="rect|circle" coords="区域左上角横坐标，区域左上角纵坐标，区域宽度，区域高度"> </map>。shape表示这个区域的形状，rect矩形，circle圆形，表示区域坐标。请看如下代码：
<html>
<head>
<title> 网页的标题</title>
</head>
<body >
<img src="https://mbdp01.bdstatic.com/static/landing-pc/img/logo_top.79fdb8c2.png" width="300" height="200" usemap="#daohang"/>
<map name="daohang">
<area shape="rect" coords="0,0,150,200" target="_blank" href="http://www.baidu.com"/>
<area shape="rect" coords="150,0,300,200" target="_blank" href="http://www.jd.com"/>
</map>
</body>
</html>其中img中使用usemap属性值与map中name属性产生关联，确定该图使用哪个map划分区域，然后再map中划分不同的区域。
2）<article>，通常用来展示一篇文章，虽然可以使用p或者div等标签完成一样的效果，但是一般建议将一些博客文章、在线文稿等用article标签规范。
<html>
<head>
<title> 网页的标题</title>
</head>
<body >
<abbr title="铜仁幼儿师范高等专科学校" >铜仁幼专</abbr>
<article>
<h1>文章的标题</h1>
<p>文章第一段，其余文字略</p>
<p>文章第二段，其余文字略</p>
</article>
</body>
</html>效果如下图：
今天开始第一天编写，不经意间竟然码了五千多字，细水才能长流，后期会持续跟进更新，并配上视频，制作不易，希望转载注明出处，纷杂的世界愿我们都在沉淀成长！
附注：视频和视频中讲解代码
html1
