温故而知新——html学习笔记
1、主体标签：
<html>
<head><title>网页标题</title></head>
<body>网页内容</body>
</html>
2、文本标签：
加粗：
- b（<b>内容</b>）仅加粗
- strong（<strong>内容</strong>）加粗且表示语气强烈
倾斜：
- i（<i>内容</i>）仅倾斜
- em（<em>内容</em>）倾斜且表示语气强烈
删除线：
- del（<del>内容</del>）
- s（<s>内容</s>）
下划线：
- u（<u>内容</u>）
- ins（<ins>内容</ins>）
变大：
- big（<big>内容</big>）变大范围115%
变小：
- small（<small>内容</small>）变大范围85%
上标：
- sup（<sup>内容</sup>）一元二次方程式ax2+bx+c=0
下标：
- sub（<sub>内容</sub>）水分子H2O
字体：
- font（<font>内容</font>）
- 属性：
- 字体颜色 color="red"、color="#C330C5"
- 字体大小 size="2"、取值（1~7）
- 字体样式 face="宋体"
- 属性：
3、HTML注释：
语法： <!-- 内容 -->
4、标签嵌套：
语法：必须有层次的嵌套，不可以交叉嵌套
5、排版标签：
默认排版方式：从上往下，从左往右，排不下会换行
【注】编辑器里面敲的回车没用，是无法换行的
换行：
- br（<br>或者<br />）单标签
横线：
- hr（<hr>或者<hr />）单标签
- 属性：
- 线条宽度 width="300"、单位px
- 线条粗细 size="6"
- 线条颜色 color="red"
- 线条对齐 align="left"、默认center
- 线条阴影 noshade
- 属性：
段落：
- p（<p>内容</p>）p标签、独占1行
- 属性：
- 对齐 align="left"、取值（left / center / right）、默认left
- 属性：
【注】块元素可以设置宽高、行内元素不能设置宽高
div和span：
- div（<div>内容</div>）块标签、独占1行
- span（<span>内容</span>）行内标签、宽度是内容的宽
标题：
- h1（<h1>内容</h1>）最大号
- h2（<h2>内容</h2>）
- h3（<h3>内容</h3>）
- h4（<h4>内容</h4>）
- h5（<h5>内容</h5>）
- h6（<h6>内容</h6>）最小号
- 属性：
- 标题对齐 align="left"
- 属性：
6、列表标签：
【注】有序、无序最好不要相互嵌套
有序列表：
- ol、li（<ol><li>内容1</li><li>内容2</li></ol>）内容只能放在li中
- 属性：
- 序号样式 type="a"、 取值（1 / a / A / i / I / none）、默认是“1”
- 起始位置 start="3"、从3开始排列
- 属性：
无序列表：
- ul、li（<ul><li>内容1</li><li>内容2</li></ul>）
- 属性：
- 序号样式 type="disc"、取值（disc / circle / square）、默认“disc”
- 属性：
【注】定义列表一般不会用于嵌套
定义列表：
- dl>dt,dd（<dl><dt>标题</dt><dd>标题的说明</dd></dl>）
- dl 定义列表标签
- dt 定义标题
- dd 定义说明
7、图片标签：
图片：
- img（<img src="picture.jpg" />）
- 属性：
- 地址路径：src="绝对路径 / 相对路径"、必有属性
- 图片宽度：width="100"
- 图片高度：height="100"
- 属性：
8、链接标签：
链接：
- a（<a href="URL">内容</a>）
- 属性：
- 地址路径：src="绝对路径 / 相对路径"
- 属性：
9、表格标签：
【注】table，tr，td是严格的嵌套关系，只能按照此层次出现
表格：
- table>tr>th,td
- table 表示表格整体，有多个常用属性
- tr 表示行，基本没有什么属性
- td 表示列（单元格），有多个常用属性
- table标签常用属性
| 属性名 | 含义 | 常用属性值 |
| border | 设置表格的边框宽度 | 像素值（默认为0） |
| cellspacing | 设置单元格与单元格边框之间的空白间距宽度 | 像素值（默认为2px） |
| cellpadding | 设置单元格内容与边框线之间的空白间距宽度 | 像素值（默认为1px） |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中的水平对齐方式 | left / center / right |
| bgcolor | 设置表格的整体背景颜色 | |
| background | 设置表格的整体背景图 | 背景图优先于背景色 |
| bordercolor | 设置表格的边框线颜色 |
- tr标签常用属性：
| 属性名 | 含义 | 常用属性值 |
| bgcolor | 设置行的整体背景颜色 | |
| background | 设置行的整体背景图 | |
| height | 设置行的高度 | |
| align | 设置单元格内容在行中的水平对齐方式 | left / center / right |
| valign | 设置单元格内容在行中的垂直对齐方式 | top / middle / bottom |
- td标签常用属性：
| 属性名 | 含义 | 常用属性值 |
| width | 设置单元格的宽度 | 像素值 |
| height | 设置单元格的高度 | 像素值 |
| align | 设置单元格中内容的水平对齐方式 | left / center / right |
| valign | 设置单元格中内容的垂直对齐方式 | top / middle / bottom |
| rowspan | 设置要跨行（纵向）合并的单元格数 | 要合并的数量，合并谁就把谁删掉 |
| colspan | 设置要跨列（横向）合并的单元格数 | 要合并的数量，合并谁就把谁删掉 |
| bgcolor | 设置单元格的背景颜色 | |
| background | 设置单元格的背景图 |
【注】
thead，tbody，tfoot用于对表格的tr（行）进行分组，此时thead组在表格头部，tfoot组在表格底部。
这3个标签出现的推荐顺序是：thead，tfoot，tbody，在它们内部再写tr。
thead，tfoot应该只出现1次，tbody可以出现多次。
所有没有明确归属到上述3个标签的tr（行），都默认归属到tbody。
表格高级：
- caption（<caption>表格标题</caption>）
- 用于表示一个表格的“标题文字”（看起来在表格的外面），其实卸载table标签中
- thead
- 用于表示一个表格的“头部区域”，其中可以包含着若干个tr（行），tr中自然应该有td（或th）
- 写在table标签中，tr外，即这样的层次：table>thead>tr
- tbody
- 用于表示一个表格的“主体区域”，其中可以包含着若干个tr（行），tr中自然应该有td（或th）
- 写在table标签中，tr外，即这样的层次：table>tbody>tr
- tfoot
- 用于表示一个表格的“底部区域”，其中可以包含着若干个tr（行），tr中自然应该有td（或th）
- 写在table标签中，tr外，即这样的层次：table>tfoot>tr
10、HTML的通用属性：
name：名称
class：类
id：唯一标识
title：标题
style：样式
11、标签关系：
<div>
<p>内容1</p>
<div>
<p>内容2</p>
<div>内容3</div>
</div>
</div>
后代关系：
- 包含关系
- 父子关系
兄弟关系：
- 同级关系
- 必须属于同父级的关系
12、表单
未完待续……
