了解html
- W3C：万维网联盟-World Wide Web Consortium,创建于1994年
- HTML：超级文本标记语言-HyperText Markup Language
- XHTML：可扩展超文本标记语言-Extensible HyperText Markup Language，XHTML 的目标是为取代 HTML
- DHTML：是动态HTML - Dynamic HTML，它不是 W3C 标准
- HTML5：万维网的核心语言，是超文本标记语言-html的第五次重大修改,是一项推荐标准
元素的基本定义
块级元素与块元素
- **块级元素(block-level elements)**：那些视觉上会被格式化成块状的元素，通俗一点来说就是那些会换新行的元素。display 属性值为：block, list-item, table 值都可以将一个元素设置成块级元素。
- 块元素：display属性值为block的元素，是块级元素的一个子集。
行内级元素与行内元素
**行内级元素(inline-level elements)**：行内级元素是那些不会为自身内容形成新的块，而让内容分布在同一行中的元素。display 属性的：inline, inline-table, inline-block 值都可以将一个元素设置成行内级元素。
行内元素：display属性为inline的元素，是行内级元素的一个子集
置换元素与非置换元素
**置换元素(replaced element)**：一个内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。这类元素，浏览器根据元素的标签和属性，来决定元素的具体显示内容。常见的置换元素有这些：img,input,textarea,select,button等，而某些元素像是audio或canvas只有在特殊情況下才是置換元素。
**非置换元素(non-replaced element)**：w3c并没有给出明确的非置换元素的解释，但能确定的是除置换元素之外，所有的元素都是非置换元素。
行内级非置换元素和行内级置换元素
- 行内级非置换元素：宽度与高度的设置对于行内级非置换元素时不适用的，例如span,a
- 行内级置换元素：置换元素一般都是一般拥有固有尺寸（宽度，高度，宽高比）的元素，因此对于置换元素在不设宽度和高度的情况下，元素宽高度等于元素自身固有尺寸。而且其遵循的特点如下：
- 若宽高的计算值都为 auto 且元素有固有高度，则 height 的使用值为该固有高度
如表单元素input
- 若宽度的计算值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度
如表单元素input
- 若宽度的计算值为 auto 且高度有 非auto 的计算值，并且元素有固有宽高比，则 width 的使用值为 高度使用值 * 固有宽高比；
如img元素
- 若高度的计算值为 auto 且上述条件完全不符，则 height 的使用值不能大于150px，且宽度不能大于长方形高度的2倍。
如iframe元素
元素列表
块元素(block element)
| 标签 | 描述 |
|---|---|
| <address> | 定义文档作者或拥有者的联系信息 |
| <caption> | 定义表格标题 |
| <blockquote> | 块引用 |
| <dd> | 定义列表中定义条目 |
| <div> | 定义文档中的分区或节 |
| <dl> | 定义列表 |
| <dt> | 定义列表中的项目 |
| <fieldset> | 定义一个框架集 |
| <form> | 创建 HTML 表单 |
| <h1> | 定义最大的标题 |
| <h2> | 定义副标题 |
| <h3> | 定义标题 |
| <h4> | 定义标题 |
| <h5> | 定义标题 |
| <h6> | 定义最小的标题 |
| <hr> | 创建一条水平线 |
| <legend> | 元素为 fieldset 元素定义标题 |
| <li> | 标签定义列表项目 |
| <noframes> | 为那些不支持框架的浏览器显示文本，于 frameset 元素内部 |
| <noscript> | 为定义在脚本未被执行时的替代内容 |
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <p> | 标签定义段落 |
| <pre> | 定义预格式化的文本 |
| <table> | 标签定义 HTML 表格 |
| <tbody> | 标签表格主体（正文） |
| <td> | 表格中的标准单元格 |
| <tfoot> | 定义表格的页脚（脚注或表注） |
| <th> | 定义表头单元格 |
| <thead> | 标签定义表格的表头 |
| <tr> | 定义表格中的行 |
| <header> | 区段头或页头 |
| <footer> | 区段尾或页尾。 |
| <section> | 一个页面区段。 |
| <article> | 定义文章。 |
内联元素(inline element)
| 标签 | 描述 |
|---|---|
| <a> | 超链接/锚点 |
| <acronym > | 定义只取首字母缩写 |
| <b> | 字体加粗 |
| <bdo> | 可覆盖默认的文本方向 |
| <big > | 大字体 |
| <br> | 换行 |
| <cite> | 引用进行定义 |
| <code> | 计定义计算机代码文本 |
| <dfn> | 定义一个定义项目 |
| <em > | 强调 |
| <font> | 字体设定(不推荐) |
| < i > | 斜体文本效果 |
| <img > | 向网页中嵌入一幅图像 |
| <input > | 输入框 |
| <kbd > | 定义键盘文 |
| < label > | 标签为 input 元素定义标注（标记） |
| < q> | 短引用 |
| < s> | 中划线(不推荐) |
| < samp> | 定义范例计算机代码 |
| <select > | 创建单选或多选菜单 |
| <small > | 小字体文本 |
| <span > | 组合文档中的行内元素 |
| <strike > | 中划线 |
| <strong > | 语气更强的强调的内容 |
| <sub> | 下标 |
| <sup> | 上标 |
| <textarea > | 多行文本输入框 |
| < tt> | 打字机或者等宽的文本效果 |
| <u > | 下划线 |
| <var> | 定义变量 |
可变元素
可变元素 为根据上下文语境决定该元素为块元素或者内联元素。
| 标签 | 描述 |
|---|---|
| <applet > | java applet |
| <button > | 按钮 |
| <del > | 删除文本 |
| <iframe > | 创建包含另外一个文档的内联框架（即行内框架） |
| <ins > | 标签定义已经被插入文档中的文本 |
| <map > | 客户端图像映射（即热区） |
| <object > | object对象 |
| <script > | 客户端脚本 |
注：此处只包含部分标签分类，而”块级“在新的 HTML5 元素中暂时无明确定义
块元素与内联元素的基本特点
块元素特点：
- 每个块级元素都从新的一行开始，并且其后的元素也另起一行。
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
- 它可以容纳内联元素和其他块元素
内联元素特点：
- 和其他元素都在一行上；
- 高，行高及外边距和内边距不可改变；
- 宽度就是它的文字或图片的宽度，不可改变
- 内联元素只能容纳文本或者其他内联元素
对行内元素，需要注意如下:
- 设置宽度width 无效。
- 设置高度height 无效，可以通过line-height来设置。
- 设置margin 只有左右margin有效，上下无效。
- 设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
注：行内各别元素除外如类似img元素