HTML简介
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
HTML发展史
W3C标准
W3C
World Wide Web Consortium（万维网联盟） 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构 http://www.w3.org/ http://www.chinaw3c.org/
W3C标准
包括结构化标准语言（XHTML 、XML） 表现标准语言（CSS） 行为标准（DOM、ECMAScript ）
网页基本信息
DOCTYPE声明 <!DOCTYPE html> 告诉浏览器使用什么规范
<title>标签
<meta>标签
HTML基本结构
注意：< body>、</body>等成对的标签，分别叫开放标签和闭合标签 单独呈现的标签（空元素），如 <hr/> ；意为用 / 来关闭空元素
网页基本信息
DOCTYPE声明
<title>标签
<meta>标签：<meta charset="UTF-8" />
网页的基本标签
标题标签
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>
段落标签
<p>…</p>
换行标签
<br />
水平线标签
<hr />
hr标签：水平线标签，是一个单标签
color属性：设置水平线的颜色
width属性：设置水平线的宽度，值可以是具体的像素值，也可以是百分比
size属性：设置水平线的尺寸（粗细）
align属性：设置水平线对齐方式，常用值left（左对齐），center（居中对齐，默认值），right（右对齐）
字体样式标签
加粗：<strong>…</strong>
斜体：<em>…</em>
注释和特殊符号
图像标签
常见的图像格式
JPG
GIF
PNG
BMP
语法
<img src="path" alt="text" title="text" width="x" height="y" /> (src--图像地址、alt--图像的代替文字、title--鼠标悬停提示文字、width--图像宽度、height--图像高度)
img标签：图像标签，是一个单标签
src属性：设置图像的路径
width属性：设置图像的宽度
height：设置图像的高度， 注意：同时给图像设置宽度和高度，要保持图像本来的宽高比例，否则图像会失真。所以，一般只设置图像的宽度或者高度，另一半会自动根据图像宽高比进行设置
alt属性：当图像不能正常显示的时候，显示alt的属性值
title属性：鼠标悬停在图像上时显示title属性值
链接标签
语法
<a href="path" target="目标窗口位置">链接文本或图像</a>(href--连接路径、target--连接在哪个窗口打开常用值：_self、_blank)
常用的超链接
页面间链接
从一个页面链接到另外一个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com/" target="_blank">百度一下</a><br />
<a href="08图像标签.html">学习图像标签</a><br />
<a href="https://www.baidu.com/">
<img src="img/build.jpg" width="100px"/>
</a>
</body>
</html> 
(牛掰)
锚链接
从A页面的甲位置跳转到本页中的乙位置
从A页面的甲位置跳转到B页面中的乙位置
创建步骤
创建跳转标记
<a name="marker">乙位置</a>
创建跳转链接
<a href="#marker">甲位置</a>
功能性链接
电子邮件
QQ
MSN
行内元素和块元素
块元素
无论内容多少，该元素独占一行（p、h1-h6…）
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)
列表、表格及表单
列表
什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
列表的分类
无序列表
无序列表的特性
没有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
有序列表
有序列表的特性
有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等
定义列表
定义列表的特性
没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况
列表对比
表格
表格的基本语法
<table>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
</table>表格的跨列
<table>
<tr>
<td colspan="n">单元格内容</td>
</tr>
<tr>
<td>单元格内容</td>
……
</tr>
......
</table>表格的跨行
<table>
<tr>
<td rowspan="n"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>表格的跨行和跨列
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr><!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="1px" cellspaing="0" width="500px" height="300px">
<tr>
<td colspan="3">1-1</td>
<!-- <td>1-1</td>
<td>1-1</td> -->
<td>1-1</td>
<td>1-1</td>
</tr>
<tr>
<td>2-2</td>
<td>2-2</td>
<td>2-2</td>
<td>2-2</td>
<td>2-2</td>
</tr>
<tr>
<td rowspan="2">3-3</td>
<td>3-3</td>
<td>3-3</td>
<td>3-3</td>
<td>3-3</td>
</tr>
<tr>
<!-- <td>4-4</td> -->
<td>4-4</td>
<td>4-4</td>
<td>4-4</td>
<td>4-4</td>
</tr>
</table>
</body>
</html>
表单
文本框
<input type="text" name="userName" value="用户名" size="30" maxlength="20" />
密码框
<input type="password " name="pass" size="20" />
单选按钮
<input name="gen" type="radio" value="男" checked />男
<input name="gen" type="radio" value="女" />女
复选按钮
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
列表框
<select name="列表名称" size="行数">
<option value="选项的值" selected="selected">…</option >
<option value="选项的值">…</option >
</select>
按钮
<input type="image" src="images/login.gif" />
<input type="reset" name="butReset" value="reset按钮">
<input type="submit" name="butSubmit" value="submit按钮">
<input type="button" name="butButton" value="button按钮"/>
多行文本域
<textarea name="showText" cols="x" rows="y">文本内容 </textarea>(textarea--多行文本域、cols--显示的列数、rows--显示的行数)
文件域
<textarea name="showText" cols="x" rows="y">文本内容 </textarea >
表单高级应用
隐藏域
<input type="hidden" value="666" name="userid">
只读
<input name="name" type="text" value="张三" readonly>
禁用
<input type="submit " disabled value="保存" >
表单元素的标注
增强鼠标的可用性
自动将焦点转移到改标注相关的表单元素上
<label for="id">标注的文本</label> 表单元素的id
<input type="radio" name="gender" id="male"/> 表单元素id