一、参考教程
二、基础语法
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
在本教程中，您将学习如何使用 HTML 来创建站点。
1. 第一个实例
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
实例解析
| 标签名 | 含义 |
|---|---|
| <!DOCTYPE html> | 声明为 HTML5 文档 |
| <html> | 元素是 HTML 页面的根元素 |
| <head> | 元素包含了文档的元（meta）数据 |
| <title> | 元素描述了文档的标题 |
| <body> | 元素包含了可见的页面内容 |
| <h1> | 元素定义一个大标题 |
| <p> | 元素定义一个段落 |
HTML 网页结构
下面是一个可视化的HTML页面结构：
只有 <body>区域 (白色部分) 才会在浏览器中显示。
什么是HTML?
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML** 标签及文本**内容
- HTML文档也叫做** web 页面**
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落。</p>
Web 浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：
HTML版本
从初期的网络诞生后，已经出现了许多HTML版本:
| 版本 | 发布时间 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
<!DOCTYPE> 声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
通用声明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。
学生信息录入页
- 学生信息
html多媒体展示（面试录音、模拟面试录像）
- 视频
- 音频
资源导航页
- 博客、在线教程
- 安装软件下载
- 代码管理
导航主页
- 页面布局
- 页面集成
- 菜单页美化
按钮换成图片或背景颜色
鼠标移动、点击、移开改变颜色
对输入内容做校验
重置输入项
添加技能多选框
菜单做成横向下拉框，或者纵向菜单栏
加背景图片或颜色
初始界面
最终界面
<!doctype html>
<html>
<head>
<title>学生信息系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1 align="center">学生信息系统</h1>
<table border="0" cellpadding="0" cellspacing="0" align="center" >
<tr >
<td>姓名：</td>
<td >
<input size="20" type="text">
<span style="color:red">*</span></td>
</tr>
<tr>
<td>头像：</td>
<td>
<input type="file" size="20">
</td>
</tr>
<tr >
<td>性别：</td>
<td>
<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
<span style="color:red">*</span>
</td>
</tr>
<tr >
<td>年龄：</td>
<td>
<input type="date" style="width:168px" value="1990-01-01">
<span style="color:red">*</span>
</td>
</tr>
<tr >
<td>学历：</td>
<td>
<select style="width:173px" size="1">
<option>---请选择---</option>
<option>硕士</option>
<option>本科</option>
<option>大专</option>
<option>高中</option>
<option>初中</option>
</select>
</td>
</tr><tr >
<td>介绍人：</td>
<td>
<input type="text" size="20" value="无">
</td>
</tr><tr >
<td>入学时间：</td>
<td>
<input type="date" style="width:168px" value="2018-03-01">
</td>
</tr><tr >
<td>班级：</td>
<td>
<select style="width:173px" size="1">
<option>---请选择---</option>
<option>1707初级班</option>
<option>1709初级班</option>
<option>1709高级班</option>
<option>1711初级班</option>
<option>1711高级班</option>
<option>1801初级班</option>
<option>1801高级班</option>
<option>1803初级班</option>
<option>1803高级级班</option>
</select>
</td>
</tr><tr >
<td>导师：</td>
<td>
<select style="width:173px" size="1">
<option>---请选择---</option>
<option>李晓阳</option>
<option>戈维维</option>
<option>马超</option>
<option>闫松林</option>
<option>李苏云</option>
<option>戴全明</option>
<option>周启明</option>
<option>曾春苗</option>
</select>
<span style="color:red">*</span>
</td>
</tr>
<tr >
<td>小组：</td>
<td>
<input type="number" min="1" max="9" step="1" style="width:168px">
</td>
</tr>
<tr >
<td colspan="2" align="center">
<i>提示：带<span style="color:red">*</span>的必须填写</i>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" >
</td>
</tr>
<tr align="center">
<td colspan="2">
<a href="http://www.taobao.com">
<span style="color:red">淘宝网-淘！我喜欢</span>
</a>
</td>
</tr>
</table>
</body>
</html>
浏览器兼容性问题
IE查看效果
-
浏览器禁用缓存
image.png
- 设置tomcat支持URL中文路径
添加内容：URIEncoding="utf-8"
