HTML&CSS学习总结
一、 HTML学习总结
1.HTML是什么
HTML（HyperText Markup Language）是一种用来告知浏览器如何组织页面的标记语言，它由一系列的元素组成，一般我们用它来构建 Web 页面
2.HTML结构
1. 创建一个HTML实例
打开vscode，新建一个文件夹，在该文件夹下新建一个 后缀名为html 的文件并输入如下内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
2. HTML结构解析
HTML的大体结构如下图所示
| 标签名 | 定义 |
|---|---|
<html></html> |
标签 |
<head></head> |
头部 |
<title></title> |
标题 |
<body></body> |
主体 |
3. HTML标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的,语法如下
<h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3>
4. HTML段落
HTML 段落是通过标签<p>来定义的,语法如下
<p>这是一个段落。</p><p>这是另外一个段落。</p>
5. HTML链接
HTML 链接是通过标签 <a> 来定义的,可分为三种，分别是外部链接、锚链接、邮件链接，这里我们简单介绍一下外部链接和锚链接
1.外部链接：即可以连接到外部文件如跳转到百度搜索界面
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
2.锚链接：是在本页面或者其他页面的的不同位置进行跳转
首先我们要创建一个锚点，使用name属性或者id属性给那个特定的位置起个名字
<a name=hhh>底部</a>
然后在底部设置超链接,点击即可跳转到底部
<a href="#hhh">跳转到底部</a>
6. HTML图像
HTML 图像是通过标签 <img> 来定义的,语法如下
<img src="图像路径" width="200" height="200">
文件路径有相对路径和绝对路径两种。
绝对路径：
1.本地路径
<img src="D:\images\1.jpg">
2.网络路径路径
<img src="图片的地址">
相对路径：
通常用 . 和 .. 分表代表当前目录和上一层目录
当前目录
<img src="1.jpg"><img src="./1.jpg">
上一层目录
<img src="../1.jpg">
二、CSS学习总结
1.CSS是什么
网页的内容是由 HTML的元素构建的，我们通常用CSS来呈现这些元素
2.CSS基础语法
CSS 由两个主要的部分构成：选择器，以及一条或多条声明
选择器 {声明1; 声明2; }
3.CSS生效方法
让CSS样式生效一般有三种方法：外部样式表，内部样式表，内联样式
1.外部样式表
首先我么们新建一个HTML文件，在<head></head>中添加下列代码,然后在同目录新建一个样式表文件mycss.css
<link rel="stylesheet" type="text/css" href="mycss.css">
2.内部样式表
可直接将样式放在HTML文件中的<style></style>中
3.内联样式表
直接把样式规则直接写到要应用的元素中
4.CSS颜色、尺寸、对齐
1.颜色
通常用 background-color 属性为元素设置背景色
<h1 style="color:Tomato;">Hello World</h1>
2.尺寸
通常用 height 和 width 设定元素内容占据的尺寸
例如设置<div class="test1">的尺寸
.test1 {
width: 100%;
height: 200px;
}
3.对齐
通常用text-align设置对齐，它的属性有left, center, right
5.CSS盒子模型
盒子模型：指的是一个HTML元素，由内容content, 内边距 padding, 边框 border, 外边距 margin构成
1.内边距：元素的内边距在边框和内容区之间，控制该区域最简单的属性是 padding 属性，可以使用长度值或百分比值
2.边框：元素的边框就是围绕元素内容和内边据的一条或多条线，每个边框包括宽度、样式，以及颜色
3.外边距：围绕在元素边框的空白区域是外边距，设置外边距会在元素外创建额外的空白，我们通常用 margin 属性来设置外边距
6.CSS选择器
CSS有很多选择器，如通用选择器、元素选择器、类选择器、ID 选择器、组合选择器等等，这里简单介绍一下组合选择器的后代选择器和子选择器。
1.后代选择器
后代选择器以空格作为分隔，我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用
例如，如果只对 h1 元素中的em元素应用样式：
h1 em {color:blue;}
因此只有h1元素后代的em元素的文本为蓝色，其他的em元素不会变成蓝色
2.子选择器
子选择器以>作为分隔，如果不希望选择任意的后代元素，而是选择某个元素的子元素的话，我们可以用子选择器
例如，如果选择只作为 h1 元素子元素的 em 元素：
h1 > em {color:blue;}
因此只有第一个h1下面的两个 em 元素变为蓝色，但是第二个 h1 中的 em 不受影响
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端