1.HTML简介
HTML (Hyper Text Mark-up Language) 超文本标记语言，是一种编程语言，也可以说是一种标准、规范。
HTML提供了一系列标记（标签），每个标记都有不同的含义和作用，浏览器根据标记的含义把内容显示到浏览器页面上
超文本：页面不仅可以包含普通文本，还可以包含图片、链接、音乐、程序等非文本内容
2.基本标签
- <!DOCTYPE> 定义文档类型，表明该文档的类型和版本（了解）
- <html> 定义 HTML 文档（页面）
- <title> 定义文档的标题
- <meta>定义文档的元数据，影响浏览器对页面的解析处理
- <body> 定义文档的主体
- <h1> ~ <h6> 定义 标题文本
- <p> 定义段落文本
- <br> 定义换行
- <hr> 定义水平线
- <!--...--> 定义注释
3.列表标签
无序列表 <ul>：在页面上显示一个无序列表（type属性决定图标样式） <li>：表示一个列表项 有序列表 <ol>：在页面上显示一个有序列表（type属性：1 a A i I） <li> 自定义列表 dl：在页面上显示一个自定义列表 dt：定义父节点列表项 dd：定义子节点列表项 注意：dt和dd不是嵌套关系，而是并列的
4.语法规范
- 标签成对出现，有开始标签就需要有结束标签
- 标签不区分大小写，但建议使用小写
- 一对标签的内容可以为空、文本，或者其他标签（标签可以嵌套）
- 如果一对标签的内部总是为空，可以简写为单标记形式，如 <br/>
- 两对标签不可以交叉
- 标签可以包含若干属性，属性之间使用空格隔开，属性之间没有顺序
- 一些标签需要配合使用，共同完成一件复杂的事情
- 浏览器把若干连续的空白字符（空格符、换行符、制表符）处理成一个空格的效果
- 注意：最开始时为了尽快推广HTML，浏览器对HTML文档的语法要求并不严格，这导致那些不规范的HTML代码也会被浏览器正常解析，大家要知道这个情况，但我们自己编码时一定要严格遵守HTML语法规范
5.文本显示效果标签
在最开始的时候，HTML使用标签控制文本的显示效果，随着技术的发展，开始使用CSS语言控制页面的效果，这些文本显示效果标签不再建议使用
6.HTML实体字符
在HTML中，有一些特殊字符，如 > < " & 具有特殊含义，在使用时容易造成冲突，另外 © ® × ÷ 等字符在键盘上没有对应的按键 ，为了方便开发者灵活使用这些字符，HTML提供了对应的实体字符供开发者使用
|
显示效果 |
描述 |
实体名称 |
实体编号 |
|
空格 |
  |
  |
|
|
< |
小于号 |
< |
< |
|
> |
大于号 |
> |
> |
|
& |
和号 |
& |
& |
|
“ |
双引号 |
" |
" |
|
@ |
注册商标 |
® |
® |
|
* |
乘号 |
&time |
× |
|
/ |
除号 |
÷ |
÷ |
7.表格标签
<table> 定义一个表格整体 <caption> 定义表格标题 <tr> 定义表格中的行 <td> 定义行中的单元格（colspan、rowspan 属性可以合并单元格） <thead> 表头 <th> 定义表格中的表头单元格 <tbody> 表格主体，可用于大表格分段显示优化 <tfoot> 表格的脚注 表格单像素边框效果： <table border="1" cellspacing="0px" style="border-collapse: collapse"> 属性解释：border是设置表格边框的宽度，cellspacing是但单元格之间的空白，style="border-collapse: collapse"的作用是把相邻两个边框合并成一个
8.超链接标签
<a href="http://www.rupeng.com/index.shtml">如鹏网</a>
<a href="人丑就要多读书.jpg">人丑就要多读书.jpg</a>
<a href="人丑就要多读书.zip">人丑就要多读书.zip</a>
超链接只是指定资源的位置，浏览器在获得这些资源后处理时，默认的，如果浏览器可以解析显示，浏览器就会直接解析显示，否则，就以文件下载的方式处理（当然，也可指定强制下载,指定a标签的download属性，他的值就是下载文件的文件名）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <!--链接外部资源--> <a href="http://www.rupeng.com">如鹏网</a> <a href="人丑就要多读书.jpg" download="立即下载">人丑就要多读书.jpg</a> <a href="人丑就要多读书.zip">人丑就要多读书.zip</a> <!--链接页面内的a标签--> <a href="#a1">#a1</a> <a name="a1">a1</a> </body> </html>
9.图片标签<img>
在页面上显示一个图片: <img src="人丑就要多读书.jpg" alt="人丑就要多读书" /> src 属性：指定图片资源位置 alt 属性：当找不到src指定的图片资源时，显示在浏览器上的说明提示 width、height属性 ：指定图片显示的宽、高 border：指定图片边框的宽度
10.表单标签
<form> 用来定义供用户输入信息的表单，收集用户信息 <input> 可以定义多种输入控件，通过定义type的值：text、password、radio、checkbox、file、hidden、button、submit、reset <label> 定义 表单控件的标注，可以将label关联到某个标签上，label的for属性的值设置为将要关联标签的id值 <form> <label for="btn01">提交<input type="button" id="btn01"/></label> </form> <textarea> 定义多行的文本输入控件 <select> 定义下拉列表 、<option> 定义下拉列表的选项 <button> 定义普通按钮 （在输入框中按回车键和点击submit按钮效果相同）
11.框架标签
<frameset> 、<frame>定义框架集 (已过时)
在这里介绍的原因避免以后见到了不认识
<html> <head></head> <frameset rows="100px,*"> <frame src="head.html" /> <frameset cols="20%,*"> <frame src="left.html" /> <frame src="main.html" /> </frameset> </frameset> </html> <iframe>定义内嵌框架 <iframe src=” inner.html” width=”500px” height=”500px”> </frame>
12.页面布局标签<div> 、<span>
<div>(division)和<span>都可以把页面分成相对独立的各个部分（分区），方便布局。这两者的不同之处就在于div可以自动换行，而span就不行 <div>div1</div> <div>div2</div> <div>div3</div> <span>span1</span> <span>span2</span> <span>span3</span> 提：div+css 布局方式是现在的主流
现在有种共识，网页内容要和表现形式分离，也就是说html标签主要负责定义网页的内容，如一段文本，css负责定义这些内容的显示样式，如文本的颜色