前端知识汇总【HTML篇，关于块级元素、行内元素、行内块元素】

牛客网刷题总结

菜鸟笔记…(仅自己学习使用）

1.块级元素

块级元素：块级大多为结构性标记

常用的块级元素

标签名	标签含义
h1-h6	标题
hr	水平分割线
p	段落
div	文档分区
ul(unordered list)	无序列表
ol(ordered list）	有序列表
dl	定义列表
table	表格
form	表单

不常用的：address，center：地址文字；pre：预格式化；blockquote：段落缩进前后5个字符；marquee滚动文本

复习：

dl(definition list 定义列表)
dt (definition term 定义术语)
dd(definition description 定义描述)
dt,dd是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格

例子：

 <dl>
        <dt>商品分类</dt>
        <dd>家电</dd>
        <dd>女装</dd>
        <dd>男装</dd>
    </dl>

块级元素特点：

1.总是从新的一行开始
2.高度、宽度、外边距与内边距都是可控的
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和行内元素

注意：

1. p元素不能包含任何块级元素(包括自身)，特别是div;h1-h6是文字类标签，也不能放其他块级元素
3. li里可以包含一个新的有序或无序列表

2.行内元素（又称内联元素）

行内元素：行内大多为描述性标记

标签名	标签含义
span
a	链接
b	加粗
br	换行
img	图片
i	斜体
em	斜体
input	文本框
label	表单控件
textarea	多行文本
select	下拉列表
strong	加粗
button	按钮
sup	上标
sub	下标
del	删除线
u	下划线

行内元素特点

1.和其他元素都在一行
2.高度、宽度都是不可控的，
3.宽高就是内容的高度，不可以改变
4.行内元素只能包含行内元素，不能包含块级元素
5.行内元素的padding-top、 padding-bottom、 margin-top、 margin-bottom属性设置是无效的 ；行内元素的padding-left、padding-right、 margin-left、 margin-bottom属性设置是有效的（行内元素不可以设置宽高，但是可以设置 左右padding、左右margin（牛客网））；行内元素的padding-top、 padding-bottom从显示的效果上是增加的，但其实设置是无效的，并不会对他周围的元素产生影响

注意：

a元素（行内块）可以包含任何其他元素(除了自身)

3.行内块元素

行内元素中的img，input，td，同时具有行内元素和行内块元素的特点

行内块元素特点

1.一行可以显示多个行内元素，但是相邻元素之间会有空白间隙
2.高度、宽度以及外边距、内边距都是可控的
3.默认宽度是它本身内容的宽度

复习：
input标签，type属性可以让表单元素设置不同的形态；其他属性：name，value，checked（规定input元素首次加载时应当被选中），maxlength（输入字段中的字符的最大长度）

  <input type="button">//按钮
  <input type="checkbox">// **复选框**
  <input type="file">//选择文件
  <input type="hidden">//定义隐藏的输入字段
  <input type="image">//定义图像形式的提交按钮
  <input type="password">//密码框
  <input type="radio">//定义单选按钮 定义单选按钮 定义单选按钮 定义单选按钮
  <input type="reset">//定义**重置按钮**
  <input type="submit">//提交按钮
  <input type="text">//单行的输入字段

H5新增 input 标签

图片转自：https://blog.csdn.net/wuyxinu/article/details