日 - HTML 和 CSS-css教程-PHP中文网

首页

web前端

css教程

日 - HTML 和 CSS

Mary-Kate Olsen

Jan 03, 2025 pm 08:54 PM

HTML：
HTML 代表超文本标记语言。
HTML 是用于创建网页的标准语言。
它使用标签或元素系统定义网页的结构。

CSS：

CSS 代表层叠样式表。
它用于设置 HTML 创建的网页布局的样式和格式。
它控制颜色、字体、间距、定位和响应式设计等内容。
CSS 允许您将结构（HTML）与设计（样式）分开，使网站更易于维护且更灵活。

JS：
Js 代表 JavaScript。
它是一种编程语言，用于在网络浏览器中创建动态和交互效果。
HTML 构建页面并使用 CSS 设计样式，而 JavaScript 可以与页面交互并动态修改内容。

HTML：
HTML 是基于文本的语言，它定义了网页内容的结构和含义。

Day -HTML ans CSS

独立标签：
在 HTML 中，独立标签是指不需要结束标签的 HTML 元素。这些通常也称为自关闭标签或空元素。

示例：

<br>
<hr>
<input>

登录后复制

结构标签：
标签通常成对出现：开始标签和结束标签。

示例：

<html>
<head>
<body>

登录后复制

元素：
元素是网页的构建块，代表文档中各种类型的内容和结构。

HTML 元素的组成部分：

Opening Tag: The starting part of the element that defines the type of content that follows.
    Example:<p>, <h1>, <div>, <img>

Content: The content placed between the opening and closing tags (if applicable). This could be text, images, links, or other elements.
    Example: This is a paragraph.

Closing Tag: The closing part of the element that indicates the end of the element. It is the same as the opening tag, but with a forward slash (/) before the tag name.
   Example: </p>, </h1>, </div>

Attributes (Optional): Additional properties that provide extra information about the element. Attributes are added inside the opening tag.
    Example:>
<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><html>
<head>
    <title>ILUGC</title>
<style>
.container{
    border:1px solid;
    height:200%;
    width:85%;
    margin:auto;
}
.header h4{
    text-transform: uppercase;
    color:#e22d30;
    border-top:1px solid green;
    width: fit-content;
    padding-top:10px;
}
.header{

    margin:25px;
}
</style>
</head>
<body>
   <div>



<p><strong>Explanation of the HTML Structure:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><html>: Root element of the HTML document.
        <head>: Contains metadata for the page, including the title and styles.
        <body>:Contains the content visible on the page.

    Inside the <head>:
        The <title> tag gives the webpage its title when viewed in the browser tab.
        The <style> tag contains the internal CSS to style the page.

    Inside the <body>:

        .container:A container div with a class container that holds all the page elements.
            It's styled with a border, height, width, and centered using margin:auto.

        .header: A section that contains the main title (<h1>) and a subtitle (<h4>) about the ILUGC group.
            The h4 tag is styled with uppercase letters, a red color, a border on top, and some padding.

        navbar: This seems to be a placeholder for a navigation bar.

        layout: A section for the main content layout, with two subsections:
            mainLayout: Likely for the main content area.
            sideLayout: Likely for a sidebar or additional content.

        footer: Placeholder for the footer section.

登录后复制

div:
该元素是一个块级容器，用于将其他元素分组在一起并向它们应用样式或布局属性。

类别选择器：

类选择器用于选择具有特定类属性的元素并为其设置样式。它是 CSS 中最常用的选择器之一。类选择器由点 (.) 后跟类名定义。

语法：