静态网站制作基础知识
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：在指定框架载入目标文档
其余标签的使用后续将会不断完善。
在此之前，可以到此文永久更新地址进行查看：
