HTML主干知识总结：

前端初试（一）

HTML主干知识总结：

1.图片（img）属性：src,alt,tltle 。

（1）src属性值：目标图片的路径。

（2）alt属性值：替换加载失败时的文本。

（3）title属性值：提示文本，当鼠标悬停在图片上时会显示文本。

2.链接属性：href，target。

（1）href属性值：目标网页，点击时可打开目标网页。

（2）target属性值：self（默认值，在当前窗口打开目标网页），_blank(在新窗口打开目标网页)。

3.label标签。

（1）使用场景：常用于绑定内容与表单标签的关系。

（2）使用方法：先使用label标签把内容（如：文本）包裹起来，然后在表单标签上添加id属性，最后，在()label标签的for属性中设置相应的id属性值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jQprYjrP-1676792352406)(C:\Users\13237\Desktop\博客演示文件2.png)]

css主干知识总结：

1.选择器。

（1）标签选择器：

结构：标签名{css属性名：属性值；}

作用：通过标签名，找到页面所有标签，设置样式。

（2）类选择器：

结构：.类名{css属性名：属性值；}

作用：通过类名，找到页面中所有带这个类名的标签，设置样式。

（3）id选择器：

结构：#属性值{css属性名：属性值；}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式。

（4）通配符选择器：

结构：*{css属性名：属性值；}

作用：找到页面所有的标签，设置样式。

2.字体和文本基本样式

（1）字体：font-size：字体大小；font-weight：字体粗细；ont-style：字体样式（是否倾斜）； font-family字体类型（字体的选择）。

（2）文本：text-indent：文本缩进；text-align：文本水平对齐方式（左对齐 居中对齐 右对齐 ）；

text-decoration:文本修饰（下划线 删除线 上划线 无）。

（3）水平居中方法总结 （text-align：center ）：可以使文本、span标签、a标签、input标签、 img标签水平居中。若要以上元素水平居中，需要给以上元素的父元素设置text-align。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4sxvgzwm-1676792352406)(C:\Users\13237\Desktop\博客演示文件2（2）.png)]

3.行高(line-height)

（1）作用：控制一行的上下行间距，让单行文本垂直居中可以设置line-height：文字父元素高度，

同时用于网页精准布局，取消上下间距。

4.浮动

（1）特点：浮动元素会脱离标准流，在标准流中不占位置，而且下一个浮动元素会在上一个浮动元素后面左右浮动，同时浮动元素级别高于标准流，可以覆盖标准流中的元素，。

（2）副作用：由于子元素浮动后会脱离标准流，此时子元素不能撑开标准流的块级父元素。

动元素级别高于标准流，可以覆盖标准流中的元素，。

（2）副作用：由于子元素浮动后会脱离标准流，此时子元素不能撑开标准流的块级父元素。

（3）清除浮动：在父元素中添加overflow ：hidden；属性，该方法最为方便。