html css学习小感

以前看着眼花缭乱的各种网页,感觉十分神奇,后来学了计算机,接触了前端,发现以前觉得可能是魔法的界面我们也能写出来,这时候就要用html,css,js等工具了.

HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建Web页面的两种核心技术，它们各自扮演着不同的角色。

HTML简介

HTML，即超文本标记语言，是WWW（万维网）的描述语言，由Tim Berners-Lee提出。HTML的设计目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体。HTML文本是由HTML命令组成的描述性文本，这些命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）和主体（Body）两大部分，头部描述浏览器所需的信息，主体包含所要说明的具体内容。HTML是网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。

CSS简介

CSS，即层叠样式表，是一种用于描述HTML（超文本标记语言）和XML（可扩展标记语言）等文档外观和样式的语言。CSS通过将样式与HTML文档分离，使网页的样式和布局更加灵活、可维护和可扩展。CSS可以控制网页中的字体、颜色、布局、边框、背景等方面的样式。CSS的工作原理是基于层叠和继承的，层叠指的是当多个样式规则应用于同一元素时，它们的优先级和顺序会影响最终的样式，而继承则指的是某些样式规则会被子元素继承，从而减少了代码量和重复性。

HTML与CSS的关系

HTML和CSS是构建Web页面的基础，它们之间有着紧密的联系。HTML负责网页的结构和内容，而CSS则负责网页的样式和布局。通过HTML，我们可以定义网页的标题、段落、链接、图片等元素；而通过CSS，我们可以对这些元素进行样式化，如设置字体、颜色、边距、背景等。HTML和CSS的结合使用，使得网页的设计更加灵活和丰富。

HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页的基石。HTML负责网页的结构和内容，而CSS则负责网页的样式和布局。在学习初期，掌握HTML的基本标签和CSS的选择器、属性是非常重要的。不要急于求成，一步步地打好基础，会对后续的学习大有裨益。

(本人为新手,不喜勿喷)

在进行一段时间学习后,简单的写了个登录界面

下面是代码展示

index.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>欢迎来到魔法世界!</title>
       <link rel="icon" href="img/bitbug_favicon.ico" type ="image/x-icon">
       <link rel="stylesheet" href="css/Login.css">
       <link rel="stylesheet" type="text/css" href="css/style.css">

   </head>
   <body>
       <div class="login-container">
       <form class="login-form">
       <h2>Steam管家</h2>
       <div class="form-group">
       <label for="username">用户名:</label>
       <input type="text" id="username" name="username" required>
       </div>
       <div class="form-group">
       <label for="password">密码:</label>
       <input type="password" id="password" name="password" required>
       </div>
       <button type="submit">登录</button>
                   <div id="bingo">
                       <input type="checkbox" />记住我
                   </div>
       </form>
       </div>
       <hr>
   </body>
</html>

body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}

.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;

}

.login-form {
background-color: #ffffff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}

.login-form h2 {
text-align: center;
margin-bottom: 20px;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
}

.form-group input {
width: 100%;
padding: 10px;

border: 1px solid #ccc;
border-radius: 5px;
}

button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

button[type="submit"]:hover {
background-color: #0056b3;
}

#bingo {
margin-top:20px;
text-align:center;
}

style.css文件

body{
   background: url(../img/Steam.jpg) top center no-repeat;
   background-size:cover;
   }

简单介绍一下

<div></div>标签

<div></div> 标签在HTML（HyperText Markup Language，超文本标记语言）中是一个非常基础且重要的布局元素。以下是对 <div> 标签的详细介绍：

一、基本定义

全称：<div> 标签的全称为 Division，中文译为“区分”或“分割”。
用途：<div> 标签主要用于组织和分隔文档内容，创建文档中的分区或节（section）。它可以将相关的HTML元素组合在一起，作为一个逻辑或视觉上的整体，方便开发者对一组内容进行统一的样式设置和行为控制。

二、特性

块级元素：<div> 是一个块级元素，它会在页面上独占一行，并且默认宽度占据父元素的全部可用宽度。
语义无关性：<div> 标签本身不携带任何特定的语义信息，纯粹是为了分割内容区域。在强调网页内容语义化的现代Web开发中，需要结合实际意义使用 <article>、<section>、<header>、<footer> 等语义标签来替代 <div>，但在无法找到更具语义的标签或者需要灵活组织内容时，<div> 仍然是常用的选择。
样式控制：通过给 <div> 标签添加 id 或 class 属性，开发者可以轻松地使用CSS选择器对这一块内容进行单独的样式定制。

三、使用方法

基本结构：<div> 是一个双标签，其基本结构为 <div>...</div>，其中可以包含除 <body> 之外的所有主体标签。
布局设计：通过CSS，我们可以为 <div> 设置高度、宽度、内外边距、浮动属性等，实现复杂的网页布局效果。

<link>标签

<link> 标签是HTML（HyperText Markup Language，超文本标记语言）中的一个重要元素，主要用于定义文档与外部资源之间的关系。以下是关于<link>标签的详细介绍：

一、基本定义与用途

<link> 标签通常放置在HTML文档的<head>部分，用于链接外部资源，如CSS样式表、图标文件等。它允许网页引入外部样式表，从而控制页面的布局和样式，使得内容与样式分离，便于管理和维护。

二、基本语法

<link> 标签的基本语法如下：

<link rel="类型" type="MIME类型" href="资源URL" />

rel：定义当前文档与被链接文档之间的关系，如stylesheet表示链接的是外部样式表。
type：指定被链接文档的MIME类型，对于CSS样式表，通常是text/css。注意，在HTML5中，type属性不再是必需的，因为浏览器可以自动推断资源类型。
href：定义被链接资源的位置，即资源的URL。这可以是绝对路径或相对路径。

三、常见用途

链接外部CSS样式表：
这是<link>标签最常见的用途。通过链接外部CSS样式表，可以控制网页的样式和布局。

示例：

<link rel="stylesheet" type="text/css" href="style.css" />
链接网站图标（favicon）：
<link>标签也可以用于在网页的标题栏或书签栏显示网站的图标（favicon）。

示例：

<link rel="icon" href="favicon.ico" type="image/x-icon" />

四、属性介绍

除了上述的rel、type和href属性外，<link>标签还支持其他属性，但并非所有属性都被所有浏览器支持，特别是在HTML5标准中，一些属性已被废弃或不再推荐使用。

media：定义被链接文档将显示在什么设备上，如screen、print等。
sizes（HTML5新增）：设定被链接资源的尺寸，仅适用于rel="icon"。
crossorigin（HTML5新增）：规定是否使用CORS（跨源资源共享）来获取相关图像。

五、注意事项

<link>标签是一个空元素，它仅包含属性，没有结束标签。在HTML中，<link>标签不需要用斜杠/来结束，但在XHTML中，为了符合XML的规范，需要用斜杠/来结束标签。
<link>标签只能存在于<head>部分，但可以在<head>中出现多次，以链接多个外部资源。
虽然<link>标签支持多种用途，但浏览器对除样式表和图标以外的其他用途的支持可能有限。

代码中还有很多重要标签,如<form>标签,<input>标签,这里就不一一说明了.

虽然这只是一个很简陋的小页面,但是这是你通往行业技术大牛的第一步,只要努力学习,我相信你们也能写出这种界面

总之，学习HTML和CSS是一个充满乐趣和挑战的过程。只要你保持对技术的热爱和追求，不断学习和实践，你一定能够成为一名优秀的网页设计师。加油！