web：全球广域网，也称为万维网（www world wide web） ，能够通过浏览器访问的网站
前端程序 服务的端程序 数据库
页面展示 业务逻辑的处理 数据存储与管理
安排
web网页由三个部分组成：
- HTML：负责网页的结构（页面元素和内容）
- CSS：负责页面的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
- JavaScript：负责网页的行为（交互效果）
HTML
HTML（HyperText Markup Language）：超文本标记语言
超文本：超越了文本的限制，比普通文本更强大，除了文字信息，还可以定义图片、音频、视频等内容
标记语言：由标签"<标签名>"构成的语言
- HTML代码直接在浏览器运行，HTML标签由浏览器解析
<h1>展示标题
<h1> HTML入门 </h1>
| | |
开始标签 内容 结束标签
<img>展示图片
<img src = "img/1.png">----------展示图片
| |
属性名 属性
CSS
css（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）
<h1>展示标题
<h1 style = "color:red;"> HTML入门 </h1>
|
标签展示颜色（控制标签样式）HTML入门
基本骨架
<html>
<head>-----网页头部：用来存放给浏览器看的信息
<title>网页标题</title>-------网页标题
</head>
<body>------网页的主题：用来存放给用户看的信息
<h1> HELLO WORLD </h1> ----------展示标题
<img src = "img/1.png">
</body>
</html>- 属性值可以使用"" 也可以使用''
- <html></html>可以不区分大小写
- 语法结构比较松散，</body>，</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>
<head>
<title>标题</title>
</head>
<body>
<h1>标题</h1>
<img src = "F:\图片/780.png">
</body>
</html> -->
<!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>
<h1>标题</h1>
展示一个图片
<img src = "img/th.jpg" >
</body>
</html>
<!-- <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<h1>标题</h1>
<img src="img/th.jpg">
</body>
</html> -->常见标签 & 样式
标题标签的排版
a标签为超链接标签
href为超链接地址
target为打开方式
-blank为新窗口打开
-self为当前窗口打开
-parent为父窗口打开
-top为最顶层窗口打开
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>好长好长的标题哈哈哈哈哈哈哈</title>
</head>
<body>
<!-- 定义一个标题 -->
<h1>好长好长的标题哈哈哈哈哈哈哈</h1>
<!-- a标签为超链接标签
href为超链接地址
target为打开方式
-blank为新窗口打开
-self为当前窗口打开
-parent为父窗口打开
-top为最顶层窗口打开 -->
<!-- 定义一个超链接，里面展示哔哩哔哩网 -->
<a href="https://www.bilibili.com" target="_blank">哔哩哔哩网</a>
abcdefg 编辑器中换行，网页中不换行
</body>标题样式
引入css样式控制
<!-- css引入方法
1.行内样式：
直接在标签中定义样式，写在style属性中
优点：方便
缺点：样式只能作用于当前标签
例如：
<p style="color:red">我是红色的</p>
2.内部样式表：
在head标签中定义样式，写在style标签中，通常写在head标签中
优点：样式可以作用于多个标签
缺点：样式只能作用于当前页面
例如：
<style>
p{
color:red;
}
</style>
3.外部样式表：
在外部文件中定义样式，要写一个单独的.css文件，然后写在link标签中，通常写在head标签中
优点：样式可以作用于多个页面
缺点：样式只能作用于当前页面
例如：
<link rel="stylesheet" href="style.css">
style.css为外部样式表文件，
p{
color:red;
}
在当前目录下
-->方式三
颜色的描述
表示方式 属性值 说明 示例
关键字 颜色英文单词 red、green、blue red、green、blue...
rgb表示法 rgb（r，g，b） 红绿蓝三原色，取值：0~255 rgb（0，0，0）
rgba表示法 rgba（r，g，b，a） 红绿蓝三原色，a表示透明度，取值：0~1 rgba(0,0,0,0.3)
十六进制 #rrggbb #开头，将数字转换成十六进制表示 #000000
span {
/* 关键字 */
color: red;
/* rgb */
color: rgb(255, 0, 0);
/* rgba */
color: rgba(255, 0, 0, 0.5);
/* 16进制 */
color: #ff0000;
/* 16进制 */
color: #f00;
}标签样式
css选择器
元素选择器
类选择器
id选择器
- 三者中id选择器优先级最高，次之类选择器，最后元素选择器
text-decoration：none-----删除超链接下面的下划线
正文
换行标签
<br>
段落标签
<!-- 段落标签 -->
<p>
这是一个段落
</p>引入视频
autopaly：自动播放
width和height设置一个就可以，另一个会等比例缩放
- 单位
px：像素
%：百分比（相对于父元素的百分比）
引入图片
src：图片的访问地址
绝对路径
绝对磁盘路径：E:\VScodeProjects\Learn\day01\img\1.jpg
*不要服务器端运行
相对路径：
./ 表示当前目录 --- img/3.jpg -------./ 可以省略
../ 表示上一级目录
<!-- 引入img/1.jpg文件 -->
<img src="E:\VScodeProjects\Learn\day01\img\1.jpg" alt="这是一个图片" width="200px" height="200px">
<img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1Bhnl9.img?w=637&h=562&m=6&x=335&y=106&s=49&d=49" alt="这是一个图片" width="200px" height="200px">
<img src="img/3.jpg" alt="这是一个图片" width="200px" height="200px">正文样式
加粗标签<b></b> <strong></strong>
设置行高
css样式
正文缩进
- 空格的实体字符： ；
- 首行缩进
2em表示首行缩进两个字符
盒子模型
盒子：页面中所有元素，看作一个盒子，由盒子将页面中的元素包含在一个矩形区域内
- 内部区域----content
- 内边距区域----padding
- 边框区域----border
- 外边框区域----margin
布局标签
- <div>:
一行只显示一个---------不会跟在后面
宽度默认为父元素的宽度，高度默认由内容撑开
可以设置高度
- <span>:
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高
扫一扫
2473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
