H5入门三：块级元素和行内元素

H5入门三：块级元素和行内元素

一、行内元素和块级元素概括

块级元素：div，P，form，ul，ol，address，fieldset，hr，menu，table

行内元素：span，strong，em，br，img，input，label，select，textarea，cite，

二、行内元素和块级元素详细

行内元素（inline element）

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

块元素（block element）

• address -地址
• blockquote -块引用
• center -居中对齐块
• dir -目录列表
• div -常用块级内容，也是css layout的主要标签
• dl -定义列表
• fieldset -form控制组
• form -交互表单
• h1 -大标题
• h2 -副标题
• h3 -3级标题
• h4 -4级标题
• h5 -5级标题
• h6 -6级标题
• hr -水平分隔线
• isindex -input prompt
• menu -菜单列表
• noframes -frames可选内容，（对于不支持frame的浏览器显示此区块内容）
• noscript -可选脚本内容（对于不支持script的浏览器显示此内容）
• ol -排序列表
• p -段落
• pre -格式化文本
• table -表格
• ul -无序列表

可变元素

可变元素会根据上下文语境决定该元素为块元素或者内联元素

• applet -java applet
• button -按钮
• del -删除文本
• iframe -inline frame
• ins -插入的文本
• map -图片区块（map）
• object -object对象
• script -客户端脚本

三、行内元素和块元素的区别

1. 从哪显示效果来看
   - 块级元素会独占一行，其宽度自动填满父元素的宽度
   - 行内元素不必独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素内容而变化

2. 块级元素可以设置width，height属性，行内元素设置width，height无效
   【注意：块级元素即使设置了宽度，仍然独占一行的】

3. 块级元素可以设置margin和padding。行内元素的水平方向的padding-left，padding-right，margin-left，margin-right都产生边距效果，但是竖直方向的内外边距都不会产生边距效果（水平方向有效，垂直方向无效）