一、HTML基础
head标签的内部标签页非常重要，只不过在学习HTML的时候大家只需要感性认知即可。
有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的无序列表。
（2）表格结构标签
1. 前端技术简介
（1）从Web 1.0到Web 2.0，网页制作已经变为前端开发了。现在对于前端开发，要学的不是什么“网页三剑客”（Dreamweaver+Fireworks+Flash），而是HTML+CSS+Javascript。
（2）前端技术核心的元素是HTML、CSS和Javascript，但是我们还要学习一些AJAX、SEO等的知识。
（3）前端技术只能开发静态网页，而进一步学习后端技术后，你能开发一个用户交互性更好、功能更加强大的网站。
2. HTML是什么？
（1）HTML，全称“Hyper Text Markup Language”(超文本标记语言)，它是制作万维网页面的标准语言。简单来 说，网页就是用HTML语言制作的。HTML不是一门编程语言，而是一门描述性的“标记语言”，是一门非常容易入门的语言。
（2）HTML标签即“HTML元素”。
二、HTML基本标签
1. HTML基本结构
（1）HTML标签
整个网页是从<html>这里开始的，然后到</html>结束。
（2）head标签
head标签代表网页的“头”。在<head></head>中往往定义的是一些特殊的内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
|
内部标签
|
说明
|
| <title> |
定义网页的标题
|
|
<meta>
|
定义网页的基本信息（供搜索引擎）
|
|
<style>
|
定义CSS样式
|
|
<link>
|
连接外部CSS文件或脚本文件
|
|
<script>
|
定义脚本语言
|
（3）body标签
body标签代表网页的“身”。<body></body>标签中定义网页展示的内容，这些内容往往都是“可见内容”（在浏览器可见）。
2. HTML注释
HTML注释是为了代码可读易懂，注释的内容在浏览器中不会显示出来。
语法：<!-- 注释的内容 -->
三、段落与文字
1. 标签总结
（1）段落与文字标签
（2）文本格式化标签
|
标签
|
语义
|
说明
|
|
<h1>~<h6>
|
header
|
标题
|
|
<p>
|
paragraph
|
段落
|
| <br> |
break
|
换行
|
|
<hr>
|
horizontal rule
|
水平线
|
|
<div>
|
division
|
分割（块元素）
|
|
<span>
|
span
|
区域（行内元素）
|
|
标签
|
语义
|
说明
|
|
<strong>
|
strong（加强）
|
加粗
|
|
<em>
|
emphasized（强调）
|
斜体
|
|
<cite>
|
cite（应用）
|
斜体
|
|
<sup>
|
superscripted（上标）
|
上标
|
|
<sub>
|
subscripted（下标）
|
下标
|
（3）其他标签
粗体标签：b；斜体标签：i；大字号标签：big；小字号标签：small；删除线标签：s；下划线标签：u
2. 网页特殊符号
对于网页特殊符号，我们只需要记住空格“ ”这一个就行。其他的特殊符号我们不需要记忆，在实际开发中真正需要的时候在回来查询即可。
3. 自闭合标签
在HTML中，HTML标签分为两种：一般标签和自闭合标签。
一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。
一般标签可以在开始符号和结束符号之间插入其他标签或文字，如：<body></body>。自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性，如：<br/>。
4. 块元素和行内元素
（1）HTML元素根据浏览器表现形式分为两类：块元素和行内元素。
（2）块元素特点
① 独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素。
② 块元素内部可以容纳其他块元素或行内元素。
（3）行元素特点
① 可以与其他行内元素位于同一行。
② 行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。
四、列表
1. HTML的三种列表
列表有三种：有序列表、无序列表和定义列表。
|
标签
|
语义
|
说明
|
|
ol
|
order list
|
有序列表
|
|
ul
|
unordered list
| 无序列表 |
|
dl
|
definition list
| 定义列表 |
（1）有序列表
<ol>
<li>有序列表项</li>
<li>有序列表项</li>
</ol>
（2）无序列表
<ul>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
（3）定义列表
<dl>
<dt>定义名词</dt>
<dd>定义描述</dd>
</dl>
2. HTML学习中的误区
学习HTML，就是在你需要的地方用到正确的并且符合语义的标签。把标签用“对”，这才是学习HTML的目的。例如一段文字，应该用p标签，而不是使用div标签或者其他标签。网页语义结构良好，对于搜索引擎来说也是极为重要的一点。
五、表格
1. 表格标签
（1）表格基本标签
|
标签
| 语义 |
说明
|
|
table
|
table（表格）
|
表格
|
|
tr
|
table row（表格行）
|
行
|
|
td
|
table data cell（表格单元格）
|
单元格
|
|
标签
|
语义
|
说明
|
|
thead
|
table head
|
表头
|
|
tbody
|
table body
|
表身
|
|
tfoot
|
table foot
|
表脚
|
|
th
|
table header
| 表头单元格 |
2. 合并行和合并列
（1）合并行
语法：<td rowspan="跨度的行数">
（2）合并列
语法：<td colspan="跨度的列数">
六、图像
1. 图像标签
在HTML中，图像标签为<img/>。<img/>是一个自闭合标签。
语法：<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）" />
| 属性 |
说明
|
|
src
| 图像的文件地址 |
|
alt
|
图片显示不出来时的提示文字
|
|
title
|
鼠标移到图片上的提示文字
|
src和alt这两个属性时img标签必不可少的属性，而title属性可有可无。
2. 路径
相对路径，指的是在同一个网站下，不同文件之间的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对路径。
绝对路径，指的是文件的完整路径。
3. 图像格式
图像格式知识比较多，不过对于大部分内容，我们了解就可以了，我们只需要掌握JPG、PNG和GIF三种图片格式的区别即可。
（1）JPG可以很好处理大面积色调的图像，如相片、网页中一般的图片。
（2）PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是.PNG格式图片支持透明信息。PNG格式可以称为“网页设计专用格式”。
（3）GIF格式图像效果很差，但是可以制作动画。
七、超链接
1. 在HTML中，超链接使用a标签，语法如下：
<a href="链接地址" target="目标窗口的打开方式">
2. a标签target属性取值如下。
|
属性值
|
说明
|
|
_self
|
默认方式，即在当前窗口打开链接
|
|
_blank
|
在一个全新的空白窗口中打开链接
|
|
_top
|
在顶层框架中打开链接
|
|
_parent
| 在当前框架的上一层里打开链接 |
我们只需要掌握“_self”和“_blank”这两个属性值就可以了，其他两个用不到。
3. 超链接根据链接对象不同分为：
（1）外部链接；
（2）内部链接：①内部页面链接；②锚点链接。
八、表单
1. input标签
在HTML中，大部分表单都是用input标签完成的。语法：<input type="表单类型" />
|
type属性值
|
说明
|
|
text
|
单行文本框
|
|
password
|
密码文本框
|
|
button
|
按钮
|
|
reset
|
重置按钮
|
|
image
|
图像形式的提交按钮
|
|
radio
|
单选按钮
|
|
checkbox
|
复选框
|
|
hidden
|
隐藏字段
|
|
file
|
文件上传
|
2. textarea标签
语法：<textarea rows="行数" cols="列数">多行文本框内容</textarea>
3. select和option
下拉列表有select标签和option标签配合使用
语法：
<select multiple="multiple" size="可见列表项的数目">
<option value="选项值" selected="selected">选项显示的内容</option>
......
<option value="选项值">选项显示的内容</option>
</select>
九、其他
1. 多媒体（embed）：在网页中插入音频、视频、flash和背景音乐等多媒体，我们都可以使用embed标签来实现，非常简单。
2.框架（iframe）：浮动框架，说白了就是在一个页面嵌入一个或多个子页面。
175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
