青训营打卡实践篇（方向三）|豆包MarsCode AI刷题

HTML基础标签（ai练中学）

1、div盒子标签

• 文档流大小

  • width（100%即一行）*height（可以自定义）

-- 便捷输入

-   div.类名（类选择器以.开头，后面跟着类名）  

• 若定义了div的宽度，则认为该宽度为div被使用的宽

--布局

1. 浮动（Floats） ：

   • 浮动是CSS中最早的布局技术之一，通过float属性（left或right）使元素浮动，从而围绕浮动元素排列其他内容。
   • 缺点是控制力有限，且需要清除浮动（clearfix）来避免布局问题。

2. 定位（Positioning） ：

   • 使用position属性（static, relative, absolute, fixed）来精确控制元素的位置。
   • 绝对定位的元素可以脱离文档流，而固定定位的元素则相对于视口定位。

3. Flexbox（弹性盒子布局） ：

   • Flexbox是一种更加现代的布局方式，提供了一种更加高效的方式来布局、对齐和分配容器内项目的空间，即使它们的大小是未知或者动态变化的。
   • 主要属性包括display: flex;、flex-direction、justify-content、align-items等。

2、input标签

type：输入方式包括输入文本，复选框，单选框，日期选择等

radio单选按钮

   <input type="radio" name="sport" />⚽
   <input type="radio" name="sport" />🏀

代码解释：

type="radio"指定了输入类型为单选按钮， name="sport"将这些按钮归为同一组，使得它们之间是互斥的

checkbox复选按钮

可以同时选择多个

  <input type="checkbox" checked />🍏

代码解释：

• 第一个<input>元素创建了一个未选中的复选框，后面跟着一个苹果表情符号（🍎）。
• 第二个<input>元素创建了一个默认选中的复选框，使用了checked属性，后面跟着一个青苹果表情符号（🍏）。

select下拉菜单

<select>
//菜单内容  
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>

代码解释

• <select> 元素定义了一个下拉列表。
• <option> 元素定义了 <select> 元素内的选项。

输入框：

<input list="countries" />
  <!-- 数据列表，提供输入框的自动补全选项 -->
  <datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

代码解释：

• <input list="countries" />：这是一个文本输入框，list属性指定了一个<datalist>元素的ID，该元素提供了一组预定义的值，用于自动补全功能。当用户在输入框中输入文本时，浏览器会显示一个下拉列表，包含与输入匹配的选项。

• <datalist id="countries">：这是一个数据列表元素，它的id属性值与<input>元素的list属性值相匹配。<datalist>元素包含了一系列的<option>元素，每个<option>元素定义了一个可能的输入值。

  • <option>Greece</option>：这是自动补全列表中的第一个选项，用户可以选择这个选项作为输入框的值。
  • <option>United Kingdom</option>：这是自动补全列表中的第二个选项。
  • <option>United States</option>：这是自动补全列表中的第三个选项。

这种自动补全功能可以提高表单的用户体验，因为它允许用户快速选择预定义的值，而不需要手动输入完整的信息。

3、label标签

作用

和input标签一起用时，label提高可访问性，点击标签文本也会选中对应的单选按钮

css的位置

• CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档的表现形式的语言。CSS不仅可以控制网页的外观和布局，还可以控制文档的动画和过渡效果。

• CSS通过选择器来指定样式规则应该应用到哪些HTML元素上。常见的选择器包括标签选择器（如p）、类选择器（如.className）、ID选择器（如#idName）和属性选择器（如[type="text"]）。

内联样式（行内样式）：

style作为标签属性，将其放入标签内部，css写在其中

基础语法

<标签名 style=“属性1：属性值1；属性2：属性值2;”>内容</标签名>

内部样式：

将css代码集中写在HTML文档的head头部标签中，css写在style标签中

<style>

</style>

外部样式：

将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

<link rel="stylesheet" type="text/css" href="03.css">

HTML案例分析