ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端(HTML&CSS篇) [打印本页]

作者: 钜形不锈钢水箱 时间: 2025-1-24 00:40
标题: 前端(HTML&CSS篇)
开发环境设置

1.0开发工具VSCode

下载地址：链接
保举插架:

调试工具Chrome浏览器

下载地址：链接
1.1调试工具的基本利用：鼠标右键——>查抄

VSCode的基本利用：

HTML（布局）

利用 HTML 构建 Web - 学习 Web 开发 | MDN构建网站时，你应该了解 HTML——用于定义网页布局的基本技能。HTML 用于指定你的网页内容应被辨认为段落、列表、标题、链接、图像、多媒体播放器、表单或是其他可用元素之一，乃至是你定义的新元素。https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Structuring_content

https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Structuring_content

1.0认识html布局

Web 页面主要由 3 个部门组成：

布局（摆放内容）：HTML
样式（美化内容）：CSS
行为（动作）：JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<style>
</style>
<body>
</body>
<script>
//写逻辑代码
</script>
</html>

复制代码

html：整个网页

head：网页头部，放给浏览器看的信息，比方：CSS

title：网页标题

body：网页主体，放给用户看的信息，比方：图片、文字等等

meta-viewport：网页视口，移动端网页适配，规定网页宽度便是当前手机分辨率宽度

meta-charset：网页字符编码，UTF8为国际编码

1.1文本标签

标题： h1-h6

段落：p

加粗：strong

表示图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>标题</title>
</head>
<style>
div {
width: 200px;
height: 300px;
background-color: pink;
}
</style>
<body>
<div>
<h1>h1</h1>
<h6>h6</h6>
这是一个
<p>p标签，表示换行</p>
这是文本<strong>加粗</strong>
</div>
</body>
<script>
//写逻辑代码
</script>
</html>

复制代码

1.2常用容器标签

div：换行显示

span：一行显示

<div>div标签</div>
<div>div标签</div>
<span>span标签</span>
<span>span标签</span>

复制代码

1.3超链接标签

设置跳转地址：href="跳转地址"
打电话：tel:电话号码

新窗口跳转：target="_blank"
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8" />
5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6. <title>标题</title>
7. </head>
8. 
9. <style>
11. </style>
12. <body>
13. 
14. <a href="https://www.baidu.com/" target="_blank">前往百度</a>
15. <a href="tel:184xxxxxx">打电话</a>
16. <a href="./..xx" download>下载本地文件</a>
17. </div>
18. </body>
19. <script>
20. //写逻辑代码
21. </script>
22. </html>
复制代码

1.4图片标签

表示图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>标题</title>
</head>
<style>
img{
width: 200px;
height: 200px;
}
</style>
<body>
<img src="https://img1.baidu.com/it/u=841683434,1092526252&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200" alt="我是一只猫">
</body>
<script>
//写逻辑代码
</script>
</html>

复制代码

1.5表单标签

form:外层容器
input：输入元素
textarea：文本域
button：按钮
label：元素阐明

1.5.1. form标签

【双标签】，用来包裹表单位素，设置提交地址等

常用属性	阐明
action	提交地址

1.5.2 input标签

【单标签】，吸收用户输入、通过 type 设置不同的功能

常用属性值	阐明
type	常用取值 text 文本框 password 密码框 radio 单选框，结合 name 利用 checkbox 复选框，结合 name 利用
placeholder	占位提示
name	提交给服务器的 key
value	提交给服务器的 value，主要针对 radio 及 checkbox标签

1.5.3 textarea标签

【双标签】，用来输入多行文本

常用属性值	阐明
placeholder	占位提示
name	提交给服务器的 key

1.5.4 label标签

【双标签】，填写阐明内容，常配合表单位素一起利用

常用属性值	阐明
for	和表单位素的 id 属性关联，实现点击联动

1.5.5 button标签

【双标签】，内容写在标签内部

常用属性值	阐明
type	button 默认值，可以省略 submit 提交按钮，提交表单数据 reset 重置按钮

表示图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>标题</title>
</head>
<style>
</style>
<body>
<form action="#">
<div>
<label for="name">姓名: </label>
<input id="name" type="text" placeholder="请输入姓名">
</div>
<div>
<label for="password">密码: </label>
<input id="password" type="password" placeholder="请输入密码">
</div>
<div>
<label>性别: </label>
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
</div>
<div>
<label>爱好: </label>
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="篮球">篮球
<input type="checkbox" name="hobby" value="羽毛球">羽毛球
</div>
<br>
<label for="intro">自我介绍: </label><br></br>
<textarea name="intro" id="intro" cols="20" rows="10"></textarea>
</div>
<div>
<input type="submit" value="登录">
<input type="reset" value="重置">
</div>
</form>
</body>
<script>
//写逻辑代码
</script>
</html>

复制代码

CSS（样式）

CSS 构建 - 学习 Web 开发 | MDN这个模块承接学习 CSS 第一步——即你对 (CSS) 语言和其语法已经足够认识、并且有了一些基本的利用经验，该是稍微深入点学习的时间了。这个模块着眼于级联和继承，所有可供利用的选择器范例，单位，尺寸，配景、边框样式，调试，等等等等。https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics

https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics
CSS的三种引入方式：

行内样式表: 写在标签内，学习测试时利用
内部样式表：书写【少量】 css，学习测试时利用
外部样式表：书写【大量】 CSS代码，实际开发时利用

2.0行内样式表

css写法：style="属性名1:属性值; 属性名2:属性值;"
表示图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>标题</title>
</head>
<style>
</style>
<body>
<div style="width: 100px; height: 100px; background-color: aquamarine;">行内样式</div>
</body>
<script>
//写逻辑代码
</script>
</html>

复制代码

2.0.1内部样式表

书写位置：title 标签下方添加 style (双标签)，style标签内里写CSS代码
CSS写法：选择器 { 属性名：属性值;}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>标题</title>
</head>
<style>
div{
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<body>
<div>内部样式</div>
</body>
<script>
//写逻辑代码
</script>
</html>

复制代码

2.0.2外部样式表

分两步：1.新建CSS文件(后缀.css) 书写CSS代码

div{
width: 100px;
height: 100px;
background-color: pink;
}

复制代码

2.HTML利用link 标签引入CSS文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>标题</title>
<link rel="stylesheet" href="./css/test.css">
</head>
<style>
</style>
<body>
<div>外部样式</div>
</body>
<script>
//写逻辑代码
</script>
</html>

复制代码

2.1文本属性

属性名	描述	属性值
font-size	字体大小	单位px或vw
color	文字颜色	颜色
line-height	行高	单位px或vw
font-style	是否倾斜	none：不倾斜，Italic：倾斜
text-indent	文本缩进	em（当前字号大小）
text-decoration	文本修饰线	none：无 underline：下划线 line-through：删除线
font-weight	是否加粗	100-900或

表示图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>标题</title>
</head>
<style>
p{
font-size: medium;
color: red;
line-height:20px;
font-style: italic;
text-indent: em;
text-decoration: underline;
font-weight: 400;
}
</style>
<body>
<p>文本标签P</p>
<a href="#">超链接</a>
<strong>文本加粗</strong>
<script>
//写逻辑代码
</script>
</html>

复制代码

2.2选择器

CSS 选择器 - 学习 Web 开发 | MDNCSS中，选择器用来指定网页上我们想要样式化的HTML元素。有 CSS 选择器提供了许多种方法，所以在选择要样式化的元素时，我们可以做到很精致的地步。本文和本文的子篇中，我们将会详细地讲授选择器的不同利用方式，并了解它们的工作原理。

https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors作用：选择器的作用是[找到元素]
2.2.1标签选择器

标签名{
}

复制代码

2.2.2类选择器

作用：选中一个或多个目标标签设置样式
特点：差别化设置标签样式
利用步调：
1.定义类选择器 .类名 {}
2.利用类选择器 class = "类名"
表示图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>标题</title>
</head>
<style>
.box1{
width: 100px;
height: 100px;
background-color: pink;
}
.box2{
height: 100px;
width: 100px;
background-color: skyblue;
}
</style>
<body>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box1">盒子3</div>
<script>
//写逻辑代码
</script>
</html>

复制代码

2.2.3后代选择器

作用：选中某个元素的后代元素
写法：父选择器子选择器 {CSS属性}, 父子选择器之间用空格隔开
表示图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>标题</title>
</head>
<style>
div span{
width: 100px;
height: 100px;
background-color: pink;
}
.box1 .p1{
color:red;
}
</style>
<body>
<div>
<span>span 标签是div的儿子</span>
</div>
<div class="box1">
<p class="p1">我是后代</p>
</div>
</body>
<script>
//写逻辑代码
</script>
</html>

复制代码

2.3布局相关属性

2.3.1尺寸&配景色

属性	描述	值
width	宽度	单位：px/vw/百分比
height	高度	单位：px/vw/百分比
background-color	配景色	配景颜色

2.3.2配景图

属性	描述	值
background-image	配景图	url(图片路径)
background-repeat	配景图平铺方式	默认平铺、不平铺：no-repeat
background-size	配景图缩放	px/vw/百分比/关键词（cover、contain）
background-position	配景图位置	px/vw/百分比/方向英文单词/（left、top、right、bottom、center）一个值的语法：设置 x/y、 2 个值的语法：分别设置 x、y

表示图：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>标题</title>
</head>
<style>
div{
width: 300px;
height: 50vw;
background-color: pink;
background-image: url(https://img1.baidu.com/it/u=99554975,2483307893&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737738000&t=7a52a755d70c202f20f13f9d5b9a18ec);
/* 背景图平铺方式-不平铺 */
background-repeat: no-repeat;
/* 背景图缩放 - 可数值*/
/* background-size: 20%; */
/* cover 完全覆盖
优势：会保持图片宽高比
弊端：图片可能显示不全
*/
/* background-size: cover; */
/* contain
优势：保持图片宽高比例，可以完整显示图片
弊端：可能会留白
*/
background-size: contain;
/* 背景图位置 */
/* background-position: 20vw center; */
}
</style>
<body>
<div>背景图</div>
</body>
<script>
//写逻辑代码
</script>
</html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)