::: t 备注： HTML+CSS+JS三小时入门笔记。

学习视频链接：（https://www.bilibili.com/video/BV1BT4y1W7Aw?t=14.5&p=15）


:::

配置环境：

  • VScode
  • Google Chrome

一、HTML

1、HTML的作用

HTML的作用是：为网页提供结构支撑，告诉浏览器哪些是标题、段落、列表等。


2、HTML的结构

image-20241217143236745

3、HTML常见的标签类型

菜鸟教程的标签大全：（https://www.runoob.com/tags/html-reference.html）

标签名 效果
title 标题标签
head 文档头部标签
body 文章内容标签
p 这是一个段落标签
b 字体加粗
i 斜体标签
u 下划线标签
s 删除线
div 它本身没有特定的语义含义，通常用来作为一个容器
scrtipt js代码模块

4、HTML的属性

image-20241217143248604

::: w 注意事项

（属性名称不区分大小写，属性值对大小写敏感）

image-20241217143257018

:::

适用于大多数HTML元素的属性

image-20241217143300863

二、CSS（层叠样式表）

1、CSS的作用

用于定义网页样式和布局的样式表语言（外观和样式）。

image-20241217143318247

2、CSS的基本语法

image-20241217143334372

CSS通常是由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式

image-20241217143338958

CSS样式示例

image-20241217143345216

3、CSS的三种导入方法

image-20241217143419759

  • 内联

image-20241217143428244

  • 内部样式表

image-20241217143435008

  • 外联【创建外部样式的文件（style.css)】

  • 创建一个外联css文件，定义h3标题样式

    image-20241217143442066

  • 文件引入到html head中

    image-20241217143446973


4、选择器

  • 选择器分类

image-20241217143531503

  • 元素选择器

image-20241217143452947

  • 类选择器

image-20241217143501926

  • ID选择器

image-20241217143507806

  • 通用选择器(选择所有元素用到的）（ *号代表引用全部）

image-20241217143739967

  • 子元素选择器

image-20241217143748071

  • 后代选择器（包含选择器）

image-20241217143753849

  • 并集选择器（兄弟选择器）

image-20241217143801117

  • 伪选择器(鼠标悬停的样式）

image-20241217143806897

image-20241217143813063

  • 常见的属性
属性名 属性效果
color 字体颜色
background-color 背景颜色
font-size 设置字体大小
font-famliy 设置字体样式
font-weight 设置字体的粗细
  • 复合属性

image-20241217143823373

  • 块、行内、行内块元素

image-20241217143826573

5、盒子模式

盒子模式是一个可见的容器

image-20241217143832151

三、 JS（大概了解它是干啥的）

1、什么是JavaScript!

image-20241217143854022