前端学习小总结-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52495299/article/details/135589640

本文概述了前端开发的基础知识，包括HTML的结构（doctype、html标签、head和body的使用）、CSS的选择器、定位和浮动，以及如何通过<div>元素进行布局。作者强调了多实践的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前学习前端也已经有11天了，梳理一下目前学习的知识。这是我学习的网站菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)

1.HTML

html的基础结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>

!DOCTYPE html，这是文档类型声明（Document Type Declaration），它告诉浏览器正在使用的HTML版本。<!DOCTYPE html> 表示使用HTML5。

html标签，也称根标签，所有的内容都写在html标签里，一个页面有且只能有一个根标签。以<html>标签开始，以</html>标签结束。

head标签，也称头部标签，帮助浏览器解析页面，这里面的内容不会被浏览器解析到页面中。头部以<head>标签开始，以</head>标签结束。

body标签，是书写网页的主题内容，内容会被解析到页面中，也就是用户所看到的内容。

主体部分以<body>标签开始，以</body>标签结束。

常用标签

`1.<h1>` to `<h6>` - 标题标签

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<!-- ... -->
<h6>This is a Heading 6</h6>

块级元素，显示为独立的块，通常会在页面上单独占据一行。

除了<h1> 之外，其他标签都可以重复使用

`2.<p>` - 段落标签

<p>This is a paragraph of text.</p>

块级元素

3.`<a>` - 链接标签

<a href="https://www.youkuaiyun.com/">优快云</a>

行内元素，显示在同一行内，不会强制换行。网页制作必不可少的标签

通过text-decoration: none;可以取消下划线

4. `<ul>` and `<li>` - 无序列表和列表项标签

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ul> 用于创建无序列表，<li> 用于定义列表项

块级元素，网页上许多内容的制作都要用到无序列表，诸如导航栏之类的分布，在我目前所学之中都是通过无序列表划分

5.`<ol>` and `<li>` - 有序列表和列表项标签

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

<ol> 用于创建有序列表，<li> 用于定义列表项。块级元素

6.`<img>` - 图像标签

<img src="image.jpg" alt="Description">

用于插入图片。

行内块元素，具有块级元素的外观，但显示在同一行内，不会强制换行。

7.`<form>`、`<input>`、`<button>` - 表单标签

<form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <button type="submit">Submit</button>
</form>

<form> 用于创建HTML表单，<input> 用于创建输入框，<button> 用于创建按钮。

块级标签

8.`<div>` - 划分区块标签

<div>
    <p>This is a paragraph inside a div.</p>
</div>

块级元素，用于将文档划分为不同的区块。

在网页上划分不同的盒子

9.`<span>` - 行内文本标签

<p>This is <span style="color: red;">highlighted</span> text.</p>

行内元素，用于将文本内的一部分标记为行内元素。

总结

非常基础的一部分，多敲一敲，多练一练，基本上就可以了

2.CSS

CSS就是页样式，一个页的整体美感,在你确定了框架之后,就看你的CSS样式的添加了，非常重要

1.选择器

CSS选择器用于选择HTML元素，并为这些元素应用样式

元素选择器

选择指定类型的HTML元素。

p {
    color: blue; /* 设置所有段落文本颜色为蓝色 */
}

类选择器

选择具有特定类名的元素。

.highlight {
    background-color: yellow; /* 设置类名为highlight的元素背景颜色为黄色 */
}

ID选择器

选择具有特定ID的元素。

#header {
    font-size: 18px; /* 设置ID为header的元素字体大小为18像素 */
}

子选择器

选择作为另一个元素的直接子元素的元素。

ul>li {
    list-style-type: square; /* 设置ul下的直接子元素li的列表样式为方块 */
}

后代选择器

选择作为另一个元素后代的元素。

article p {
    font-style: italic; /* 设置article元素内的所有段落文本样式为斜体 */
}

通用选择器

选择所有元素。

* {
    margin: 0;
    padding: 0;
}

属性选择器

选择具有特定属性的元素。

input[type="text"] {
    border: 1px solid #ccc; /* 设置type属性为text的输入框边框样式 */
}

伪类选择器

选择元素的特定状态或位置。

a:hover {
    color: red; /* 设置鼠标悬停在链接上时的文本颜色为红色 */
}

伪元素选择器

选择元素的特定部分。

p::first-line {
    font-weight: bold; /* 设置段落的第一行文本为粗体 */
}

组合选择器

将多个选择器组合在一起，以选择特定元素。

h1, h2 {
    color: green; /* 设置所有h1和h2元素的文本颜色为绿色 */
}

2.定位

定位（Positioning）是一种控制元素在页面中的布局的方法

1.`position: static;` - 静态定位

默认定位，元素按照它们在文档中的顺序进行布局。

div {
    position: static;
}

`2.position: relative;` - 相对定位

相对于元素自身的初始位置进行定位，然后通过top、right、bottom、left属性进行调整。

div {
    position: relative;
    top: 10px;
    left: 20px;
}

`3.position: absolute;` - 绝对定位

相对于其最近的非static定位的父元素进行定位，如果没有父元素，则相对于文档的初始位置。

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

`4.position: fixed;` - 固定定位

相对于浏览器窗口进行定位，元素不随页面滚动而移动。

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
}

5.`z-index` - 层级定位

用于控制元素的堆叠顺序。具有更高z-index值的元素将位于具有较低值的元素上方。

div1 {
    z-index: 1;
}

div2 {
    z-index: 2;
}

3.浮动

浮动（Floating）是一种使元素脱离文档流并沿着其容器的左侧或右侧移动的布局技术。

1.`float` 属性

float 属性用于指定元素应该浮动到左侧、右侧还是不浮动。

.left-float {
    float: left; /* 元素向左浮动 */
}

.right-float {
    float: right; /* 元素向右浮动 */
}

2.清除浮动（Clearing Floats）

当浮动元素之后的元素需要避免受到浮动元素的影响时，可以使用 overflow 属性。

div{
overflow: hidden;
}

3.心得体会

网页的制作，主要还是<div>盒子的嵌套，然后往里面加入不同的样式，就目前的学习来说，主要还是多学多练多敲

前端学习小总结

1.HTML

html的基础结构

常用标签

1.<h1> to <h6> - 标题标签

2.<p> - 段落标签

3.<a> - 链接标签

4. <ul> and <li> - 无序列表和列表项标签

5.<ol> and <li> - 有序列表和列表项标签

6.<img> - 图像标签

7.<form>、<input>、<button> - 表单标签

8.<div> - 划分区块标签

9.<span> - 行内文本标签

总结