一、HTML概述
1、什么是HTML?
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
2、HTML 标签
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
3、HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落。</p>
4、HTML 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> #设置网页编码为UTF-8
<title>Title</title> #设置网页标题，将会显示在网页标签上
</head>
<body>
</body>
</html>
DOCTYPE 声明了文档类型
<html></html>这对标签中是html网页所有代码
<head></head>这对标签并不会在页面中显示出来，其主要是做一些网页设置项，如编码，外链css，标题，网页描述等
<body></body>这对标签中的内容会显示在页面中
二、HTML标签
1、head标签中的标签
（1）meta标签
<meta http-equiv="Refresh" content="3"> #3秒后自动刷新
<meta http-equiv="Refresh" content="3;url=http://www.baidu.com"> #3秒后自动跳转到url所设定的地址
<meta name="keywords" content="word1,word2"> #关键字，用于被搜索引擎收录
<meta name="description" content="描述信息"> #网站描述信息
<meta http-equiv="X-UA-Compatible" content="IE=IE10;IE9;IE8;IE7" /> #兼容性设置，从高到低兼容IE10，9，8，7以上的标准
（2）link标签
<link rel="stylesheet" type="text/css" href=""> #外链css，href中写css文件的路径
<link rel="shortcut icon" href=""> #title图标，href中写图标文件路径
（3）stytle、script标签
<scrip></scrip> #内嵌js代码
<style></style> #内嵌css代码
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script> #外联js文件
2、body标签中的标签
（1）标签分类
所有的标签分为两类，一类是块级标签，一种是行内标签。
块级标签：标签单独占一行
行内标签：标签中内容有多长，就占多长
（2）特殊符号
html中特殊符号需要使用代码来标识
´ | ´ | © | © | > | > | µ | µ | ® | ® |
& | & | ° | ° | ¡ | ¡ | | | » | » |
¦ | ¦ | ÷ | ÷ | ¿ | ¿ | ¬ | ¬ | § | § |
• | • | ½ | ½ | « | « | ¶ | ¶ | ¨ | ¨ |
¸ | ¸ | ¼ | ¼ | < | < | ± | ± | × | × |
¢ | ¢ | ¾ | ¾ | ¯ | ¯ | “ | " | ™ | ™ |
€ | € | £ | £ | ¥ | ¥ | | | | |
„ | „ | … | … | · | · | › | › | ª | ª |
ˆ | ˆ | “ | “ | — | — | ’ | ’ | º | º |
† | † | ‹ | ‹ | – | – | ‚ | ‚ | ” | ” |
‡ | ‡ | ‘ | ‘ | ‰ | ‰ | | ­ | ˜ | ˜ |
≈ | ≈ | ⁄ | ⁄ | ← | ← | ∂ | ∂ | ♠ | ♠ |
∩ | ∩ | ≥ | ≥ | ≤ | ≤ | ″ | ″ | ∑ | ∑ |
♣ | ♣ | ↔ | ↔ | ◊ | ◊ | ′ | ′ | ↑ | ↑ |
↓ | ↓ | ♥ | ♥ | − | − | ∏ | ∏ | ‍ | |
♦ | ♦ | ∞ | ∞ | ≠ | ≠ | √ | √ | ‌ | |
≡ | ≡ | ∫ | ∫ | ‾ | ‾ | → | → | | |
α | α | η | η | μ | μ | π | π | θ | θ |
β | β | γ | γ | ν | ν | ψ | ψ | υ | υ |
χ | χ | ι | ι | ω | ω | ρ | ρ | ξ | ξ |
δ | δ | κ | κ | ο | ο | σ | σ | ζ | ζ |
ε | ε | λ | λ | φ | φ | τ | τ | | |
Α | Α | Η | Η | Μ | Μ | Π | Π | Θ | Θ |
Β | Β | Γ | Γ | Ν | Ν | Ψ | Ψ | Υ | Υ |
Χ | Χ | Ι | Ι | Ω | Ω | Ρ | Ρ | Ξ | Ξ |
Δ | Δ | Κ | Κ | Ο | Ο | Σ | Σ | Ζ | Ζ |
Ε | Ε | Λ | Λ | Φ | Φ | Τ | Τ | ς | ς |
HTML 原代码 | 显示结果 | 描述 |
< | < | 小于号或显示标记 |
> | > | 大于号或显示标记 |
& | & | 可用于显示其它特殊字符 |
" | “ | 引号 |
® | ® | 已注册 |
© | © | 版权 |
™ | ™ | 商标 |
  | 半个空白位 | |
  | 一个空白位 | |
| | 不断行的空白 |
（3）各种标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>这是一个段落</p>
<br /><!-- 这是一个换行标签 -->
<h1>这是H1标签</h1>
<h2>这是H2标签</h2>
<h3>这是H3标签</h3>
<h4>这是H4标签</h4>
<h5>这是H5标签</h5>
<h6>这是H6标签</h6>
<span>这是一个span标签</span><span>这又是一个span标签</span>
<div>这是一个div标签</div><div>这又是一个div标签</div>
</body>
</html>
（4）a标签
a标签标示的是一个超链接，其有两种作用
超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com">这是一个本页面中跳转的超链接</a>
<a href="http://www.baidu.com" target="_blank">这是一个新页面中打开的超链接</a>
<a href="#">这是一个空连接</a>
</body>
</html>
锚点:点击锚点时，页面会跳转到锚点所指的部分，设置锚点的格式为href="#id"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<div id="i1" style="height: 500px;">第一章内容</div>
<a href="#top">回到顶部</a>
<p></p>
<div id="i2" style="height: 500px;">第二章内容</div>
<a href="#top">回到顶部</a>
</body>
</html>
（5）img标签，列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="./html/car.jpg" alt="这是一个图片" title="鼠标放置时显示的文字">
<ul>
<li>无序列表ul第一项</li>
<li>无序列表ul第二项</li>
<li>无序列表ul第三项</li>
</ul>
<ol>
<li>有序列表ol第一项</li>
<li>有序列表ol第二项</li>
<li>有序列表ol第三项</li>
</ol>
<dl>
<dt>标题1</dt>
<dd>项目1</dd>
<dd>项目2</dd>
<dt>标题2</dt>
<dd>项目1</dd>
<dd>项目2</dd>
</dl>
</body>
</html>
（6）form、input、select、textarea标签
input标签的type类型：
type="text":文本框
type="password"：密码文本框
type="button"：按钮
type="submit"：提交按钮
type="radio"：单选框
type="checkbox"：多选框
type="file"：上传文件
type="reset"：重置按钮
<form action="https://www.sogou.com/web" name="query"> #action属性表示将表单数据提交到后台的文件或url，name表示提交数据时的变量名
<input type="text" name="username" value="用户名" />
<input type="password" name="pwd" />
<input type="button" value="按钮" />
<input type="submit" value="提交" />
<P>单选</P>
男:<input type="radio" name="sex" value="1" checked /> #checked表示默认选中，radio表示单选，单选项需有相同name值
女:<input type="radio" name="sex" value="0" />
<p>多选</p>
篮球:<input type="checkbox" name="favor" value="1" /> #checkbox表示多选，
足球:<input type="checkbox" name="favor" value="2" />
台球:<input type="checkbox" name="favor" value="3" />
网球:<input type="checkbox" name="favor" value="4" />
排球:<input type="checkbox" name="favor" value="5" />
<p>上传文件</p>
<input type="file" /> #file表示上传文件，其需要在form中设置属性enctype="multipart/form-data"
<p>重置</p>
<input type="reset" value="重置" /> #重置按钮，将所有选项重置为默认值
</form>
<form action="https://www.sogou.com/web" name="query">
<textarea cols="30" rows="20">默认值</textarea> #多行文本框
<p>城市</p>
<select name="province"> #下拉列表
<option value="1" selected="selected">山西</option> #选项，selected表示默认选中
<option value="2">山东</option>
<option value="3">湖南</option>
<option value="4">湖北</option>
</select>
<select name="city" multiple="multiple" size="2"> #多选下拉列表，size表示默认显示几个选项，multiple表示多选下拉列表
<option value="1" selected="selected">太原</option>
<option value="2">济南</option>
<option value="3">长沙</option>
<option value="4">武汉</option>
</select>
<select name="area">
<optgroup label="北京"> #分组下拉列表分组名，label值是分组名
<option value="1">海淀区</option>
<option value="2">昌平区</option>
<option value="3">朝阳区</option>
</optgroup>
<optgroup label="太原">
<option value="1">迎泽区</option>
<option value="2">小店区</option>
<option value="3">晋源区</option>
</optgroup>
</select>
</form>
（7）table标签
<table border="1"> #表格标签，border="1"表示显示边框
<tr> #行
<td>第一行第一列</td> #列
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
<br>
<br>
<table border="1">
<thead> #表头
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
</thead>
<tbody> #表身
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</tbody>
</table>
<br>
<br>
<table border="1">
<tr>
<td colspan="2">1</td> #colspan设置该单元格占几列
<td>2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="3">1</td> #rowspan设置该单元格占几行
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
（8）label标签
label标签和input标签联合使用，当点击label标签后，对应的input会获取输入光标
<form>
<label for="te">用户名</label>
<input type="text" id="te">
</form>
