前端知识汇总【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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值