前端笔记
区分一下常用标签的类型:
1、块级标签
块级标签是默认占满整行的元素,可以设置宽高,即使设置过宽高之后,在文档流中的宽度也是默认沾满整行,使用浮动或者绝对定位失去文档流位置之后才会显示设置的宽高。
常见的块级标签有:
p、div、ul、ol、li、dl、dt、dd、h1~h6、section、nav、section、article、figure、main;
p标签:段落标签,段落文字使用,默认格式:段尾进行换行;
div标签:划分块的主要使用标签;
ul标签:无序列表的主标签,后面的标号为圆点(黑色);
ol标签:有序列表的主标签,后面一般跟有序的1,2,3,4,5…;
li标签:列表中的主体使用标签
dl标签:自定义标签的主标签;
dt标签:自定义标签的表头;
dd标签:自定义标签的表头的解释(描述)信息;
h1~h6:6级标题标签、字体的大小依次变小。
nav:导航栏标签;
section:无明显层级的块标签;
article:一般用作新闻、文章、的语义化标签;
figure:用作带标题的图片标签,文本图片默认居中显示;
main: 语义化块级标签;
2、行标签:不可以设置宽高,或者说设置宽高无效
包含a、span、em、strong b ;
a标签:主要用来链接一个其他的网页;
span标签:主要用来对行内的文字进行一些样式以及其他的操作;
em标签:一般用来对文字进行强调,使用斜体体现出来;
strong标签:一般用来对文字进行强调,使用加粗字体体现出来;
b标签:一般用来加粗文字;
3、行内块标签: 可以设置宽高,但是不会占满整行,会让出右边的位置
img标签:图片引用标签,其中 src属性中写入图片的地址;
input标签:输入框;
textarea:文本域;
备注:一些块级元素设置绝对定位或者浮动效果后,也会具有行内块的相似属性效果
4、嵌套规则
- 块标签可以套行标签,行标签不可以套块标签。
- P标签不要套块属性标签,可以套a,span,文本。。。
- 嵌套的时候注意代码的缩进。