入门 CSS HTML | 码农参考

代码目录

Primer CSS HTML
HTML实现
HTML实现

Primer CSS HTML

Primer CSS 是一个免费的开源 CSS 框架，它使用 GitHub 设计系统构建，为广泛的 Github 网站提供支持。它为间距、排版和颜色等基本样式元素奠定了基础。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。这是一个高度可重用的模型。

在本文中，我们将学习 Primer CSS HTML 原理。

一般格式：

使用两个空格缩进。
切勿使用多个
标记，文本段落放置在 HTML
标记中。

使用

标记，而不是使用

或

标签。

单选框和复选框应该有一个标签。

为了便于阅读，请始终在属性两边加上引号。

避免编写结束标记注释。

避免在自闭合元素中使用尾部斜杠
、

、和。

布尔属性：

不要设置不需要设置值的属性，例如 checked

精益标记：

在编写 HTML 时避免多余的父元素。例如标记围绕元素。

表格：

应用单选或复选框列表而不是选择菜单。
无需使用 for 属性，而是将单选框和复选框输入及其文本package在。
type=”submit” 按钮使用主按钮， type=”按钮使用常规按钮”。

表格：

利用 ,
,
和
标记(和范围属性)(如果适用)。

语法：

<element class="class-name" >

      ...

</element>

示例 1：以下代码演示了一些 HTML 通用格式设置原则。

HTML实现


<!DOCTYPE html>

<html>

  <head>

    <title> Primer CSS HTML</title>

    <link href=

" https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"           rel="stylesheet" />

</head>

  <body>

    <center>

        <h1 class="color-fg-success">

            GeeksforGeeks

        </h1>

        <h2> Primer CSS HTML</h2>

          <p class="line-note m-0">

            This is <b>paragraph</b> 

            with no multiple br tags.

            special text paragraph

        </p>

          <b>No div tags are used for list items</b>

        <ol>

            <li>list item 1</li>

            <li>list item 2</li>

        </ol>

        <b> Checked input</b>

        <input type="checkbox" value="1"><br />

        <b>Select input options</b>

        <select>

            <option value="1" selected>

                first option

            </option>

            <option value="2">

                second option

            </option>

        </select>

    </center>

</body>

  </html>


输出：

示例 2：以下代码演示了一些遵循原则的 HTML 表单元素。
HTML实现

<!DOCTYPE html>

<html>

  <head>

    <title> Primer CSS HTML</title>

    <link href=

" https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"           rel="stylesheet" />

</head>

  <body>

    <center>

        <h1 class="color-fg-success"> 

            GeeksforGeeks 

        </h1>

        <h2> Primer CSS HTML</h2>

          <b>

            Lean on radio and checkbox 

            instead of select menus

        </b>

        <form>

            <input type="radio" id="Netflix"                    name="brand" value="Netflix">

            <label for="Netflix">Netflix</label>

            <input type="radio" id="amazon"                    name="brand" value="Amazon">

            <label for="Amazon">Amazon</label>

            <br>

            <input type="checkbox" name="check"                    id="GFG" value="1" checked>

                Checked by default

            <br>

            <input type="checkbox" name="check"                    value="2">

                Not checked by default

        </form>

    </center>

</body>

  </html>


输出：

参考： https://primer.style/css/principles/ html/

注：本文由VeryToolz翻译自 Primer CSS HTML ，非经特殊声明，文中代码和图片版权归原作者 geetanjali16所有，本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。