html负责网页,HTML

网页的两种布局

一、header固定不动，左侧菜单绝对定位(absolute)，空出头部和中间板块的位置。固定于当前页面，随着整体页面滑动而消失，中间板块，也用绝对定位，空出头部和左侧菜单的位置，不设置bottom和页面高度的时候，会根据中间板块的内容的多少调整板块高度

html元素主要分为3类，块级元素、内联元素以及内联块级元素。

①布局实现上板块不动，左侧固定，中间板块的大小随内容的多少改变，当出现滚动条滚动时，左侧内容会随着滚动消失。

二、在布局方式①的基础上，把bottom设置为0，当内容超出时，背景不会跟上，添加overflow:auto属性就可以解决。布局②实现上，左，上板块固定大小和位置，中间板块在板块大小内内容滑动。

元素的分类：

(1)块级元素

在html中div、 p、hx、form、ul 、 li、dl、dd就是块级元素。css属性设置display:block就是将元素显示为块级元素。块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行；(一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置；

3、元素宽度在不设置的情况下，是它本身父容器的100%(和父元素的宽度一致)，除非设定一个宽度。

(2)内联元素

在html中，span、a、label、input、 strong 和em就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可 以通过代码display:inline将元素设置为内联元素。内联元素特点：

1、和其他元素都在一行上；

2、元素的宽度就是它包含的文字或图片的宽度，不可改变。

注意：为 a 元素设置了宽和高，但都没有起到作用，原因是a在默认的时候是内联元素，内联元素是不可以设置宽和高的。

(3)内联块级元素

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。inline-block元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

注意：img是inline元素，但是他同时也是替换元素，他有着特殊的表现：

可以设置width/height;

默认的，img元素在屏幕占据的空间与其图片的实际像素一致，除非CSS有设置或者自身的width/height HTML 属性有设置；

如果img标签的包裹元素为也为inline元素，则img的边界可以超出其直接父元素的边界，直到自己的宽、高达到最大或者设定值为止，而且文档流中img的兄弟元素也不能遮盖住img。最常见的就是a里面包含的img；

所以从行为上看,img元素作为替换元素，有着类似于Inline-block的行为，尽管在SPEC里面，他的确是一个inline元素。

其他标签随笔：

form标签的使用

form标签里面嵌套表单，可以实现表单里面按钮的具体功能，比如，reset,submit

form标签的action属性，传递表单数据提交的地址。

form标签的enctype="multipart/from-data"属性，可以上传文件。

form表单里的name属性，负责绑定数据，在后台显示 name:{输入的数据}，value属性用来区别特殊标签(没有输入的标签，例如，checkbox)的数据绑定，在后台显示 name:{value}，表示用户选择了哪一个。

name相同，value不同，形成互斥并且代表不同的值。

select标签里的option标签也是同样适合通过相同的name，不同的value来区分用户真正选择了什么。

form标签的method属性，规定数据传递的方式，如post，get。

lable标签的for属性，可以关键其他元素，实现点击标签本文，获取关联元素的焦点

< lable for=“元素id”>

ul li，ol li，dl dt dd的使用

ul li嵌套 li的前面是黑点

ol li嵌套 li的前面是数字

dl dt dd嵌套 dt是标题 dd是缩进以后的文本

display的使用

display:none;

隐藏元素的可见性，并且其位置也消失(可能会被下面的其他元素补上)

visibility:hidden;

隐藏元素的内容，其位置保留，形成留白区。

display:inline-block;

使标签同时具有内联标签的特点和块级标签的特点，即，可以自定义高度和宽度。

cursor:pointer;

改变鼠标聚焦到元素时的显示状态为“小手”。

float的使用

float:left;

控制元素的漂浮，但是会脱离父级元素，如果要想漂浮但是又不脱离父级元素，需要用clear:both;(在使用了float:left的块级元素后面添加一个块级标签，写入clear:both属性值)

另一种方法让所有子标签装在父级标签里

为父级标签添加一个伪类after，并把css设置为

.clearfix:after{

content:".";

display:block;

clear:both;

height:0;

visibility:hidden;

}

针对多个浮动标签，需要撑起父级标签，并显示父级标签的“背景”的。

具体应用:如果子标签需要float;就在父级标签的class里面写入属性:clearfix。

position定位

position:fixed;

固定定位，相对于浏览器窗口定位。

把元素固定在窗口的一个位置，无论页面怎么活动，元素始终保持在固定位置不动

position:absolute;

绝对定位，相对于浏览器窗口定位。

但是会随着页面的滚动，一起滚动。

position:realitive;

相对定位，一般单独使用没有什么效果，需要结合position:absolute;，使元素相对于使用了realitive的父级元素相对定位，不再以浏览器窗口为基准。(这里的父级元素不是亲父级元素，当使用了absolute定位时，标签会一直往上寻找一个带有realitive的父级元素，如果没有，就是以body(浏览器窗口为准))。

透明度属性设置

opacity:1; 不透明

opacity:0.5; 透明度为原来的一半

background-color:rgba(0,0,0,.6);

设置背景颜色透明度为0.6。

inline-block

使元素堆叠起来，但是会使元素之间有3px的边距，可以使用float:left;消除掉这3px。

a标签target属性的属性值:

1、_blank：target="_blank"

含义：在一个新的窗口打开被连接文档

2、_self：target="_self"

含义：在当前页面打开被链接文档

3、_parent：target="_parent"

含义：在父框架集中打开被链接文档

4、_top：target="_top"

含义：在整个窗口打开被链接文档

iframe标签

创建一个窗口用来显示标签里面的src属性里的网址内容(嵌套网站)。(伪Ajax)

< base target="_blank">

设置当前网页里的所有链接打开方式为在新的页面打开。(写在head里面)

标签：父级,标签,元素,HTML,inline,内联,属性

来源： https://blog.csdn.net/qq_40429067/article/details/113835245