前端学习之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

猜你喜欢

转载自blog.csdn.net/Ca_CO3/article/details/80950879