HTML入门
一、简介
1、前端开发最核心技术
我们知道，用所谓的网页三剑客已经不能满足需求了，那前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。
（1）HTML是什么？
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
（2）CSS
CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
（3）JavaScript
JavaScript是一门脚本语言。
、前端开发其他技术
前端技术最核心的是HTML、CSS和JavaScript，但是对于一个真正的前端工程师来说，哪怕你精通这三个，你也不能称为一个真正的“前端工程师”。因为前端技术除了HTML、CSS和JavaScript这三种，还需要学习Ajax、SEO等。
（1）Ajax
Ajax，即“Asynchronous Javascript And XML（异步JavaScript和XML）”，是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个页面。
Ajax是前后端交互的技术，主要实现在前端。
（2）SEO
SEO，即“Search Engine Optimization（搜索引擎优化）”。SEO优化是专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式（国内常见的搜索引擎有百度、360、搜狗等）。
简单来说，你建好了网站并不代表你网站就能被搜索引擎搜索到，我们一般使用百度搜索资料时，搜索出来的网页有很多，但是我们一般看了搜索结果的第一、二页就不再往下看了。SEO，就是为了我们的网站能排在搜索结果的前面，这样你的网站才会有流量。你做网站，相信你也是想让你网站有更多人浏览的吧。
二、基础内容
1.基础总结
1、从web1.0到web2.0，网页制作已经变为前端开发了。现在对于前端开发，你要学的不是什么“网页三剑客”，而是“HTML+CSS+JavaScript”；
2、前端技术核心元素的是HTML、CSS和JavaScript，但是我们还要学习一些Ajax、SEO知识；
3、前端技术只能开发静态网页，而进一步学习了后端技术，你能开发一个用户交互性更好、功能更加强大的网站；
4、后端技术有ASP.NET（或PHP）、SQL Server等；
5、学习路线：HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门（或PHP入门）→Ajax→ASP.NET进阶（或PHP进阶）；
6、学习HTML就是学习各种标签，然后针对你想要的内容来使用相应的标签；
7、HTML标签即“HTML元素”；
2.HTML的基本标签
(1)HTML标签
整个网页是从<html>这里开始的，然后到</html>结束。
(2)head标签
head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
(3)body标签
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。
后续课程讲解的标签都是在<body>标签内部的各种标签。
3、段落与文字
(一)、段落标签
(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等。
4、列表
3种列表的语义记忆：
(一)、HTML3种列表
列表有3种：有序列表、无序列表和定义列表。
有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是无序列表，请大家重点掌握。
目录列表和菜单列表已经被废除，大家可以直接忽略这两种列表。
学习了CSS入门教程之后，有序列表列表项符号由list-style-type属性定义，到时候应该摒弃type属性。
说明：
<dl>即“definition list（定义列表）”，<dt>即“definition term（定义名词）”，而<dd>即“definition description（定义描述）”。
在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。
(三)、表格完整结构
表格完整结构应该包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）4部分。
表格语义化之后，使得代码更清晰和更利于后期维护。
语法：
说明：
<thead>、<tbody>和<tfoot>这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“<tr></tr>”表示一行。
(四)、合并行和合并列
合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。
(1)、合并行
语法：
<td rowspan="跨度的行数">
在浏览器预览效果如下：
(2)、合并列
语法：
<td colspan="跨度的列数">
在浏览器预览效果如下：
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格式图片图像效果很差，但是可以制作动画。
7、链接
超链接使用a标签，语法如下：
<a href="链接地址" target="目标窗口的打开方式">
我们只需要掌握“_self”和“_blank”这两个属性值就可以了，其他两个用不到。
超链接根据链接对象的不同分为：
（1）外部链接
（2）内部链接：①内部页面链接；②锚点链接；
8、表单
表单标签共有4个：<input>、<textarea>、<select>和<option>。其中<select>和<option>是配合使用的。
(一)、input标签表单
大部分表单都是用input标签完成的。
语法：
<input type="表单类型"/>
说明：
表1中的表单都是使用input标签，所不同的就是type属性值不同。
(二)、textarea标签表单
(1)、多行文本框
语法：
<textarea rows="行数" cols="列数">多行文本框内容</textarea>
表现形式如下：
(2)、3种文本框对比
单行文本框和密码文本框使用<input>标签，而多行文本框使用<textarea>标签。
①单行文本框
语法：
<input type="text" value="默认文字" size="文本框长度" maxlength="最多输入字符数"/>
①密码文本框
语法：
<input type="password">
①多行文本框
语法：
<textarea rows="行数" cols="列数">多行文本框内容</textarea>
(三)、select和option
下拉列表由<select>标签和<option>标签配合使用。
语法：
表现形式如下：
9、多媒体
(一)、插入音频、视频和flash
在网页中插入音频、视频和flash都是使用embed标签。
语法：
<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed>
说明：
多媒体文件地址可以是相对地址，也可以是绝对地址。
width和height使用px作为单位。
(二)、插入背景音乐
为某个网页设置背景音乐，使用的是bgsound标签。不过bgsound标签只适用于IE浏览器，在Firefox等浏览器中未必适用。
设置网页背景音乐时常用的方法除了使用bgsound标签，还有使用embed标签和object标签。
语法：
<bgsound src="背景音乐的地址"/>
说明：
loop="2"表示重复2次，loop="infinite"表示无限次循环播放，也可以使用loop="-1"表示无限次循环播放。
10、浮动框架iframe
(一)、浮动框架iframe简介
由于HTML5已经舍弃了frameset标签（框架集标签），所以在这一章，我们不讲解框架集frameset，只讲解一个标签：iframe标签（浮动框架标签）。
浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的子窗口，整个页面并不一定是框架页面，但要包含一个框架窗口。<iframe>框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置，这极大地扩展了框架页面的应用范围。
<frameset>生成的框架结构是依赖上级空间尺寸的，它的宽度或者高度必须有一个和上级框架相同。而<iframe>浮动框架可以完全由指定宽度和高度决定。
语法：
<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高"></iframe>
说明：
src属性是iframe的必须属性，它定义浮动框架页面的源文件地址。
在普通框架结构中，由于框架就是整个浏览器的窗口，因此不需要设置其大小。但是在浮动框架中，框架是插入到普通HTML页面中，所以可以调整框架的大小。浮动框架的宽度和高度都是以像素为单位。width和height这2个都是可选属性。
iframe标签
分析：
在这段代码中，设置了iframe的src属性值为“http://www.baidu.com”（百度首页地址），宽width为400px，高height为300px。
大家在浏览器查看到该页面嵌入了一个子页面，而这个子页面就是百度的首页。
(二)、设置浮动框架是否显示滚动条scrolling
对于浮动框架iframe的的滚动条，我们可以使用scrolling属性来控制。scrolling属性有3种情况：根据需要显示、总是显示和不显示。
语法：
<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高" scrolling="取值"></iframe>
说明：
scrolling属性取值如下：
iframe标签
分析：
大家可以看到，浮动框架iframe的滚动条都消失了。大家可以在“在线测试工具”中修改一下scrolling属性值，看看不同属性值下有什么不同的效果。
浮动框架，说白了就是在一个页面嵌入一个或多个子页面，这样大家好理解了吧。
三、进阶内容
1、HTML、XHTML和HTML5
很多新手往往分不清HTML、XHTML和HTML5,这一节给大家详细讲解一下这三者 的关系和区别。
（一）HTML 和 XHTML
HTML,全称HyperText Mark-up Language (超文本标记语言)，是构成网页文档的 主要语言。我们常说的HTML指的是HTML 4.01。
XHTML,全称 Extensible HyperText Mark-up Language (扩展的超文本标记语言), 它是XML风格的HTML 4.01,我们可以称之为更严格、更纯净的HTML 4.01。
HTML语法书写比较松散，利于开发者编写。但是对于机器，如电脑、手机等来说，语 法越松散，处理起来越困难。因此为了让机器更好地处理HTML,我们才在HTML基础上引入了 XHTML
XHTML相对于HTML来说，在语法上更加严格。XHTML和HTML主要区别如下。
1、XHTML标签必须闭合。
在XHTML中，所有标签必须闭合，例如“<p></p>" “<div></div>”等。此外，空标 签也需要闭合，例如<br>要写成<br/>。
错误写法：<p>欢迎来到绿叶学习网
正确写法：<p>欢迎来到绿叶学习网</p>
2、XHTML标签以及属性必须小写。
在XHTML中，所有标签以及标签属性必须小写，不能大小写混合，也不能全部都是大 写。不过标签的属性值可以大写。
错误写法：<Body><DIV></DlV></Body>
正确写法：<body><div></div></body>
3、XHTML标签属性必须用引号。
在XHTML中，标签属性值必须用引号括起来，单引号、双引号都可以。
错误写法：<input id=txt type=text/>
正确写法：<input id="txt" type="text"/>
4、XHTML标签用jd属性代替name属性。
在XHTML中，除了表单元素之外的所有元素，都应该用id而不是name。
错误写法：<div name="wrapper"></div>
正确写法：<div id="wrapper"></div>
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT