Web前端快速入门（HTML + CSS +JavaScript）

最新推荐文章于 2025-06-10 17:28:28 发布

abs（）

最新推荐文章于 2025-06-10 17:28:28 发布

阅读量824

点赞数 29

CC 4.0 BY-SA版权

文章标签：前端 html css

本文链接：https://blog.csdn.net/2301_79692993/article/details/145170328

Web前端快速入门（HTML + CSS +JavaScript）

第一章前言

跟着B站上罗大富学习的，笔记很粗略，只记录了自己模糊的点，欢迎指正。首先了解一下前端和网页的关系：

网页的构成

首先，想象一个网页就像是一个精心装饰的房间。这个房间有墙壁（结构）、装饰>（样式）和家具（功能）。

墙壁（结构）：在网页中，这部分由HTML（HyperText Markup Language）构
成。HTML定义了网页的基本结构和内容，比如段落、标题、链接、图像等。它就
像是房间的墙壁，给房间提供了基本的框架。

装饰（样式）：CSS（Cascading Style Sheets）负责网页的样式，比如颜色、字
体、布局等。它就像是房间的装饰，让房间看起来更加美观和舒适。

家具（功能）：JavaScript是网页的编程语言，它给网页添加了动态功能和交互性。比如，按钮点击后显示隐藏的内容、表单提交后验证数据等。JavaScript就像是房间里的家具，让房间更加实用和有趣。

前端的作用

前端开发者就像是装修工人，他们使用HTML、CSS和JavaScript这些“材料”来构建和装饰网页。他们的目标是创建一个既美观又实用的网页，让用户能够轻松地使用和享受。

构建：前端开发者使用HTML来搭建网页的基本结构，确保网页内容能够正确地展示给用户。

装饰：接着，他们使用CSS来美化网页，使其看起来更加吸引人。这包括设置字体、颜色、间距、布局等。

添加功能：最后，前端开发者使用JavaScript来添加动态功能和交互性。这包括表单验证、动画效果、用户反馈等。

网页与前端的关系

网页是前端开发的最终成果。当用户通过浏览器访问一个网站时，他们实际上是在查看由前端开发者构建的网页。这些网页包含了HTML结构、CSS样式和JavaScript功能，共同构成了一个完整且可用的用户界面。
换句话说，前端开发者使用HTML、CSS和JavaScript来“装修”网页，使其成为一个既美观又实用的空间。而用户则通过浏览器这个“门”进入这个空间，与网页进行交互。

第二章安装VScode开发环境

Vscode网址:https://code.visualstudio.com/docs/?dv=win64user
在vscode中安装插件: 中文插件:Chinese, 前端开发的插件:HTML CSS Support, Live Server(其作用是让你在浏览器中实时预览浏览器的变化), Auto Rename Tag(在修改HTML标签的时候,同步修改与之匹配的另一个标签)
环境就搭建完成啦:happy: :happy: :happy: :happy: :happy: :happy: :happy:

第三章 HTML标签

HTML的作用是为网页提供结构
在HTML中，双标签和单标签是两种基本的标签类型，它们在结构和用途上存在显著的差异。以下是对这两种标签的详细比较，并附上代码示例：

定义与结构

单标签：单标签是一种自闭合的标签，它不能嵌套其他标签或文本。
单标签只由一个标签组成，通常用于表示一些简单的功能或属性。
在HTML5中，单标签的闭合方式有所简化，例如可以简写为，但推荐使用自闭合形式以保持代码的规范性和可读性。

双标签：双标签由“开始标签”和“结束标签”两部分构成。
在开始标签和结束标签之间，可以嵌套其他标签或文本。
双标签用于定义HTML文档中的内容和结构，是HTML文档中最常见的标签类型。

代码示例

单标签示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单标签示例</title>
</head>
<body>
    <!-- 注释标签 -->
    <img src="image.png" alt="描述文字" /> <!-- 图片标签 -->
    <br /> <!-- 换行标签 -->
    <hr /> <!-- 水平线标签 -->
    <input type="text" placeholder="请输入文字" /> <!-- 输入框标签 -->
</body>
</html>
>在上面的示例中，<img />、<br />、<hr />和<input />都是单标签，它们分别用于插入图片、换行、绘制水平线和创建输入框。

双标签示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双标签示例</title>
</head>
<body>
    <h1>这是一个一级标题</h1> <!-- 标题标签 -->
    <p>这是一个段落。</p> <!-- 段落标签 -->
    <a href="https://www.example.com">这是一个链接</a> <!-- 链接标签 -->
    <div>
        <p>这是一个嵌套的段落。</p>
        <!-- 可以在div标签内嵌套其他标签或文本 -->
    </div>
</body>
</html
>在上面的示例中，<h1>、<p>、<a>和<div>都是双标签。它们分别用于定义标题、段落、链接和容器（可以嵌套其他元素）。在<div>标签内，还嵌套了一个<p>标签，展示了双标签嵌套其他标签的能力。

单标签：自闭合，不能嵌套其他标签或文本，常用于表示简单功能或属性。
双标签：由开始标签和结束标签组成，可以嵌套其他标签或文本，用于定义HTML文档的内容和结构。

HTML（超文本标记语言）属性(class,id,style,border等)用于为HTML元素提供附加信息。这些属性可以修改元素的行为、样式或提供额外的数据。
<开始标签属性名 = “属性值”> 有些属性是特有的,有些属性是大部分标签都可以使用的

块元素占据整行的宽度,可以包含其他块级元素和行内元素
行内元素通常在同一行内显示,不会独占一行,只占据其内容所需的宽度,而不是整行的宽度,行内元素不能包含块级元素,但是可以包含其他行内元素
.类名+回车 #类名+回车可以快捷生成div标签

环境搭建

英文感叹号!+回车,生成下面框架
右键open with Default browser 在网页中观察页面

列举一些常用的HTML标签

HTML（超文本标记语言）是用于创建网页和网上应用的标准标记语言。以下是>一些常用的HTML标签，以及它们的简要说明：

文档结构标签

：声明文档类型和HTML版本。：HTML文档的根元素。：包含文档的元数据（meta-data），如标题、字符集、样式表链接>>等。：定义文档的标题，显示在浏览器的标签栏或标题栏上。：提供文档的元数据，如字符集、作者、描述等。：链接外部资源，如CSS文件。 </link></meta>

内容分区标签

：定义文档或节的头部。
：定义导航链接部分。
：定义文档中的节。
：定义独立、完整的内容块。
：定义与主要内容相关的辅助内容。
：定义文档或节的页脚。：文档的主要内容区域，每个页面只能有一个元素。

文本内容标签

到

：标题标签，

为最高级别标题，

为最低级别标题。

：段落。

：引用块。

：预格式化文本。

    ：水平线。

：换行。

    
     ：有序列表。

     
      ：无序列表。

      
：列表项。

       
        ：定义列表。

        
         ：定义术语。

        
        
         ：定义术语的描述。

文本格式化标签

：超链接。
：表示重要性，通常显示为粗体。
：表示强调，通常显示为斜体。
：通用行内容器，无特定语义，常用于应用样式。
：计算机代码片段。：高亮显示文本。：小号文本。~~：删除的文本。~~
：插入的文本。
_{：下标文本。
^{：上标文本。}}

媒体标签

：嵌入图像。
：嵌入音频内容。
：嵌入视频内容。
：为或指定多个媒体资源，供浏览器选择。：为或提供文本轨道（字幕）。：用于绘制图形，通过JavaScript。

表格标签

：表格。：表头。：表体。：表尾。：表格行。
：表格标题。
：表头单元格。：表格数据单元格。

：表格标题。
：表头单元格。	：表格数据单元格。

表单标签

：定义表单。：输入控件，可以是文本、密码、按钮等。：多行文本输入控件。：可点击按钮。：下拉列表。：下拉列表中的选项。：表单控件的标签。：将表单元素分组。：为定义标题。

第二章CSS

负责控制页面的外观和样式(颜色,字体,大小,间距,边框,背景等)
CSS通常由选择器,属性和属性值组成,多个规则可以组合在一起,以便同时应用多个样式
选择器{
   属性1: 属性值1;
   属性2: 属性值2;
}
三种常见的CSS导入方式:

选择器

选择器是CSS中的关键部分,它允许你针对特定元素或者一组元素定义样式
1.元素选择器:选择所有指定类型的HTML元素
p {
color: blue;
}
2.类选择器: 选择所有具有指定类名的元素。类名前面有一个点（.）
.highlight {
background-color: yellow;
}
3.ID选择器:选择具有指定ID的元素。ID前面有一个井号（#）。每个ID在页面中应该是唯一的
#header {
font-size: 24px;
}
4.子元素选择器:选择某个元素的直接子元素
ul > li {
list-style-type: none;
}
5.后代选择器:选择某个元素内部的所有指定后代元素
div p {
margin: 10px;
}
子元素一定是后代元素，后代元素不一定是子代元素

6.相邻兄弟选择器:选择紧接在另一个元素后的兄弟元素
h1 + p {
  font-weight: bold;
}
上述代码将所有紧接在<h1>元素后的<p>元素的字体加粗。

7.通用选择器:选择页面上的所有元素。通常与其他选择器结合使用以限制范围
* {
  margin: 0;
  padding: 0;
}
8.伪类选择器:伪类选择器通过冒号（:）来表示，用于选择元素的某种特定状态。这种状态可以是用户交互产生的，如鼠标悬停、点击等
/* 在元素内容之前插入内容 */
p:before {
  content: "Note: ";
  font-weight: bold;
}

/* 在元素内容之后插入内容 */
p:after {
  content: " (End of paragraph)";
  font-style: italic;
}

/* 块级元素的首字母样式 */
p:first-letter {
  font-size: 2em;
  color: gold;
}

/* 块级元素的首行样式 */
p:first-line {
  font-family: 'Courier New', Courier, monospace;
}

浮动布局

什么是浮动：浮动布局灵活但是不容易控制
清楚浮动的方法，在父元素中添加 overflow:hidden;

定位布局

可以精准的定位页面中的某一个元素

第五章 JavaScript

基本语法

alter是弹窗，console.log是控制台
1.条件语句（if else）2.循环语句（for,while,do while）3.循环关键字（break,continue）4.函数（function）5.事件（点击事件，鼠标经过，鼠标移出等）

事件绑定

1.HTML属性：在HTML标签中直接使用on前缀的属性来绑定事件处理器。这种方法简单直观，但不推荐用于大型项目，因为它将JavaScript代码与HTML混合在一起，违反了内容与行为分离的原则。
<button onclick="alert('Button clicked!')">Click Me</button>
2.DOM属性：通过JavaScript访问DOM元素，并直接设置其事件处理器属性。这种方法比HTML属性事件绑定更灵活，但仍然只能为每个事件类型绑定一个处理器。
var button = document.getElementById('myButton');
button.onclick = function() {
    alert('Button clicked!');
};
3.addEventListener方法:使用addEventListener方法可以为DOM元素添加事件监听器，这是推荐的方式，因为它允许为每个事件类型绑定多个处理器，并且提供了更好的灵活性和可维护性。
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button clicked!');
});
还可以为addEventListener方法提供一个选项对象来指定是否要在捕获阶段处理事件、是否要一次性处理等。

EventListener方法:使用addEventListener方法可以为DOM元素添加事件监听器，这是推荐的方式，因为它允许为每个事件类型绑定多个处理器，并且提供了更好的灵活性和可维护性。

var button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button clicked!');
});
还可以为addEventListener方法提供一个选项对象来指定是否要在捕获阶段处理事件、是否要一次性处理等。