一、HTML是超文本标记语言
(1）英语
HyperText Markup Language；
(2）结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>
(3) 标签
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题，浏览器标签名
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
（4）HTML其他
1 .HTML注释
任何的程序、代码都有注释，注释就是给程序员看的，不影响程序的;
HTML注释的语法：
2.字符实体
1）< 就是<的字符实体；
2）> 就是>的字符实体；
3）© 就是© 版权符号；
4） 就是空格的实体，防止空白折叠现象；
二、图片
1.能用的图片类型
页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。
不能往网页中插入的图片格式是：psd、ai。
2.语法
插入图片的方法：
<img src="baby.jpg" alt="巴黎结婚照" />
src是img标签的属性，baby.jpg是这个属性的值
alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字（有的浏览器不支持）
三、链接
语法：<a href="1.html">结婚照</a>
1.a标签的另外两个属性
(1）title 悬停文本
(2）target 是否在新窗口中打开
<a href="09_img.html" title="很好看哦" target="_blank">结婚照</a>
blank就是“空白”的意思，就表示新建一个空白窗口
2.页面内的锚点
<a href="#wdzp">点击我就查看我的作品</a>
<h2><a id="gzjy">工作经验</a>
首先设置h2的id，点击href="#wdzp"直接跳转到工作经验。
四、列表
1.无序列表
无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的；
无序列表中的li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li；
注意：ul的作用是增加无序列表的“语义”；ul的子标签，只能是li。但是li是一个容器级标签，li里面什么都能放；
<ul> <li>Coffee</li> <li>Milk</li> </ul>
2.有序列表
ordered list 有序列表，列表项目使用数字进行标记。用ol表示；
<ol> <li>Coffee</li> <li>Milk</li> </ol>
3.定义列表
(1）定义列表也是一个组标签，不过比较复杂，出现了三个标签：
dl表示definition list 定义列表；
dt表示definition title 定义标题；
dd表示definition description 定义表描述词；
dt、dd只能在dl里面；dl里面只能有dt、dd；
定义列表用法非常灵活，可以一个dt配很多dd；
(2）dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：
用什么标签，不是根据样子来决定，而是语义
五、div和span
1.div的语义是division“分割”； span的语义就是span“范围、跨度”
2.div标签是一个容器级标签，里面什么都能放，甚至可以放div自己
3.span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。
4.就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
可理解为：span里面是放置小元素的，div里面放置大东西的。
六、表格
HTML表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<th>班次名称</th>
<th>科目</th>
<th>授课内容</th>
<th>增值服务</th>
<th>课时</th>
<th>价格</th>
<th>试听</th>
<th>购买</th>
</tr>
<tr>
<td rowspan="3">真题精解班</td>
<td>行测+申论</td>
<td>全科历年真题</td>
<td rowspan="3">2套模拟卷</td>
<td>48</td>
<td>1280</td>
<td>耳机</td>
<td>购物车</td>
</tr>
<tr>
<td>行测</td>
<td>全科历年真题</td>
<td>32</td>
<td>980</td>
<td>耳机</td>
<td>购物车</td>
</tr>
<tr>
<td>申论</td>
<td>全科历年真题</td>
<td>16</td>
<td>880</td>
<td>耳机</td>
<td>购物车</td>
</tr>
<tr>
<td rowspan="3">高分技巧班</td>
<td>行测+申论</td>
<td>全科历年真题</td>
<td rowspan="3">2套模拟卷</td>
<td>48</td>
<td>1280</td>
<td>耳机</td>
<td>购物车</td>
</tr>
<tr>
<td>行测</td>
<td>全科历年真题</td>
<td>48</td>
<td>1280</td>
<td>耳机</td>
<td>购物车</td>
</tr>
<tr>
<td>行测</td>
<td>全科历年真题</td>
<td>48</td>
<td>1280</td>
<td>耳机</td>
<td>购物车</td>
</tr>
</table>
</body>
</html>
七、表单
form是英语表单的意思。form标签里面有action属性和method属性，action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
1.文本框
<input type="text" value="默认有的值" />
value表示“值”，value属性就是默认有的值，文本框中已经被填写好了
2.密码框
<input type="password" />
3.单选按钮
<input type="radio" name="xingbie" checked="checked" /> 男
<input type="radio" name="xingbie" /> 女
默认被选择，就应该书写checked=”checked”
4.复选框
<p>
请选择你的爱好：
<input type="checkbox" name="aihao"/> 睡觉
<input type="checkbox" name="aihao"/> 吃饭
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 篮球
<input type="checkbox" name="aihao"/> 乒乓球
<input type="checkbox" name="aihao"/> 打豆豆
</p>
5.下拉列表
select就是“选择”，option“选项”。
select标签和ul、ol、dl一样，都是组标签
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山东</option>
<option>山西</option>
<option>湖北</option>
<option>安徽</option>
</select>
6.多行文本框（文本域）
<textarea cols="30" rows="10"></textarea>
cols属性表示columns“列”，rows属性表示rows“行”
7.三种按钮
1）普通按钮：<input type="button" value="我是一个普通按钮" />
2）提交按钮：<input type="submit" />
3）重置按钮：<input type="reset" />
