<!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:\test.png" width="50px" height="80px" alt="图片加载失败,上面就会显示的名称" title="悬浮显示的名称">
<!--还可以实现点击图标实现超连接的跳转-->
<div>
<a href="http://www.baidu.com">
<img src="D:\test.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>