1 重要的文本标签
2 自闭合标签
3 html中常用的块标签
注意：
在html中，根据标签（元素）的表现形式，一般分为两类
- 块元素
- 行内元素
在html中，块元素在浏览器显示状态下将独占一行。一般情况下，块元素内部可以容纳其他块元素和行内元素。
4 html中常用的行内元素
在html中，行内元素跟块元素恰恰相反，行内元素可以与其他元素位于同一行。此外，行内元素内部，只可以容纳其他行内元素，不可以容纳块元素。
5 空格的代码是 
html
<p> &nasp;鸭子登高
大象踢腿
黑虎掠过秃鹰
怒爪狐飞群
马尾甩苍蝇
镰刀除草
飞鹰扑影
乌鸦坐飞机
巨斧砍大树
鹞鹰展翅
狮子拜天</p>6 html中的特殊符号
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>特殊符号</title>
</head>
<body>
<p>欧元符号：€</p>
<p>英镑符号：£</p>
</body>
</html>7 有序列表和无序列表
- 有序列表：ol
- 无序列表：ul
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>有序列表</title>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ol>
</body>
</html>7.1 ol的type属性
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>type属性 </title>
</head>
<body>
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ol>
</body>
</html>7.2 ul的type属性
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>type属性</title>
</head>
<body>
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>8 定义列表
- dl: definition list-定义列表
- dt:definition term-定义名词
- dd: definition description-定义描述
在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束；dt标签用于添加要解释的名词；而dd标签用于添加该名词的具体解释。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定义列表</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>制作网页的标准语言，控制网页的结构</dd>
<dt>CSS</dt>
<dd>层叠样式表，控制网页的样式</dd>
<dt>JavaScript</dt>
<dd>脚本语言，控制网页的行为</dd>
</dl>
</body>
</html>9 表格的基本结构
- table：表格标签
- tr：行标签 --table row--表格行
- td：单元格标签 --table data cell --表格单元格
- caption:表格标题
- th:表头单元格 -- table header cell
语法结构
html
<table>
<tr>
<td>单元格 1</td>
<td>单元格 2</td>
</tr>
<tr>
<td>单元格 3</td>
<td>单元格 4</td>
</tr>
</table>示例
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表头单元格</title>
<!--这里使用CSS为表格加上边框-->
<style type="text/css">
table,tr,td{border:1px solid silver;}
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
</tr>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
</body>
</html>9.1 表格的语义化表示
- thead --表头
- tbody --表身
- tfoot --表尾
html
<table>
<caption>表格标题</caption>
<!--表头--><thead>
<tr>
<th>表头单元格 1</th>
<th>表头单元格 2</th>
</tr>
</thead>
<!--表身--><tbody>
<tr>
<td>表行单元格 1</td>
<td>表行单元格 2</td>
</tr>
<tr>
<td>表行单元格 3</td>
<td>表行单元格 4</td>
</tr>
</tbody>
<!--表脚--><tfoot>
<tr>
<td>标准单元格 5</td>
<td>标准单元格 6</td>
</tr>
</tfoot>
</table>
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格语义化</title>
<!--这里使用CSS为表格加上边框-->
<style type="text/css">
table,tr,td{border:1px solid silver;}
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
<tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
</body>
</html>9.2 合并行
html
<td rowspan = "跨越的行数"></td>
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>rowspan属性</title>
<style type="text/css">
table,tr,td{border:1px solid silver;}
</style>
</head>
<body>
<table>
<tr>
<td>姓名:</td>
<td>小明</td>
</tr>
<tr>
<td rowspan="2">喜欢水果:</td>
<td>苹果</td>
</tr>
<tr>
<td>香蕉</td>
</tr>
</table>
</body>
</html>9.3 合并列
html
<td colspan = "跨越的列数"></td>
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>colspan属性</title>
<style type="text/css">
table,tr,td{border:1px solid silver;}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2">前端开发技术</td>
</tr>
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
<td>jQuery</td>
</tr>
</table>
</body>
</html>10 图片标签
html
<img src="" alt="" title="" />11 超链接
11.1 a标签
html
<a href="链接地址">文本或图片</a>图片超链接
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="http://www.lvyestudy.com"><img src="img/lvye.png" alt="绿叶学习网"/></a>
</body>
</html>锚点链接
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<a href="#article">推荐文章</a><br />
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
</div>
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
......<br />
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>朱自清-荷塘月色</li>
<li>余光中-乡愁</li>
<li>鲁迅-阿Q正传</li>
</ul>
</div>
......<br />
......<br />
......<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 />
......<br />
......<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系统</li>
<li>复仇者联盟</li>
</ul>
</div>
</body>
</html>12 表单
- form
- input
- textarea
- select
- option
表单的外观划分
- 单行文本框
- 多行文本框
- 密码文本框
- 单选框
- 复选框
- 按钮
- 文件上传
- 下拉列表
12.1 form 标签
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<form>
<input type="text" value="这是一个单行文本框"/><br/>
<textarea>这是一个多行文本框</textarea><br/>
<select>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
</form>
</body>
</html>input、textarea、select、option都是表单标签，我们必须要放在form标签内部。
form标签的属性
12.2 input标签
html
<input type="表单类型" />
单选框
html
<input type="radio" name="组名" value="取值" />
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
性别:
<input type="radio" name="gender" value="男" checked="checked"/>男 //默认选中男
<input type="radio" name="gender" value="女" />女
</form>
</body>
</html>多选框
html
<input type="checkbox" name="组名" value="取值" />
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
你喜欢的水果：<br/>
<input type="checkbox" name="fruit" value="苹果"/>苹果
<input type="checkbox" name="fruit" value="香蕉"/>香蕉
<input type="checkbox" name="fruit" value="西瓜"/>西瓜
<input type="checkbox" name="fruit" value="李子"/>李子
</form>
</body>
</html>