HTML
前言
但愿此篇文章可以帮助到大家，这些都是基于我平常学习中的总结，也许有些不严谨，望指出，若你拥有编辑的功能，则在你所认为错误的地方划掉而非删除，而后使用红色笔进行编辑对的，新的内容。
此文章基于XHTML1.0和HTML5标准，其实说是标准，只是咱们所需遵照的最低标准罢了。
转载标注来源，做者：Chongsaid
工具
不建议新手使用任何自动完成功能的编辑器做为新初使用，由于最终你会产生依赖性，离开工具就没法创做出所须要的网页效果了。
我在百度云盘分享了一款工具，针对于新手使用的，代码高亮显示
工欲善其事，必先利其器，先下载你的工具来开始验证在此文章所讨论的知识点以及部分总结。
连接: https://pan.baidu.com/s/1dFMWP5v 密码: xbad
其实，工具只是帮助咱们达到目的而已，你也可使用记事本进行开发。
实用的学习参考网站在某种意义上来讲，其实也算是一种工具。
W3CSchool ：http://www.w3school.com.cn/index.html
这篇文章有不少资源将引用W3CSchool的教程，而且该网站的学习资源也很优秀。
开始
你已经下载工具了吗？
那么开始吧。
HTML是互联网组成的必不可少的一种标记性语言，咱们所浏览的网页大都基于HTML所提供。任何人均可以学习HTML技术，这其实属于前端的技术范畴。
HTML称为 超文本标记语言 ，具体能够上网进行搜索。
打开工具，或者在桌面上新建一个文件，将其命名为 index.html
*.html 其后辍名指的是HTML文件，可使用任何浏览器打开此文件，这些浏览器会发挥文件的最大做用，而不是简简单单的文本文档。
那么，如何编写HTML文件呢？
打开任一网站，点按键盘上的 F12 键，就能够看到其网站的源代码，观看代码并学习其实也是成长的一部分。
HTML5主要分为三部分（包括XHTML）
声明部分、 头部（head）、主体（body），其中，容器（html）包裹着头部和主体。
XHTML有些版本区分大小写，而且XHTML可能会在将来的某一个时候被HTML5所替代，因此本文章主要精力放在HTML5的知识点上。
实践：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
</head>
<body>
</body>
</html>
咱们来逐步分析上面的实践代码。
<!DOCTYPE html> 此行是网页声明，用于告诉浏览器该如何解析此文档时所使用的HTML或XHTML规范，一般HTML5的声明格式通常如此。而XHTML的声明格式很繁杂，它有三种声明格式，我只写松散（Loose）声明，其他使用搜索引擎进行完善。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
其他部分在以前已经讲过，但head标签以内的那些是什么呢？
<meta>标签用于描述网页的摘要信息，包括文档内容类型，编码信息，搜索关键字，网站功能等，采用键值对的方式描述信息。
<meta charset="utf-8" />这行代码指示浏览器该以怎样的编码来解析文档，有时候出现中文乱码是由于解析文档所用的格式错误了。
此标签具体参阅：
百度百科：https://baike.baidu.com/item/meta/4265710?fr=aladdin
W3CSCHOOL：http://www.w3school.com.cn/tags/tag_meta.asp
<title>标签订义文档的标题，浏览器会以特殊的方式展现它，将其置于标签页上，收藏夹，书签等。
主体：主要的展现平台
<body>标签的做用正是展现信息的平台。
各式各样的标签都能在其中大放异彩，标题标签，段落标签，图片标签，盒子标签.......
每个标签都须要成对出现，固然也有意外，由于它们天生如此。在后面介绍。
在此以前，咱们先学习如何给文档进行注释，以此，咱们在之后看到这些代码的时候，也可以知道当时咱们的想法是怎样的。
注释标签
<!-- 注释内容 -->
浏览器不会解析注释内容，由于对浏览器没有用处，相反，注释能给带给开发者帮助。
下面开始介绍各式标签，全部的网页都基于此搭建而成，一个完整的网站会存在样式表，它们可以美化网站，固然，样式表会在之后介绍。
标题标签
<h1>一级标题</h1>
共六级，数值越大则标题大小越小，一个网页标准的作法是只出现一次一级标签，它们是整个网页所需展现的重要摘要。
此标签很少作介绍，进行尝试，于<body>标签内。而非网页的头部标题，是不同的。
段落标签
<p>总结起初写于2017年9月12号，是学习的经验，知识分享，固然其中也不乏有错，但愿看这篇文章的道友可以多多指点，修改错误的内容。</p>
段落标签用于载入一段文字，或是一篇文章，<p>标签会在先后建立一些空白以突出内容，可使用样式表美化它，固然，几乎全部的标签均可以使用样式表进行美化。
值得注意的是，在源代码中，若是有换行符，浏览器会采用空格来替代它们，所以须要换行的话，须要在源代码的文章进行更改，采用换行标签来替代源代码中的换行。
进行尝试，于<body>标签内。
字体样式标签
在前面咱们学习了两种标签，分别是 标题标签和段落标签 ，若是你没看到，能够看看以前的介绍以及内容。
字体样式标签能够对字体产生影响，从而达到突出字体，让其更为明显，能够很直观的看到。
主要的，且使用次数较多的样式标签以下：
<em> <strong> <dfn> <code> <samp> <kbd> <cite>
实际上，这些标签都用于区份内容，以达到显要的，强调开发者所要表达的事物，好比某些关键字，引用的文章内容，或是重要的信息。
做为简短的介绍，我在知名HTML教学网站上看到了这些标签的简介，所以，在此很少作标签介绍。
以上字体样式标签的简介网址：http://www.w3school.com.cn/tags/tag_phrase_elements.asp
特殊符号
有些符号做为HTML的语法符号，在网页实际中并不可见，所以，只能使用特定的转义符来显示它们。
在这里，我将写一些经常使用的转义符以达到读者能够理解其做用。
空格（ ） 大于号（>） 小于号（<）
引号（"） 版权符号（©）
网页支持的转义符网址：http://www.w3school.com.cn/tags/html_ref_symbols.html
换行与水平线标签
一个标签可使用样式表进行美化与设置，有时候当没有引用样式表的时候，可使用这些实用性标签进行美化，这里就先介绍换行与水平线标签。
你发现了没有呢？标题标签单独占用了一行，而有些标签则一个紧挨着一个。
其实，标签分为两类，分别为：块级标签和行内标签（在CSS中，称之为块级元素以及行内元素）。
块级标签对于目前咱们所学习的这些，并无能力改变它们......但咱们可以改变行内标签。
<br />标签，该标签可使行内标签进行换行，若是在行内标签先后各输入此标签，则该行内标签将成为伪块级标签，在用户看来，它单独的占据了一行。
换行标签仅仅只是简单的开始新的一行，所以此标签是一个空标签，并没有需成对出现。
有时候咱们须要区分上下文内容，但若使用换行标签会显得有些突出，过于猛烈了。所以，可使用分隔线来区分它们。
<hr />标签，该标签能够在上下文中，产生一条水平线，以此来分隔、区份内容，例如标题和文章内容。其含义其实是单词的缩写：水平分隔线（horizontal rule）；
实践
如今你掌握的知识其实已经能给制做一些很简单的网页，且拥有可浏览性。
开始进行实践，来制做你的第二个网页。
网页源码：
实际上也能够在<p>标签内嵌套换行标签达到换行的目的，但也能够在在所需换行的时候，建立一个新的<p>标签以展现内容。
第二个实践项目很简单吧？其实，前端并不是咱们所想象的那样复杂，只是咱们在灌输式教育前丢失了小时的创意......
入门
如今可以单首创建出一个简单的页面，页面能够包含各样文本，而且对其进行排列，使用水平线和换行达到像文章同样的效果。
仅仅只是文本文档而已，没有超连接，图片等，也只有单一的阅读功能，而且，可能不会适配移动设备。
开始学习一些实用性标签，拥有这些，才能称之为一个网站。
图像标签
连接一张图片到网页上，能够对网页进行一些简要性的说明，或是网站Logo，也能够是某些演示图片，这些都并不是是文字可用于描述的，视觉每每比说的有用。
那么如何连接一张图片呢？采用图像标签便可，其用法很简单，经常使用属性只有五个，我建议所有进行使用，由于能够很好的约束图片，而且也遵照规范。
为何要在标签内定义宽高而不是使用CSS呢？
缘由是，这关于浏览器的渲染机制，若是定义在标签内，将获得更好的速度，由于浏览器的渲染顺序以下：
标签内的属性 --> CSS样式 --> 图片原有大小。
<img src="图像地址" alt="替代文本" title="鼠标悬浮提示文本" width="图片宽度" hight="图片高度" />
注意：在XHTML中，图像标签（img）必须被正确的结束，在HTML中，它是一个单标签，无需结束。
XHTML示例：
<img 属性="值" ......></img>
若是你不想使用五个属性，能够根据须要进行删减，但必要的两个属性：src、alt不能被删除。
进行实践。
注：图像地址能够是本机的绝对路径或是相对路径，例如：D:/图片.png，固然根据规范，图片的命名建议使用英文。
图片宽度或是高度采用的单位最好为像素，示例： width="500px" height="500px"
一样，图像地址可引用网络中的图片，例如：https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3615363367,394874282&fm=27&gp=0.jpg
W3CSchool参考：
http://www.w3school.com.cn/tags/tag_img.asp
超连接标签
超连接指的是，当鼠标单击该标签时，会跳转到指定的界面，或是跳转到某个锚点（具体参照HTML总结 “锚连接（未写）”）。
超连接标签也称之为 a 标签，它经常使用属性只有两种：href（被连接处）、target（目标窗口）
<a href="被连接的文档或是文件" target="目标窗口" >文本或图像</a>
其中，target属性值以下：
_blank ：浏览器总在新打开、未命名的窗口载入目标文档
_self ：默认值，除非与<base>标签中的target属性一块儿进行使用，不然毫无心义。
_parent：此目标使文档载入父框架而非在当前窗口载入新的文档
_top ：在窗口主体中载入被连接文档
franename：在指定框架载入目标文档
其他标签的使用后续将会不断完善。
在此以前，能够到此文永久更新地址进行查看：