html是超文本标记语言，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片、表格、链接等。目前互联网上的绝大部分网页都是使用HTML编写的。
<!DOCTYPE HTML>
<!--文档声明-->
<html>
<!--标签、元素、标记-->
<!--有开始和结束标签，必须结束-->
<head>
<!--如果标签中没有标签体，可以自闭-->
<!--标签中可以有一个或者多个属性，格式：key = value-->
<!--meta标签用来指定编码-->
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>First web</title>
</head>
<body>
<!--通过<br/>换行-->
Hello java! <br/>
</body>
</html>
<!DOCTYPE HTML>: html5的文档声明<html>：所有的html都要有这个标签，表示文档的开始和结束（根标签）<head>: 用来存放html中的基本属性信息，比如标题，编码等<body>：用来存放html中的页面数据，在页面中是可以显示的<title>：指定网页的标题<meta charset=UTF-8/>：指定浏览器的解码格式HTML是一门标记语言, 标记也叫做元素或者标签, 标签分为开始标签和结束标签,，如果标签内没有内容要修饰，可以合并一个自闭标签，如: <meta/> <br/> <hr/> <input/> <img/>
注释: <!--注释内容 -->
空格&换行
<br/>
通过不同的标签，HTML文档可以包含不同的内容。比如文本，链接，图片，列表，表格，表单等。
文本标签：<font></font>
标题标签：<h1> ~ <h6>
列表标签
<!--无序列表-->
<ul type = "circle">
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
<!--有序列表-->
<ol>
<li>java</li>
<li>python</li>
<li>c++</li>
</ol>
<img …/>
<!--图片标签-->
<img src="web.png" width="70%" height="" alt="web" />
<a></a>
<a name="place"/>
<!--超链接-->
<!--_self:当前页面打开，_blank:新页面打开，_top:回到顶部-->
<a name = "pic"></a>
<!--图片标签-->
<img src="web.png" width="70%" height="" alt="web" />
</br>
<a href="https://www.baidu.com/" title="" target="_blank">百度一下 baidu.com</a> </br>
<!--回到指定位置-->
<a href="#pic">返回查看图片</a></br>
<a href="#" title="" target="_top">回到顶部</a></br>
表格标签 <table> <tr> <td>
table – 用来定义一个表格
属性 — border：边框；cellspacing：单元格之间的距离；cellpadding：边框和内容之间的距离；bgcolor：背景颜色；width：定义表格的宽度；align：定义表格的位置
tr – 用来定义表格中的行
属性 — bgcolor：背景颜色; align：定义表格的位置
td – 用来定义表格中的单元格
属性 — bgcolor: 背景颜色; align：定义表格的位置; width：定义单元格的宽度; height：定义单元格的高度; colspan：定义单元格横跨的列数; rowspan：定义单元格竖跨的行数
th – 用来定义表头
<!--表格标签-->
<h2 align = "center">这是一个3*3的表格</h2>
<table align = "center" border = "1px" cellspacing = "0" cellpadding = "10" width = "400px">
<tr bgcolor = "#1BBCE0">
<th>第一列</th> <!--表头-->
<th>第二列</th>
<th>第三列</th>
</tr>
<tr> <!--行-->
<td>arr[1][1]</td>
<td>arr[1][2]</td>
<td>arr[1][3]</td>
</tr>
<tr> <!--行-->
<td>arr[2][1]</td>
<td>arr[2][2]</td>
<!--rowspan按行合并单元格-->
<td rowspan = "2" align = "center">合并</td>
</tr>
<tr> <!--行-->
<!--colspan按列合并单元格-->
<td colspan = "2" align = "center">arr[3][1] & arr[3][2] </td>
</tr>
</table>
表单标签 <form>
浏览器向服务器发送数据的两种方式
通过超链接向服务器发送数据，例如
https://www.baidu.com/?user=zhangsan&password=123
在超链接后面通过?拼接参数将数据带给服务器；参数和参数值之间用等号分隔 (key = value)；参数可以有多个, 多个参数之间用&分隔, 并且参数的名字可以重复
通过表单向服务器发送数据
通过表单及表单项标签, 用户可以通过表单项输入数据, 通过提交表单向服务器发送数据.
form 标签
<form action="http://www.baidu.com" method="GET"></form>
action 必须存在的属性, 用来指定表单提交的目的地地址
method 可选属性, 用来指定以何种方式来提交表单, 如果不指定, 默认是GET提交
GET和POST。只有使用表单, 并且明确的指定了提交方式为POST时, 才是POST提交, 其他方式都是GET提交GET提交:
通过在地址栏拼接参数将数据发送给服务器
数据显示在地址栏, 非常不安全
通过地址栏发送数据, 数据量不能太大, 不能超过1kb或者4kb
POST提交:
表单中的项
表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它
通用的属性:
readonly = "readonly": 设置表单项为只读, 只能读不能写, 但是可以被提交
disabled = "disabled": 设置表单项为禁用, 不能被提交
<input>输入框
type属性: 当type属性的值不同时, input标签的功能效果也不同
| type | 功能 |
|---|---|
| text | 文本输入框，通过size设置宽度 |
| password | 密码框 |
| radio | 单选框，name属性值必须一致， 通过value属性指定被提交时的值 |
| checkbox | 复选框 (多选框)，通过value属性指定被提交时的值 |
| submit | 提交按钮 用来提交表单 |
| reset | 重置按钮， 将表单项重置到初始时的状态 |
| button | 普通按钮 |
| file | 文件上传项, 可以选择文件进行上传 |
| hidden | 隐藏域，一般在信息修改的时候用来隐藏用户id |
<textarea>文本域
<textarea cols="30" rows="5">请输入个人信息…</textarea>
cols 设置列数, 即输入框的宽度
rows 设置行数, 即输入框的高度
<select> <option>标签
表单示例：
<body>
<h2 align = "center">注册表单</h2>
<!--get提交会将所有内容放入地址栏-->
<!--请求分为7种，常用的为get和post-->
<!--post通过底层的流将数据提交-->
<form method="get" action="http://www.baidu.com">
<table align = "center" border = "1px" cellspacing = "0" cellpadding = "10" width = "500px">
<tr>
<td>用户名：</td>
<td><input type="text" name="userName"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="psw"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="pswConfig"/></td>
</tr>
<tr>
<td>手机：</td>
<!--不指定name，则不提交-->
<td><input type="text" value = "+86" size = "1"/> <input type="text" name="phone"/></td>
</tr>
<tr>
<td>昵称：</td>
<td><input type="text" name="nickName" value="" /></td>
</tr>
<tr>
<td>性别：</td>
<!--name需要保持一致-->
<!--checked = "checked" 默认选中-->
<td><input type="radio" name="gender" value="m" checked = "checked"/>男<input type="radio" name="gender" value="f" />女</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="Basketball" /> 篮球
<input type="checkbox" name="hobby" value="football" /> 足球
<input type="checkbox" name="hobby" value="
baseball" /> 乒乓球
</td>
</tr>
<tr>
<td>出生地：</td>
<td><select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="xian">西安</option>
<option value="chengdu">成都</option>
<option value="guangzhou">广州</option>
</select></td>
</tr>
<tr>
<td>头像：</td>
<td><input type="file" name="photo" value="选择头像" /></td>
</tr>
<tr>
<td>个人描述：</td>
<td><textarea name="dis" rows="5" cols="30">
</textarea></td>
</tr>
<tr>
<td>验证码：</td>
<td><input type="text" name="yzm" value="" /><img src="yzm.png" width="100" height="30" alt="验证码" /></td>
</tr>
<tr>
<td colspan = "2" align = "center"><input type="submit" value="注册" /> <input type="reset"/>
</td>
</tr>
</table>
</form>
</body>
div span p 标签
这三个标签都可以看作是一个容器, 可以用来包裹其他的 html内容, 被包裹起来的内容形成了一个组, 可以通过css样式对这一组的内容统一设置样式.
div: 独占一行，标签可以把文档分割为独立的、不同的部分。
span：并非独占一行，多个span会并排排列，直到一行排满才会换行，标签被用来组合文档中的行内元素。
p：独占一行，但是元素会自动在其前后创建一些空白，是段落标签。
元素的类型: