• 一、 HTML学习总结
  • 1.HTML是什么
  • 2.HTML结构
    • 1. 创建一个HTML实例
    • 2. HTML结构解析
    • 3. HTML标题
    • 4. HTML段落
    • 5. HTML链接
    • 6. HTML图像
• 二、CSS学习总结
  • 1.CSS是什么
  • 2.CSS基础语法
  • 3.CSS生效方法
  • 4.CSS颜色、尺寸、对齐
  • 5.CSS盒子模型
  • 6.CSS选择器

一、 HTML学习总结

1.HTML是什么

HTML（HyperText Markup Language）是一种用来告知浏览器如何组织页面的标记语言，它由一系列的元素组成，一般我们用它来构建 Web 页面

2.HTML结构

1. 创建一个HTML实例

打开vscode，新建一个文件夹，在该文件夹下新建一个 后缀名为html 的文件并输入如下内容

2. HTML结构解析

HTML的大体结构如下图所示

3. HTML标题

HTML 标题（Heading）是通过

-

标签来定义的,语法如下

• 这是一级标题

• 这是二级标题

• 这是三级标题

4. HTML段落

HTML 段落是通过标签

来定义的,语法如下

• 这是一个段落。

• 这是另外一个段落。

5. HTML链接

HTML 链接是通过标签 来定义的,可分为三种，分别是外部链接、锚链接、邮件链接，这里我们简单介绍一下外部链接和锚链接

• 百度一下

2.锚链接：是在本页面或者其他页面的的不同位置进行跳转

首先我们要创建一个锚点，使用name属性或者id属性给那个特定的位置起个名字

• 底部

然后在底部设置超链接,点击即可跳转到底部

• 跳转到底部

6. HTML图像

HTML 图像是通过标签 来定义的,语法如下

文件路径有相对路径和绝对路径两种。

绝对路径：
1.本地路径

2.网络路径路径

相对路径：
通常用 . 和 .. 分表代表当前目录和上一层目录
当前目录

上一层目录

二、CSS学习总结

1.CSS是什么

网页的内容是由 HTML的元素构建的，我们通常用CSS来呈现这些元素

2.CSS基础语法

CSS 由两个主要的部分构成：选择器，以及一条或多条声明

• 选择器 {声明1; 声明2; }

3.CSS生效方法

让CSS样式生效一般有三种方法：外部样式表，内部样式表，内联样式

1.外部样式表
首先我么们新建一个HTML文件，在中添加下列代码,然后在同目录新建一个样式表文件mycss.css

2.内部样式表
可直接将样式放在HTML文件中的中

3.内联样式表
直接把样式规则直接写到要应用的元素中

4.CSS颜色、尺寸、对齐

1.颜色
通常用 background-color 属性为元素设置背景色

Hello World

2.尺寸
通常用 height 和 width 设定元素内容占据的尺寸
例如设置

.test1 {
  width: 100%;
  height: 200px;
}