<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<meta charset="UTF-8">
<!--设定编码方式-->
<title>Title</title>
<!--置html文档的标题，在浏览器上显示的名字，这里的html文件的名称就是title-->
<meta name="keywords" content="我这个网站的关键词">
<!--定义我这个html的关键词，通过爬虫爬网站就根据这个来的-->
<meta name="description" content="定义我这个网站的描述">
<meta http-equiv="Refresh" content="2;http://www.baidu.com">
<!--做刷新用的，2秒钟后网页跳转到百度这个网站-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--，主要为了兼容ie浏览器，因为ie浏览器有完全遵守w3，所有ie对html的渲染支持的不够友好。对于别的浏览器-->
<meta name="viewport" content="width=device-width,inital-scale=1.0">
<!--这个主要是为了兼容其他的页面，比如手机，这里的意思html文件的大小和设备大小一致，且不进行缩放-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!--rel指定图片的路径，可以是网上的图片，也可以是本地的图片，引入一个小图标，在浏览器的窗口上显示一个小的图标，这个图标必须是icon的格式-->
<!--6、div标签，div标签就是没有任何作用，主要是匹配css做处理,需要大量对标签做渲染，这里就会用到div标签，div标签还是一个快级标签-->
hello div<div>这是一个div标签</div>
<!--7、span标签，span标签和div标签的作用是一样的，唯一的区别就是span标签是内联标签，div标签是块级标签-->
hello span<span>这是一个span标签</span>
<!--8、a标签，超链接标签,a标签是内联标签-->
<div><a href="http://www.163.com" title="xxxxx">网易一下</a></div>
<!--在当前的页面打开网易这个页面-->
<!--title的效果是鼠标放上去的悬浮显示的内容-->
<div><a href="http://www.baidu.com" target="_blank">百度一下</a></div>
<!--target="_blank"的作用是在新的tab页面打开百度这个网页-->
<!--a标签不仅仅可以实现跳转到其他网页，还可以实现跳转到指定id的标签-->
<div>
<a href="#id">跳转到id为id的标签</a>
</div>
<!--9、b标签,给字体加粗的功能-->
<div><b>给字体加粗的标签</b></div>
<!--10、斜体的标签-->
<div><em>给字体变为斜体的标签</em></div>
<!--11、给字体花中线的标签-->
<div><del>划线标签</del></div>
<!--12、sub是下角标，sup是上角表-->
2<sub>3</sub>
2<sup>3</sup>
<!--13、 代表一个空格的意思,<代表小于的意思, >代表大于的意思-->
xxxxx yyyy
<div>2<3</div>
<div>5>4</div>
<!--14、img标签，引入图片的标签，还可以设置各种属性width，height，alt，title-->
<img src="D: est.png" width="50px" height="80px" alt="图片加载失败，上面就会显示的名称" title="悬浮显示的名称">
<!--还可以实现点击图标实现超连接的跳转-->
<div>
<a href="http://www.baidu.com">
<img src="D: est.png">
</a>
</div>
<!--15、ul和ol标签，是列表标签,产生一个列表的效果，ul前无序号，ol前有序号-->
<ul>
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
<li>第四列</li>
<li>第五列</li>
</ul>
<ol>
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
<li>第四列</li>
<li>第五列</li>
</ol>
<dl>
<dt>第一章</dt>
<dd>第一章：第一节</dd>
<dd>第一章：第二节</dd>
<dd>第一章：第三节</dd>
<dt>第二章</dt>
<dd>第二章：第一节</dd>
<dd>第二章：第二节</dd>
<dd>第二章：第三节</dd>
<dt>第三章</dt>
<dd>第三章：第一节</dd>
<dd>第三章：第二节</dd>
<dd>第三章：第三节</dd>
</dl>
<!--16、table标签-->
<!--border="1"的作用是给表格加一个边框-->
<table border="1">
<caption>测试的表格</caption>
<thead>
<tr>
<th>
表头第一列
</th>
<th>
表头第二列
</th>
<th>
表头第三列
</th>
</tr>
</thead>
<tbody>
<tr>
<td>表身体第一行：第一列</td>
<td>表身体第一行：第二列</td>
<td>表身体第一行：第三列</td>
</tr>
<tr>
<td>表身体第二行：第一列</td>
<td>表身体第二行：第二列</td>
<td>表身体第二行：第三列</td>
</tr>
<tr>
<td>表身体第三行：第一列</td>
<td>表身体第三行：第二列</td>
<td>表身体第三行：第三列</td>
</tr>
</tbody>
</table>
<table border="1">
<caption>测试合并单元格横向合并</caption>
<thead>
<tr>
<th>
表头第一列
</th>
<th>
表头第二列
</th>
<th>
表头第三列
</th>
</tr>
</thead>
<tbody>
<tr>
<!--colspan="3"作用是横向合并-->
<td colspan="3">表身体第一行：第一列</td>
<!--<td>表身体第一行：第二列</td>-->
<!--<td>表身体第一行：第三列</td>-->
</tr>
<tr>
<td>表身体第二行：第一列</td>
<td>表身体第二行：第二列</td>
<td>表身体第二行：第三列</td>
</tr>
<tr>
<td>表身体第三行：第一列</td>
<td>表身体第三行：第二列</td>
<td>表身体第三行：第三列</td>
</tr>
</tbody>
</table>
<table border="1">
<caption>测试合并单元格纵向合并</caption>
<thead>
<tr>
<th>
表头第一列
</th>
<th>
表头第二列
</th>
<th>
表头第三列
</th>
</tr>
</thead>
<tbody>
<tr>
rowspan="3">：作用是纵向合并单元格
<td rowspan="3">表身体第一行：第一列</td>
<td>表身体第一行：第二列</td>
<td>表身体第一行：第三列</td>
</tr>
<tr>
<!--<td>表身体第二行：第一列</td>-->
<td>表身体第二行：第二列</td>
<td>表身体第二行：第三列</td>
</tr>
<tr>
<!--<td>表身体第三行：第一列</td>-->
<td>表身体第三行：第二列</td>
<td>表身体第三行：第三列</td>
</tr>
</tbody>
</table>
<!--17、form标签，最重要的标签,可以实现和服务端进行交互,传输数据用的-->
<!--input标签的属性-->
<!--text：就是一个文本输入框-->
<!--submit:可以将数据提交到后台的框-->
<!--password:是一个密码的输入框-->
<!--checkbox:是一个复选框，可以实现多选-->
<!--radio:是一个单选框，需要借助一个name的属性，把只能单选的radio的标签的name的值设置为相同的-->
<!--button:也是一个触发框，但是不给后台提交数据，主要是用和js结合使用，比如点击颜色变为红色之类的-->
<!--file:是一个上传文件的标签-->
<!--reset:清空输入框的输入的内容-->
<!--form标签的属性-->
<!--method:向后台提交数据的方式，get，post两种方式提交-->
<!--action:提交数据的后台的路径,url，server的网址-->
<!--enctype="multipart/form-data":上传文件的时候加上这个选项，是把文件一段一段的上传，-->
<form method="post" action="http://www.baidu.com" enctype="multipart/form-data">
<div>姓名:<input type="text" name="name"></div>
<div>性别:<input type="text" name="mail"></div>
<!--这里提交到后台的数据格式为-->
<!--name:输入的姓名-->
<!--mail:输入的性别-->
<div>密码:<input type="password" name="password"></div>
<div>爱好:篮球<input type="checkbox" name="hobby" value="100"></div>
<div>爱好:足球<input type="checkbox" name="hobby" value="101"></div>
<div>爱好:排球<input type="checkbox" name="hobby" value="102"></div>
<!--复选框如果选择多个，怎么形成一个键值对到后台呢？这里需要借助2个属性，name和value-->
<!--如果选择一个，则为name:100-->
<!--如果选择2个，则为name;[100,101]-->
<!--如果选择3个，则为name:[100,101,102]-->
<div>性别:男:<input type="radio" name="abc"></div>
<div>性别:女:<input type="radio" name="abc"></div>
<div>
<input type="file">
</div>
<div>
重置:<input type="reset">
</div>
<div>提交:<input type="submit" value="press"></div>
<div>触发:<input type="button" value="press"></div>
</form>
<!--select:实现一个下拉框的标签-->
<!--默认只显示第一个内容，且只能单选，无默认选中项-->
<!--提交数据的格式为k为choice,values的值为choice1或者choice2，这个就看你选择哪个了-->
<select name="choice">
<option value="choice1">选项1</option>
<option value="choice2">选项2</option>
<option value="choice3">选项3</option>
<option value="choice4">选项4</option>
</select>
<!--默认只显示第2个内容，且只能单选，无默认选中项-->
<select size="2" name="choice">
<option value="choice1">选项1</option>
<option value="choice2">选项2</option>
<option value="choice3">选项3</option>
<option value="choice4">选项4</option>
</select>
<!--默认只显示2个内容，且可以多选，无默认选中项-->
选项:<select size="2" multiple="multiple">
<option value="choice1">选项1</option>
<option value="choice2">选项2</option>
<option value="choice3">选项3</option>
<option value="choice4">选项4</option>
</select>
<!--默认只显示第一个内容，且可以多选，有默认选中项-->
<select size="2" multiple="multiple">
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
<option selected="selected">选项4</option>
</select>
<!--实现的效果就是实现一个下拉框，按照选项进行了分类-->
<!--那下面这种select该如何提交数据呢？-->
<div>
<select name="bf">
<optgroup label="第一集团军">
<option value="bf1">北伐军1</option>
<option value="bf2">北伐军2</option>
</optgroup>
<optgroup label="第二集团军">
<option value="bf3">北伐军3</option>
<option value="bf4">北伐军4</option>
</optgroup>
</select>
</div>
<!--textarea:一个输入框-->
<!--控制行数rows-->
<!--控制列数cols-->
<div>
<textarea rows="10" cols="20">
自我简介
</textarea>
</div>
<!--label：标签，实现一个联动的小效果，点击用户名，鼠标的光标就会到for指向的id的标签的输入框中-->
<label for="ttt">用户名</label>
<input id="ttt" type="text">
</body>
</html>
1、标题标签
h标签
2、段落标签
p
3、换行
br
4、空格
5、大于号，小于号
>
<
6、双引号
"
7、版权符号
©
8、注册符
®
---------------------------------------------------------------------------------------------------
1、无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
2、无序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
3、自定义列表
<dl>
<dt>深圳</dt>
<dd>深圳1</dd>
<dd>深圳2</dd>
<dd>深圳3</dd>
<dt>广州</dt>
<dd>广州1</dd>
<dd>广州2</dd>
<dd>广州3</dd>
</dl>
3、超链接标签
<a href="www.baidu.com" target="_blank" title="xxxxx">百度一下</a>
超连接到的地址就是href属性的值"www.baidu.com"
你的鼠标放在百度一下的文字上浮动框显示的内容title属性的值"xxxxx"
target的属性的值的意思就是点击百度一下会重新打开一个tab页面,如果没有设置target属性
则默认会在当前窗口打开这个页面，也就是属性的值是“self”
4、表格标签,tr表示行，td表示列
4_1、table的属性
width设置宽度，height设置高度，align设置表格左右对齐
bgcolor设置背景颜色,cellspacing设置单元格和单元格之间的间距,cellpading设置单元格边框和文字之间的距离
4_2、tr的属性
align属性：设置文字在单元格中的位置，比如靠左，靠右，中间
bgcolor属性：背景属性
4_3、td的属性
align:水平对齐
valign:垂直对齐
<!--border="1"的作用是给表格加一个边框-->
<table border="1" width="100px" height="100px" align="left" bgcolor="red" cellspacing="2px" cellpadding="2px">
<caption>测试的表格</caption>
<thead>
<tr>
<th>
表头第一列
</th>
<th>
表头第二列
</th>
<th>
表头第三列
</th>
</tr>
</thead>
<tbody>
<tr>
<td>表身体第一行：第一列</td>
<td>表身体第一行：第二列</td>
<td>表身体第一行：第三列</td>
</tr>
<tr>
<td>表身体第二行：第一列</td>
<td>表身体第二行：第二列</td>
<td>表身体第二行：第三列</td>
</tr>
<tr>
<td>表身体第三行：第一列</td>
<td>表身体第三行：第二列</td>
<td>表身体第三行：第三列</td>
</tr>
</tbody>
</table>
表格还可以做合并单元格的处理
<table border="1">
<caption>测试合并单元格横向合并</caption>
<thead>
<tr>
<th>
表头第一列
</th>
<th>
表头第二列
</th>
<th>
表头第三列
</th>
</tr>
</thead>
<tbody>
<tr>
<!--colspan="3"作用是横向合并-->
<td colspan="3">表身体第一行：第一列</td>
<!--<td>表身体第一行：第二列</td>-->
<!--<td>表身体第一行：第三列</td>-->
</tr>
<tr>
<td>表身体第二行：第一列</td>
<td>表身体第二行：第二列</td>
<td>表身体第二行：第三列</td>
</tr>
<tr>
<td>表身体第三行：第一列</td>
<td>表身体第三行：第二列</td>
<td>表身体第三行：第三列</td>
</tr>
</tbody>
</table>
<table border="1">
<caption>测试合并单元格纵向合并</caption>
<thead>
<tr>
<th>
表头第一列
</th>
<th>
表头第二列
</th>
<th>
表头第三列
</th>
</tr>
</thead>
<tbody>
<tr>
rowspan="3">：作用是纵向合并单元格
<td rowspan="3">表身体第一行：第一列</td>
<td>表身体第一行：第二列</td>
<td>表身体第一行：第三列</td>
</tr>
<tr>
<!--<td>表身体第二行：第一列</td>-->
<td>表身体第二行：第二列</td>
<td>表身体第二行：第三列</td>
</tr>
<tr>
<!--<td>表身体第三行：第一列</td>-->
<td>表身体第三行：第二列</td>
<td>表身体第三行：第三列</td>
</tr>
</tbody>
</table>
5、表单标签
5_1:form的属性
name:表单的名称
action:提交数据到哪里
method:提交的方式，有post和get两种方式
target:_bank:和a标签的target属性一致
<form name="表单的名称" action="url" method="post/get">
1、form标签中可以使用的标签
1_1、input标签，文本框
<input type="text" value="你好" placeholder="hello">
1_2、input标签，密码框
<input type="password">
1_3、input标签，单选框,checked="true"的意思默认被选中,如果是单选框，则同样的name属性的标签只能选中一个，才会互斥
<input name="sex" type="radio" checked="true">男
<input name="sex" type="radio" checked="true">女
1_4、input标签，复选框
<input type="checked" name="hob" value="100" checked="true">足球
<input type="checked" name="hob" value="100">篮球
<input type="checked" name="hob" value="100">学习
1_5、文件
<input type="file"><input type="button" value="浏览">
1_6、input标签的属性值
<!--text：就是一个文本输入框-->
<!--submit:可以将数据提交到后台的框-->
<!--password:是一个密码的输入框-->
<!--checkbox:是一个复选框，可以实现多选-->
<!--radio:是一个单选框，需要借助一个name的属性，把只能单选的radio的标签的name的值设置为相同的-->
<!--button:也是一个触发框，但是不给后台提交数据，主要是用和js结合使用，比如点击颜色变为红色之类的-->
<!--file:是一个上传文件的标签-->
<!--reset:清空输入框的输入的内容-->
2、select标签，下拉菜单
<!--select:实现一个下拉框的标签-->
<!--默认只显示第一个内容，且只能单选，无默认选中项-->
<!--提交数据的格式为k为choice,values的值为choice1或者choice2，这个就看你选择哪个了-->
<select name="choice">
<option value="choice1">选项1</option>
<option value="choice2">选项2</option>
<option value="choice3">选项3</option>
<option value="choice4">选项4</option>
</select>
<!--默认只显示第2个内容，且只能单选，无默认选中项-->
<select size="2" name="choice">
<option value="choice1">选项1</option>
<option value="choice2">选项2</option>
<option value="choice3">选项3</option>
<option value="choice4">选项4</option>
</select>
<!--默认只显示2个内容，且可以多选，无默认选中项-->
选项:<select size="2" multiple="multiple">
<option value="choice1">选项1</option>
<option value="choice2">选项2</option>
<option value="choice3">选项3</option>
<option value="choice4">选项4</option>
</select>
<!--默认只显示第一个内容，且可以多选，有默认选中项-->
<select size="2" multiple="multiple">
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
<option selected="selected">选项4</option>
</select>
<!--实现的效果就是实现一个下拉框，按照选项进行了分类-->
<!--那下面这种select该如何提交数据呢？-->
<div>
<select name="bf">
<optgroup label="第一集团军">
<option value="bf1">北伐军1</option>
<option value="bf2">北伐军2</option>
</optgroup>
<optgroup label="第二集团军">
<option value="bf3">北伐军3</option>
<option value="bf4">北伐军4</option>
</optgroup>
</select>
</div>
3、文本域
<!--textarea:一个输入框-->
<!--控制行数rows-->
<!--控制列数cols-->
<div>
<textarea rows="10" cols="20">
自我简介
</textarea>
</div>
4、图像域,图像就一个标签
<input type="image" src="图片地址">
</form>