网页三剑客最主要由三部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。
【web前端开发最核心的3个技术】：
（1）HTML是什么？
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
（2）CSS
CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
（3）JavaScript
JavaScript是一门脚本语言。
【学习路线图】：
学习路线：HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门（或PHP入门）→Ajax→ASP.NET进阶（或PHP进阶）
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
【注释解析】：
1.html结构：包括,< body>
2.html标签是以尖括号包围的关键字.
3.html标签通常是成对出现的，有开始就有结束，包含成对标签、独立标签
4.html通常都有属性，格式:属性名＝“属性值”(多个属性之间空格隔开)
5.html标签不区分大小写,建议小写。目前HTML编辑器可以说是种类繁多, 特别是国外, 开源的商业的, 各种版本,. 我只是简单介绍几个常见的免费/开源 的可视化HTML编辑器 (WYSIWYG)。
HTMLArea
功能一般, 文件不大, 支持是几种语言, 比较容易定制, 使用广泛,支持IE/Firefox/Mozilla等多种浏览器. 遵循BSD版权, 目前最新版是3.0.
官方网站: http://www.htmlarea.com/
FCKEditor
庞大, 功能强大, 加载慢. 在很多地方使用广泛, 比如CSDN的blog就是使用的这个. 功能也可以定制. 支持多种浏览器, 遵循LGPL版权. 目前最新版是2.0
官方网站: http://www.fredck.com/
演示:
http://www.fckeditor.net/demo/default.htmlFreeTextBox
定制编辑器界面, 包括Office 2000/Office XP/Office 2003 等界面, 运行速度一般, 功能还不错, 能够支持多种浏览器. 主要应用于ASP.net. 目前最新版是3.0.6.
官方网站:
http://www.freetextbox.com/演示:
http://www.freetextbox.com/Default.aspxaynHTML
界面比较象Windows, 美观度一般, 加载速度尚快, 遗憾的是只支持IE, 目前最新的版本是
官方网站:
http://www.aine.be/aynhtml/演示:
http://www.aine.be/aynhtml/editor.htmlSPAW Ediotr
支持多种浏览器, 界面比较漂亮,类似MAC风格, 功能一般, 加载速度中等, 支持PHP比较好. GPL版权,
官方网站: http://www.solmetra.com/
演示:
http://www.solmetra.com/spaw/demo/demo.phpTinyMCE
界面相当清新, 很适合素雅主义使用, 功能比较强大, 不逊色于FCKEditor, 但是加载速度委实比较慢, 支持多种浏览器, 使用LGPL版权, 目前最新版本是2.0
官方网站:
http://tinymce.moxiecode.com/演示:
http://tinymce.moxiecode.com/example_full.php?example=trueXinHa
界面还可以, 加载速度比较慢, 但是比TinyMCE强点, 定制功能相当强大, 而且本身支持的功能也很强大, 支持多种浏览器, 也可以把它跟HTMLArea比较一下. 基于BSD授权,
官方网站:
http://xinha.python-hosting.com/演示地址:
http://xinha.gogo.co.nz/xinha-nightly/examples/full_example.htmlskyWriter
功能比较强大, 使用比较复杂. 开发源代码. 有兴趣可以尝试下.
官方网站:
http://wysiwyg.skybuilders.com/演示:
http://wysiwyg.skybuilders.com/demos/skyWriter.html————————————————
有兴趣的小伙伴也可以在评论区留言推荐你觉得好用的编辑器，我们相互学习交流。
HTML超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。HTML 运行在浏览器上，由浏览器来解析。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML文档由4个主要标记组成，包括<html>、<head>、<title>、<body>.这4个标记构成了HTML页面最基本的元素。
【html基本标签规则】：
用<>尖括号包括英文单词的关键词
HTML 标签通常是成对出现的，比如 <b> 和 </b>、
标签对中的第一个标签是开始标签，以开始标签起始。第二个标签是结束标签，也是结束标签。
1 HTML标签：
作用所有HTML中标签的一个根节点。通常以<html>开头 </html>结尾。
2 head标签：
作用：用于存放：
title,meta,base,style,script,link
注意在head标签中我们必须要设置的标签是title
3.title标签：
作用：让页面拥有一个属于自己的标题。
4.body标签：
作用：页面在的主体部分，用于存放所有的HTML标签：
p,h,a,b,u,i,s,em,del,ins,strong,img
【属性】：
color:文本的颜色
bgcolor:背景色
background:背景图片
【颜色的表示方式】：
第一种方式：使用颜色名称: 仅仅有16种颜色名可用英文字母，其余的要用16进制值。
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
第二种方式：RGB模式
第三种：十六进制：#000000 #ffffff #325687 #377405
平时我们在浏览网页时候可以按住键盘上的F12快捷键，打开我们所浏览网页的编码详情，大家可以简单的明白一个网页的构成是怎样的结构。
以百度为例简单演示：
是不是感觉一个百度搜索页，怎么会有这么多英文代码构成，是不是有点一头雾水呢？
那么我们又该如何解读这些内容呢？他们又是一个怎样的结构关系，组合到一起。通过网页的形势呈现的呢？带着这些疑问开始我们今天的内容分享吧。
还是用刚才截图的百度搜索页截图做个简单说明，我们看到开头有这样一串英文代码。<!DOCTYPE html>，该如何解读呢？
<!DOCTYPE html>
这句话就是告诉我们使用的哪个html版本？ 我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。
标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。
————————————————
HTML标签的语义化（重点）
白话： 所谓标签语义化，就是指标签的含义。
为什么要有语义化标签：
1、方便代码的阅读和维护
2、同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好的搜索引擎优化：
核心：合适的地方给出一个最为合理的标签。
语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。
不管是谁都能看懂这块内容是什么。
【遵循的原则】：先确定语义的HTML ，再选合适的CSS。
总结：（重要知识点）
双标签：
<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center>
单标签：
<br><hr><img><input><param><meta><link>
————————————————
包括<html>、<head>、<title>、<body>.这4个标记构成了HTML页面最基本的元素。
<html>标记是HTML文件的开头。
在整个网页代码编辑中是从<html>这里开始的，然后到</html>结束。
标记虽然没有实质性的功能，但却是HTML必不可少的部分。
所有的HTML文件都以标记开头，以标记结束，即HTML页面的所有标记都要放置在与标记中。
<head>标记是HTML文件的头标记，用于存放HTML文件的信息，如定义CSS样式的代码可放置在与标记之中。
<title>标记
<title>标记为标题标记。
可将网页的标题定义在标记之中
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。
HTML页面的主体标记。
页面中的所有内容都定义在标记中。
标记本身也具有控制页面的一些特性，如控制页面的背景图片和颜色等。
在HTML中，换行标记是<br>
1.注释标签：<!–注释–>
2.换行标签：<br/>
3.段落标签：<p>文本文字
特点：段与段之间有行高
属性：align对齐方式
(left：左对齐 center：居中 right：右对齐)
4.水平线标签:<hr/>
属性:
width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
size: 水平线的粗细 (像素表示，例如：10px)
color: 水平线的颜色
align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)
<div>:块级标签，独占一行，换行
<span>:行级标签，所有内容都在同一行作用：
<div>:主要是结合css页面分块布局
<span>:进行友好提示信息
(1)、段落与文字标签
(2)、文本格式化标签
网页特殊符号只需要记忆一个就行了，就是HTML空格“ ”，其他的特殊符号我们不需要记忆，当我们需要的时候再回来查找一下特殊符号表就OK了。
(三)、自动闭合标签
HTML标签分为2种，一种是“一般标签”，另外一种是“自闭合标签”。一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。
一般标签可以在开始符号和结束符号之间插入其他标签或文字。
自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。
(1)、一般标签
举例：<body></body>
(2)、自动闭合标签
举例：<br/>、<hr/>
(四)、块元素和行内元素
(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
(2)、块元素特点：
（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。
(3)、行内元素特点：
（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：strong、em、span等
标签语义对照表
3种列表的语义记忆：
【列表有3种】：有序列表、无序列表和定义列表。
有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是序列表，请大家重点掌握。
目录列表和菜单列表已经被废除，大家可以直接忽略这两种列表。
(1)、有序列表
有序列表type属性
(2)、无序列表
无序列表是三个列表中最为重要的列表。
无序列表type属性
(3)、定义列表
【说明】：
<dl>即“definition list（定义列表）”，<dt>即“definition term（定义名词）”，而<dd>即“definition description（定义描述）”。
在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。
通过语义化记忆表格标签：
表格结构标签
<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签<caption>、表头单元格<th>可以没有，但是这3者必须要有。
【说明】：
<table>和</table>标记着表格的开始和结束，<tr>和</tr>标记着表格的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行。<td>和</td>标记着单元格的开始和结束。
(三)、表格完整结构
表格完整结构应该包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）4部分。
表格语义化之后，使得代码更清晰和更利于后期维护。
【语法】：
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
【说明】：
<thead>、<tbody>和<tfoot>这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“<tr></tr>”表示一行。
合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。
(1)、合并行
【语法】：
<td rowspan="跨度的行数">
【举例】
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>合并行rowspan</title>
</head>
<body>
<table>
<!--第1行-->
<tr>
<td>姓名:</td>
<td>小明</td>
</tr>
<!--第2行-->
<tr>
<td rowspan="2">喜欢水果:</td>
<td>苹果</td>
</tr>
<!--第3行-->
<tr>
<td>香蕉</td>
</tr>
</table>
</body>
</html>
演示效果
(2)、合并列
【语法】：
<td colspan="跨度的列数">
【举例】：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>合并列colspan</title>
</head>
<body>
<table>
<!--第1行-->
<tr>
<td colspan="2">绿叶学习网精品教程</td>
</tr>
<!--第2行-->
<tr>
<td>HTML教程</td>
<td>CSS教程</td>
</tr>
<!--第3行-->
<tr>
<td>jQuery教程</td>
<td>SEO教程</td>
</tr>
</table>
</body>
</html>
————————————————效果演示————————————————
6、图像
(一)、图像标签
在HTML中，图像标签为<img>。<img>是一个自闭合标签。img标签只需要掌握3个属性就可以了：src、alt、title。
【语法】：
<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">
src和alt这两个属性是img标签必不可少的属性。其他属性我们一般用不到，所以只需要掌握这两个属性即可，大家要是在别的书籍上看到<img>还有别的属性，你不用去记忆它们。
(二)、相对路径和绝对路径
相对路径，指的是同一个网站下，不同文件之间的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对的路径。
绝对路径，指的是文件的完整路径。
用得很多，可移植性很好
(三)、图片格式
虽然图片格式这一节知识比较多，大部分我们只需要了解就可以了，我们只需要掌握.jpg、.png和.gif三种图片格式的区别即可。
1、JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。
2、PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
3、GIF格式图片图像效果很差，但是可以制作动画。
超链接使用a标签，语法如下：
<a href="链接地址" target="目标窗口的打开方式">
我们只需要掌握“_self”和“_blank”这两个属性值就可以了，其他两个用不到。
超链接根据链接对象的不同分为：
（1）外部链接
（2）内部链接：①内部页面链接；②锚点链接；
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>锚点链接</title>
</head>
<body>
<div>
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
<a href="#article">推荐文章</a><br />
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="music">
<h3>推荐音乐</h3>
<ul>
<li>林俊杰-被风吹过的下图</li>
<li>曲婉婷-在我的歌声里</li>
<li>许嵩-灰色头像</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系统</li>
<li>复仇者联盟</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>朱自清-荷塘月色</li>
<li>余光中-乡愁</li>
<li>鲁迅-阿Q正传</li>
</ul>
</div>
</body>
</html>
————————————————
锚点链接，就是点击某一个超链接，它就会跳到当前页面的某一部分。如下图：
只要我们点击“推荐音乐”、“推荐电影”和“推荐文章”这三个超链接，滚动条就会滚动到相应的版块。
超链接在页面中起到跳转或定位的作用（超链接、锚链接、a链接、a标签）
a标签可以快速定位到当前页面或者其他页面的目标内容（百度百科）
表单标签共有4个：<input>、<textarea>、<select>和<option>。其中<select>和<option>是配合使用的。
我们通过一张表单来把所有input标签囊括：
文本格式化标签
定义粗体文本。
定义大号字。
定义着重文字。
定义斜体字。
定义小号字。
定义加重语气。
定义下标字。
定义上标字。
定义插入字。
定义删除字。
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
embed：标签定义嵌入的内容
audio：播放音频
video：播放视频
多媒体 embed（会使用）
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
\<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash">\</embed>
多媒体 audio
HTML5通过<audio>标签来解决音频播放的问题。
并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
多媒体 video
HTML5通过<video>标签来解决音频播放的问题。
通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
HTML常用标签或属性全称
好了今天的内容分享就到这里，后续不断更新，敬请期待。
