html最全知识点（超级详细）网页三剑客最主要由三部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。【web前端开发最核心的3个技术】：（1）HTML是什么？HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。（2）CSSCSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。（3）JavaScriptJavaScript是一门脚本语言。【学习路线图】：学习路线：HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门（或PHP入门）→Ajax→ASP.NET进阶（或PHP进阶）一、网页基础知识：你对我们常用的浏览器了解多少？为什么会有web标准：HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。HTML骨架格式：【注释解析】：1.html结构：包括<head>,< 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是什么？HTML超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。HTML 运行在浏览器上，由浏览器来解析。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面HTML的基本标签：HTML文档由4个主要标记组成，包括<html>、<head>、<title>、<body>.这4个标记构成了HTML页面最基本的元素。为了方便记忆配图结合加深记忆，HTML标签间的相互关系：【html基本标签规则】：用<>尖括号包括英文单词的关键词HTML 标签通常是成对出现的，比如 <b> 和 </b>、标签对中的第一个标签是开始标签，以开始标签起始。第二个标签是结束标签，也是结束标签。1 HTML标签：作用所有HTML中标签的一个根节点。通常以<html>开头 </html>结尾。2 head标签：作用：用于存放：title,meta,base,style,script,link注意在head标签中我们必须要设置的标签是title3.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>（重点）还是用刚才截图的百度搜索页截图做个简单说明，我们看到开头有这样一串英文代码。<!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页面最基本的元素。(1)HTML标签<html>标记是HTML文件的开头。在整个网页代码编辑中是从<html>这里开始的，然后到</html>结束。标记虽然没有实质性的功能，但却是HTML必不可少的部分。所有的HTML文件都以标记开头，以标记结束，即HTML页面的所有标记都要放置在与标记中。(2)head标签<head>标记是HTML文件的头标记，用于存放HTML文件的信息，如定义CSS样式的代码可放置在与标记之中。<title>标记<title>标记为标题标记。可将网页的标题定义在标记之中(3)body标签body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。HTML页面的主体标记。页面中的所有内容都定义在标记中。标记本身也具有控制页面的一些特性，如控制页面的背景图片和颜色等。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种列表的语义记忆：(一)、HTML3种列表【列表有3种】：有序列表、无序列表和定义列表。有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是序列表，请大家重点掌握。目录列表和菜单列表已经被废除，大家可以直接忽略这两种列表。(1)、有序列表有序列表type属性(2)、无序列表无序列表是三个列表中最为重要的列表。无序列表type属性(3)、定义列表【说明】：<dl>即“definition list（定义列表）”，<dt>即“definition term（定义名词）”，而<dd>即“definition description（定义描述）”。在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。5、表格(一)、表格语义记忆通过语义化记忆表格标签：表格结构标签(二)、表格基本结构<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>还有别的属性，你不用去记忆它们。(二)、相对路径和绝对路径相对路径，指的是同一个网站下，不同文件之间的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对的路径。绝对路径，指的是文件的完整路径。当前文件找目标文件的过程2.绝对路径3.相对路径用得很多，可移植性很好同级目录(三)、图片格式虽然图片格式这一节知识比较多，大部分我们只需要了解就可以了，我们只需要掌握.jpg、.png和.gif三种图片格式的区别即可。1、JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。2、PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。3、GIF格式图片图像效果很差，但是可以制作动画。7、链接超链接使用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>————————————————锚点链接，就是点击某一个超链接，它就会跳到当前页面的某一部分。如下图：只要我们点击“推荐音乐”、“推荐电影”和“推荐文章”这三个超链接，滚动条就会滚动到相应的版块。1.a 标签 (Anchor ) : 超链接（锚）超链接在页面中起到跳转或定位的作用（超链接、锚链接、a链接、a标签）2. a标签的跳转功能3.a 标签的属性4.a 标签的其他用法5.a标签的定位功能a标签可以快速定位到当前页面或者其他页面的目标内容（百度百科）在当前页面进行定位8、表单表单标签共有4个：<input>、<textarea>、<select>和<option>。其中<select>和<option>是配合使用的。我们通过一张表单来把所有input标签囊括：文本格式化标签定义粗体文本。定义大号字。定义着重文字。定义斜体字。定义小号字。定义加重语气。定义下标字。定义上标字。定义插入字。定义删除字。<b> 定义粗体文本。<big> 定义大号字。<em> 定义着重文字。<i> 定义斜体字。<small> 定义小号字。<strong> 定义加重语气。<sub> 定义下标字。<sup> 定义上标字。<ins> 定义插入字。<del> 定义删除字。HTML5新标签与特性常用新标签header：定义文档的页眉nav：定义导航链接的部分footer：定义文档或节的页脚article：标签规定独立的自包含内容section：定义文档中的节（section、区段）aside：定义其所处内容之外的内容多媒体标签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>多媒体 audioHTML5通过<audio>标签来解决音频播放的问题。并且可以通过附加属性可以更友好控制音频的播放，如：autoplay 自动播放controls 是否显不默认播放控件loop 循环播放多媒体 videoHTML5通过<video>标签来解决音频播放的问题。通过附加属性可以更友好的控制视频的播放autoplay 自动播放controls 是否显示默认播放控件loop 循环播放width 设置播放窗口宽度height 设置播放窗口的高度HTML常用标签或属性全称好了今天的内容分享就到这里，后续不断更新，敬请期待。
本文出自快速备案，转载时请注明出处及相应链接。
