我的html的简单总结而已
body是包含网页可视内容的主体部分,几乎所有的修改和设计都是针对于body内的内容
块级元素的特点:
1.比较霸道,自己独占一行
2.高度,宽度,外边距以及内边距都可以控制
3.宽度默认是容器(父级宽度)的100%
4.是一个容器及盒子,里面可以放行内或者块级元素
注意:
1.文字类的元素内不能使用块级元素
2.p标签主要用于存放文字,因此p标签里面不能放块级元素div
3.同理,h1~h6 标签等都是文字类块级标签,里面也不能放其他块级元素
行内元素的特点: 1.相邻行内元素在一行上,一行可以显示多个 2.高,宽直接设置是无效的 3.默认宽度就是它本身内容的宽度 4,。行内元素只能容纳文本或其他行内元素
行内块元素的特点: 1.和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙(可以把它看做是一个字,两个字之间会有一点缝隙,解决方法是font-size=0或者使用margin-left:-npx 的形式解决缝隙问题 2.默认宽度就是它本身内容的宽度(行内元素的特点) 3.高度,行高,外边距以及内边距都可以控制(块级元素的特点)
主要的块级元素有:
div,p,h1~h6,hr,ul,ol,li,dl,dt,dd,table,form等
主要的行内元素有:
span,i,em,img,a,u,label,strong,br,b等
部分内容的用法:
center:
将center之间的内容进行居中显示(用得不多),大多用css来进行居中
h1~h6:
指的是6个标题,只有6个标题,不会出现h7这种写法,h7这种是无用的
i:
是把i之间的文字变成斜体
br:
是换行元素,换行后下一行和上一行不会有上下间隙
hr:
是水平分隔符,是块级元素的一种,使用之后会出现一条水平分割线,能将上下的内容区分开来
sup:
是将文字或者数字变成上标,如果需要使用10的n次方时可以将n包含在sup之中显示
img:
其中的 <img src=">中引号中应该填写此图片的路径,可以用相对路径也可以用绝对路径,如果是相对路径,使用:
…/就是相对路径,绝对路径是把本图片的存储位置从大到小一一列出
a:
a是链接标签,用于加载链接,用法:
<a href=" " target="_blank">xxx </a>
当中的href等于的引号内容是链接的地址,当用鼠标点击之后会进入此链接指向的网页, target="_blank"中的_blank是加载形式,如果使用了_blank则不会关闭当前页面而是在另一个窗口弹出相关的链接,默认的是在当前页面打开此链接。text-decora:none的用法可以取消链接的下划线的样式
ul:
ul和li搭配使用,他指的是无序列表,每一个小li的前面都会有一个小点,若要删除则在css中用 list-style:none; 进行删除
ol:
ol也与li搭配使用,但他是有序列表,每一个小li前面都会有一个数字来表明顺序和大小
letter-spacing:设置字之间的间距
line-height:设置行高
font-family:
是设置字体的样式,Chrome默认的是使用微软雅黑的字体
font-size:用来设置字体大小,Chrome的默认的文字的字体大小是16px
font-weight:用来设置字体的粗细,400是正常大小(也相当于是normal),粗体是700,
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201208231423221.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1ZBRWFhYWE=,size_16,color_FFFFFF,t_70