1、HTML基础
1.文档声明和字符编码
<!DOCTYPE html>：特殊固定的文档声明标签 <html lang="***">：语言声明，lang="en"代表英语，lang="zh-CN"代表中文 <meta charset="***">：字符编码声明，charset="UTF-8"表示万国码字符编码
2.常用标签
1.标题标签：h1~h6 2.段落文本：<p>段落文本内容</p> 3.换行：<br>换行是空标记(强制换行)，<br/> 4.水平线：<hr>空标记 5.加粗：<label>强调内容</label>突出文本，<b>加粗内容</b>只显示加粗 6.倾斜：<em>强调文本</em>，<i>倾斜文本<i> 7.删除线：<del>文本</del>，<s>文本</s> 8.扩展： <u>文本</u>下划线 <sup></sup>上标 <sub></sub>下标
1、<常规标签>也叫双标签
<标记></标记>
<标记 属性="属性值" 属性="属性值"></标记>
标记也可以叫标签或叫元素
例如：<head></head>
2、空标记也叫单标记
<标记/>
<标记 属性="属性值"/>
例如：<br/>
<hr color="red" width="300px" align="right">
<hr noshade>
color：颜色
width：宽度
align：对齐方式
noshade：取消阴影,其默认为noshade，所以可以不写noshade="noshade"
3.特殊符号
1.尖角号：< < ">> >
2.空格：  占据宽度正好是一个中文宽度，且基本上不受字体影响； 该空格占据宽度受字体影响
3.版权：©
4.商标：™ ™ ® ®
5.表情：㈳x x为任意数字，不同数字代表不同符号
4.div和span标签
1.div标签，没有具体含义，用来划分页面的区域，独占一行
2.span标签，没有实际意义，主要应用在对文本独立修饰的时候，内容有多宽就占多宽的空间距离
5.列表
无序列表：<ul> <li>无序</li> <li>列表</li> </ul> <!-- 1.ul里面只能放置li标签，但是li里面可以随意放标签 2.默认的是黑色实心圆 3.type：disc(默认)、circle(空心圆)、square(实心正方形)、none(无，用的最多) --> 有序列表：<ol type='A' start='4'> <li>有序</li> <li>列表</li> </ol> type 类型 start 开始 <!-- 1.ol里面只能放置li标签，但是li里面可以随意放标签 2.数值是自动生成的 3.type：1、a、A、i、I start：取值只能是一个数字，第几个开始 -->自定义列表：<dl> <dt>可以是文字也可以是图</dt> <dd>相关文字</dd> </dl>
6.图片路径与属性
路径分类：绝对路径、相对路径
1、绝对路径：是指文件在硬盘上真正存在的路径
2、相对路径：是相对于自己的目标文件位置
如同一级：<img src="img.gif"> <img src="./img.gif">
如下一级：<img src="others/img2.gif"> <img src="./others/img2.gif">
如上一级：<img src="../others/img2.gif">
属性
<img src="图片路径" title="鼠标悬停时提示信息" alt="图片加载失败的提示信息" width="200px" height"200px"/>
7.超链接
<a href="http://www.baidu.com" title="鼠标悬停后提示信息" target="规定在何处打开文档">超链接</a>
Target属性：规定在何处打开文档
target=“_self” 默认值
target="_blank" 新窗口打开
8.表格标签
数据表格的创建
<!--创建表格-->
<table border="1" width="500" height="500" bordercolor="red" bgcolor="bule" align="center" cellspacing="5" cellpadding="50%">
<!--tr 表示行-->
<tr>
<!--td 表示列-->
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
一、表格属性 1.宽度 width width：px、%(相对于父元素的百分比) 2.高度 height 3.边框 border 外边框大小 4.边框颜色 bordercolor 外边框颜色 5.背景颜色 bgcolor 6.水平对齐 align=“left/right/center” 7，sellspacing=“单元格与单元格之间的间距” 8.cellpadding=“单元格与内容之间的空隙”
二、行tr 属性 1.高度 heigt 2.背景颜色 bgcolor 3.文字水平对齐align=“left/right/center” 4.文字垂直对齐valign=“top/middle/bottom”
三、单元格td 属性 td：如果一个单元格设置宽度，影响的是这一整列的 td：如果一个单元格设置高度，影响的是这一整行的 1.宽度 width 2.高度 heigt 3.背景颜色 bgcolor 4.文字水平对齐align=“left/right/center” 5.文字垂直对齐valign=“top/middle/bottom”
四、表格合并 1.rowspan="所要合并的单元格的行数"必须给到td，行合并 rowspan=“5” 2.colspan=“所要合并的单元格的列数"必须给到td，列合并 colspan=“2”
♥案例-今日小说排行榜
<!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>今日小说排行耪</title>
</head>
<body>
<!-- 表格居中，单元格之间间距为0 -->
<table align="center" width="500px" height="249" border="1" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键字</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>up</td>
<td>345</td>
<td>123</td>
<td>
<a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a>
</td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td>down</td>
<td>124</td>
<td>67532</td>
<td>
<a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a>
</td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td>up</td>
<td>212</td>
<td>7654</td>
<td>
<a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a>
</td>
</tr>
<tr>
<td>4</td>
<td>红楼梦</td>
<td>down</td>
<td>23</td>
<td>75645</td>
<td>
<a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a>
</td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td>down</td>
<td>121</td>
<td>7676</td>
<td>
<a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a>
</td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td>down</td>
<td>576576</td>
<td>1231421</td>
<td>
<a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a>
</td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td>up</td>
<td>234</td>
<td>7686</td>
<td>
<a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
9.表单标签
9.1表单域
<from action="url地址" method="提交方式（get/post）" name="表单域名称">
<input type="属性值" name="名称" value="">
</from>
1.name和value是每个表单元素都有的属性值，主要是给后台人员使用
2.单选框和复选框都要有相同的name值
3.checked属性主要用于单选框和复选框，默认选择该项
4.maxlength输入字段中最大长度
<from> <!--各种表单元素控件--> <!--文本框--> 用户名：<input type="text” name="username" value="请输入用户名" maxlenght="6"> <br> <!--密码框--> 密码：<input type="password" name="pwd"> <br> <!--单选框--> 性别：男 <input type="radio" name="sex" checked="checked"> 女 <input type="radio" name="sex"> <br> 标签：th矩形电连接器