一、什么是html?
HTML是一种超文本标记语言.
语法：
<!DOCTYPE html> （表示申明） <html> <herd> <meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> <title>标题</title> </herd> <body> 写主体内容 </body> </html> 注意小点：在html中分有国际编码（utf-8）和国内编码（gb2312），当我们打开网页出现是乱码的时候，可以看一下编码版本，然后进行修改！编码版本不同会直接造成乱码。
二、常用的标签：
1、段落标签 p标签（块级元素） <p>我是一个兵</p> 2、水平线标签：<hr /> <hr size="10px" width="400px" align="center" color="red" /> （属性：size：水平线的粗细（以px为单位）； width：宽度； align：对齐方式（右：left、左：right、居中：center）； color ：颜色 3、换行标签：<br/> 4、空格： 5、标题文字标签：<h1>.....<h6>（块级元素） <h1></h1>(最大) <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>（最小） 注意小点：通常用于页面布局中标题设置。 文字样式：<b></b>:粗体； <i></i>:斜体； <u></u>:下划线； <s></s>:删除线； <sup></sup>:文字上标； <sub></sub>:文字下标 6、body标签： 常用的属性：背景颜色：（bgcolor）、背景图片：（background）、文字颜色：（text）
三、列表标签：（ul/ol）
（1）无序列表：(常用于导航、菜单、文章列表、产品列表)
| 标签 | 效果 |
|
<ul> |
|
| <ul>的属性：type="circle"（空心圆） type="disc"（实心圆默认)、 type="square"（方块）常和float搭配。 去掉前面符号的方法：list-style-type:none; | |
（2）有序列表：
| 标签 | 效果 |
|
<ol> |
|
| <ol>的属性：type="1" 或A 或a或I 或i 设置编号的开始序号：Start="n"(只能是数字) | |
（3）列表嵌套的正确写法：
| 标签 | 效果 |
| <ul> <li>选项1</li> <li>选项2 <ol> <li>选项2-1</li> <li>选项2-2</li> </ol> </li> </ul> |
|
| 注意：当“选项2”内部有嵌套表格时，它后面的</li>并不是直接写在“选项2”后面，而是写在它内部嵌套表格的后面. | |
四、表格（table）（块级元素）
1、基本结构:
<table>...</table>：定义表格； <caption>...</caption>：表格标题； <tr>...</tr>：定义表行； <th>...</th>定义表头； <td>...</td>:定义表元。
2、语法结构：
<table> <caption>表格标题<caption> <tr> <th> 姓名 </th> <th> 性别 </th> <th> 成绩 </th> </tr> <tr> <td> 张三 </td> <td> 男 </td> <td> 100 </td> </tr> </table>
3、表格属性：
（1）表格布局：常用于整齐的数据，显示有规则的几行几列 （2）表格属性：宽：width 、高：height、边框：border、内边框宽度：cellspacing、文字到边框距离：cellpadding、
边框颜色：bordercolor、背景色：bgcolor、水平位置：align （3）行列属性：高：height； 框颜色：bordercolor； 背景色：bgcolor； 水平对齐：align； 垂直对齐：valign （4）跨行跨列：跨行：rowspan 跨列：colspan （5）表格标题：<caption align=top或bottom>，位于表格上方或下方.
【举例如下】：
<table align="center" bgcolor="#e0e0e0" border="1px"> <caption>表格例子</caption> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>男</td> <td>25</td> </tr> <tr> <td>李四</td> <td>女</td> <td>22</td> </tr> </table>
| 姓名 | 性别 | 年龄 |
|---|---|---|
| 张三 | 男 | 25 |
| 李四 | 女 | 22 |
1、表格标题
表格标题的位置，可由align属性来设置，其位置分别是表格上方和表格下方。设置格式如下： <caption align="top">标题位于表格上方</caption> <caption align="bottom">标题位于表格下方</caption>
2、尺寸设置
一般情况下，表格的总高度和总宽度是根据各行和各列的总和自动调整的。如果我们要直接固定表格的大小，可以使用下列方式： <table width="n1" heiht="n2"> widht和height属性是指表格的宽度和高度，n1和n2可以用像素来表示，也可以用百分比来表示。
3、边框设置
表格边框是用<table border="n">属性来体现的，它表示表格边框的边的厚度和框线。将border设成不同的值，有不同的效果。 border="0"为无边框（缺省值）；n越大，边框越厚。
4、表元间隙
表元间隙表现为格线与格线之间的宽度，可以使用<table cellspacing="n">属性加以设置。n表示像素值。
5、表元空白
表元空白表现为内容与格线之间的宽度，可以使用<table cellpadding="n">属性加以设置。n表示像素值。
6、文字对齐/布局
表格内的数据排列方式有两种，左右排列和上下排列。
左右排列以align属性来设置，上下排列由valign属性来设置。
左右排列的位置可分为三种：居左（left)、居右(right)和居中(center)；
上下排列比较常用的有四种：上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。
7、跨多行/多列表元
要创建跨多行、多列的表格，只需在<th>或<td>中加入rowspan或colspan属性，这两个属性的值，表明了表元中要跨越的行或列的个数。
【举例1如下】：
<table align="center" bgcolor="#e0e0e0" cellspacing="0" celladding="0" border=”1px"> <tr> <th colspan="3">值班人员</th> </tr> <tr> <th>星期一</th> <th>星期二</th> <th>星期三</th> </tr> <tr> <td>张三</td> <td>李四</td> <td>王五</td> </tr> </table>
| 值班人员 | ||
|---|---|---|
| 星期一 | 星期二 | 星期三 |
| 张三 | 李四 | 王五 |
【举例2如下】：
<table align=“center” bgcolor=“000” cellspacing=“0” celladding=“0” border="1"> <tr> <th rowspan=2>值班人员</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> </tr> <tr> <td>张三</td> <td>李四</td> <td>王五</td> </tr> </table>
| 值班人员 | 星期一 | 星期二 | 星期三 |
|---|---|---|---|
| 张三 | 李四 | 王五 |
8、颜色设置
在表格中，既可以对整个表格填入底色，也可以对任何表行、任何表头、任何表元使用背景颜色或背景图像。 背景颜色使用bgcolor=#属性设置； 背景图像使用background="URL"属性设置； 表格边框颜色使用<table bordercolor=#>属性设置。
四、a标签（超链接）
1、超链接标记：<a href="超链接地址">文字或图片</a> 2、图片超链接：<a hrer="http:\www.baidu.com"><img src="aaa.jpg"></a> 3、html 空链接 href="#"与href="javascript:;"的区别，前面其实跳转，后面不跳转，用户体验更好点。 4、空链接与其它各类链接的区别： href="JavaScript:;" 同 href="javascript:void(0);" ，空链接，点击不会有任何跳转 href="#" 同#top，点击回到顶部，页面不刷新 href=" " 点击后刷新并回到顶部 href="/" 点击跳转到上一级目录 5、链接打开窗口： _blank 在新窗口打开）、_parent（在父级窗口打开）、_self （在当前窗口打开）、_top（返回信息显示在顶级浏览器窗口中）
五、<img />标签：
图片标记：<img src="图片路径" alt="图片描述" title="图片标题" width="" height="" /> 这里alt属性常用于图片打不开的时候文本替代。title属性用于鼠标滑停时候显示。图片加alt属性也利于网页优化，通常加关键词。 图片属性：高度：height； 宽度：width； 边框宽度：border； 优先读低分辨率图：lowsrc； 文字标注：alt
六、绝对路径&相对路径：
绝对路径： http://www.cnblogs.com/ 或 D:360Downloads
相对路径: ../../a/b.jpg
课堂总结：
虽然有些html有自己的属性，去设置该标签的外观，但是实际开发中，不会用它自己的属性去做外观处理，而是用css.