web前端之清除浮动
CSS清除浮动：解决浮动元素带来的布局问题 摘要：浮动是CSS中常用的布局技术，但它可能会导致布局问题，如高度塌陷和元素重叠。本文将介绍CSS清除浮动的方法，帮助您解决浮动元素带来的布局问题，并实现稳定且可靠的页面布局。 引言：在Web开发中，浮动是一种常见的布局技术，它使元素脱离文档流并实现自适应的排列。然而，浮动元素可能会引起一些布局问题，如高度塌陷和元素重叠。为了解决这些问题，CSS提供了多种清除浮动的方法。本文将介绍一些常用的CSS清除浮动技术，帮助您解决浮动元素带来的布局问题。 清除浮动的基本原理：清除浮动的目的是使父元素正确包含浮动元素，并保持正确的布局。浮动元素对父元素的高度计算不会影响，导致父元素高度塌陷。通过清除浮动，可以强制父元素适应浮动元素的高度。 使用clear属性清除浮动：clear属性用于清除元素左侧或右侧的浮动元素。通过在需要清除浮动的元素上设置clear属性，可以避免浮动元素对其产生影响。例如： 12345.clearfix::after { content: ""; display: table; cle ...
web前端之CSS背景属性
CSS背景属性：美化网页的关键特性 CSS 背景属性（Background Properties）是用于控制网页元素背景样式的一组属性。通过使用这些属性，可以实现背景图片、背景颜色、背景平铺等效果。本文将介绍一些常用的 CSS 背景属性及其用法。 背景颜色（background-color）：该属性用于设置元素的背景颜色。可以使用颜色名称、十六进制码或 RGB 值来指定颜色。例如： 123.element { background-color: #f1f1f1;} 背景图片（background-image）：通过该属性可以设置元素的背景图片。可以使用相对或绝对路径指定图片的位置。例如： 123.element { background-image: url("background.jpg");} 背景平铺（background-repeat）：该属性控制背景图片在元素内如何平铺。常用的值包括：repeat（默认，水平和垂直方向都平铺）、repeat-x（水平方向平铺）、repeat-y（垂直方向平铺）和 no- ...
web前端之HTML5新增标签
HTML5引入了一些新的语义化标签，这些标签旨在提供更清晰的结构和更好的可读性。下面是一些HTML5新增的标签： <header>：定义文档的页眉，通常包含站点的标题、导航和其他引导性内容。 <nav>：用于定义页面的导航链接部分，包含导航菜单、链接列表等。 <section>：表示文档中的一个独立区域或主题。可以用于组织内容，如文章、章节、页面模块等。 <article>：表示文档中一个独立的、完整的、可独立分配或可复用的内容单元。常用于包含独立的新闻文章、博客帖子、评论等。 <aside>：用于表示页面内容的侧边栏或附属信息。通常包含与主要内容相关但可以独立存在的内容，如侧边栏、广告、引用等。 <footer>：定义文档的页脚，通常包含版权信息、联系方式、相关链接等。 <figure>：用于包裹一组与文档相关的媒体内容，如图像、插图、照片、代码示例等。 <figcaption>：用于为 <figure> 元素提供标题或图像描述。 <main>：定 ...
web前端之块元素和行内元素（内联元素）
Web前端开发中，了解块元素和行内元素（内联元素）的特点和用途是非常重要的。它们决定了元素在页面中的布局和呈现方式。本文将介绍块元素和行内元素的基本概念、区别以及它们在Web前端开发中的应用。 块元素：块元素是指在页面中独占一行的元素，它们以块的形式显示。块元素通常用于构建网页的结构和布局。常见的块元素包括 <div>、<p>、<h1>-<h6>、<ul>、<li> 等。 块元素的特点： 独占一行，自动换行显示。 默认情况下，宽度会自动填满其父元素的宽度。 可以设置宽度、高度、上下外边距（margin）和内边距（padding）。 可以包含其他块级元素和行内元素。 块元素常用于页面的结构布局，如创建分区、段落、标题、导航菜单等。通过设置块元素的样式和布局属性，可以实现各种页面布局和排版效果。 行内元素（内联元素）：行内元素，也被称为内联元素，是指在页面中水平流动的元素，它们不会独占一行，而是按照文本的流动方式在同一行内显示。行内元素通常用于包裹文本片段或添加强调效果。常见的行内元素包括 <span&g ...
web前端之from表单使用
使用HTML的<form>标签创建交互性表单 在Web开发中，HTML的<form>标签是一种强大的工具，用于创建交互性表单，收集用户输入数据并将其发送到服务器进行处理。下面将介绍<form>标签的基本结构和常用属性，以及如何使用它来构建功能强大的表单。 首先，让我们看一下<form>标签的基本结构： 123<form action="/submit" method="post"> <!-- 表单字段 --></form> action 属性指定了表单数据提交的目标URL。当用户提交表单时，浏览器将把数据发送到该URL。在上面的示例中，表单数据将被提交到 “/submit”。 method 属性定义了数据提交的HTTP方法。常用的方法有 “GET” 和 “POST”。使用 “GET” 方法将表单数据附加到URL的查询字符串中，而使用 “POST” 方法将数据放在HTTP请求的主体中。在示例中，使用了 “POST” 方法。 接下来，我们可以在& ...
学习笔记
测试常用分类按阶段划分 单元测试：针对程序源代码进行测试 集成测试：又称接口测试，主要针对模块与模块或系统与系统之间的接口进行验证 系统测试：针对软件全面进行验证（功能，兼容性，文档） 验收测试：使用内测，公测来实现 内测：公司内部进行验证 公测：让玩家来进行测试 按代码可见度划分 黑盒测试：看不见源代码，主要对程序功能进行测试 灰盒测试：看见部分代码，主要对程序接口进行测试 白盒测试：看见全部代码，主要对程序源代码进行测试 扩展-总结： 系统测试和黑盒测试重点核心是功能测试 集成测试和灰盒测试又称接口测试 单元测试和白盒测试是对代码进行测试 自动化测试归属功能测试 性能测试、安全测试归属专项测试 扩展-测试策略 冒烟测试：大规模测试之前，针对程序主功能进行测试，保证程序具备可测试性。 面试题：提测试标准时什么？ – 冒烟测试通过！测试之前要怎么做？–冒烟测试。 模型 质量模型 测试模型 质量模型学到了什么？–针对任何软件或硬件，测试要覆盖的方面 重点：功能、兼容、性能、易用性、安全 W模型学到了什么？–软件开发流程、软件测在开发的作用 开发流程：需 ...
