本文最初于发表于，并在上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。
国庆节快乐，还在加班的童鞋，良辰必有重谢！
- w3c：万维网联盟组织，用来制定web标准的机构（组织）
- web标准：制作网页要遵循的规范。
- web标准规范的分类：结构标准、表现标准、行为标准。
- 结构标准：相当于人的身体。html就是用来制作网页的。
- 表现标准： 相当于人的衣服。css就是对网页进行美化的。
- 行为标准： 相当于人的动作。JS就是让网页动起来，具有生命力的。
浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、猎豹浏览器、Safari和Opera等。如下图所示：
PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因。
html全称为HyperText Markup Language，译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。
- 超文本：音频，视频，图片称为超文本。
- 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。
作用：HTML是负责描述文档语义的语言。
注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。
HTML是负责描述文档语义的语言
html中，除了语义，其他什么都没有。
html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。 所以，接下来，我们肯定要学习一堆html中的标签对儿，这些标签对儿能够给文本不同的语义。
比如，面试的时候问你，h1标签有什么作用？
- 正确答案：给文本增加主标题的语义。
- 错误答案：给文字加粗、加黑、变大。
我们专门来对XHTML做一个介绍。
上面这个标签的意思是说，3秒之后，自动跳转到百度页面。
我们接下来对各个头标签进行介绍。
我们发现，在头标签中，有下面这种标签：
字符集用meta标签中的charset定义，meta表示“元”。“元”配置，就是表示基本的配置项目。
浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。
（3）定义“页面描述”
meta除了可以设置字符集，还可以设置关键字和页面描述。
我们把含有meta标签的这一行代码抽象一下：
name即“名字”，content即“内容”。
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
title也是有助于SEO搜索引擎优化的。
综上所述，html的比较完整的骨架是这样：
2、锚链接： 指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。效果如下：
11行代码表示，顶部这个锚的名字叫做name1。
然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了#name1）。注意上图中红框部分的#号不要忘记了，表示跳到名为name1的特定位置，这是规定。如果少了#号，点击之后，就会跳到name1这个文件或者name1这个文件夹中去。
如果我们将上图中的第28行代码写成：
大家打开上面的img中的链接，扫一扫，可能有惊喜哦。
相对路径和绝对路径的总结
相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。 相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。
问题：我的网页在C盘，图片却在D盘，能不能插入呢？
答案： 用相对路径不能，用绝对路径也不能。
注意：可以使用file://来插入，但是这种方法，没有任何意义！因为服务器上没有所谓c盘、d盘。
下面的方法是行的，但是没有任何工程上的意义，这是因为服务器没有盘符，linux系统没有盘符：
-
我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。
-
相对路径，就是../ image/ 这种路径。从自己出发，找到别人；
-
绝对不允许使用file://开头的东西，这个是完全错误的！
-
Align：指图片的水平对齐方式，属性值可以是：left、center、right -
title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。 -
border：给图片加边框（描边），单位是像素，边框的颜色是黑色 -
Hspace：指图片左右的边距 -
Vspace：指图片上下的边距 -
Alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）
- 图片的
align属性：图片和周围文字的相对位置。属性取值可以是：bottom（默认）、center、top、left、right。 我们来分别看一下这align属性的这几个属性值的区别。 1、align=""，图片和文字低端对齐。即默认情况下的显示效果：
2、align="center"：图片和文字水平方向上居中对齐。显示效果：
3、align="top"：图片与文字顶端对齐。显示效果：
4、align="left"：图片在文字的左边。显示效果：
5、align="right"：图片在文字的右边。显示效果：
注意事项： （1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。 （2）如果想实现图文混排的效果，请使用align属性，取值为left或right。
指的是对图片的局部区域加超链接。 我们知道，如果给图片加一个超链接，那个点击这个图片的任意区域，都会跳转到新的位置。举例：
上方代码表明：给图片加一个超链接，那个点击这个图片的任意区域，都会跳转到新的位置。 现在，我只想对图片的局部区域加超链接，该怎么做呢？这里的难点在于坐标的确定，此时需要用到Dreamweaver。
上图中，切换到“设计”标签，然后：
上图中，点击菜单栏插入-图像，导入图片：
，在图片上点击右键，选择属性，弹出属性面板：
上图中，我们可以利用红框部分的地图绘制需要添加超链接的区域。箭头处表示的是要链接到的文件。蓝框部分表示打开新页面的方式，蓝狂部分的new是没有下划线的，它和_blank的含义是一样的。
局部区域的热点设置完毕后，上图显示，红框部分就是多出的代码，也正是我们需要的代码。多出的代码如下：
上方代码中，第一行的usemap="#Map"表示我要引用名为Map的地图。 然后第02至第04行就给出了地图的定义。 效果演示：
最后，送上妹子的近照一张。楼主已经仁至义尽了。
PS：美女图就不放在github上了，这么多 star，放了也不合适。去我的博客园看吧~
怎么？还没看够？且看下文：
想学习代码之外的技能？不妨关注我的微信公众号（千古壹号id：qianguyihao）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
