001-HTML-CSS
Web前端概述
-
这个笔记是Java后端学习笔记,大部分前端由AI辅助
-
一个网页由哪几个部分组成?各自的职责
- HTML:负责网页的结构
- CSS:负责网页的表现
- JavaScript:负责网页的行为(动作)
-
相关文档:MDN,可以直接搜索
-
VSCode
-
插件
-
HTML-CSS
- 什么是HTML
- HTML(HyperText Markup Language):超文本标记语言
- 超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。
- 标记语言:由标签 “
<标签名>
” 构成的语言- HTML标签都是预定义好的。例如:使用
<h1>
展示标题,使用<img>
展示图片,使用<video>
展示视频 - HTML代码直接在浏览器中运行,HTML标签由浏览器解析
- HTML标签都是预定义好的。例如:使用
- HTML(HyperText Markup Language):超文本标记语言
-
什么是CSS
-
CSS(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)
-
HTML快速入门
-
注意:
- 标签中的内容不区分大小写,大小写混写也没有区别,但建议小写
- HTML代码语法结构松散,没那么严谨,结束标签没有也不会出错
- 属性内容,比如双引号里的路径,包裹在单引号里也可以,建议使用双引号
-
安装了VSCode的相关插件之后,就有许多便捷操作了
-
打一个叹号回车就可以把如下代码架子搭好
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
-
标签不用打尖括号,写出内容回车就可以添加尖括号
-
右键文件可以直接选择在浏览器打开html文件,也可以选择在live server服务器上打开,这种方式的好处是每次保存能刷新页面
-
常见标签、样式
-
以下为新闻网页的部分示例
-
换行
<br>
-
标题标签h有h1~h6六级,没有七级标题
<!-- 写一个标题,内容是:【新思想引领新征程】推进常见十年禁渔 谱写长江大保护篇章 --> <!-- h1:一级标题 h2:二级标题 h3:三级标题 h4:四级标题 h5:五级标题 h6:六级标题 --> <h1>【新思想引领新征程】推进常见十年禁渔 谱写长江大保护篇章</h1>
-
段落标签(段落标签自动换行)
<!-- 段落标签 --> <p>段落标签1</p> <p>段落标签2</p>
-
加粗
<p> <b>b标签加粗文字</b>:收到后脑号网格法 <strong>strong也是加粗标签</strong> </p>
-
图片
- 如果使用绝对磁盘路径,则需要本地运行,不能在服务器上运行,否则服务器找不到这张图片
<!-- 引入一张图片 --> <!-- src:图片的路径 1. 绝对路径 1.1 绝对的磁盘路径 "C:/Users/11202/Pictures/Screenshots/屏幕截图 2025-08-13 190350.png" 1.2 绝对的网络路径 "https://www.cctv.com" 2. 相对路径 2.1 当前目录(从当前脚本所在文件夹开始,可以省略) "./" 2.2 上一级目录 "../" alt:图片的替代文本 width:设置图片的宽度 height:设置图片的高度 单位:px %:百分比 --> <img src="C:/Users/11202/Pictures/Screenshots/屏幕截图 2025-08-13 190350.png">
-
超链接标签a
<!-- 定义一个超链接,里面展示央视网 --> <!-- href:超链接的地址 target:超链接的打开方式 _blank:在新窗口打开 _self:在当前窗口打开 --> <a href="https://www.cctv.com" target="_blank">央视网</a>
CSS引入方式
行内样式:写在标签的style属性中(配合JavaScript使用)
内部样式:写在style标签中(可以写在页面任何位置,但通常约定写在head标签中)
外部样式:写在一个单独的.css文件中(需要通过link标签在网页中引入)
示例
-
行内样式
<!-- 行内样式 --> <!-- style:行内样式 color:设置文本颜色 --> <span style="color: gray;">2024-10-24 09:00:00</span>
-
内部样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【新思想引领新征程】推进常见十年禁渔 谱写长江大保护篇章</title> <!-- 内部样式 --> <style> span{ color: gray; } </style> </head> <body> <!-- 写一个标题,内容是:【新思想引领新征程】推进常见十年禁渔 谱写长江大保护篇章 --> <!-- h1:一级标题 h2:二级标题 h3:三级标题 h4:四级标题 h5:五级标题 h6:六级标题 --> <h1>【新思想引领新征程】推进常见十年禁渔 谱写长江大保护篇章</h1> <!-- 定义一个超链接,里面展示央视网 --> <!-- href:超链接的地址 target:超链接的打开方式 _blank:在新窗口打开 _self:在当前窗口打开 --> <a href="https://www.cctv.com" target="_blank">央视网</a> <!-- 使用内部样式 --> <span>2024-10-24 09:00:00</span> </body> </html>
-
外部样式
-
创建css文件
-
编辑css
/* 外部样式 */ span{ color: gray; }
-
html中引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【新思想引领新征程】推进常见十年禁渔 谱写长江大保护篇章</title> <!-- 内部样式 --> <!-- <style> span{ color: gray; } </style> --> <!-- 外部样式 --> <!-- rel:定义文档与外部样式表的关系 href:定义外部样式表的路径 --> <link rel="stylesheet" href="css/news.css"> </head> <body> <!-- 写一个标题,内容是:【新思想引领新征程】推进常见十年禁渔 谱写长江大保护篇章 --> <!-- h1:一级标题 h2:二级标题 h3:三级标题 h4:四级标题 h5:五级标题 h6:六级标题 --> <h1>【新思想引领新征程】推进常见十年禁渔 谱写长江大保护篇章</h1> <!-- 定义一个超链接,里面展示央视网 --> <!-- href:超链接的地址 target:超链接的打开方式 _blank:在新窗口打开 _self:在当前窗口打开 --> <a href="https://www.cctv.com" target="_blank">央视网</a> <!-- 行内样式 --> <!-- style:行内样式 color:设置文本颜色 --> <!-- <span style="color: gray;">2024-10-24 09:00:00</span> --> <span>2024-10-24 09:00:00</span> </body> </html>
-
颜色表示形式
-
rgba表示法中:0代表完全透明,1代表完全不透明
-
十六进制表示法中:每两位如果相同,则可以简写为一个字母
-
示例
/* 外部样式 */ span{ /* 关键字表示法 */ /* color: yellow; */ /* RGB表示法 */ /* color: rgb(255, 255, 0); */ /* RGBA表示法 */ /* color: rgba(255, 255, 0, 0.5); */ /* 十六进制表示法 */ /* color: #00fff7d2; */ /* 十六进制表示法缩写 */ color: #f00; }
CSS选择器
-
如果不同位置想要不同样式,一个span标签就不足以解决问题了
-
给一个标签加id,可以直接写标签名加井号id回车,以此快捷生成
-
CSS选择器是用来选取需要设置样式的元素(标签)的
- 三种选择器优先级:ID选择器 > 类选择器 > 元素选择器
-
其他CSS选择器
-
示例
-
元素选择器:之前的实例就是元素选择器
-
类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【新思想引领新征程】推进常见十年禁渔 谱写长江大保护篇章</title> <style> /* .cls:类选择器 */ .cls{ color: rgba(0, 0, 0, 0.5); } </style> </head> <body> <h1>【新思想引领新征程】推进常见十年禁渔 谱写长江大保护篇章</h1> <a href="https://www.cctv.com" target="_blank">央视网</a> <!-- 类选择器选取的元素 --> <span class="cls">2024-10-24 09:00:00</span> <span>2024-10-24 09:00:00</span> </body> </html>
-
ID选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【新思想引领新征程】推进常见十年禁渔 谱写长江大保护篇章</title> <style> #time:ID选择器 */ #time{ color: rgba(0, 0, 0, 0.5); } </style> </head> <body> <h1>【新思想引领新征程】推进常见十年禁渔 谱写长江大保护篇章</h1> <a href="https://www.cctv.com" target="_blank">央视网</a> <!-- ID选择器选取的元素 --> <span id="time">2024-10-24 09:00:00</span> </body> </html>
-
超链接样式示例
<style>
/* 设置超链接样式 */
a{
color: #da20bb;
/* 去除下划线 */
text-decoration: none;
}
</style>
段落文字样式示例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【新思想引领新征程】推进常见十年禁渔 谱写长江大保护篇章</title>
<style>
p{
/* 段落行高 */
line-height: 2;
}
</style>
</head>
-
首行缩进:
-
代表一个空格四个空格即首行缩进<p> <b>b标签加粗文字</b>:收到后脑壳网格法 <strong>strong也是加粗标签</strong> </p>
-
一个一个空格加太繁琐了,可以直接给段落添加首行缩进样式
<style> p{ /* 段落行高 */ line-height: 2; /* 首行缩进 */ text-indent: 2em; } </style>
-
盒子模型
-
盒子:页面中所有的元素(标签),都可以看作是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局
-
盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)
-
布局标签:网页开发中,会使用div和span这两个没有语义的标签
-
特点:
<div>
标签:- 一行只显示一个(独占一行)
- 宽度默认是父元素的宽度,高度默认由内容撑开
- 可以设置宽高(width、height)
<span>
标签:- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高(width、height)
-
示例
根据数值个数不同,设置的方式也不同
-
网页上点右键、检查,可以看元素
点击这个箭头,可以提取元素
页面原型
- 指在应用程序开发初期,由产品经理制作的一个早期项目模型,它用于展示页面的基本布局、功能和交互设计。通常用来帮助设计师、开发者等更好地理解和讨论最终产品的外观和行为
flex布局
- flex是flexible Box的缩写,意为“弹性布局”,是一种一维的布局模型。flex布局可以为元素之间提供强大的空间分布和对齐能力。
- 通关过给父容器添加flex的相关属性,来控制 子元素的位置和排列方式
- body元素自带有外边距8px,如果想去除外边距,指定body的margin为0
表单标签
-
表单:网页中主要负责数据采集功能,如:注册、登录等数据采集
-
标签:
<form>
-
表单项:不同类型的input元素、下拉列表、文本域等
<input>
:定义表单项,通过type属性控制输入形式(text/password/...)<select>
:定义下拉列表<textarea>
:定义文本域
-
属性:
- action:规定当提交表单时向何处发送表单数据,URL
- method:规定用于发送表单数据的方式。GET、POST
-
GET方式表单数据会出现在URL后面
- 特点:
- 如果表单中包含密码等隐私数据,get方式不安全,不推荐使用get方式
- 在浏览器中get请求的大小是有限制的,不适合提交大数据量的表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单标签</title> </head> <body> <!-- action:表单提交的地址 method:表单提交的方式 get:get方式: 1. 将表单数据拼接在url后面 2. 有长度限制 post:post方式 1. 将表单数据放在请求体中 2. 没有长度限制 --> <form action="/save" method="get"> <!-- type:表单元素的类型 name:表单元素的名称 --> 姓名: <input type="text" name="name"> <br> <br> 年龄: <input type="text" name="age"> <br> <br> <!-- type:表单元素的类型 value:表单元素的值 --> <input type="submit" value="提交"> </form> </body> </html>
- 特点:
-
POST方式表单数据会在消息体/请求体中提交到服务器
- 特点:
- 安全
- 请求大小没有限制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单标签</title> </head> <body> <!-- action:表单提交的地址 method:表单提交的方式 get:get方式: 1. 将表单数据拼接在url后面 2. 有长度限制 post:post方式 1. 将表单数据放在请求体中 2. 没有长度限制 --> <form action="/save" method="post"> <!-- type:表单元素的类型 name:表单元素的名称 --> 姓名: <input type="text" name="name"> <br> <br> 年龄: <input type="text" name="age"> <br> <br> <!-- type:表单元素的类型 value:表单元素的值 --> <input type="submit" value="提交"> </form> </body> </html>
- 特点:
表单标签-表单项
-
<input>
:定义表单项,通过type属性控制输入形式(text/password/...) -
<select>
:定义下拉列表 -
<textarea>
:定义文本域 -
关于
<label>
标签:它包裹的内容被视为一个整体,比如将文字和勾选框放在这个标签里,点击文字也可以把勾选框勾选上