前端学习之HTML【一】

一、块级元素

块级元素默认占一行，一行内添加一个块元素后一般无法添加其他的元素，其宽度自动填满其父元素宽度

常见的块元素：

address - 地址blockquote - 块引用dir - 目录列表div- 常用块级元素dl - 定义列表fieldset - form控制组form - 交互表单h1-h6 - 标题hr - 水平分隔线ol - 排序列表p - 段落pre - 格式化文本table - 表格ul - 非排序列表

二、行内元素

行内元素也叫内联元素，和其他元素都在一行上，高度、行高、内边距和外边距都不可改变，宽度是它文字或者图片的宽度，也是不可改变的，行内元素只能容纳文本或者其他行内元素，padding-top和padding-bottom都不会产生边距效果

常见的内联元素：

a - 锚点abbr - 缩写b - 粗体（不推荐）bdo - 覆盖默认的文本方向big - 大字体br - 换行cite - 引用code - 计算机代码（在引用源码的时候需要）dfn - 定义字段em - 强调font - 字体设定（不推荐）i - 斜体img - 图片input - 输入框kbd - 定义键盘文本label- 表格标签q - 短引用s - 中划线（不推荐）samp - 定义范例计算机代码select- 项目选择small - 小字体文本span - 常用内联容器，定义文本内区块strong- 粗体强调sub - 下标sup - 上标textarea - 多行文本输入框u - 下划线var - 定义变量

块级元素和内联元素之间的转换：

1.display 

块元素默认display:block;行内非替换元素(a,span)默认为display：inline;行内替换元素(input)默认为display:inline-block;

display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。

display:block;转换为块级元素.

display:inline;转换为行内元素。

display:inline-block;转换为行内块级元素。

2.float 

当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。 

3.position 

当为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

三、HTML 速查列表

菜鸟教程：http://www.runoob.com/html/html-quicklist.html

注：行内元素与块级元素参考自：https://www.jianshu.com/p/d69878549d92

【如果大家对程序员，web前端感兴趣，想要学习的，关注一下小编吧。加群：731771211。免费赠送web前端系统的学习资料！！】