前端(HTML&CSS篇)

钜形不锈钢水箱  金牌会员 | 2025-1-24 00:40:45 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 884|帖子 884|积分 2652

开发环境设置

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
  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.    <!-- 写UI-->
  14. </body>
  15. <script>
  16.     //写逻辑代码
  17. </script>
  18. </html>
复制代码


  • html： 整个网页


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


  • title：网页标题


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


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


  • meta-charset：网页字符编码，UTF8为国际编码
1.1文本标签 



  • 标题： h1-h6


  • 段落：p


  • 加粗：strong
表示图：
 

  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>
  10.     div {
  11.       width: 200px;
  12.       height: 300px;
  13.       background-color: pink;
  14.     }
  15.   </style>
  16.   <body>
  17.     <!-- 写UI-->
  18.     <div>
  19.       <h1>h1</h1>
  20.       <h6>h6</h6>
  21.       这是一个
  22.       <p>p标签，表示换行</p>
  23.       这是文本<strong>加粗</strong>
  24.     </div>
  25.   </body>
  26.   <script>
  27.     //写逻辑代码
  28.   </script>
  29. </html>
复制代码
1.2常用容器标签



  • div：换行显示


  • span：一行显示
  1. <div>div标签</div>
  2. <div>div标签</div>
  3. <span>span标签</span>
  4. <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>
    10.   
    11.   </style>
    12.   <body>
    13.     <!-- 写UI-->
    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图片标签 

表示图：

  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>
  10.   img{
  11.     width: 200px;
  12.     height: 200px;
  13.   }
  14.   </style>
  15.   <body>
  16.   <img src="https://img1.baidu.com/it/u=841683434,1092526252&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200" alt="我是一只猫">
  17.   </body>
  18.   <script>
  19.     //写逻辑代码
  20.   </script>
  21. </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 重置按钮
表示图：

  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>
  10.   
  11.   </style>
  12.   <body>
  13.     <form action="#">
  14.         <div>
  15.           <label for="name">姓名: </label>
  16.           <input id="name" type="text" placeholder="请输入姓名">
  17.         </div>
  18.         <div>
  19.           <label for="password">密码: </label>
  20.           <input id="password" type="password" placeholder="请输入密码">
  21.         </div>
  22.         <div>
  23.           <label>性别: </label>
  24.           <input type="radio" name="gender" value="男">男
  25.           <input type="radio" name="gender" value="女">女
  26.         </div>
  27.         <div>
  28.           <label>爱好: </label>
  29.           <input type="checkbox" name="hobby" value="足球">足球
  30.           <input type="checkbox" name="hobby" value="篮球">篮球
  31.           <input type="checkbox" name="hobby" value="羽毛球">羽毛球
  32.         </div>
  33.         <br>
  34.           <label for="intro">自我介绍: </label><br></br>
  35.           <textarea name="intro" id="intro" cols="20" rows="10"></textarea>
  36.         </div>
  37.         <div>
  38.           <input type="submit" value="登录">
  39.           <input type="reset" value="重置">
  40.         </div>
  41.     </form>
  42.   </body>
  43.   <script>
  44.     //写逻辑代码
  45.   </script>
  46. </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:属性值;"
表示图：

  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>
  10.   
  11.   </style>
  12.   <body>
  13.     <div style="width: 100px; height: 100px; background-color: aquamarine;">行内样式</div>
  14.   </body>
  15.   <script>
  16.     //写逻辑代码
  17.   </script>
  18. </html>
复制代码
2.0.1内部样式表

书写位置：title 标签下方添加 style (双标签)，style标签内里写CSS代码
CSS写法： 选择器 { 属性名：属性值;}
  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>
  10.   div{
  11.     width: 100px;
  12.     height: 100px;
  13.     background-color: skyblue;
  14.   }
  15.   </style>
  16.   <body>
  17.     <div>内部样式</div>
  18.   </body>
  19.   <script>
  20.     //写逻辑代码
  21.   </script>
  22. </html>
复制代码
2.0.2外部样式表

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

  1. div{
  2.     width: 100px;
  3.     height: 100px;
  4.     background-color: pink;
  5. }
复制代码
                2.HTML利用link 标签引入CSS文件
  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.     <link rel="stylesheet" href="./css/test.css">
  8.   </head>
  9.   <!-- 写样式-->
  10.   <style>
  11.    
  12.   </style>
  13.   <body>
  14.     <div>外部样式</div>
  15.   </body>
  16.   <script>
  17.     //写逻辑代码
  18.    
  19.   </script>
  20. </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或
 表示图：

  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.   
  8.   </head>
  9.   <!-- 写样式-->
  10.   <style>
  11.     p{
  12.       font-size: medium;
  13.       color: red;
  14.       line-height:20px;
  15.       font-style: italic;
  16.       text-indent: em;
  17.       text-decoration: underline;
  18.       font-weight: 400;
  19.     }
  20.   </style>
  21.   <body>
  22.     <p>文本标签P</p>
  23.     <a href="#">超链接</a>
  24.     <strong>文本加粗</strong>
  25.   <script>
  26.     //写逻辑代码
  27.    
  28.   </script>
  29. </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标签选择器

  1. 标签名{
  3. }
复制代码
2.2.2类选择器

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

 
  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.   
  8.   </head>
  9.   <!-- 写样式-->
  10.   <style>
  11.    .box1{
  12.     width: 100px;
  13.     height: 100px;
  14.     background-color: pink;
  15.    }
  16.    .box2{
  17.     height: 100px;
  18.     width: 100px;
  19.     background-color: skyblue;
  20.    }
  21.   </style>
  22.   <body>
  23.     <div class="box1">盒子1</div>
  24.     <div class="box2">盒子2</div>
  25.     <div class="box1">盒子3</div>
  26.   <script>
  27.     //写逻辑代码
  28.    
  29.   </script>
  30. </html>
复制代码
2.2.3后代选择器

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

  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.   
  8.   </head>
  9.   <!-- 写样式-->
  10.   <style>
  11.   div span{
  12.     width: 100px;
  13.     height: 100px;
  14.     background-color: pink;
  15.   }
  16.   .box1 .p1{
  17.    color:red;
  18.   }
  19.   </style>
  20.   <body>
  21.     <div>
  22.       <span>span 标签是div的儿子</span>
  23.     </div>
  24.     <div class="box1">
  25.       <p class="p1">我是后代</p>
  26.     </div>
  27.   </body>
  28.   <script>
  29.     //写逻辑代码
  30.    
  31.   </script>
  32. </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
 表示图：
​​​​​​​

  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.   
  8.   </head>
  9.   <!-- 写样式-->
  10.   <style>
  11.   div{
  12.     width: 300px;
  13.       height: 50vw;
  14.       background-color: pink;
  15.       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);
  16.       /* 背景图平铺方式-不平铺 */
  17.       background-repeat: no-repeat;
  18.       /* 背景图缩放 - 可数值*/
  19.       /* background-size: 20%;  */
  21.       /* cover 完全覆盖
  22.         优势：会保持图片宽高比
  23.         弊端：图片可能显示不全
  24.       */
  25.       /* background-size: cover; */
  27.       /* contain
  28.         优势：保持图片宽高比例，可以完整显示图片
  29.         弊端：可能会留白
  30.       */
  31.       background-size: contain;
  32.       /* 背景图位置 */
  33.       /* background-position: 20vw center; */
  34.   }
  35.   </style>
  36.   <body>
  37.     <div>背景图</div>
  38.   </body>
  39.   <script>
  40.     //写逻辑代码
  41.    
  42.   </script>
  43. </html>
复制代码
 


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

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

钜形不锈钢水箱

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表