Responsive Web Design-Learn HTML Forms by Building a Registration Form

听AI的话
78 阅读10分钟

Learn HTML Forms by Building a Registration Form | freeCodeCamp.org

很简单的一个网页，背后却有一堆HTML代码，就好比一块石头由无数排列的原子构成一样。看来代码是一种语言逻辑，通过编译器重整化得到另外一个东西。为什么不能直接得到网页呢，这个其实就是描述，用编程语言描述。

image.png

html里面的class="inline"和css里的设置inline什么区别？

在HTML中，class="inline"和在CSS中设置display: inline;是两个不同的概念，它们在HTML和CSS中分别用于不同的目的。

  1. HTML中的class="inline"：

    • 在HTML中，class属性用于为元素指定一个或多个类名。类名（如inline）通常在CSS中定义样式规则。当你在HTML元素上使用class="inline"时，你实际上是在告诉浏览器，这个元素应该应用名为inline的CSS类定义的样式。
    • 例如，如果你在CSS中有如下定义： 
      .inline {
  display: inline;
}
    • 那么，任何带有class="inline"的HTML元素都会应用这个样式，即元素会显示为内联元素。

  2. CSS中的display: inline;：

    • 在CSS中，display属性用于指定元素应该如何显示。display: inline;是一个值，它告诉浏览器将元素显示为内联元素。内联元素不会独占一行，而是与其他内联元素并排显示在同一行中，除非被外边距、边框或内边距分隔。
    • 这个属性通常用于文本元素（如<span>、<a>、<img>等），以控制它们在页面上的布局。

总结来说，HTML中的class="inline"是用于指定元素应用哪个CSS类，而CSS中的display: inline;是用于定义这个类的具体样式。在实际使用中，你需要在CSS中定义.inline类，并在HTML元素上应用它，以实现内联元素的显示效果。

是不是可以把html form里面的一个fieldset理解为一个表，而一个form是多张表？

在HTML中，<form>元素确实可以包含多个<fieldset>元素，而每个<fieldset>元素通常用于将表单（form）中的相关元素分组。这种分组有助于组织表单内容，使其更加清晰和易于理解。然而，将<fieldset>直接理解为“表”可能不太准确，因为它们在HTML中有不同的用途和含义。

  1. 表单（Form）：

    • <form>元素是HTML中用于创建表单的容器。它允许用户输入数据，如文本、数字、选择等，并将这些数据提交到服务器进行处理。表单可以包含各种类型的输入元素，如<input>、<textarea>、<select>等。

  2. 字段集（Fieldset）：

    • <fieldset>元素用于将表单中的相关输入元素分组。它通常与<legend>元素一起使用，<legend>提供了字段集的标题。字段集可以包含多个输入元素，这些元素在视觉上和逻辑上是相关的。

  3. 表格（Table）：

    • <table>元素在HTML中用于创建表格，它包含行（<tr>）、列（<td>或<th>）和单元格。表格主要用于展示数据，如数据集、时间表等。

在实际应用中，你可以将<form>元素想象成一个容器，它包含了多个<fieldset>，每个<fieldset>可以看作是一个子容器，用于组织表单中的相关部分。而<table>元素则用于展示数据，与表单的输入和提交功能不同。

总结来说，虽然<fieldset>和<table>在视觉上可能有些相似（都可以用来组织内容），但它们在HTML中扮演着不同的角色。<fieldset>用于表单内容的逻辑分组，而<table>用于数据的展示。

css vw什么意思？和盒模型什么关系？

vw（视口宽度）是一个CSS单位，它表示当前视口（viewport）宽度的百分比。视口宽度是指浏览器窗口的宽度，不包括滚动条。vw单位允许你创建响应式设计，使得元素的尺寸可以根据浏览器窗口的大小动态调整。

例如，如果你设置一个元素的宽度为100vw，那么这个元素的宽度将会等于浏览器窗口的整个宽度。如果浏览器窗口缩小，元素的宽度也会相应缩小。

vw与CSS盒模型（Box Model）的关系如下：

  1. 盒模型尺寸：

    • CSS盒模型描述了如何计算元素的总宽度和高度。它包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。
    • 当你使用vw单位设置元素的宽度时，你实际上是在设置内容区域的宽度。内边距、边框和外边距的尺寸可以单独设置，它们不会影响内容区域的尺寸，但会影响元素的总宽度。

  2. 响应式布局：

    • 在响应式设计中，vw单位使得元素的尺寸能够根据视口宽度变化。这对于创建适应不同屏幕尺寸的布局非常有用。你可以结合vw单位和盒模型来设计灵活的布局，使得内容在不同设备上都能保持良好的显示效果。

  3. 布局一致性：

    • 使用vw单位可以确保元素的尺寸在不同设备和浏览器窗口大小下保持一致。这对于保持设计的一致性和用户体验至关重要。

  4. 媒体查询：

    • 虽然vw单位本身不直接与媒体查询（Media Queries）相关，但你可以结合使用它们来进一步控制布局。媒体查询允许你根据视口的宽度（或其他条件）应用不同的样式规则，而vw单位则提供了一种灵活的方式来设置元素尺寸。

总之，vw单位是CSS盒模型中用于设置元素尺寸的一种方式，它与盒模型的其他部分（如内边距、边框和外边距）一起工作，帮助你创建响应式和灵活的网页布局。

css rem什么意思?

CSS中的rem是一个长度单位，它是相对长度单位，表示根元素（比如<html>）的字体大小的倍数。比如说，如果根元素的字体大小是16像素，那么1rem就表示16像素。这种方式使得页面的布局更加灵活，可以更好地适应不同的设备和屏幕尺寸。

如果你没有设置HTML根元素的字体大小，大多数浏览器默认根元素的字体大小为16像素。不过，你也可以通过CSS设置根元素的字体大小，例如： css html { font-size: 62.5%; } 这样，1rem就会等于10像素，而不是默认的16像素。通过调整根元素的字体大小，你可以更灵活地控制页面的布局。

学了一会儿看到还有很多就感觉困什么原因？

我觉得主要还是因为忘记知识点感到焦虑，这个其实可以通过重复来解决。不要强迫记住。

因为 width:100%; 会造成 block现象

只要在价格 class="inline" 然后单独取消这个宽度，.inline { widht:unset; }

margin: 后面是什么排序，如何记忆;

在CSS中，margin属性用于设置元素的外边距（margin），它可以有四个值，分别对应元素的上、右、下、左四个方向的外边距。这些值的排序通常遵循顺时针方向，即从上开始，然后是右、下、左。这种排序方式可以记忆为“上右下左”（Top-Right-Bottom-Left）。

怎么知道选择 vertical-align 还是 text-aligh？

在CSS中，vertical-align和text-align是两个不同的属性，它们分别用于不同的场景和目的。了解它们的区别可以帮助你决定在何时使用哪一个属性。

  1. text-align：

    • text-align属性用于设置文本内容在块级元素（如<div>、<p>）内部的水平对齐方式。它可以设置为left、right、center、justify（两端对齐）等值。
    • 使用场景：当你需要对齐段落中的文本或者一个块级元素内的文本时，应该使用text-align。

  2. vertical-align：

    • vertical-align属性用于设置行内元素（如<span>、<img>、<input>等）或表格单元格（<td>、<th>）中的元素在垂直方向上的对齐方式。它可以设置为top、middle、bottom、baseline等值。
    • 使用场景：当你需要对齐行内元素（如图片和文字）或者表格单元格中的元素时，应该使用vertical-align。

如何决定使用哪一个属性：

  • 如果你的目标是对齐文本内容，那么使用text-align。
  • 如果你的目标是对齐行内元素或者表格单元格中的元素，那么使用vertical-align。

例如，如果你有一个包含文本和图片的段落，你想要让图片在文本上方居中显示，你应该对图片使用vertical-align: middle;。而如果你想要让整个段落的文本居中，你应该对包含文本和图片的块级元素使用text-align: center;。

记住，text-align只影响块级元素内的文本对齐，而vertical-align影响的是行内元素或表格单元格内的元素对齐。理解这两个属性的作用和区别，可以帮助你更准确地实现所需的布局效果。

display: block;

display: block;：这个属性将<input>元素的显示类型设置为块级元素（block）。块级元素会独占一行，并且可以设置宽度和高度。在默认情况下，<input>元素是内联元素（inline），这意味着它们不会独占一行，而是与其他内联元素并排显示。通过设置为display: block;，你可以更好地控制提交按钮在页面上的布局。 这些样式的组合使得提交按钮在页面上表现得更像是一个标准的按钮，而不是一个简单的内联元素。这样的样式通常用于提高用户体验，使按钮在视觉上更加突出，并且可以适应不同的屏幕尺寸。

margin: auto auto; 和 margin: 0 auto; 什么区别

在CSS中，margin: auto auto;和margin: 0 auto;都用于实现水平居中的效果，但它们在语法上有所不同，这可能会影响浏览器的解析方式。

  1. margin: auto auto; ：

    • 这种写法在CSS中是有效的，它将元素的顶部和底部外边距（margin-top和margin-bottom）设置为auto。这通常用于将元素在垂直方向上居中，尤其是在已知元素高度的情况下。然而，这种写法在某些情况下可能会导致浏览器解析不一致，尤其是在旧版浏览器中。

  2. margin: 0 auto; ：

    • 这是更常见的写法，它将元素的左右外边距（margin-left和margin-right）设置为auto，同时将上下外边距（margin-top和margin-bottom）设置为0。这种写法专门用于水平居中块级元素，而不会改变元素的垂直位置。这种写法在所有现代浏览器中都能得到一致的解析。

在大多数情况下，你应该使用margin: 0 auto;来实现水平居中，因为它更明确，且在所有浏览器中都能得到预期的效果。如果你确实需要在垂直方向上居中元素，你应该使用margin-top: auto;和margin-bottom: auto;，或者使用Flexbox或Grid布局来实现更复杂的居中效果。

小结

每个步骤都是逐步修正的，而且都有对应的html代码修改，这对应着存在主义，你用AIGC也要对应神经网络的修改。 编程的繁杂性来自元素关系的繁杂性。

avatar
文章
阅读
粉丝